Add backward compatibility for ipywidgets 7 (#1501)

* Widgets managers * Iterate * Iterate * Iterate * Something that compiles * Iterate * console in shared scope * Polling in shared scope * statedb in sharedscope * Iterate * Run linter * Iterate * Figure out from the server the widgets version that should be injected This has the downside of not letting the kernel decide the widgets version, which is a regression from Voila 0.4.x. But that should be fine. * Working solution with ipywidgets 7 * Linting * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * UI-tests with ipywidgets 7 * Try fixing ui-tests for 7 * Artifacts names * arf * Fix report name + output widget * Update artifacts names * Fix progressive rendering logic for ipywidgets 7 * Remove any * Linter * Add docs about the new labextensions path --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
voila-dashboards · Oct 18, 2024 · 5ad1b1d · 5ad1b1d
1 parent 6f45057
commit 5ad1b1d
Show file tree

Hide file tree

Showing 37 changed files with 3,564 additions and 2,644 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,7 +6,7 @@ node_modules
 **/node_modules
 **/mock_packages
 **/static
-**/labextension
+**/labextensions
 **/typings
 **/schemas
 **/themes

diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
@@ -14,6 +14,7 @@ jobs:
       matrix:
         jupyter-server-version: ['1.24.0', '2.14.2']
         progressive_rendering: [false, true]
+        ipywidgets: ['latest', '7']
         exclude:
           - jupyter-server-version: '1.24.0'
             progressive_rendering: true
@@ -25,6 +26,7 @@ jobs:
         uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
 
       - name: Install dependencies
+        if: ${{ matrix.ipywidgets == 'latest' }}
         run: |
           python -m pip install -r requirements-visual-test.txt
           python -m pip install jupyterlab_miami_nights --no-deps
@@ -36,6 +38,19 @@ jobs:
           cd ui-tests
           jlpm install
 
+      - 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]"
+          python -m pip install jupyter-server==${{ matrix.jupyter-server-version }}
+          jlpm
+          jlpm build
+          jupyter labextension develop . --overwrite
+          cd ui-tests
+          jlpm install
+
       - name: Launch Voila
         run: |
           # Mount a volume to overwrite the server configuration
@@ -61,16 +76,16 @@ jobs:
       - name: Set test report name for progressive rendering
         if: always() && matrix.progressive_rendering == true
         run: |
-          echo "TEST_REPORT_NAME=progressive-voila-test-report-${{ matrix.jupyter-server-version }}" >> $GITHUB_ENV
-          echo "TEST_ASSETS_NAME=progressive-voila-test-assets-${{ matrix.jupyter-server-version }}" >> $GITHUB_ENV
-          echo "TEST_BENCHMARK_NAME=progressive-voila-test-benchmark-${{ matrix.jupyter-server-version }}" >> $GITHUB_ENV
+          echo "TEST_REPORT_NAME=progressive-voila-test-report-server_${{ matrix.jupyter-server-version }}-ipywidget_${{ matrix.ipywidgets }}" >> $GITHUB_ENV
+          echo "TEST_ASSETS_NAME=progressive-voila-test-assets-server_${{ matrix.jupyter-server-version }}-ipywidget_${{ matrix.ipywidgets }}" >> $GITHUB_ENV
+          echo "TEST_BENCHMARK_NAME=progressive-voila-test-benchmark-server_${{ matrix.jupyter-server-version }}-ipywidget_${{ matrix.ipywidgets }}" >> $GITHUB_ENV
 
       - name: Set test report name for non-progressive rendering
         if: always() && matrix.progressive_rendering == false
         run: |
-          echo "TEST_REPORT_NAME=voila-test-report-${{ matrix.jupyter-server-version }}" >> $GITHUB_ENV
-          echo "TEST_ASSETS_NAME=voila-test-assets-${{ matrix.jupyter-server-version }}" >> $GITHUB_ENV
-          echo "TEST_BENCHMARK_NAME=voila-test-benchmark-${{ matrix.jupyter-server-version }}" >> $GITHUB_ENV
+          echo "TEST_REPORT_NAME=voila-test-report-server_${{ matrix.jupyter-server-version }}-ipywidget_${{ matrix.ipywidgets }}" >> $GITHUB_ENV
+          echo "TEST_ASSETS_NAME=voila-test-assets-server_${{ matrix.jupyter-server-version }}-ipywidget_${{ matrix.ipywidgets }}" >> $GITHUB_ENV
+          echo "TEST_BENCHMARK_NAME=voila-test-benchmark-server_${{ matrix.jupyter-server-version }}-ipywidget_${{ matrix.ipywidgets }}" >> $GITHUB_ENV
 
       - name: Upload Playwright Test assets
         if: always()

