panel icon indicating copy to clipboard operation
panel copied to clipboard

Unable to switch template main dynamically while keeping them as separate row

Open mysteriousHerb opened this issue 7 months ago • 1 comments

Description of expected behavior and the observed behavior

I would like to have a toggleable main part of my dashboard - main purpose, i want to have a floating sidebar which can also change the sliders depending on wwhich button i choose.

The problem is I cannot just display a different list as the initial definition in the FastListTemplate What i had to do is to use pn.Column(*rows). I have pasted the working version below. but it is not my intended behaviour. The reason why i want to keep the rows separately is that i want to have horizontal scroll for individual rows.

Please tell me otherwise how to achieve this. I tried tabs as well.

# code goes here between backticks

radio_button = pn.widgets.RadioButtonGroup(
    name="Google Analytics", options=["Google Analytics", "User"], button_type="primary"
)

pane1 = pn.pane.Markdown("Hello", width=2000, sizing_mode="stretch_width")
pane2 = pn.pane.Markdown("World", width=2000, sizing_mode="stretch_width")
rows_1 = [pn.Row(pane1), pn.Row(pane2)]
rows_2 = [pn.Row(pane2), pn.Row(pane1)]


def main_switch(event):
    if event == "Google Analytics":
        main = rows_1
    else:
        main = rows_2
    return main


main = pn.bind(main_switch, radio_button)

# Create a single template
template = pn.template.FastListTemplate(
    sidebar=[radio_button],
    main=main,
)


template.servable()

Image

radio_button = pn.widgets.RadioButtonGroup(
    name="Google Analytics", options=["Google Analytics", "User"], button_type="primary"
)

pane1 = pn.pane.Markdown("Hello", width=2000, sizing_mode="stretch_width")
pane2 = pn.pane.Markdown("World", width=2000, sizing_mode="stretch_width")
rows_1 = [pn.Row(pane1), pn.Row(pane2)]
rows_2 = [pn.Row(pane2), pn.Row(pane1)]


def main_switch(event):
    if event == "Google Analytics":
        main = rows_1
    else:
        main = rows_2
    return main


main = pn.bind(main_switch, radio_button)

# Create a single template
template = pn.template.FastListTemplate(
    sidebar=[radio_button],
    main=rows_1,
)


template.servable()

Image


radio_button = pn.widgets.RadioButtonGroup(
    name="Google Analytics", options=["Google Analytics", "User"], button_type="primary"
)

pane1 = pn.pane.Markdown("Hello", width=2000, sizing_mode="stretch_width")
pane2 = pn.pane.Markdown("World", width=2000, sizing_mode="stretch_width")
rows_1 = [pn.Row(pane1), pn.Row(pane2)]
rows_2 = [pn.Row(pane2), pn.Row(pane1)]


def main_switch(event):
    if event == "Google Analytics":
        main = pn.Column(*rows_1)
    else:
        main = pn.Column(*rows_2)
    return main


main = pn.bind(main_switch, radio_button)

# Create a single template
template = pn.template.FastListTemplate(
    sidebar=[radio_button],
    main=main,
)


template.servable()

Image

mysteriousHerb avatar May 12 '25 16:05 mysteriousHerb

Why not use:

radio_button = pn.widgets.RadioButtonGroup(
    name="Google Analytics", options=["Google Analytics", "User"], button_type="primary"
)

pane1 = pn.pane.Markdown("Hello", width=2000, sizing_mode="stretch_width")
pane2 = pn.pane.Markdown("World", width=2000, sizing_mode="stretch_width")
rows_1 = [pn.Row(pane1), pn.Row(pane2)]
rows_2 = [pn.Row(pane2), pn.Row(pane1)]


def main_switch(event):
    if event == "Google Analytics":
        main = pn.Column(*rows_1)
    else:
        main = pn.Column(*rows_2)
    return main


main = pn.bind(main_switch, radio_button)

# Create a single template
template = pn.template.FastListTemplate(
    sidebar=[radio_button],
    main=[main],
)


template.servable()

The fact that main cannot be changed dynamically is, I think, well documented.

philippjfr avatar May 14 '25 13:05 philippjfr