Cells metadata totally ignored in DOM

[Cpavrai]

Problem

While my notebook has some metadatas in my cells, it is not visible in the rendered DOM and I cannot distinguish my cells. I'd like to replace some of my cells by a button when a metadata is set.

Proposed Solution

My idea would be to permit a property cellRenderer in Notebook, which would be called for generating cells.

[echarles]

My idea would be to permit a property cellRenderer in Notebook, which would be called for generating cells.
@Cpavrai The current Notebook component delegates the work to JupyterLab code to render the cells. That task is done by the NotebookPanel.ContentFactory and you can implement custom one like what we do with a CellSidebarContentFactory to show custom sidebars to the right of the cells in

jupyter-ui/packages/react/src/components/notebook/NotebookAdapter.ts

Lines 148 to 159 in c26b183

	const contentFactory = this._CellSidebar
	?
	new CellSidebarContentFactory(
	this._CellSidebar,
	this._uid,
	this._nbgrader,
	this._commandRegistry,
	{ editorFactory },
	this._store,
	)
	:
	new NotebookPanel.ContentFactory({ editorFactory });

So we would have to add a property cellRenderer to the Notebook component, and implement a JupyterUiContentFactory that receive that prop, and in and implement some of the inherited methods (e.g. createCodeCell).

The less obvious part is that the createCodeCell has to return a CodeCell object which implements a bunch of methods. The creation of a CodeCell from scratch is something like

new CodeCell({
      contentFactory,
      rendermime,
      model,
      placeholder: false
    }).initializeState();

... an abstract ReactCodeCell could extend the CodeCelland inherit the needed methods (a bit like the ReactWidget implements the Widget). The cellRender would be responsible to return a ReactCodeCell instance.

That sounds a bit complicated, but this is how we leverage the existing JupyterLab stack.

Another option would be to reimplement another variant of the Notebook component which show a list of Cell components. In that case, the cellRender would be easier to implement.

[Cpavrai]

Another option would be to reimplement another variant of the Notebook component which show a list of Cell components. In that case, the cellRender would be easier to implement.

By trying this, I have noticed each cell was starting a new kernel in my jupyter server, whatever options I was putting. I'm a bit confused about how this project works exactly as I'm not very comfortable with Jupyter either, but it seems related with another issue (#60) doesn't it?

[echarles]

@Cpavrai Just pushed 019dbfa that allows the Cell component to reuse a provided kernel, with an example. Initially, the goal was to isolate each of the components with its own kernel, this idea is moving to something more flexible. As you can see in the following cast, all the cells use a single kernel, but as the cell order execution is not predictable the initial run may fail. that is just a basis to show that it is possible to create a Notebook based on individual Cells. I will work more on that ASAP. Would love to continue the conversation to identify needs and requirements.

[jaydeanmartin]

This is very interesting. I am trying to do something similar.
One thing I can't reproduce is the displaying the toolbar. I get the horizontal line, input panel and output panel, but no toolbar.

On a related, but slightly different topic: If I call "selectCell" on a page with multiple cells, it only returns the last cell added?

[echarles]

I get the horizontal line, input panel and output panel, but no toolbar.

I had similar issue sometime ago, but no more recently. That is for sure a CSS issue. You can inspect the DOM and add some '! important` height CSS.

If I call "selectCell" on a page with multiple cells, it only returns the last cell added?

For now only one cell is managed by the Redux store. We have updated the notebook store to deal with many notebooks, but not yet the cell one. I have opened #72 to track this feature.

[jaydeanmartin]

I looked into the CSS, it does not appear to be height, rather the min-width is 0px and that is what it is using. The height for the toolbar is 29 px as expected. Here is a screenshot.

You can see the end of the panel and the vertical space needed. I have included the the html for the "Run" button here:

<div class="lm-Widget jp-ToolbarButton jp-Toolbar-item"><button class="jp-ToolbarButtonComponent jp-mod-minimal jp-Button" aria-pressed="false" aria-disabled="false" title="Run"></button></div>

When I inspect the CSS, I do not see any explicit width settings. I am not sure what this may mean.
The only issue I can see is these warnings about the SVG for the icons:

Sorry if this is not appropriate for this forum.

[echarles]

@jaydeanmartin I have opened #73 to follow-up on the toolbar for the Cell. This is coming from a missing Webpack rule.