diff --git a/.gitignore b/.gitignore
@@ -44,7 +44,7 @@ share/jupyter/voila/templates/base/static/*.LICENSE.txt
 
 lib
 
-voila/labextension
+voila/labextensions
 tsconfig.tsbuildinfo
 
 ui-tests/playwright-report

diff --git a/.prettierignore b/.prettierignore
@@ -2,7 +2,7 @@ node_modules
 **/node_modules
 **/lib
 **/package.json
-**/labextension
+**/labextensions
 **/static
 build
 notebooks/

diff --git a/docs/customize.md b/docs/customize.md
@@ -759,3 +759,12 @@ or using `voila.json` file
 :::{warning}
 Progressive rendering mode is incompatible with the preheated kernels functionality.
 :::
+
+## Custom labextension for Voila
+
+Since Voila 0.5.0, it can now load JupyterLab extensions. Allowing to load custom mimetype extensions, JupyterLab themes etc.
+
+Voila will load all extensions under `{PREFIX}/share/jupyter/labextensions` just like JupyterLab and Jupyter Notebook v7.
+
+It also has its own path for labextensions that you can use: `{PREFIX}/share/jupyter/voila/labextensions`. Installing extensions there will make those extensions only available to Voila. This is really useful if you
+don't want to pollute JupyterLab or Jupyter Notebook with extensions that only work for Voila.
diff --git a/package.json b/package.json
@@ -45,5 +45,133 @@
     "prettier": "^2.8.6",
     "rimraf": "^3.0.2",
     "shell-quote": "^1.7.2"
