How can I add third component in GoldenLayout

[kazux68k]

Hi all, this is my first post in HoloViz.

I am making tree contents in GoldenLayout. I can add two components(Fig1 and Fig2). But when I add third component , third component is not appeared(Fig3).

#Fig1
I can post first content and see first panel.

#Fig2
I can post second content and see second panel.

#Fig3
I can post third content. But I can’t see third panel.

My simple code

from bokeh.models import Panel, Tabs
import panel as pn
pn.extension(sizing_mode = 'stretch_width')
from bokeh.plotting import figure

p1 = figure(width=300, height=300, name='Scatter')
p1.scatter([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

p2 = figure(width=300, height=300, name='Line')
p2.line([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

p3 = figure(width=300, height=300, name='Line')
p3.line([0, 1, 2, 3, 4, 5, 6], [3, 2, 1, 1, 2, 3, 4])

text1 = "# Sldeber 1"
text2 = "# Sldeber 2"
text3 = "# Sldeber 3"

def tabs():
    return pn.Tabs(
        ('scatter', text1),
        ('line', text2),
        ('line', text3)
    )

golden = pn.template.GoldenTemplate(title='contents_sample',sidebar=tabs() )

golden.main.append(
    pn.Card(p1, title='Sample1'),   
)

golden.main.append(
    pn.Card(p2, title='Sample2'),   
)

golden.main.append(
    pn.Card(p3, title='Sample3'),   
)

pn.serve(golden)

Could someone tell me how can I add third component and panel in this panel?

[Jhsmit]

Hi Kazuk, I think there is a bug in the GoldenTemplate. I can reproduce your bug and if I exchange for FastListTemplate I get three components as expected.

This is the error in the browser console:

I was having similar issues with a pn.Accordion using the GoldenTemplate. I’ll make an issue on the panel GitHub.

[Jhsmit]

Issue on panel GitHub: https://github.com/holoviz/panel/issues/2843

[kazux68k]

Jhsmit , Thank you for your quick reply and send it to me good solution. It’s a pity there is a bug in the GoldenTemplate. I modified my code as you teach me.

My Simple Code

from bokeh.models import Panel, Tabs
import panel as pn
pn.extension(sizing_mode = 'stretch_width')
from bokeh.plotting import figure

p1 = figure(width=300, height=300, name='Scatter',title='Graph1')
p1.scatter([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

p2 = figure(width=300, height=300, name='Line',title='Graph2')
p2.line([0, 1, 2, 3, 4, 5, 6], [0, 1, 2, 3, 2, 1, 0])

p3 = figure(width=300, height=300, name='Line',title='Graph3')
p3.line([0, 1, 2, 3, 4, 5, 6], [3, 2, 1, 1, 2, 3, 4])

p4 = pn.Row(p1,p2)

text1 = "# Sldeber 1"
text2 = "# Sldeber 2"
text3 = "# Sldeber 3"

def side_tabs():
    return pn.Tabs(
        ('scatter', text1),
        ('line', text2),
        ('line', text3)
    )

def main_tabs():
    return pn.Tabs(
        ('main1', p1),
        ('main2', p2),
        ('main3', p3)
    )

template = pn.template.FastListTemplate(
    title='contents_sample',
    site='Panel',
    sidebar=side_tabs(),
    main=main_tabs()
).servable();

pn.serve(template)

Screen Shot

This code execute as I wanted to. Great Thanks!!