ipywidgets 7 support

.github/workflows/ui-tests.yml

@@ -8,8 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: [3.8]
-        node-version: [18.x]
+        ipywidgets: [7, 8]
       fail-fast: false
 
     steps:
@@ -18,10 +17,21 @@ jobs:
         uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
 
       - name: Install dependencies
+        if: ${{ matrix.ipywidgets  == 7 }}
+        run: |
+          python -m pip install -r requirements-visual-test.txt
+          python -m pip install jupyterlab_miami_nights --no-deps
+          python -m pip install ".[test7]"
+
+      - name: Install dependencies
+        if: ${{ matrix.ipywidgets  == 8 }}
         run: |
           python -m pip install -r requirements-visual-test.txt
           python -m pip install jupyterlab_miami_nights --no-deps
           python -m pip install ".[test]"
+
+      - name: Build voila
+        run: |
           jlpm
           jlpm build
           jupyter labextension develop . --overwrite

packages/voila/package.json

@@ -12,12 +12,15 @@
   "browserslist": ">0.8%, not ie 11, not op_mini all, not dead",
   "dependencies": {
     "@jupyter-widgets/base": "^6.0.6",
+    "@jupyter-widgets/base7": "npm:@jupyter-widgets/[email protected]",
+    "@jupyter-widgets/controls7": "npm:@jupyter-widgets/[email protected]",
     "@jupyter-widgets/jupyterlab-manager": "^5.0.9",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
     "@jupyterlab/apputils-extension": "^4.0.0",
     "@jupyterlab/codemirror": "^4.0.3",
     "@jupyterlab/codemirror-extension": "^4.0.0",
+    "@jupyterlab/console": "^4.0.0",
     "@jupyterlab/coreutils": "^6.0.0",
     "@jupyterlab/docregistry": "^4.0.0",
     "@jupyterlab/javascript-extension": "^4.0.0",

packages/voila/src/ipywidgets7.ts

@@ -0,0 +1,77 @@
+/***************************************************************************
+ * Copyright (c) 2024, Voilà contributors                                   *
+ * Copyright (c) 2024, QuantStack                                           *
+ *                                                                          *
+ * Distributed under the terms of the BSD 3-Clause License.                 *
+ *                                                                          *
+ * The full license is in the file LICENSE, distributed with this software. *
+ ****************************************************************************/
+
+import * as base from '@jupyter-widgets/base';
+import * as base7 from '@jupyter-widgets/base7';
+import { JUPYTER_CONTROLS_VERSION as JUPYTER_CONTROLS7_VERSION } from '@jupyter-widgets/controls7/lib/version';
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+/**
+ * The base widgets.
+ */
+export const baseWidgets7Plugin: JupyterFrontEndPlugin<void> = {
+  id: `@jupyter-widgets/jupyterlab-manager:base-${base7.JUPYTER_WIDGETS_VERSION}`,
+  requires: [base.IJupyterWidgetRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    registry: base.IJupyterWidgetRegistry
+  ): void => {
+    registry.registerWidget({
+      name: '@jupyter-widgets/base',
+      version: base7.JUPYTER_WIDGETS_VERSION,
+      exports: {
+        WidgetModel: base7.WidgetModel as any,
+        WidgetView: base7.WidgetView as any,
+        DOMWidgetView: base7.DOMWidgetView as any,
+        DOMWidgetModel: base7.DOMWidgetModel as any,
+        LayoutModel: base7.LayoutModel as any,
+        LayoutView: base7.LayoutView as any,
+        StyleModel: base7.StyleModel as any,
+        StyleView: base7.StyleView as any
+      }
+    });
+  }
+};
+
+/**
+ * The control widgets.
+ */
+export const controlWidgets7Plugin: JupyterFrontEndPlugin<void> = {
+  id: `@jupyter-widgets/jupyterlab-manager:controls-${JUPYTER_CONTROLS7_VERSION}`,
+  requires: [base.IJupyterWidgetRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    registry: base.IJupyterWidgetRegistry
+  ): void => {
+    registry.registerWidget({
+      name: '@jupyter-widgets/controls',
+      version: JUPYTER_CONTROLS7_VERSION,
+      exports: () => {
+        return new Promise((resolve, reject) => {
+          (require as any).ensure(
+            ['@jupyter-widgets/controls7'],
+            (require: NodeRequire) => {
+              // eslint-disable-next-line @typescript-eslint/no-var-requires
+              resolve(require('@jupyter-widgets/controls7'));
+            },
+            (err: any) => {
+              reject(err);
+            },
+            '@jupyter-widgets/controls7'
+          );
+        });
+      }
+    });
+  }
+};

packages/voila/src/ipywidgets8.ts

@@ -0,0 +1,76 @@
+/***************************************************************************
+ * Copyright (c) 2024, Voilà contributors                                   *
+ * Copyright (c) 2024, QuantStack                                           *
+ *                                                                          *
+ * Distributed under the terms of the BSD 3-Clause License.                 *
+ *                                                                          *
+ * The full license is in the file LICENSE, distributed with this software. *
+ ****************************************************************************/
+
+import * as base from '@jupyter-widgets/base';
+import { JUPYTER_CONTROLS_VERSION } from '@jupyter-widgets/controls/lib/version';
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+/**
+ * The base widgets.
+ */
+export const baseWidgets8Plugin: JupyterFrontEndPlugin<void> = {
+  id: `@jupyter-widgets/jupyterlab-manager:base-${base.JUPYTER_WIDGETS_VERSION}`,
+  requires: [base.IJupyterWidgetRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    registry: base.IJupyterWidgetRegistry
+  ): void => {
+    registry.registerWidget({
+      name: '@jupyter-widgets/base',
+      version: base.JUPYTER_WIDGETS_VERSION,
+      exports: {
+        WidgetModel: base.WidgetModel as any,
+        WidgetView: base.WidgetView as any,
+        DOMWidgetView: base.DOMWidgetView as any,
+        DOMWidgetModel: base.DOMWidgetModel as any,
+        LayoutModel: base.LayoutModel as any,
+        LayoutView: base.LayoutView as any,
+        StyleModel: base.StyleModel as any,
+        StyleView: base.StyleView as any
+      }
+    });
+  }
+};
+
+/**
+ * The control widgets.
+ */
+export const controlWidgets8Plugin: JupyterFrontEndPlugin<void> = {
+  id: `@jupyter-widgets/jupyterlab-manager:controls-${JUPYTER_CONTROLS_VERSION}`,
+  requires: [base.IJupyterWidgetRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    registry: base.IJupyterWidgetRegistry
+  ): void => {
+    registry.registerWidget({
+      name: '@jupyter-widgets/controls',
+      version: JUPYTER_CONTROLS_VERSION,
+      exports: () => {
+        return new Promise((resolve, reject) => {
+          (require as any).ensure(
+            ['@jupyter-widgets/controls'],
+            (require: NodeRequire) => {
+              // eslint-disable-next-line @typescript-eslint/no-var-requires
+              resolve(require('@jupyter-widgets/controls'));
+            },
+            (err: any) => {
+              reject(err);
+            },
+            '@jupyter-widgets/controls'
+          );
+        });
+      }
+    });
+  }
+};

packages/voila/src/main.ts

@@ -14,15 +14,19 @@ import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 
 import { VoilaApp } from './app';
 import plugins from './voilaplugins';
+import { baseWidgets7Plugin, controlWidgets7Plugin } from './ipywidgets7';
 import { VoilaServiceManager } from './services/servicemanager';
 import { VoilaShell } from './shell';
 import {
   IFederatedExtensionData,
   activePlugins,
   createModule,
+  isIpywidgets7extension,
+  isIpywidgets8extension,
   loadComponent,
   shouldUseMathJax2
 } from './tools';
+import { baseWidgets8Plugin, controlWidgets8Plugin } from './ipywidgets8';
 
 //Inspired by: https://github.com/jupyterlab/jupyterlab/blob/master/dev_mode/index.js
 
@@ -39,9 +43,9 @@ async function main() {
     require('@jupyterlab/rendermime-extension'),
     require('@jupyterlab/theme-light-extension'),
     require('@jupyterlab/theme-dark-extension'),
-    require('@jupyter-widgets/jupyterlab-manager/lib/plugin').default.filter(
-      (p: any) => p.id !== '@jupyter-widgets/jupyterlab-manager:plugin'
-    ),
+    // require('@jupyter-widgets/jupyterlab-manager/lib/plugin').default.filter(
+    //   (p: any) => p.id !== '@jupyter-widgets/jupyterlab-manager:plugin'
+    // ),
     plugins
   ];
 
@@ -85,6 +89,7 @@ async function main() {
     }
 
     const data = p.value;
+
     if (data.extension) {
       federatedExtensionPromises.push(createModule(data.name, data.extension));
     }
@@ -104,7 +109,23 @@ async function main() {
   );
   federatedExtensions.forEach((p) => {
     if (p.status === 'fulfilled') {
-      for (const plugin of activePlugins(p.value, [])) {
+      const plugins = p.value;
+
+      // Special case for ipywidgets
+      if (isIpywidgets7extension(plugins)) {
+        mods.push(baseWidgets7Plugin);
+        mods.push(controlWidgets7Plugin);
+
+        return;
+      }
+      if (isIpywidgets8extension(plugins)) {
+        mods.push(baseWidgets8Plugin);
+        mods.push(controlWidgets8Plugin);
+
+        return;
+      }
+
+      for (const plugin of activePlugins(plugins, [])) {
         mods.push(plugin);
       }
     } else {

packages/voila/src/sharedscope.ts

@@ -1,3 +1,7 @@
+// Ideally we would remove this but the ipywidgets labextension requires it
+import '@jupyterlab/notebook';
+import '@jupyterlab/console';
+
 import '@lumino/algorithm';
 import '@lumino/application';
 import '@lumino/coreutils';

packages/voila/src/tools.ts

@@ -38,6 +38,48 @@ export async function createModule(
   }
 }
 
+export function isIpywidgets7extension(extension: any) {
+  // Handle commonjs or es2015 modules
+  let exports;
+  if (Object.prototype.hasOwnProperty.call(extension, '__esModule')) {
+    exports = extension.default;
+  } else {
+    // CommonJS exports.
+    exports = extension;
+  }
+
+  const plugins = Array.isArray(exports) ? exports : [exports];
+  const pluginIds = plugins.map((plugin) => {
+    return plugin.id;
+  });
+
+  return (
+    pluginIds.includes('@jupyter-widgets/jupyterlab-manager:plugin') &&
+    pluginIds.length === 1
+  );
+}
+
+export function isIpywidgets8extension(extension: any) {
+  // Handle commonjs or es2015 modules
+  let exports;
+  if (Object.prototype.hasOwnProperty.call(extension, '__esModule')) {
+    exports = extension.default;
+  } else {
+    // CommonJS exports.
+    exports = extension;
+  }
+
+  const plugins = Array.isArray(exports) ? exports : [exports];
+  const pluginIds = plugins.map((plugin) => {
+    return plugin.id;
+  });
+
+  return (
+    pluginIds.includes('@jupyter-widgets/jupyterlab-manager:plugin') &&
+    pluginIds.length !== 1
+  );
+}
+
 /**
  * Iterate over active plugins in an extension.
  *

packages/voila/webpack.config.js

@@ -69,6 +69,20 @@ const distRoot = path.resolve(
   'static'
 );
 
+const shared = {};
+for (const dependency of Object.keys(data.dependencies)) {
+  // TODO Why can we not share those?
+  if (
+    ['@jupyter-widgets/base7', '@jupyter-widgets/controls7'].includes(
+      dependency
+    )
+  ) {
+    continue;
+  }
+
+  shared[dependency] = data.dependencies[dependency];
+}
+
 module.exports = [
   merge(baseConfig, {
     mode: 'development',
@@ -95,9 +109,7 @@ module.exports = [
           name: ['_JUPYTERLAB', 'CORE_LIBRARY_FEDERATION']
         },
         name: 'CORE_FEDERATION',
-        shared: {
-          ...data.dependencies
-        }
+        shared
       })
     ],
     resolve: {

pyproject.toml

@@ -68,6 +68,16 @@ test = [
     "pytest",
     "pytest-tornasync",
 ]
+test7 = [
+    "ipykernel",
+    "ipywidgets==7.8.2",
+    "matplotlib",
+    "numpy",
+    "pandas",
+    "papermill",
+    "pytest",
+    "pytest-tornasync",
+]
 docs = [
     "myst-parser",
     "pydata-sphinx-theme",

voila/utils.py

@@ -118,7 +118,6 @@ def get_page_config(base_url, settings, log, voila_configuration: VoilaConfigura
     disabled_extensions = [
         "@voila-dashboards/jupyterlab-preview",
         "@jupyter/collaboration-extension",
-        "@jupyter-widgets/jupyterlab-manager",
     ]
     disabled_extensions.extend(page_config.get("disabledExtensions", []))
     required_extensions = []