Add ability to configure global template

[philippjfr]

Allows setting a global template via pn.config and adding to the template via .servable. This will be particularly handy for notebooks where you construct and view individual components while also allowing you to place them in the appropriate places in the template.

import panel as pn
import numpy as np
import holoviews as hv

pn.extension(
    theme='dark',
    template='material',
    sizing_mode='stretch_width'
)

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

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

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

pn.Column(
    pn.pane.Markdown("## Settings"),
    freq,
    phase
).servable(area='sidebar')

pn.Row(
    hv.DynamicMap(pn.bind(sine,   freq=freq, phase=phase),
    hv.DynamicMap(pn.bind(cosine, freq=freq, phase=phase)
).servable(title='Sine Explorer')

• Add tests
• Handle grid based templates
• Add docs

Ping @jbednar @MarcSkovMadsen for thoughts

[codecov]

Codecov Report

Merging #2271 (8750b4e) into master (7be79e8) will decrease coverage by 0.08%.
The diff coverage is 42.55%.

@@            Coverage Diff             @@
##           master    #2271      +/-   ##
==========================================
- Coverage   83.54%   83.45%   -0.09%     
==========================================
  Files         185      185              
  Lines       22635    22677      +42     
==========================================
+ Hits        18910    18925      +15     
- Misses       3725     3752      +27     

Impacted Files	Coverage Δ
panel/viewable.py	69.28% <7.14%> (-3.11%)	⬇️
panel/io/state.py	60.93% <28.57%> (-2.26%)	⬇️
panel/io/server.py	61.55% <60.00%> (-0.02%)	⬇️
panel/template/base.py	79.01% <66.66%> (-0.13%)	⬇️
panel/config.py	59.71% <83.33%> (+0.52%)	⬆️
panel/template/__init__.py	100.00% <100.00%> (ø)
panel/io/reload.py	64.36% <0.00%> (-2.30%)	⬇️
panel/pane/idom.py	27.40% <0.00%> (+0.20%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7be79e8...8750b4e. Read the comment docs.

[jbednar]

This looks fabulous! I think it's a very good default way to build an app. What happens in the notebook?

[philippjfr]

This looks fabulous! I think it's a very good default way to build an app. What happens in the notebook?

Nothing, you see the individual components. For viewing the full app you'd have to view the pn.state.template object. Improving the way that shows up in the notebook is a related topic but should be discussed and implemented separately.

[jbednar]

Improving the way that shows up in the notebook is a related topic but should be discussed and implemented separately.

I opened #2274 under the assumption that showing the whole app is a separate topic, but it might not be independent. E.g. in this PR, the default template is None. I could imagine that instead there would be an actual zero-frills template that's the default template, and that pn.state.template (whether it's the default or some other template like Material that provides styling) would have a repr that matches item 4 that I ask for in #2274, i.e. the default Jupyter representation for any template would be a simple Row/Column object of the servable components that went into that template. If we do have a default no-frills template, it's not clear that calling this global object "template" is informative, because it's not about templating in the sense of pouring in styling, it's just the global container that has our stuff in it. So it might be better called pn.state.layout or some other term that's agnostic about whether we're using the default template or some fancier one. Hope that makes sense!

[MarcSkovMadsen]

Can I panel serve multiple notebooks using different templates this way? For example Panel on Binder?

[MarcSkovMadsen]

One downside is that users will get slower apps than using a template directly @philippjfr because we teach them to put everything into a column that the Bokeh layout engine then lays out.

And you don.t get things layed out nicely in Cards as with the Fast templates.

[MarcSkovMadsen]

If you can make multiple components servable and they are just appended then I see no problem. Then it is actually nice.

side_title = pn.pane.Markdown("## Settings").servable(area='sidebar')
freq = pn.widgets.FloatSlider(name="Frequency", start=0, end=10, value=2).servable(area='sidebar')
phase = pn.widgets.FloatSlider(name="Phase", start=0, end=np.pi).servable(area='sidebar')`

Especially if you where able to see the resulting template in the notebook. A simple version either in a notebook html template or just a simple, responsive, Panel layout of some kind is better than nothing.

It would also be nice if you could access the list or Column of things already added to for example the sidebar.

[philippjfr]

Can I panel serve multiple notebooks using different templates this way? For example Panel on Binder?

Yes you can but I will have to make sure that the config settings are reset for each session (which is probably a problem in general).

You can also add as many items as you want and access the existing items on pn.state.template.main for example. The only problem I see is with grid based templates since you'd also have to specify the grid coordinates somehow.

[jbednar]

For the grid option, can someone create a pn.Gridspec object and mark that servable, and that becomes the grid? (Instead of marking each individual item servable?)

[MarcSkovMadsen]

@philippjfr would you not just add something like slice as an argument to .servable?

Something like widget.servable(area='sidebar', slice=((0,3), (1,1))?

[philippjfr]

Something like widget.servable(area='sidebar', slice=((0,3), (1,1))?

Yeah, this is the only thing I can imagine working, but it's not pretty :/

[philippjfr]

For the grid option, can someone create a pn.Gridspec object and mark that servable, and that becomes the grid? (Instead of marking each individual item servable?)

Again this would be new API which wouldn't fit with the rest of this model of working, so I'm -1 on any approach like this.

[jbednar]

I've updated where I said pn.Grid to say pn.Gridspec; I hadn't meant to propose any new API. I just meant, can't a user create a pn.Gridspec object and have that be the thing they mark servable? Having done so seems like it's up to Panel precisely how it makes it servable, i.e. whether to put the whole grid in one card (presumably what happens right now) or to map it down to the template's card grid (what I'm proposing), though I may be skipping some important technical steps. The idea was to let the user have a grid object to work with (because they created it). With the slice approach above the user won't know where the grid that they need to work with is if they want to index into it; seems write only (and indeed ugly, as mentioned).

[philippjfr]

I just meant, can't a user create a pn.Gridspec object and have that be the thing they mark servable? Having done so seems like it's up to Panel precisely how it makes it servable

Sure they could but the tension is between template rendering which is fixed once the template is served and dynamic rendering which allows changing the dynamically after rendering. Making the GridSpec fixed would be surprising to a user trying to change it dynamically but keeping it dynamic has performance implications (until the unmanaged layout is available in bokeh).

[philippjfr]

I have decided against supporting grid based templates for now, may revisit that before release but for now this is a sufficient win for me to be convinced that I should merge this.