Combinig tabs with template

Panel
1

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
2

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

3

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

4 Likes
4

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
5

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()

replace_dynamic
replace_dynamic746×664 1.04 MB

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