page_mode and page_esm params

Author: keller-mark

vitessce/config.py

@@ -462,7 +462,7 @@ class VitessceConfigView:
     A class to represent a view (i.e. visualization component) in the Vitessce view config layout.
     """
 
-    def __init__(self, component, coordination_scopes, x, y, w, h):
+    def __init__(self, component, coordination_scopes, x, y, w, h, uid=None):
         """
         Not meant to be instantiated directly, but instead created and returned by the ``VitessceConfig.add_view()`` method.
 
@@ -480,17 +480,20 @@ def __init__(self, component, coordination_scopes, x, y, w, h):
             "x": x,
             "y": y,
             "w": w,
-            "h": h
+            "h": h,
         }
+        if uid is not None:
+            self.view["uid"] = uid
 
     def _to_py_params(self):
         params_dict = {
             "component": self.view["component"],
             "x": self.view["x"],
             "y": self.view["y"],
             "w": self.view["w"],
-            "h": self.view["h"]
         }
+        if "uid" in self.view:
+            params_dict["uid"] = self.view["uid"]
         # Only include coordination_scopes if there are coordination scopes other than
         # the coorindation scope for the 'dataset' coordination type.
         non_dataset_coordination_scopes = {
@@ -1002,7 +1005,7 @@ def get_datasets(self):
         """
         return self.config["datasets"]
 
-    def add_view(self, view_type, dataset=None, dataset_uid=None, x=0, y=0, w=1, h=1, mapping=None, coordination_scopes=None, props=None):
+    def add_view(self, view_type, dataset=None, dataset_uid=None, x=0, y=0, w=1, h=1, mapping=None, uid=None, coordination_scopes=None, props=None):
         """
         Add a view to the config.
 
@@ -1070,7 +1073,7 @@ def add_view(self, view_type, dataset=None, dataset_uid=None, x=0, y=0, w=1, h=1
         if coordination_scopes is not None:
             internal_coordination_scopes.update(coordination_scopes)
         vcv = VitessceConfigView(
-            component_str, internal_coordination_scopes, x, y, w, h)
+            component_str, internal_coordination_scopes, x, y, w, h, uid=uid)
 
         # Use the mapping parameter if component is scatterplot and the mapping is not None
         if mapping is not None:
@@ -1635,7 +1638,9 @@ def from_dict(config):
                 raise ValueError(
                     "Multiple datasets are present, so every view must have an explicit dataset coordination scope.")
             new_view = VitessceConfigView(
-                c['component'], c_coord_scopes, c['x'], c['y'], c['w'], c['h'])
+                c['component'], c_coord_scopes, c['x'], c['y'], c['w'], c['h'],
+                uid=(c["uid"] if "uid" in c else None)
+            )
             if 'props' in c.keys():
                 new_view.set_props(**c['props'])
             vc.config['layout'].append(new_view)

vitessce/widget.py

@@ -203,6 +203,9 @@ def get_uid_str(uid):
     const remountOnUidChange = view.model.get('remount_on_uid_change');
     const storeUrls = view.model.get('store_urls');
 
+    const pageMode = view.model.get('page_mode');
+    const pageEsm = view.model.get('page_esm');
+
     const pkgName = (jsDevMode ? "@vitessce/dev" : "vitessce");
 
     importMap.imports["vitessce"] = (customJsUrl.length > 0
@@ -216,14 +219,17 @@ def get_uid_str(uid):
         PluginViewType,
         PluginCoordinationType,
         PluginJointFileType,
+        PluginAsyncFunction,
         z,
         useCoordination,
+        usePageModeView,
     } = await importWithMap("vitessce", importMap);
 
     let pluginViewTypes = [];
     let pluginCoordinationTypes = [];
     let pluginFileTypes = [];
     let pluginJointFileTypes = [];
