Add Tag-based Cell Style UI

[bollwyvl]

Elevator Pitch

Allow a Deck author to add styling via different, discoverable cell tags:

• Hide all inputs of this cell
• Show the input and output side by side

References

• might be able to support Add code buttons #16

Motivation

Despite being semantically weak, a number of ecosystem tools encourage tag use.

An author may use these tools for non-Deck presentation of notebooks. These might include useful rules that can act as "base coat" choices for slide building. As a Deck is closer to this kind of experience than "full" Notebook authoring, an author should be able to (temporarily) opt into a set of tag opinions, or build, save, and reuse their own.

Constraints

Why tags?

• jupyterlab-fonts hoists cell/metadata/tags to the DOM in data
• the chosen system should serve both ends of the spectrum...
  • ...from highly-prescriptive values
    • myst cell tags
  • ... or just as an approach
    • voila

Design Ideas

API Ideas

• new tag templates could be registered via the manager API
  • or via settings defaults e.g. conf.d
  • or via discovery of a top-level key in other extensions' settings
• tag templates can be copied from other notebooks

UI Ideas

• in Design Tools, offer a Cell Tag picker, offer applying a tag...
• from the current notebooks
• from other notebooks
• from a pre-defined set of tags
• from scratch in "expert" mode
  • allows for creating new selectors and property values.

A fully-expanded view might appear like:

Where, by default, the main UI is a growing list of currently in-use tags.

Data Ideas

Per-cell tags will go in cells/*/metadata/tags.

Style templates will end up in notebook/metadata/@jupyterlab/deck, perhaps of the form

styleTemplates:
  myst-nb:
    title: Myst-NB
    icon: |
      data:image/svg:...
    remove-inputs:
      title: Remove Outputs
      description: Show only the cell input
      selector: .jp-CodeCell
      styles:
        '&[jp-fonts-cell-tags*=",remove-inputs,"] .jp-InputArea':
          display: none