Idly Dreaming – End-User UX Development in JupyterLab and MyST

The following probably demonstrates my total lack of understanding about how things actually but work, but I’m always happy to demonstrate my ignorance… Anyway, here are a couple of things I (think I) would like to be able to do in Jupyter’n’MyST land…

They take inspiration from things like SQLite application defined functions, where you can call something like conn.create_function('custom_fn_name', nargs, custom_fn) to register a new SQLite function, create_aggregate('custom_agg_fn_name', nargs, CustomAggClass), where CustomAggClass has required step() and finalize() methods, and custom table returning functions registered using CustomTableFunction.register(db.conn) on a user defined CustomTableFunction with reqiured params, columns and names attributes and initialize() and iterate() methods; as well as my own hacky innovationOUtside/nb_js_diagrammers package for defining block magics that return an object that uses simple templates that wrap off-the-shelf Javascript packages and text-based diagram descriptions from the magicked cell to render diagrams. (Ideally, I’d simplify that to something like register_diagram_magic('diagram_magic_name', DIAGRAM_TEMPLATE).)

The key idea is that, at the programmatic level, I really don’t care what goes on under the hood, I just want a really high level function that lets me register an additional function or handler for a particular attribute value in a generic handler.

So for example, in JupyterLab, I’d love to be able to call something like:

register_tag_styler("tagname", tagcss) that would apply the tagcss styling to cells tagged with tagname.

It’s still not clear to me where might run this code, but ideally there’d be a trivial way to define extension config panels, much as as the jupyter_nbextensions_configurator does, to provide a UI over the registration function. The educational-technology-collective/etc_jupyterlab_cell_properties extension lets you add styling metadata to a cell, but it would be neater to have an extension that lets you define one or more tag names, and some css style associated with each tag, and then apply that styling to correspondingly tagged cells.

Obviously, this should work in both JupyterLab and Retrolab served from a “full” server, or in JupyterLite.

Second up, MyST. MyST supports block level directives of the form:

```{mydirective}
TEXT
```

where either core MyST, or MyST extensions identify the mydirective block and then do something to the TEXT.

As a parallel to my nb_js_diagrammers block magics, it’d be really handy to be able to say register_myst_html_directive('my_directive_label', TEMPLATE, js_load=["mypackage.js"], css_load=["mystyle.css"]) and then just load in the required packages, as required, and return some HTML templating that consumes the TEXT. Where parameters are parsed from the top of the directive block, or space sperated from the directive label, I guess they could be passed as such into the template.

It would also be handy if the MyST-md parser, and perhaps even cell magics, could get access to cell tags. In the case of MyST, this might then allow tagged cells (eg of the form directive-note) to essentially identify the contents of a cell as the contents of a {note} directive block (related issue).

In each of the above cases, as and end user trying to customise the look and feel of notebooks, or rich outputs in a rendered document, I really don’t care how horrible or complicated it is underneath. All I have to do is follow a class structure or some simple template conventions.

Author: Tony Hirst

I'm a Senior Lecturer at The Open University, with an interest in #opendata policy and practice, as well as general web tinkering...

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: