"module://matplotlib_pyodide.wasm_backend" should auto clear the old pictures instead of generate new pictures

[yu0A]

🐛 Bug

When use "module://matplotlib_pyodide.wasm_backend" to output pictures, each time it appends new divs and let the height of the page changes. That's unacceptable for admin apps.

To Reproduce

Clone this repo

• deploy and run the code
• go to the page http://localhost:9000/#/matplotlib
• click the northwest button "执行" >= 2 times and you will see the page become longer and longer

Expected behavior

the constant amount of picture output

Environment

• Pyodide Version:0.24.1
• Browser version:Chrome 120.0.6099.227
• Any other relevant information:

Additional context

[ryanking13]

Thanks for opening the issue. There is currently no maintainer actively managing matplotlib-pyodide, so it would be great if you could contribute to the issues you see.

[yu0A]

Thanks for opening the issue. There is currently no maintainer actively managing matplotlib-pyodide, so it would be great if you could contribute to the issues you see.

I'm glad to maintain this repo. BTW are there any FAQs to debug emscripten whls like this?

[hoodmane]

BTW are there any FAQs to debug emscripten whls like this?

No, and it's a bit inconvenient but we are happy to provide suggestions / help if you get stuck. It's easier for wheels the work in node, but matplolib_pyodide is browser only.

I think the best thing is to unpack the wheel into some folder:

tmp-site/unpacked_wheel_pkg1
tmp-site/unpacked_wheel_pkg2
...

then do:

dirHandle = await showDirectoryPicker();
const nativefs = await pyodide.mountNativeFS("/mount_dir", dirHandle);
pyodide.pyimport("sys").path.insert(0, "/mount_dir")

and pick the tmp-site directory. Then you should be able to use the files on disk.
https://pyodide.org/en/stable/usage/file-system.html#experimental-using-the-native-file-system-in-the-browser

[yu0A]

I successfully overload the destroy() function, and matplotlib does generate picture from "Figure 1".

But a new bug is, pyodide cannot call div.removeChild() method successfully.