[BUG] Matplotlib chart does not show on Firefox

On the demo site https://quarto.thecoatlessprofessor.com/pyodide/qpyodide-code-cell-demo.html, I can't get the matplotlib chart to show on Firefox (it shows fine in Chromium). This is for Firefox 123.0 on Linux with all addons disabled:

So, I can re-create it in firefox. Though, clicking on the graph seems to resolve the image display:

I'll probably switch it over to using a static SVG output as the matplotlib backend for pyodide (matplotlib-pyodide) is missing a maintainer.

Is there any right now to use another renderer? I tried to change the line matplotlib.use("module://matplotlib_pyodide.html5_canvas_backend") to matplotlib.use("module://matplotlib_pyodide.wasm_backend") in the qpyodide-document-engine-initialization.js file but it still uses the html5 backend.

The problem I have is that I have a couple of graphs with a lot of dots, and the browser freezes. Even a static backend (generating an image instead of html) will solve my problem. It would be possible?

@juanfcocontreras unfortunately, there isn't a quick way to change renderers. I'll set aside some time soon to address it.

The short gist is we're creating and populating a figure element here:

pyodide/_extensions/pyodide/qpyodide-cell-classes.js

Lines 417 to 419 in 3113d23

    
           // Generate a new canvas element, avoid attaching until the end 
        
           let graphFigure = document.createElement("figure"); 
        
           document.pyodideMplTarget = graphFigure;

Under the matplotlib.use("module://matplotlib_pyodide.html5_canvas_backend") backened, this is fine. However, the matplotlib.use("module://matplotlib_pyodide.wasm_backend") may not respect the document.pyodideMplTarget variable we're assigning the graph into. Thus, the graph becomes disassociated.

	// Generate a new canvas element, avoid attaching until the end
	let graphFigure = document.createElement("figure");
	document.pyodideMplTarget = graphFigure;