+  },
+  "resolutions": {
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/view": "^6.9.6",
+    "@jupyter/react-components": "^0.15.3",
+    "@jupyter/web-components": "^0.15.3",
+    "@jupyter/ydoc": "^2.0.1",
+    "@jupyterlab/application": "~4.2.5",
+    "@jupyterlab/application-extension": "~4.2.5",
+    "@jupyterlab/apputils": "~4.3.5",
+    "@jupyterlab/apputils-extension": "~4.2.5",
+    "@jupyterlab/attachments": "~4.2.5",
+    "@jupyterlab/cell-toolbar": "~4.2.5",
+    "@jupyterlab/cell-toolbar-extension": "~4.2.5",
+    "@jupyterlab/cells": "~4.2.5",
+    "@jupyterlab/celltags-extension": "~4.2.5",
+    "@jupyterlab/codeeditor": "~4.2.5",
+    "@jupyterlab/codemirror": "~4.2.5",
+    "@jupyterlab/codemirror-extension": "~4.2.5",
+    "@jupyterlab/completer": "~4.2.5",
+    "@jupyterlab/completer-extension": "~4.2.5",
+    "@jupyterlab/console": "~4.2.5",
+    "@jupyterlab/console-extension": "~4.2.5",
+    "@jupyterlab/coreutils": "~6.2.5",
+    "@jupyterlab/csvviewer": "~4.2.5",
+    "@jupyterlab/csvviewer-extension": "~4.2.5",
+    "@jupyterlab/debugger": "~4.2.5",
+    "@jupyterlab/debugger-extension": "~4.2.5",
+    "@jupyterlab/docmanager": "~4.2.5",
+    "@jupyterlab/docmanager-extension": "~4.2.5",
+    "@jupyterlab/docregistry": "~4.2.5",
+    "@jupyterlab/documentsearch": "~4.2.5",
+    "@jupyterlab/documentsearch-extension": "~4.2.5",
+    "@jupyterlab/extensionmanager": "~4.2.5",
+    "@jupyterlab/extensionmanager-extension": "~4.2.5",
+    "@jupyterlab/filebrowser": "~4.2.5",
+    "@jupyterlab/filebrowser-extension": "~4.2.5",
+    "@jupyterlab/fileeditor": "~4.2.5",
+    "@jupyterlab/fileeditor-extension": "~4.2.5",
+    "@jupyterlab/help-extension": "~4.2.5",
+    "@jupyterlab/htmlviewer": "~4.2.5",
+    "@jupyterlab/htmlviewer-extension": "~4.2.5",
+    "@jupyterlab/hub-extension": "~4.2.5",
+    "@jupyterlab/imageviewer": "~4.2.5",
+    "@jupyterlab/imageviewer-extension": "~4.2.5",
+    "@jupyterlab/inspector": "~4.2.5",
+    "@jupyterlab/inspector-extension": "~4.2.5",
+    "@jupyterlab/javascript-extension": "~4.2.5",
+    "@jupyterlab/json-extension": "~4.2.5",
+    "@jupyterlab/launcher": "~4.2.5",
+    "@jupyterlab/launcher-extension": "~4.2.5",
+    "@jupyterlab/logconsole": "~4.2.5",
+    "@jupyterlab/logconsole-extension": "~4.2.5",
+    "@jupyterlab/lsp": "~4.2.5",
+    "@jupyterlab/lsp-extension": "~4.2.5",
+    "@jupyterlab/mainmenu": "~4.2.5",
+    "@jupyterlab/mainmenu-extension": "~4.2.5",
+    "@jupyterlab/markdownviewer": "~4.2.5",
+    "@jupyterlab/markdownviewer-extension": "~4.2.5",
+    "@jupyterlab/markedparser-extension": "~4.2.5",
+    "@jupyterlab/mathjax-extension": "~4.2.5",
+    "@jupyterlab/mermaid": "~4.2.5",
+    "@jupyterlab/mermaid-extension": "~4.2.5",
+    "@jupyterlab/metadataform": "~4.2.5",
+    "@jupyterlab/metadataform-extension": "~4.2.5",
+    "@jupyterlab/metapackage": "~4.2.5",
+    "@jupyterlab/nbconvert-css": "~4.2.5",
+    "@jupyterlab/nbformat": "~4.2.5",
+    "@jupyterlab/notebook": "~4.2.5",
+    "@jupyterlab/notebook-extension": "~4.2.5",
+    "@jupyterlab/observables": "~5.2.5",
+    "@jupyterlab/outputarea": "~4.2.5",
+    "@jupyterlab/pdf-extension": "~4.2.5",
+    "@jupyterlab/pluginmanager": "~4.2.5",
+    "@jupyterlab/pluginmanager-extension": "~4.2.5",
+    "@jupyterlab/property-inspector": "~4.2.5",
+    "@jupyterlab/rendermime": "~4.2.5",
+    "@jupyterlab/rendermime-extension": "~4.2.5",
+    "@jupyterlab/rendermime-interfaces": "~3.10.5",
+    "@jupyterlab/running": "~4.2.5",
+    "@jupyterlab/running-extension": "~4.2.5",
+    "@jupyterlab/services": "~7.2.5",
+    "@jupyterlab/settingeditor": "~4.2.5",
+    "@jupyterlab/settingeditor-extension": "~4.2.5",
+    "@jupyterlab/settingregistry": "~4.2.5",
+    "@jupyterlab/shortcuts-extension": "~5.0.5",
+    "@jupyterlab/statedb": "~4.2.5",
+    "@jupyterlab/statusbar": "~4.2.5",
+    "@jupyterlab/statusbar-extension": "~4.2.5",
+    "@jupyterlab/terminal": "~4.2.5",
+    "@jupyterlab/terminal-extension": "~4.2.5",
+    "@jupyterlab/theme-dark-extension": "~4.2.5",
+    "@jupyterlab/theme-dark-high-contrast-extension": "~4.2.5",
+    "@jupyterlab/theme-light-extension": "~4.2.5",
+    "@jupyterlab/toc": "~6.2.5",
+    "@jupyterlab/toc-extension": "~6.2.5",
+    "@jupyterlab/tooltip": "~4.2.5",
+    "@jupyterlab/tooltip-extension": "~4.2.5",
+    "@jupyterlab/translation": "~4.2.5",
+    "@jupyterlab/translation-extension": "~4.2.5",
+    "@jupyterlab/ui-components": "~4.2.5",
+    "@jupyterlab/ui-components-extension": "~4.2.5",
+    "@jupyterlab/vega5-extension": "~4.2.5",
+    "@jupyterlab/workspaces": "~4.2.5",
+    "@jupyterlab/workspaces-extension": "~4.2.5",
+    "@lezer/common": "^1.0.0",
+    "@lezer/highlight": "^1.0.0",
+    "@lumino/algorithm": "^2.0.0",
+    "@lumino/application": "^2.3.0-alpha.0",
+    "@lumino/commands": "^2.0.1",
+    "@lumino/coreutils": "^2.0.0",
+    "@lumino/datagrid": "^2.3.0-alpha.0",
+    "@lumino/disposable": "^2.0.0",
+    "@lumino/domutils": "^2.0.0",
+    "@lumino/dragdrop": "^2.0.0",
+    "@lumino/keyboard": "^2.0.0",
+    "@lumino/messaging": "^2.0.0",
+    "@lumino/polling": "^2.0.0",
+    "@lumino/properties": "^2.0.0",
+    "@lumino/signaling": "^2.0.0",
+    "@lumino/virtualdom": "^2.0.0",
+    "@lumino/widgets": "^2.3.1-alpha.0",
+    "@microsoft/fast-element": "^1.12.0",
+    "@microsoft/fast-foundation": "^2.49.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "yjs": "^13.5.40"
   }
 }
