The code below demonstrates my current solution for this capability. Set RUNPYTHON to select either python (True) or JS (False) linking. Not only does this provide component syncing with no python server, it supports separating different types of data from each other for full screen viewing of individual components.
import numpy as np
import panel as pn
import holoviews as hv
hv.extension('bokeh', logo=False)
pn.extension(sizing_mode='stretch_both')
pn.param.ParamMethod.loading_indicator = True
# RUNPYTHON = True
RUNPYTHON = False
XS = np.linspace(0, np.pi)
a = hv.Curve((XS, np.sin(XS * 4 + 0))).opts(responsive=True, title="Sine")
b = hv.Curve((XS, np.cos(XS * 4 + 0))).opts(responsive=True, title="Cosine")
c = a * b
tabs = pn.Tabs(
('Sine/Cosine Layout', (a + b + c).cols(1)),
('Cosine Curve', b),
('Sine/Cosine Overlay', c),
)
titles = pn.Column(
'# Sine/Cosine Layout Comments',
'# Cosine Curve Comments',
'# Sine/Cosine Overlay Comments',
)
texts = pn.Column(
'Comments about the sine and cosine layout to the right',
'Comments about the Cosine Curve to the right',
'Comments about the Sine/Cosine Overlay to the right',
)
def set_current(col, tabs):
for i in range(len(col)):
col[i].visible = (i == tabs.active)
set_current(titles, tabs)
set_current(texts, tabs)
if RUNPYTHON:
def match_text(*events):
for event in events:
if event.name == 'active':
for i in range(len(texts)):
titles[i].visible = (i == event.new)
texts[i].visible = (i == event.new)
watchtabs = tabs.param.watch(match_text, ['active'], onlychanged=True)
tabs.param.trigger('active')
else:
watchtitles = []
watchtexts = []
for i in range(len(texts)):
watchtitles.append(tabs.jslink(titles[i], code={'active': f'target.visible = (source.active == {i})'}))
watchtexts.append(tabs.jslink(texts[i], code={'active': f'target.visible = (source.active == {i})'}))
app = pn.template.FastGridTemplate()
app.main[:1, :] = titles
app.main[1:6, :3] = texts
app.main[1:6, 3:] = tabs
app.save('jstest.html')
app.show()