WIP: cdn fallbacks

Author: keller-mark

src/vitessce/widget.py

@@ -156,16 +156,79 @@ def get_uid_str(uid):
 # lang: js
 ESM = """
 import { importWithMap } from 'https://unpkg.com/[email protected]';
+const successfulImportMap = {
+    imports: {
+
+    },
+};
 const importMap = {
   imports: {
     "react": "https://esm.sh/[email protected]?dev",
     "react-dom": "https://esm.sh/[email protected]?dev",
     "react-dom/client": "https://esm.sh/[email protected]/client?dev",
   },
 };
+const fallbackImportMap = {
+    imports: {
+        //"react": "https://cdn.vitessce.io/[email protected]/index.js",
+        //"react-dom": "https://cdn.vitessce.io/[email protected]/index.js",
+        //"react-dom/client": "https://cdn.vitessce.io/[email protected]/es2022/client.mjs",
+
+        // Replace with version-specific URL below.
+        "vitessce": "https://cdn.vitessce.io/[email protected]/dist/index.min.js",
+    },
+};
+/*
+const fallbackDevImportMap = {
+    imports: {
+        "react": "https://cdn.vitessce.io/[email protected]/index_dev.js",
+        "react-dom": "https://cdn.vitessce.io/[email protected]/index_dev.js",
+        "react-dom/client": "https://cdn.vitessce.io/[email protected]/es2022/client.development.mjs",
+        // Replace with version-specific URL below.
+        "vitessce": "https://cdn.vitessce.io/@vitessce/[email protected]/dist/index.js",
+    },
+};
+*/
+
+async function importWithMapAndFallback(moduleName, importMap, fallbackMap) {
+    console.log(`Importing ${moduleName} with import map`, importMap, fallbackMap);
+
+    let result = null;
+    if (!fallbackMap) {
+        // fallbackMap is null, user may have provided custom JS URL.
+        result = await importWithMap(moduleName, {
+            imports: {
+                ...importMap.imports,
+                ...successfulImportMap.imports,
+            },
+        });
+        successfulImportMap.imports[moduleName] = importMap.imports[moduleName];
+    } else {
+        try {
+            result = await importWithMap(moduleName, {
+                imports: {
+                    ...importMap.imports,
+                    ...successfulImportMap.imports,
+                },
+            });
+            successfulImportMap.imports[moduleName] = importMap.imports[moduleName];
+        } catch (e) {
+            console.warn(`Importing ${moduleName} failed with import map`, importMap, e);
+            result = await importWithMap(moduleName, {
+                imports: {
+                    ...fallbackMap.imports,
+                    ...successfulImportMap.imports,
+                },
+            });
+            successfulImportMap.imports[moduleName] = fallbackMap.imports[moduleName];
+        }
+    }
+    return result;
+}
 
-const React = await importWithMap("react", importMap);
-const { createRoot } = await importWithMap("react-dom/client", importMap);
+
+const React = await importWithMapAndFallback("react", importMap, fallbackImportMap);
+const { createRoot } = await importWithMapAndFallback("react-dom/client", importMap, fallbackImportMap);
 
 const e = React.createElement;
 
@@ -252,6 +315,7 @@ def get_uid_str(uid):
 }
 
 async function render(view) {
+    console.log("Rendering Vitessce widget...");
     const cssUid = view.model.get('uid');
     const jsDevMode = view.model.get('js_dev_mode');
     const jsPackageVersion = view.model.get('js_package_version');
@@ -268,10 +332,21 @@ def get_uid_str(uid):
 
     const pkgName = (jsDevMode ? "@vitessce/dev" : "vitessce");
 
-    importMap.imports["vitessce"] = (customJsUrl.length > 0
+    const hasCustomJsUrl = customJsUrl.length > 0;
+
+    importMap.imports["vitessce"] = (hasCustomJsUrl
         ? customJsUrl
         : `https://unpkg.com/${pkgName}@${jsPackageVersion}`
     );
+    let fallbackImportMapToUse = null;
+    if (!hasCustomJsUrl) {
+        fallbackImportMapToUse = fallbackImportMap;
+        if (jsDevMode) {
+            fallbackImportMapToUse.imports["vitessce"] = `https://cdn.vitessce.io/vitessce@${jsPackageVersion}/dist/index.min.js`;
+        } else {
+            fallbackImportMapToUse.imports["vitessce"] = `https://cdn.vitessce.io/@vitessce/dev@${jsPackageVersion}/dist/index.js`;
+        }
+    }
 
     const {
         Vitessce,
@@ -292,7 +367,7 @@ def get_uid_str(uid):
         useComplexCoordinationSecondary,
         useCoordinationScopes,
         useCoordinationScopesBy,
-    } = await importWithMap("vitessce", importMap);
+    } = await importWithMapAndFallback("vitessce", importMap, fallbackImportMapToUse);
 
     let pluginViewTypes = [];
     let pluginCoordinationTypes = [];
@@ -651,7 +726,7 @@ class VitessceWidget(anywidget.AnyWidget):
 
     next_port = DEFAULT_PORT
 
-    js_package_version = Unicode('3.8.3').tag(sync=True)
+    js_package_version = Unicode('3.8.5').tag(sync=True)
     js_dev_mode = Bool(False).tag(sync=True)
     custom_js_url = Unicode('').tag(sync=True)
     plugin_esm = List(trait=Unicode(''), default_value=[]).tag(sync=True)
@@ -664,7 +739,7 @@ class VitessceWidget(anywidget.AnyWidget):
 
     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.8.3', js_dev_mode=False, custom_js_url='', plugins=None, remount_on_uid_change=True, prefer_local=True, invoke_timeout=300000, invoke_batched=True, page_mode=False, page_esm=None, prevent_scroll=True, server_host=None):
+    def __init__(self, config, height=600, theme='auto', uid=None, port=None, proxy=False, js_package_version='3.8.5', js_dev_mode=False, custom_js_url='', plugins=None, remount_on_uid_change=True, prefer_local=True, invoke_timeout=300000, invoke_batched=True, page_mode=False, page_esm=None, prevent_scroll=True, server_host=None):
         """
         Construct a new Vitessce widget. Not intended to be instantiated directly; instead, use ``VitessceConfig.widget``.
 
@@ -798,7 +873,7 @@ def _plugin_command(self, 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.8.3', js_dev_mode=False, custom_js_url='', plugins=None, remount_on_uid_change=True, page_mode=False, page_esm=None, server_host=None):
+def ipython_display(config, height=600, theme='auto', base_url=None, host_name=None, uid=None, port=None, proxy=False, js_package_version='3.8.5', js_dev_mode=False, custom_js_url='', plugins=None, remount_on_uid_change=True, page_mode=False, page_esm=None, server_host=None):
     from IPython.display import display, HTML
     uid_str = "vitessce" + get_uid_str(uid)