+    let pluginAsyncFunctions = [];
 
     const stores = Object.fromEntries(
         storeUrls.map(storeUrl => ([
@@ -248,16 +254,18 @@ def get_uid_str(uid):
             const pluginModule = (await import(pluginEsmUrl)).default;
             URL.revokeObjectURL(pluginEsmUrl);
 
-            const pluginsObj = await pluginModule.createPlugins({
+            const pluginDeps = {
                 React,
                 PluginFileType,
                 PluginViewType,
                 PluginCoordinationType,
                 PluginJointFileType,
+                PluginAsyncFunction,
                 z,
                 useCoordination,
                 invokeCommand: invokePluginCommand,
-            });
+            };
+            const pluginsObj = await pluginModule.createPlugins(pluginDeps);
             if(Array.isArray(pluginsObj.pluginViewTypes)) {
                 pluginViewTypes = [...pluginViewTypes, ...pluginsObj.pluginViewTypes];
             }
@@ -270,11 +278,30 @@ def get_uid_str(uid):
             if(Array.isArray(pluginsObj.pluginJointFileTypes)) {
                 pluginJointFileTypes = [...pluginJointFileTypes, ...pluginsObj.pluginJointFileTypes];
             }
+            if(Array.isArray(pluginsObj.pluginAsyncFunctions)) {
+                pluginAsyncFunctions = [...pluginAsyncFunctions, ...pluginsObj.pluginAsyncFunctions];
+            }
         } catch(e) {
+            console.error("Error loading plugin ESM or executing createPlugins function.");
             console.error(e);
         }
     }
 
+    let PageComponent;
+    try {
+        const pageEsmUrl = URL.createObjectURL(new Blob([pageEsm], { type: "text/javascript" }));
+        const pageModule = (await import(pageEsmUrl)).default;
+        URL.revokeObjectURL(pageEsmUrl);
+
+        const pageDeps = {
+            usePageModeView,
+        };
+        PageComponent = await pageModule.createPage(pageDeps);
+    } catch(e) {
+        console.error("Error loading page ESM or executing createPage function.")
+        console.error(e);
+    }
+
     function VitessceWidget(props) {
         const { model } = props;
 
@@ -338,14 +365,17 @@ def get_uid_str(uid):
 
         const vitessceProps = {
             height, theme, config, onConfigChange, validateConfig,
-            pluginViewTypes, pluginCoordinationTypes, pluginFileTypes, pluginJointFileTypes,
-            remountOnUidChange, stores,
+            pluginViewTypes, pluginCoordinationTypes,
+            pluginFileTypes,pluginJointFileTypes, pluginAsyncFunctions,
+            remountOnUidChange, stores, pageMode,
         };
 
         return e('div', { ref: divRef, style: { height: height + 'px' } },
             e(React.Suspense, { fallback: e('div', {}, 'Loading...') },
                 e(React.StrictMode, {},
-                    e(Vitessce, vitessceProps)
+                    e(Vitessce, vitessceProps,
+                        (pageMode ? e(PageComponent, {}) : null)
+                    ),
                 ),
             ),
         );
@@ -379,6 +409,7 @@ def get_uid_str(uid):
         PluginViewType,
         PluginCoordinationType,
         PluginJointFileType,
+        PluginAsyncFunction,
         z,
         useCoordination,
         invokeCommand,
@@ -388,11 +419,32 @@ def get_uid_str(uid):
         pluginFileTypes: undefined,
         pluginCoordinationTypes: undefined,
         pluginJointFileTypes: undefined,
+        pluginAsyncFunctions: undefined,
     };
 }
 export default { createPlugins };
 """
 
+DEFAULT_PAGE_ESM = """
+function createPage(utilsForPage) {
+    const {
+        usePageModeView,
+    } = utilsForPage;
+
+    function PageComponent(props) {
+        const BiomarkerSelect = usePageModeView('biomarker-select');
+
+        return (
+            <div>
+                <BiomarkerSelect />
+            </div>
+        );
+    }
+    return PageComponent;
+}
+export default { createPage };
+"""
+
 
 class VitesscePlugin:
     """
@@ -437,10 +489,13 @@ class VitessceWidget(anywidget.AnyWidget):
     custom_js_url = Unicode('').tag(sync=True)
     plugin_esm = List(trait=Unicode(''), default_value=[]).tag(sync=True)
     remount_on_uid_change = Bool(True).tag(sync=True)
+    page_mode = Bool(False).tag(sync=True)
+    page_esm = Unicode('').tag(sync=True)
+
 
     store_urls = List(trait=Unicode(''), default_value=[]).tag(sync=True)
 
-    def __init__(self, config, height=600, theme='auto', uid=None, port=None, proxy=False, js_package_version='3.3.12', js_dev_mode=False, custom_js_url='', plugins=None, remount_on_uid_change=True):
+    def __init__(self, config, height=600, theme='auto', uid=None, port=None, proxy=False, js_package_version='3.3.12', js_dev_mode=False, custom_js_url='', plugins=None, remount_on_uid_change=True, page_mode=False, page_esm=None):
         """
         Construct a new Vitessce widget.
 
@@ -453,8 +508,10 @@ def __init__(self, config, height=600, theme='auto', uid=None, port=None, proxy=
         :param str js_package_version: The version of the NPM package ('vitessce' if not js_dev_mode else '@vitessce/dev').
         :param bool js_dev_mode: Should @vitessce/dev be used (typically for debugging purposes)? By default, False.
         :param str custom_js_url: A URL to a JavaScript file to use (instead of 'vitessce' or '@vitessce/dev' NPM package).
-        :param list[WidgetPlugin] plugins: A list of subclasses of VitesscePlugin. Optional.
+        :param list[VitesscePlugin] plugins: A list of subclasses of VitesscePlugin. Optional.
         :param bool remount_on_uid_change: Passed to the remountOnUidChange prop of the <Vitessce/> React component. By default, True.
+        :param bool page_mode: Whether to render the <Vitessce/> component in grid-mode or page-mode. By default, False.
+        :param str page_esm: The ES module string for the page component creation function. Optional.
 
         .. code-block:: python
             :emphasize-lines: 4
@@ -487,6 +544,7 @@ def __init__(self, config, height=600, theme='auto', uid=None, port=None, proxy=
             config=config_dict, height=height, theme=theme, proxy=proxy,
             js_package_version=js_package_version, js_dev_mode=js_dev_mode, custom_js_url=custom_js_url,
             plugin_esm=plugin_esm, remount_on_uid_change=remount_on_uid_change,
+            page_mode=page_mode, page_esm=('' if page_esm is None else page_esm),
             uid=uid_str, store_urls=list(self._stores.keys())
         )
 
@@ -550,9 +608,7 @@ def _plugin_command(self, params, buffers):
         return command_func(command_params, buffers)
 
 # Launch Vitessce using plain HTML representation (no ipywidgets)
-
-
-def ipython_display(config, height=600, theme='auto', base_url=None, host_name=None, uid=None, port=None, proxy=False, js_package_version='3.3.12', js_dev_mode=False, custom_js_url='', plugin_esm=DEFAULT_PLUGIN_ESM, remount_on_uid_change=True):
+def ipython_display(config, height=600, theme='auto', base_url=None, host_name=None, uid=None, port=None, proxy=False, js_package_version='3.3.12', js_dev_mode=False, custom_js_url='', plugins=None, remount_on_uid_change=True):
     from IPython.display import display, HTML
     uid_str = "vitessce" + get_uid_str(uid)
 
@@ -562,6 +618,9 @@ def ipython_display(config, height=600, theme='auto', base_url=None, host_name=N
     routes = config.get_routes()
     serve_routes(config, routes, use_port)
 
+    plugins = plugins or []
+    plugin_esm = [p.plugin_esm for p in plugins]
+
     model_vals = {
         "uid": uid_str,
         "js_package_version": js_package_version,