Make reusing voila easier with custom template + gridstack example

[maartenbreddels]

Using, e.g.:

$ voila examples/dashboard-grid/dashboard.ipynb  --custom_path=examples/dashboard-grid 

Will add the examples/dashboard-grid to the searchpath of the templates. It will also add new static file handers for:

• /voila/custom/(js|css|vendor)

To make this possible/easier voila.tpl got renamed to base.html (and refactored a bit). The default template is now voila.html, which extends base.html.

The added example adds a custom template that uses gridstack.js to render the (non-empty) outputs of codecells and markdown to tiles:

Tiles size can be configured using cell metadata:

Screencap:

[timkpaine]

@maartenbreddels this is awesome!

[maartenbreddels]

Thanks Tim!

[SylvainCorlay]

cc @ellisonbg @parente
at this point this is just an example of using a custom template for voila, although it triggers the question of the cell metadata spec.

Do you guys have more info, pointers on the spec that was used for the jupyter dashboards?

https://github.com/jupyter/dashboards/blob/0.7.0/jupyter_dashboards/nbextension/notebook/dashboard-view/dashboard-metadata.js

[parente]

We doc'ed the spec we used in jupyter_dashboards here: https://jupyter-dashboards-layout.readthedocs.io/en/latest/metadata.html

Most of the discussion was about how it was too limited to be part of the official schema (which makes sense) and how additional layouts, display formats, media types, etc. were desirable (lots over here: jupyterlab/jupyterlab#1640)

[SylvainCorlay]

Thanks @parente !

[maartenbreddels]

Thanks @parente for the info.
@SylvainCorlay I think we can merge this, I think we can just see this as an example, following those specs is another project on its own.

[SylvainCorlay]

Still working on it. Will be merged later today or tomorrow.

[SylvainCorlay]

Pushed a few changes.

To specify the custom template path:

voila dashboard-grid/dashboard.ipynb --custom_template_path=dashboard-grid

[SylvainCorlay]

I would have liked the custom_template_path to be a configurable of the VoilaHandler instead of the voila app, so that we can set this up in the same way with both the server extension and the app.

Unfortunately, handlers are not traitlet configurables. Maybe we could make mixins so that they are. @minrk might have an opinion on that.

Another way to pass these options to the server extension would be to do something like

diff --git a/voila/server_extension.py b/voila/server_extension.py
index 2e516e8..3f8c2ff 100644
--- a/voila/server_extension.py
+++ b/voila/server_extension.py
@@ -20,6 +20,11 @@ from .paths import ROOT, TEMPLATE_ROOT, STATIC_ROOT
 from .handler import VoilaHandler
 from .treehandler import VoilaTreeHandler
 
+voila_handler_options = {
+    'strip_sources': True,
+    'custom_template_path': None
+}
+
 def load_jupyter_server_extension(server_app):
     web_app = server_app.web_app
 
@@ -33,7 +38,7 @@ def load_jupyter_server_extension(server_app):
     host_pattern = '.*$'
     base_url = url_path_join(web_app.settings['base_url'])
     web_app.add_handlers(host_pattern, [
-        (url_path_join(base_url, '/voila/render' + path_regex), VoilaHandler),
+        (url_path_join(base_url, '/voila/render' + path_regex), VoilaHandler, voila_handler_options),
         (url_path_join(base_url, '/voila'), VoilaTreeHandler),
         (url_path_join(base_url, '/voila/tree' + path_regex), VoilaTreeHandler),
         (url_path_join(base_url, '/voila/static/(.*)'),  tornado.web.StaticFileHandler, {'path': str(STATIC_ROOT)})

and make this voila_handler_options be a configurable thing...

[maartenbreddels]

Looking good!

[jtpio]

@SylvainCorlay that would be great to have for the server extension too.

How about adding the folder containing the notebook as one of the search paths in template_path? So the voila.tpl file can be directly placed next to the notebook.

[SylvainCorlay]

Hey @jtpio that may be a good idea for the nbconvert templates!

Note that we don't want to serve the notebook directory though, for reasons explained in #16.