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...
In its current implementation, the extension basically merges H5Web's CSS and JS code into Jupyer Lab's:
normalize.cssand.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) appliesfilter: invert()to JupyterLab as a whole, even when JLab is configured with a light theme.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
Appcomponent (wrapped in aJupyterProvider) 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 athttps://jlab.url/h5web/?file=some-file.h5. When opening an HDF5 file in a JLab tab or cell, the extension would then render aniframewith itssrcattribute set to that URL.I have no idea how feasible this solution is...