CSS/JS containment

[axelboc]

In its current implementation, the extension basically merges H5Web's CSS and JS code into Jupyer Lab's:

• H5Web's global styles (normalize.css and .btn-clean, variables, etc.) are merged with Jupyter Lab's styles, which leads to unexpected results - e.g. H5Web's built-in support for system dark mode (prefers-color-scheme: dark) applies filter: invert() to JupyterLab as a whole, even when JLab is configured with a light theme.
• H5Web's JS bundle is executed on launch of JLab, which means any global state is shared between JLab tabs. This is what led us to switching from global zustand stores to context-injected stores.

All of these issues, and likely future issues, would be avoided if every instance of H5Web (tab or cell) were completely self-contained. The easiest way to achieve JS/CSS containment is to use an iframe.

The way I see it, the extension could take the form of a little create-react-app that renders H5Web's App component (wrapped in a JupyterProvider) on a simple HTML page. Building the extension would generate all the static assets (index.html + JS/CSS bundles). On JLab start-up, the extension would start a static file server (or use JLab's) to serve those static assets at https://jlab.url/h5web/?file=some-file.h5. When opening an HDF5 file in a JLab tab or cell, the extension would then render an iframe with its src attribute set to that URL.

I have no idea how feasible this solution is...

[tomio13]

This relates to another problem: H5Web allows customizing the colors in 2D plots, which is done in the css. It would be great to have a way to be able to inject this to invoking these widgets in Jupyter lab.