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,61 @@
+/***************************************************************************
+ * 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 {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+const JUPYTER_WIDGETS_VERSION = '1.2.0';
+const JUPYTER_CONTROLS_VERSION = '1.5.0';
+
+/**
+ * The base widgets.
+ */
+export const baseWidgets7Plugin: JupyterFrontEndPlugin<void> = {
+  id: `@jupyter-widgets/jupyterlab-manager:base-${JUPYTER_WIDGETS_VERSION}`,
+  requires: [base.IJupyterWidgetRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    registry: base.IJupyterWidgetRegistry
+  ): void => {
+    registry.registerWidget({
+      name: '@jupyter-widgets/base',
+      version: JUPYTER_WIDGETS_VERSION,
+      exports: () => {
+        return require('@jupyter-widgets/base7') as any;
+      }
+    });
+  }
+};
+
+/**
+ * The control widgets.
+ */
+export const controlWidgets7Plugin: 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: () => {
+        const controlsWidgets = require('@jupyter-widgets/controls7') as any;
+        require('@jupyter-widgets/controls7/css/widgets-base.css');
+        return controlsWidgets;
+      }
+    });
+  }
+};

packages/voila/src/main.ts

@@ -14,6 +14,7 @@ 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 {
@@ -42,7 +43,10 @@ async function main() {
     require('@jupyter-widgets/jupyterlab-manager/lib/plugin').default.filter(
       (p: any) => p.id !== '@jupyter-widgets/jupyterlab-manager:plugin'
     ),
-    plugins
+    plugins,
+    // For backward compat with ipywidgets 7
+    baseWidgets7Plugin,
+    controlWidgets7Plugin
   ];
 
   if (shouldUseMathJax2()) {
@@ -85,6 +89,7 @@ async function main() {
     }
 
     const data = p.value;
+
     if (data.extension) {
       federatedExtensionPromises.push(createModule(data.name, data.extension));
     }

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/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",