matplotlib widgets not interactive when exported to html

[isabelizimm]

Hi all! In a Jupyter Notebook, I am creating a matplotlib widget that I would like to export to HTML and still be interactive.

minimal example widget:

import numpy as np
import matplotlib.pyplot as plt

%matplotlib widget
v = np.array([1,2])
w = np.array([4,-6])

fig, ax = plt.subplots()
plt.xlim(-6,6)
plt.ylim(-6,6)

plt.plot(v)
plt.plot(w)

plt.show()

notebook output

In a notebook, I can see the interactive figure with a toolbar, the image is resizeable, etc.

html output

When rendered to html using the command:

python -m nbconvert --execute notebook.ipynb --to html

The figure is static, no toolbar is shown, the widget is not resizable, and it is also missing part of its title (reads as Figure instead of Figure 1). The results are similar without the --execute flag.

The widget's div is

<div class="lm-Widget jupyter-widgets-disconnected jupyter-matplotlib"><div class="jupyter-matplotlib-figure"><div class="jupyter-widgets widget-label jupyter-matplotlib-header">Figure</div><div class="jupyter-widgets jupyter-matplotlib-canvas-container"><div class="jupyter-widgets jupyter-matplotlib-canvas-div" tabindex="0" style="position: relative; clear: both; width: 512px; height: 384px;"><canvas width="512" height="384" style="display: block; position: absolute; left: 0px; top: 0px; z-index: 0; width: 512px; height: 384px;"></canvas><canvas width="512" height="384" style="display: block; position: absolute; left: 0px; top: 0px; z-index: 1; width: 512px; height: 384px; cursor: pointer;"></canvas></div></div><div class="lm-Widget jupyter-widgets-disconnected jupyter-widgets jupyter-matplotlib-toolbar widget-container widget-box jupyter-matplotlib-toolbar-fadein-fadeout widget-vbox" style="visibility: hidden; opacity: 0; inset: 3px auto auto 3px;"><div class="widget-container widget-box widget-vbox" style="display: none;"><button class="jupyter-matplotlib-button jupyter-widgets jupyter-button" href="#" title="Reset original view" style="outline: none;"><i class="center fa fa-fw fa-home"></i></button><button class="jupyter-matplotlib-button jupyter-widgets jupyter-button" href="#" title="Back to previous view" style="outline: none;"><i class="center fa fa-fw fa-arrow-left"></i></button><button class="jupyter-matplotlib-button jupyter-widgets jupyter-button" href="#" title="Forward to next view" style="outline: none;"><i class="center fa fa-fw fa-arrow-right"></i></button><button class="jupyter-matplotlib-button jupyter-widgets jupyter-button" href="#" title="Left button pans, Right button zooms
x/y fixes axis, CTRL fixes aspect" style="outline: none;"><i class="center fa fa-fw fa-arrows"></i></button><button class="jupyter-matplotlib-button jupyter-widgets jupyter-button" href="#" title="Zoom to rectangle
x/y fixes axis" style="outline: none;"><i class="center fa fa-fw fa-square-o"></i></button><button class="jupyter-matplotlib-button jupyter-widgets jupyter-button" href="#" title="Download plot" style="outline: none;"><i class="center fa fa-fw fa-floppy-o"></i></button></div></div><div class="jupyter-widgets widget-label jupyter-matplotlib-footer"></div></div></div>

which makes it seem as though it should be interactive, so I am not sure why it is static.

I do see some errors in the browser:

Failed to load resource: the server responded with a status of 404 (Not Found)
notebook.html:1 Refused to execute script from 'http://127.0.0.1:5500/jupyter-matplotlib.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
2embed-amd.js:26 Falling back to https://cdn.jsdelivr.net/npm/ for jupyter-matplotlib@^0.11

Potentially related to #1643 #1666 jupyter-widgets/ipywidgets#3658, but I am seeing this error persist.

Expected

I expect the widget to render as interactive html, equivalent to the notebook output.

Is there a way to get my widget to be interactive in the browser? Thank you in advance!

---

Potentially relevant packages + versions:

nbconvert==7.7.3
ipympl==0.9.3
ipywidgets==8.1.1
jupyterlab-widgets==3.0.9
widgetsnbextension==4.0.9
matplotlib==3.7.2