saving static HTML with embedded widgets from Jupyter Lab and clearing widget state

[cornhundred]

A typical workflow we have with the widget we're developing (https://github.com/ismms-himc/clustergrammer2) is to load data, normalize, generate one or more interactive heatmap widget views of the data, and finally save the notebook with the widget state and export a static HTML notebook. This last step is useful for sharing results with collaborators who are not running a notebook (e.g. sending the static HTML file over an email).

This process works in the Jupyter notebook, but I haven't got it completely working in Jupyter Lab. We're now able to save the widget state in Jupyter Lab (see jupyterlab/jupyterlab#5235, and #2063 (comment)) using "Save Widget State Automatically" setting but there are two issues:

1. subsequently using File > Export Notebook to HTML does not generate an HTML file with embedded widgets
2. there does not appear to be a way to clear out old widget state.

I am able to use nbconvert (5.3.2.dev0 see jupyter/nbconvert#636) in the Jupyter Lab terminal to generate a static HTML file with an embedded widget by running

jupyter nbconvert --to html my-notebook.ipynb

My local laptop has:
Jlab: 1.0.4
ipywidgets: 7.5.1
nbconvert: 5.3.2.dev0

[jasongrout]

Can you clear widget state by closing all the widgets, then saving the file (with the save state automatically)? If you save state automatically, and make sure there are no active widgets, it should clear state. Alternatively, you might be able to just restart your kernel and save, since I think it actually only saves live widgets.

[cornhundred]

Hi @jasongrout, I tried the following:

1. run notebook with large widgets and "Save Widget State Automatically" checked
2. the ipynb file increase in size (~40MB with saved widget state JSON)
3. I commented out the cells in the notebook with the widget and re-ran - expecting the widget state to be lost
4. the ipynb file did not reduce in size.
5. Repeating steps 1-4 with and without "Save Widget State Automatically" checked

However, I was able to clear the widget state by restarting the notebook kernel. It would be nice to have the "clear widget state" and "save widget state" buttons from the Jupyter notebook - but restarting the kernel appears to work.

I was looking into why the widget was not rendering when it was saved using File > Export Notebook to HTML. I made a branch that has two versions of the Jupyter Notebook HTML, one saved using Export Notebook to HTML and the other using nbconvert from the terminal (jupyter nbconvert --to html 1.0_Running_Clustergrammer2.ipynb) here (https://github.com/ismms-himc/clustergrammer2-notebooks/tree/jlab-html/notebooks/jupyter-lab-htmls).

It appears that the only difference between the HTMLs are under widgetRendererSrc (lines 15 and 23 in the HTMLs):

NBConvert HTML

var widgetRendererSrc = 'https://unpkg.com/@jupyter-widgets/html-manager@*/dist/embed-amd.js';

Export Notebook to HTML

var widgetRendererSrc = '@jupyter-widgets/html-manager@*/dist/embed-amd.js';

[jasongrout]

Once you create widgets, they exist as state, even if they aren't displayed. Until you explicitly close the widgets programmatically, or restart your kernel, they are considered live widget state, and so will be saved automatically. That's why the file stayed the same size in step 4.

It would be nice to have the "clear widget state" and "save widget state" buttons from the Jupyter notebook - but restarting the kernel appears to work.

A bit of background: Part of the design goals here were to resolve a lot of confusion that happened in the classic notebook around those options (#1866, #2012, #1632).

When we designed this jlab experience, we had to make a choice for when the setting was not selected: should it clear the existing state, or leave it alone. We chose to leave it alone as the more predictable and expected behavior.

How about a new menu item like "clear live widget state" which closes all the live widgets. This essentially is like restarting from a widgets perspective (all widgets would then disappear), and then a save will save an empty state (presuming you have "automatically save widget state" checked).

[jasongrout]

It appears that the only difference between the HTMLs are under widgetRendererSrc (lines 15 and 23 in the HTMLs):

That's odd that those are different. The "export notebook to html" one looks off. My guess is that diving into the way nbconvert is invoked in the server from that menu item may turn up the cause there - perhaps it's not doing the exact equivalent of your command line option.

[cornhundred]

Thanks @jasongrout for the help.

Clearing Widget State

How about a new menu item like "clear live widget state" which closes all the live widgets

That would be a good feature in my opinion. In my current workflow I often re-run cells (implicitly closing the widget) but I guess their state still exists since I haven't closed them programmatically (is there documentation for how to close programmatically?).

Embedding Widget into HTML From Jupyter Lab

In terms of getting jlab to save with HTML properly, do you think I should raise an issue in the https://github.com/jupyterlab/jupyterlab repo?

Also, I confirmed that the two lines assigning widgetRendererSrc are causing the problem. I made a new HTML file 1.0_edited.html by copying the Export Notebook to HTML file and changing these two lines to the values found in the NBConvert HTML file. Finally, the notebook file that was used to generate these HTML files renders correctly with the widget on NBViewer

[jasongrout]

is there documentation for how to close programmatically?

Yes: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Basics.html#Closing-widgets

In terms of getting jlab to save with HTML properly, do you think I should raise an issue in the https://github.com/jupyterlab/jupyterlab repo?

That sounds like the right place to open an issue for this.

[cornhundred]

Thanks, I'll raise these issues on the Jlab repo:

• fix jlab export html with embeddedd widgets
• feature request for clearing widget state on jlab

and close this one.

[jasongrout]

* feature request for clearing widget state on jlab

That should be an issue here. Can you open a new issue in this repo focused on that?

[cornhundred]

Thanks, I raised it here #2565

I also raised the issue here jupyterlab/jupyterlab#7262