Make FastGridTemplate reference example more immediately useful

[MarcSkovMadsen]

I'm trying to make a video tutorial from the FastGridTemplate Reference Guide. I see a few things that could be improved so that it would be easier for the user to actually get something working in practice.

Solution

• Use pn.bind api instead of pn.depends. The bind api is more intuitive to data scientists. And it provides a better separation between the normal data science code and the panel specific code.
• Use the accent_color (pink/ red) instead of blue
• wrap the DynamicMap into a Column with sizing_mode="stretch_width" in order for the "maximize" functionality associated with a grid cell to work.

Something like the below would do the job

import holoviews as hv
import numpy as np

import panel as pn

pn.extension(sizing_mode="stretch_width")

ACCENT_COLOR = "#DF3874"

# Plots

XS = np.linspace(0, np.pi)

def sine(freq, phase):
    return hv.Curve((XS, np.sin(XS * freq + phase))).opts(
        responsive=True, min_height=400, title="Sine", color=ACCENT_COLOR
    )


def cosine(freq, phase):
    return hv.Curve((XS, np.cos(XS * freq + phase))).opts(
        responsive=True, min_height=400, title="Cosine", color=ACCENT_COLOR
    )


# Widgets

freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2)
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi)

# Interactivity

sine = pn.bind(sine, freq=freq, phase=phase)
cosine = pn.bind(cosine, freq=freq, phase=phase)

# Layout

template = pn.template.FastGridTemplate(title="FastGridTemplate", save_layout=True)

template.sidebar.append(pn.pane.Markdown("## Settings"))
template.sidebar.append(freq)
template.sidebar.append(phase)

template.main[:3, :6] = pn.pane.HoloViews(hv.DynamicMap(sine), sizing_mode="stretch_both")
template.main[:3, 6:] = pn.pane.HoloViews(hv.DynamicMap(cosine), sizing_mode="stretch_both")
template.servable()