Hi,
I’m trying to develop a panel page that is able to produce plots based on one global controller – configurations via param objectselectors. This controller sends information to the models/views to get the necessary data and returns Plotly plots. These plots will be placed in different tabs but lives under the same controller.
Right now, I’m seeing the application rendering the first tab plot only. When I go to the second tab, the first tab’s plots are still rendered in the background and I can interact with those plots, even though they live in different tabs.
How do I:
- Ensure that tab plots are independent
- Tab plots are controlled by one controller
- Render all tab plots upon one update button that lives in the controller class
?
Thank you in advance for the help.
Example code:
class Controller(param.Parameterized):
a = param.ObjectSelector(default='A', objects=['A','B','C'])
update = param.Action(lambda x: x.param.trigger('update'), label='Click to update')
def __init__(self):
super().__init__()
self.tab_one_view_builder = TabOneView() # first tab view layer class
self.tab_two_view_builder = TabTwoView() # second tab view layer class
@param.depends('update')
def tab_one_view(self):
return self.tab_one_view_builder.call(self._get_tab_one_data())
def _get_tab_one_data(self):
return TabOneDataLoader(
self.a
).call()
@param.depends('update')
def tab_two_view(self):
return self.tab_two_view_builder.call(self._get_tab_two_data())
def _get_tab_two_data(self):
return TabTwoDataLoader(
self.a
).call()
In main app.py:
controller = Controller()
material.main.append(
pn.Row(
pn.Column(
pn.Param(
controller,
parameters=[
'a',
'update',
],
)
),
pn.Column(
pn.Tabs(
('Tab 1', pn.Column(controller.tab_one_view)),
('Tab 2', pn.Column(controller.tab_two_view))
)
)
)
)
material.servable()