Configure your dashboards with Voilà gridstack template
Voilà is a new dashboarding solution from Jupyter ecosystem. It provides an easy-to-use tool to convert your Jupyter notebooks into standalone web applications. If you have not used it before, you can learn more about Voilà from this blog post.
And voilà… the dashboard templates
To create interactive and engaging dashboards, you can add graphs, interactive widgets, maps etc. to your notebook. Voilà will turn them into interactive applications by stripping any code and displaying the outputs in the order they appear in the notebook. If you need more flexibility over the position of the cell outputs, you can use one of the widget layout templates defined in the ipywidgets library. If this is not enough, with Voilà you can even turn your notebooks into interactive presentations. Would you also like to re-configure your dashboards the drag-and-drop way? Et voilà, the gridstack template.
Creating ad-hoc dashboards with gridstack
If you have never used layout templates and just want to use Voilà with your existing notebooks, you can consider the new gridstack template for Voilà dashboards. Simply run the following command with the path to your notebook:
voila --template=gridstack my_notebook.ipynb --VoilaConfiguration.resources='{“gridstack”: {“show_handles”: True}}'This will open a dashboard created from your notebook in a brower. By default the output cells of the notebook are laid out vertically. But you can move and resize them freely by dragging one of the handles in the corners of the cells.
Positioning widgets with metadata
When you are done with configuring your dashboard, Voilà enables you to persist it and a create static layout of the widgets. To achieve that you will need to edit manually the notebook metadata, but we are also planning to release a tool that will simplify the process.
For example, you can add the following attributes to one of the cells (to edit the cell metadata, you need to activate the “Edit metadata” button from the View -> Cell toolbar menu of your notebook):
In Jupyter lab ≥ 1.0 you can edit the metadata using “Advanced Tools” section of “Notebook tools” sidebar (wrench icon).
Then you can start Voilà with the following command:
voila --template=gridstack my_notebook.ipynb
This should open your dashboard with cells in the specified positions and of specified sizes.
Supporting legacy notebooks
The metadata follow the specification of the legacy jupyter-dashboards project, which was an earlier solution for creating interactive dashboards. Unfortunately, the project is not maintained any more and it won’t work with the recent installations of Jupyter. However, you can open your notebooks created with jupyter-dashboards without changes with Voilà gridstack template to achieve identical rendering and give a second life to your Jupyter dashboards.
(To compare the outputs, you can open the notebook with binder that provisions the jupyter-dashboards ecosystem installed in an old version of Anaconda (2017). You can also use its design tool to lay out your widgets visually and save the cell metadata usable with Voilà gridstack template).
How to install
If you want to try out the template yourself, please install it now with:
pip install voila-gridstack (for pip users) or
conda install voila-gridstack (for conda/anaconda users).
You can also try out the interactive examples with our gridstack binder.
And if you have any questions or want to share your experience please reach out on our Gitter chat.
Credits
The development Voilà and gridstack template was initiated by the amazing team at QuantStack that also provided financial and brain-power support.
About the author
Bartosz Telenczuk is a seasoned Python developer and a data scientist. He is an ardent user of Jupyter ecosystem and frequent contributor to open source software; among his projects is the svgutils library for composing SVG files in Python.