diff --git a/packages/jupyterlab-preview/package.json b/packages/jupyterlab-preview/package.json
@@ -38,7 +38,7 @@
     "build:prod": "jlpm run build:lib && jlpm run build:labextension",
     "build:test": "tsc --build tsconfig.test.json",
     "clean": "jlpm run clean:lib && jlpm run clean:labextension",
-    "clean:labextension": "rimraf ../../voila/labextension",
+    "clean:labextension": "rimraf ../../voila/labextensions/jupyterlab-preview",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "test": "jest",
     "watch": "run-p watch:src watch:labextension",
@@ -75,7 +75,7 @@
   "jupyterlab": {
     "extension": true,
     "schemaDir": "schema",
-    "outputDir": "../../voila/labextension",
+    "outputDir": "../../voila/labextensions/jupyterlab-preview",
     "discovery": {
       "server": {
         "managers": [

diff --git a/packages/voila/package.json b/packages/voila/package.json
@@ -11,13 +11,13 @@
   },
   "browserslist": ">0.8%, not ie 11, not op_mini all, not dead",
   "dependencies": {
-    "@jupyter-widgets/base": "^6.0.10",
-    "@jupyter-widgets/jupyterlab-manager": "^5.0.13",
+    "@voila-dashboards/widgets-manager8": "^0.5.7",
     "@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.2.5",
     "@jupyterlab/coreutils": "^6.0.0",
     "@jupyterlab/docregistry": "^4.0.0",
     "@jupyterlab/javascript-extension": "^4.0.0",
@@ -34,6 +34,7 @@
     "@jupyterlab/rendermime-extension": "^4.0.0",
     "@jupyterlab/services": "^7.0.0",
     "@jupyterlab/settingregistry": "^4.0.0",
+    "@jupyterlab/statedb": "^4.2.5",
     "@jupyterlab/theme-dark-extension": "^4.0.2",
     "@jupyterlab/theme-light-extension": "^4.0.2",
     "@jupyterlab/translation": "^4.0.0",
@@ -47,6 +48,7 @@
     "@lumino/domutils": "^2.0.0",
     "@lumino/dragdrop": "^2.0.0",
     "@lumino/messaging": "^2.0.0",
+    "@lumino/polling": "^2.1.3",
     "@lumino/properties": "^2.0.0",
     "@lumino/signaling": "^2.0.0",
     "@lumino/virtualdom": "^2.0.0",

diff --git a/packages/voila/src/app.ts b/packages/voila/src/app.ts
@@ -10,10 +10,12 @@ import { PageConfig } from '@jupyterlab/coreutils';
 
 import { IRenderMime } from '@jupyterlab/rendermime';
 
-import { VoilaWidgetManager } from './plugins/widget';
-
 import { IShell, VoilaShell } from './shell';
 
+// Only import the type, it is important to not import the library at runtime
+// to not pollute the shared packages with widgets related things
+import { type VoilaWidgetManager } from '@voila-dashboards/widgets-manager8/lib/manager';
+
 const PACKAGE = require('../package.json');
 
 /**

diff --git a/packages/voila/src/index.ts b/packages/voila/src/index.ts
@@ -14,4 +14,4 @@ export * from './tools';
 export * from './plugins/tree/browser';
 export * from './plugins/tree/listing';
 export * from './plugins/themes/thememanager';
-export * from './plugins/widget/renderedcells';
+export * from './plugins/outputs/renderedcells';
diff --git a/packages/voila/src/main.ts b/packages/voila/src/main.ts
@@ -39,9 +39,6 @@ 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'
-    ),
     plugins
   ];
 
@@ -104,7 +101,9 @@ async function main() {
   );
   federatedExtensions.forEach((p) => {
     if (p.status === 'fulfilled') {
-      for (const plugin of activePlugins(p.value, [])) {
+      for (const plugin of activePlugins(p.value, [
+        '@jupyter-widgets/jupyterlab-manager:plugin'
+      ])) {
         mods.push(plugin);
       }
     } else {

diff --git a/packages/voila/src/plugins/outputs/index.ts b/packages/voila/src/plugins/outputs/index.ts
@@ -0,0 +1,6 @@
+import {
+  renderOutputsPlugin,
+  renderOutputsProgressivelyPlugin
+} from './plugins';
+
+export { renderOutputsPlugin, renderOutputsProgressivelyPlugin };