Implement a Cell Plugin to customise the Cell behaviour based on metadata

JupyterLab
1

I would like to implement a plugin that extends the behaviour of Notebook Cells in the following way:

  • Change the color of the cell contour based on the cell metadata
  • Add some input fields on top of the cell, that let the user change the cell’s metadata

I was able to achieve this by implementing a JupyterFrontEndPlugin and accessing the NotebookPanel. But the result is suboptimal as the only way to add the inline input fields above the cells is to force my custom inputs in the DOM, making the page very slow when I have many cells.

What would be ideal is to have a custom cell that is used by Jupyter instead of the default cell.
This is an example of what I have achieved now, by injecting elements into the DOM:

Screenshot 2020-02-18 at 15.49.06
Screenshot 2020-02-18 at 15.49.06750×165 4.84 KB

Can anyone help with this?

2

See also Styling Code and Markdown cells from tags which was a similar request regarding whether there were any extensions / tricks out there for styling cells based on tags for vanilla Jupyter notebooks.