2024-07-12 –, REPL (2, main stage)
This project goes through the process of building an application dashboard with Pluto.jl. Although Pluto provides an excellent way to interact with notebooks, the result is always... well, a notebook! We exploit Pluto's flexible design and reactivity to customize it with a clear objective: make it look more like a dashboard and less like a notebook! But Julians are greedy, so we want to combine them by offering a "secret" developer mode for advanced users. Let's make Pluto-dashboards a thing!
Motivation for a Pluto.jl dashboard
Dashboards are a great way for users to interact with a large set of information. They are lightweight, trivial to use, and appealing. On the other hand, Pluto.jl is a Julia package that is excellent for experimenting with all kinds of Julia code using notebooks. Pluto.jl notebooks integrate code and their output in a browser and provide flexible bindings with HTML, CSS, and JavaScript. In this talk we will demonstrate how these two can be combined!
Previous efforts
There has been independent previous work on creating reactive dashboards with Pluto.jl.
- Visualization Dashboards with Pluto uses Pluto.jl's isolated cell view to only show cell outputs instead of using JavaScript scripts to move or hide certain notebook parts.
- Pluto, Dashboards and ... Excel aims to create a dashboard with adding a new mode to notebooks where one can freely move cells around.
Both projects make it easy for the user to create a dashboard, but offer less fredoom that one would have with using JavaScript scripts combined with HTML and CSS, like we do it in our approach.
Presentation content
- Motivation behind the project, why is it useful for the community and why can't we just use a normal notebook?
- Using Pluto.jl to add HTML elements to the notebook as well as deploy JavaScript and modify the whole notebook.
- Simplifying things and wrapping functionality in an external package.
- Fusing everything together and creating a Pluto.jl dashboard!
- A little bit about the future of the project.
Background
Pluto.jl notebooks consist of so-called cells that are filled with Julia code and output the result. The output can also be HTML code, which is appropriately rendered in the output section of that cell. The HTML code can also contain a <script> tag, so we can write custom JavaScript which is then executed in the browser. To make the application interactive, Pluto.jl offers a macro to bind custom HTML elements (e.g. buttons, sliders) to a Julia variable.
The most interesting part is also the simplest, just bare Pluto.jl cells! We can move them on the dashboard and thus give the user the ability to add custom Julia code to the dashboard! This code can be everything, e.g. printing variables that aren't visible from the outside or even modifying parts of the dashboard - all limited by the user's creativity!
Building the dashboard
With all those functionalities, it is possible to
- Render custom HTML code as output of a cell
- Resize cell outputs to be fullscreen as well as move cells or hide Pluto.jl HTML elements completely
- Load custom CSS frameworks like Bootstrap or Tailwind
- Make custom interactive HTML elements that interact with the notebook as in triggering a change of a Julia variable
- Give advanced users the possibilty to write Julia code in traditional Pluto.jl cells
To keep the notebook file clean, we wrote a package that contains all needed functions which can directly be used by a notebook to build a dashboard.
Working example
The current working example of such a dashboard in Pluto.jl focuses on the libraries MINDFul.jl and MINDFulMakie.jl. They are simulation tools for intent-based multi-domain networking, which means we can create, edit and visualise connectivity intents, a perfect use case for a dashboard to show off capabilities of a library. The dashboard has buttons and drop down menus for creating and editing intents as well as boxes to put the plots which visualise those intents in. On top of that, we also have a developer mode, which gives the user access to Pluto.jl cells, so they can tinker with the library and do more advanced things - limited by the creativity of the user!
A static HTML export of said notebook can be found here. The full notebook with instructions on how to run it can be found here!
Where to?
Currently all work goes into creating one customized dashboard which doesn't scale fast, that's why we have high interests in building a general framework to allow other users with interests in building a Pluto.jl dashboard creating those easier! In the future there will be a discussion about this project, where it will be decided whether we create said framework.
