Changes for marimo

Author: keller-mark

pyproject.toml

@@ -90,6 +90,8 @@ linting = []
 notebook = [
   'spatialdata>=0.3.0',
   'dask[dataframe]==2024.11.1',
+  'marimo',
+  'starlette>=0.42.0',
 ]
 demos = [
   "pulp==2.7.0",
@@ -115,9 +117,7 @@ dev = [
 
 [tool.uv]
 default-groups = ["dev"]
-override-dependencies = [
-  'starlette==0.14.0'
-]
+override-dependencies = []
 
 [tool.hatch.build]
 exclude = [".github", "docs", "demos", "binder"]

src/vitessce/widget.py

@@ -416,7 +416,7 @@ def get_uid_str(uid):
     }
 
     function VitessceWidget(props) {
-        const { model } = props;
+        const { model, styleContainer } = props;
 
         const [config, setConfig] = React.useState(prependBaseUrl(model.get('config'), model.get('proxy'), model.get('has_host_name')));
         const [validateConfig, setValidateConfig] = React.useState(true);
@@ -480,7 +480,7 @@ def get_uid_str(uid):
             height, theme, config, onConfigChange, validateConfig,
             pluginViewTypes, pluginCoordinationTypes,
             pluginFileTypes,pluginJointFileTypes, pluginAsyncFunctions,
-            remountOnUidChange, stores, pageMode,
+            remountOnUidChange, stores, pageMode, styleContainer,
         };
 
         return e('div', { ref: divRef, style: { height: height + 'px' } },
@@ -495,7 +495,10 @@ def get_uid_str(uid):
     }
 
     const root = createRoot(view.el);
-    root.render(e(VitessceWidget, { model: view.model }));
+    // Marimo puts AnyWidgets in a Shadow Root, so we need to tell Emotion to
+    // insert styles within the Shadow DOM.
+    const styleContainer = view.el.getRootNode();
+    root.render(e(VitessceWidget, { model: view.model, styleContainer }));
 
     return () => {
         // Re-enable scrolling.