Combinig tabs with template

Hi,

I wonder if it is possible to combine panels’ template with tabs. I.e. how to include tabs definitions in template and how to control them? Say there is a simple panel:

tmpl = pn.Template(template)

tmpl.add_variable('app_title_1', '<h1>App with first plot</h1>')
tmpl.add_variable('app_title_2', '<h2>App with second plot</h2>')

tmpl.add_panel('A', hv.Curve([1, 2, 3]))
tmpl.add_panel('B', hv.Curve([4, 5, 6]))

tmpl.servable();

What I want is to place curve of panel B in a new tab. Following solution will not work. What is the right one?

pn.Tabs(
         ('First plot', tmpl),
         ('Second plot', tmpl),
         dynamic=True
    )
1 Like

Hey @tmikolajczyk I would like to know if you figure out, how to do so, I’d like to know as well :slight_smile:

Unfortunately Templates cannot be nested inside other Panel components. They declare the overall layout of the different components on a website as HTML and you can’t nest multiple HTML documents. I’ve been working on a Panel component which can be inserted inside other components but it will work a little differently. You can monitor the progress here: https://github.com/holoviz/panel/pull/1343

3 Likes

Woow, that would be sooo Great, you’re doing a good job !!! Actually I found it tricky to insert, delate or simply change the panel objects dynamically, without having to change each time the structure of my template.

1 Like

Hi @Eric.

You can easily change the layout dynamically by replacing the objects of a layout or the parameters of a layout.

I use it all the time at awesome-panel.org.

For example like below

import param
import panel as pn
import hvplot.pandas
import pandas as pd

DATA = {
    "x": [1,2],
    "y": [3,4],
}

PANELS = [
    pn.pane.Markdown("Hello World"),
    pn.pane.PNG("https://panel.holoviz.org/_static/logo_stacked.png"),
    pn.pane.HoloViews(pd.DataFrame(DATA).hvplot(x="x", y="y")),
]

class ReplaceApp(param.Parameterized):
    panel_index = param.Integer(default=0, bounds=(0,len(PANELS)))
    replace_panel = param.Action()
    view = param.Parameter()
    panels = param.List(default=PANELS)

    def __init__(self, **params):
        super().__init__(**params)

        self.replace_panel = self._replace_panel
        self.view = pn.Column(self.param.replace_panel, self.panels[self.panel_index], sizing_mode="stretch_width")

    def _replace_panel(self, event=None):
        self.panel_index += 1
        if self.panel_index == len(self.panels):
            self.panel_index=0
        self.view[1]=self.panels[self.panel_index]

ReplaceApp().view.servable()

BUT PLEASE NOTE that if you don’t need to change the type of Pane from for example Markdown to HoloViews then it is more performant to replace the .object of the Pane. So do this if you can.

2 Likes