JSON Tours in Notebook metadata

[bollwyvl]

Hooray 3.1.0! Here's another direction we can go pretty quickly now that we have the schema in.

Elevator pitch

Add another plugin, notebook-tours, which can find tours in user's notebook metadata, and pop a toast when a tour is found in a newly-opened notebook. Offer a notebook toolbar button (icon time!) which offers a list of tours saved in the notebook. Another optional plugin would add a tour sidebar with an edit mode, showing a nice UI for viewing/updating the schema instance.

Motivation

In the general case, if a user builds an interesting, but complicated, notebook, it would act as a nice piece of annotation and documentation of how to use it if it offered a tour.

Concretely, over on https://github.com/jtpio/jupyterlite/pull/98 we're using the settings-based tours, and it works great. However, because each example notebook quacks a little different than one might be used to, e.g. import micropip; await micropip.install(...), and these would be nice to reflect a little more than pure narrative... also it's slow, and a tour would give the user something to look at while the cache warms up!

Having UI for building the schema would help the raw JSON5 experience, as quotes, newlines, etc. wouldn't be so rough.

Design ideas

I'm imagining it makes the most sense for the the metadata to live in #/metadata/jupyterlab-tour/ and just be the same structure as the user settings. Right now, it just has the tours key, and whatever else goes in settings might not make sense later, but it should still validate.

react-json-schema-form (or slightly more packaged, but not as a standalone labextension, jupyterlab-rjsf which would directly support markdown #20) would be a quick win to reuse all the content from the settings schema to drive the UI, as it already has the basics covered like switches, dropdowns, colors, etc.

For the crucial building of CSS selector, on a few things, e.g. robotkernel, we've used simmerjs to solve based on a clicked DOM node. We can make an rjsf component that overloads specific parts of a schema that would provide a point-and-click tool to filling in the textbox.

Alternative

In addition to notebook metadata, a MIME renderer would be another way to generate tours, and these could be discovered by a slightly deeper query of the notebook, and exposed in the same way... or just show a "start tour" button. This gets tricky, as we'd need to reserve a mime type, etc.