How to change tab in FastListTemplate

Hi , all .

Now I am making Graph selection in FastListTemplate. But I’m at a loss now . I couldn’t change tab when I select a figure.

[My problem & screen shot]

When I clicked Graph1, I want to change tab from main1 to Sub_p1. But I couldn’t


I tried below two methods. But I couldn’t solved it.

[tab change method : (I checked)]

I checked how to tab change method. ( Generate active tab from a button click - Panel - HoloViz Discourse) But I use figure and tapping. this object doesn’t have on_click method.

[grasp which graph I tapped : (I checked)]

I was teached which graph I touched ( How can I get widget title by mouse click - Panel - HoloViz Discourse ) .

My simple code is below

[My simple code]

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


class Tapping(pn.reactive.ReactiveHTML):
    row = param.Parameter()
    index = param.Integer(default=0) 

    _template = """
        <div id='row' onclick="${_row_click2}"> ${row}</div>         
    """

    # @pn.depends(  sel_tab = select_tab )
    def _row_click2(self, event):
        self.index += 1
        print ('clickind', self.row.object._property_values['title'].text  )
        ## print ('info', self.row.object._property_values)
        temp_sel_graph = self.row.object._property_values['title'].text
        sel_graph = temp_sel_graph[len(temp_sel_graph)-1]
        print ('select_tab',sel_graph)

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

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

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

p4 = pn.Row(p1a)+pn.Row(p2a)+pn.Row(p3a)
# p4 = pn.Column(p4)+pn.Column(p4)
text1 = "# Sldeber 1"
text2 = "# Sldeber 2"
text3 = "# Sldeber 3"

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

def main_tabs( sel = select_tab):
    print ('sel',sel)
    ret_tabs = pn.Tabs(('main1', p4),
        ('Sub_p1', p1a),
        ('Sub_p2', p2a),
        ('Sub_p3', p3a)
    )
    ret_tabs.active =int(sel)
    # print (ret_tabs.active)
    return ret_tabs

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

pn.serve(template)

Could someone tell me how to change tab in FastListTemplate when I clicked graph?

you need to change the active attribute of the pn.Tabs objects. To access to it, you need to point to template.main[0], which is the tabs object you return it of your main_tabs function. It is simple like this template.main[0].active = int(sel_graph). In your example it was no defined select_tab, here is the full code.

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


class Tapping(pn.reactive.ReactiveHTML):
    row = param.Parameter()
    index = param.Integer(default=0) 

    _template = """
        <div id='row' onclick="${_row_click2}"> ${row}</div>         
    """

    # @pn.depends(  sel_tab = select_tab )
    def _row_click2(self, event):
        self.index += 1
        print ('clickind', self.row.object._property_values['title'].text  )
        ## print ('info', self.row.object._property_values)
        temp_sel_graph = self.row.object._property_values['title'].text
        sel_graph = temp_sel_graph[len(temp_sel_graph)-1]
        template.main[0].active = int(sel_graph)
        print ('select_tab: ',sel_graph)

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

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

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

p4 = pn.Row(p1a)+pn.Row(p2a)+pn.Row(p3a)
# p4 = pn.Column(p4)+pn.Column(p4)
text1 = "# Sldeber 1"
text2 = "# Sldeber 2"
text3 = "# Sldeber 3"

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

select_tab = 0

def main_tabs( sel = select_tab):
    print ('sel',sel)
    ret_tabs = pn.Tabs(('main1', p4),
        ('Sub_p1', p1a),
        ('Sub_p2', p2a),
        ('Sub_p3', p3a)
    )
    ret_tabs.active =int(sel)
    # print (ret_tabs.active)
    return ret_tabs


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

just in case, if you define a servable object, it does not need to put the pn.serve when you run it with panel serve file.py.

1 Like

@nghenzi2019
Thank you for your quick reply and tell good solution. I searched document, But I couldn’t find it. I’m so sorry for bothering you. If it possible , could you tell me document link. next time , I want to check more.

1 Like

i do not know if this is specially documented, maybe someone knows better. In the introduction guide and the templates sections, all layout and template objects are containers which can be accesed like normal python lists. This is a really nice feature, because you already know to work with list of objects. You can try to print the template.main[:] or template.sidebar[:] list to view the object which they have. With this, you can acces to the object you want.

1 Like

That’s very impressive. Thank you for quick reply. I can print template.main[:] and I understand this object has some objects. next time , I met some problems , I check it.
20211104_want_to_change_tab_sub2.png

2 Likes