Separate jupyter widgets manager extension

.github/workflows/build.yml

@@ -36,6 +36,7 @@ jobs:
 
       - name: Browser check
         run: |
+          npx playwright install
           python -m jupyterlab.browser_check
 
       - name: Lint

.github/workflows/ui-tests.yml

@@ -9,7 +9,7 @@ jobs:
     strategy:
       matrix:
         python-version: [3.8]
-        node-version: [16.x]
+        node-version: [17.x]
       fail-fast: false
 
     steps:

.gitignore

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

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": [

packages/voila/package.json

@@ -7,7 +7,6 @@
   "main": "lib/index.js",
   "browserslist": ">0.8%, not ie 11, not op_mini all, not dead",
   "dependencies": {
-    "@jupyter-widgets/base": "^6.0.6",
     "@jupyter-widgets/jupyterlab-manager": "^5.0.9",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
@@ -18,7 +17,7 @@
     "@jupyterlab/docregistry": "^4.0.0",
     "@jupyterlab/javascript-extension": "^4.0.0",
     "@jupyterlab/json-extension": "^4.0.0",
-    "@jupyterlab/logconsole": "^4.0.0",
+    "@jupyterlab/logconsole": "^4.0.5",
     "@jupyterlab/mainmenu": "^4.0.0",
     "@jupyterlab/markdownviewer-extension": "^4.0.0",
     "@jupyterlab/markedparser-extension": "^4.0.0",
@@ -43,6 +42,7 @@
     "@lumino/domutils": "^2.0.0",
     "@lumino/dragdrop": "^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",

packages/voila/src/index.ts

@@ -9,7 +9,7 @@
 
 export * from './app';
 export * from './shell';
-export * from './voilaplugins';
+export * from './plugins';
 export * from './tools';
 export * from './plugins/tree/browser';
 export * from './plugins/tree/listing';

packages/voila/src/main.ts

@@ -13,7 +13,7 @@ import './sharedscope';
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 
 import { VoilaApp } from './app';
-import plugins from './voilaplugins';
+import plugins from './plugins';
 import { VoilaServiceManager } from './services/servicemanager';
 import { VoilaShell } from './shell';
 import {
@@ -23,7 +23,7 @@ import {
   loadComponent
 } from './tools';
 
-//Inspired by: https://github.com/jupyterlab/jupyterlab/blob/master/dev_mode/index.js
+// Inspired by: https://github.com/jupyterlab/jupyterlab/blob/master/dev_mode/index.js
 
 const disabled = [
   '@jupyter-widgets/jupyterlab-manager:plugin',
@@ -137,6 +137,7 @@ async function main() {
   });
   app.registerPluginModules(mods);
   await app.start();
+
   window.jupyterapp = app;
 }
 

packages/voila/src/voilaplugins.ts → packages/voila/src/plugins/index.ts

@@ -8,18 +8,17 @@
  ****************************************************************************/
 
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
-import { pathsPlugin } from './plugins/path';
-import { translatorPlugin } from './plugins/translator';
-import { renderOutputsPlugin, widgetManager } from './plugins/widget';
-import { themePlugin, themesManagerPlugin } from './plugins/themes';
+import { pathsPlugin } from './path';
+import { translatorPlugin } from './translator';
+import { renderOutputsPlugin } from './outputs_rendering';
+import { themePlugin, themesManagerPlugin } from './themes';
 
 /**
  * Export the plugins as default.
  */
 const plugins: JupyterFrontEndPlugin<any>[] = [
   pathsPlugin,
   translatorPlugin,
-  widgetManager,
   renderOutputsPlugin,
   themesManagerPlugin,
   themePlugin
@@ -30,7 +29,6 @@ export default plugins;
 export {
   pathsPlugin,
   translatorPlugin,
-  widgetManager,
   renderOutputsPlugin,
   themesManagerPlugin,
   themePlugin

packages/voila/src/plugins/outputs_rendering.ts

@@ -0,0 +1,73 @@
+/***************************************************************************
+ * Copyright (c) 2018, Voilà contributors                                   *
+ * Copyright (c) 2018, QuantStack                                           *
+ *                                                                          *
+ * Distributed under the terms of the BSD 3-Clause License.                 *
+ *                                                                          *
+ * The full license is in the file LICENSE, distributed with this software. *
+ ****************************************************************************/
+
+import {
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+
+import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+
+import { Widget } from '@lumino/widgets';
+
+/**
+ * The plugin that renders outputs.
+ */
+export const renderOutputsPlugin: JupyterFrontEndPlugin<void> = {
+  id: '@voila-dashboards/voila:render-outputs',
+  autoStart: true,
+  requires: [IRenderMimeRegistry],
+  activate: (app: JupyterFrontEnd, rendermime: IRenderMimeRegistry): void => {
+    // This "app.started.then" is a trick to make sure we render the output only when all plugins are loaded
+    // Not using await here because we want this function to return immediately
+    // Otherwise it prevents the application to start and resolve the "started" promise...
+    app.started.then(() => {
+      // Render outputs
+      const cellOutputs = document.body.querySelectorAll(
+        'script[type="application/vnd.voila.cell-output+json"]'
+      );
+      cellOutputs.forEach(async (cellOutput) => {
+        const model = JSON.parse(cellOutput.innerHTML);
+
+        const mimeType = rendermime.preferredMimeType(model.data, 'any');
+
+        if (!mimeType) {
+          return null;
+        }
+        const output = rendermime.createRenderer(mimeType);
+        output.renderModel(model).catch((error) => {
+          // Manually append error message to output
+          const pre = document.createElement('pre');
+          pre.textContent = `Javascript Error: ${error.message}`;
+          output.node.appendChild(pre);
+
+          // Remove mime-type-specific CSS classes
+          pre.className = 'lm-Widget jp-RenderedText';
+          pre.setAttribute('data-mime-type', 'application/vnd.jupyter.stderr');
+        });
+
+        output.addClass('jp-OutputArea-output');
+
+        if (cellOutput.parentElement) {
+          const container = cellOutput.parentElement;
+
+          container.removeChild(cellOutput);
+
+          // Attach output
+          Widget.attach(output, container);
+        }
+      });
+      const node = document.getElementById('rendered_cells');
+      if (node) {
+        const cells = new Widget({ node });
+        app.shell.add(cells, 'main');
+      }
+    });
+  }
+};

packages/voila/src/sharedscope.ts

@@ -1,3 +1,11 @@
+import '@jupyterlab/application';
+import '@jupyterlab/coreutils';
+import '@jupyterlab/rendermime';
+import '@jupyterlab/services';
+import '@jupyterlab/statedb';
+import '@jupyterlab/notebook';
+import '@jupyterlab/mainmenu';
+import '@jupyterlab/logconsole';
 import '@lumino/algorithm';
 import '@lumino/application';
 import '@lumino/coreutils';

packages/voila/src/tree.ts

@@ -22,9 +22,8 @@ import {
   pathsPlugin,
   themePlugin,
   themesManagerPlugin,
-  translatorPlugin,
-  widgetManager
-} from './voilaplugins';
+  translatorPlugin
+} from './plugins';
 
 export const TREE_DISABLED_EXTENSIONS = [
   '@jupyter-widgets/jupyterlab-manager:plugin',
@@ -45,7 +44,6 @@ async function main() {
     pathsPlugin,
     translatorPlugin,
     themePlugin,
-    widgetManager,
     themesManagerPlugin,
     treeWidgetPlugin
   ];