Fix ipywidgets 7.7 incompatibility issue

Author: martinRenou

packages/voila/package.json

@@ -8,9 +8,9 @@
   "main": "lib/index.js",
   "browserslist": ">0.8%, not ie 11, not op_mini all, not dead",
   "dependencies": {
-    "@jupyter-widgets/base": "^4.0.0",
-    "@jupyter-widgets/controls": "^3.0.0",
-    "@jupyter-widgets/jupyterlab-manager": "^3.0.0",
+    "@jupyter-widgets/base": "^4.1.0",
+    "@jupyter-widgets/controls": "^3.1.0",
+    "@jupyter-widgets/jupyterlab-manager": "^3.1.0",
     "@jupyterlab/application": "^3.0.0",
     "@jupyterlab/apputils": "^3.0.0",
     "@jupyterlab/coreutils": "^5.0.0",

packages/voila/src/manager.ts

@@ -40,8 +40,6 @@ import { Widget } from '@lumino/widgets';
 
 import { requireLoader } from './loader';
 
-import { batchRateMap } from './utils';
-
 if (typeof window !== 'undefined' && typeof window.define !== 'undefined') {
   window.define('@jupyter-widgets/base', base);
   window.define('@jupyter-widgets/controls', controls);
@@ -98,7 +96,7 @@ export class WidgetManager extends JupyterLabManager {
   }
 
   async build_widgets(): Promise<void> {
-    const models = await this._build_models();
+    await this._loadFromKernel();
     const tags = document.body.querySelectorAll(
       'script[type="application/vnd.jupyter.widget-view+json"]'
     );
@@ -110,7 +108,7 @@ export class WidgetManager extends JupyterLabManager {
       try {
         const widgetViewObject = JSON.parse(viewtag.innerHTML);
         const { model_id } = widgetViewObject;
-        const model = models[model_id];
+        const model = await this.get_model(model_id);
         const widgetel = document.createElement('div');
         viewtag.parentElement.insertBefore(widgetel, viewtag);
         // TODO: fix typing
@@ -199,193 +197,5 @@ export class WidgetManager extends JupyterLabManager {
     });
   }
 
-  /**
-   * This is the implementation of building widgets models making use of the
-   * jupyter.widget.control comm channel
-   */
-  async _build_models(): Promise<{ [key: string]: base.WidgetModel }> {
-    const models: { [key: string]: base.WidgetModel } = {};
-    const commId = base.uuid();
-    const initComm = await this._create_comm(
-      'jupyter.widget.control',
-      commId,
-      { widgets: null },
-      { version: '1.0.0' }
-    );
-
-    // Fetch widget states
-    let data: any;
-    let buffers: any;
-    try {
-      await new Promise((resolve, reject) => {
-        initComm.on_msg(msg => {
-          data = msg['content']['data'];
-
-          if (data.method !== 'update_states') {
-            console.warn(`
-              Unknown ${data.method} message on the Control channel
-            `);
-            return;
-          }
-
-          buffers = (msg.buffers || []).map((b: any) => {
-            if (b instanceof DataView) {
-              return b;
-            } else {
-              return new DataView(b instanceof ArrayBuffer ? b : b.buffer);
-            }
-          });
-
-          resolve(null);
-        });
-
-        initComm.on_close(reject);
-
-        // Send a states request msg
-        initComm.send({ method: 'request_states' }, {});
-
-        // Reject if we didn't get a response in time
-        setTimeout(
-          () => reject('Control comm did not respond in time'),
-          CONTROL_COMM_TIMEOUT
-        );
-      });
-    } catch (error) {
-      console.warn(
-        'Failed to open "jupyter.widget.control" comm channel, fallback to slow fetching of widgets.',
-        error
-      );
-      // Fallback to the old implementation for old ipywidgets versions (<=7.6)
-      return this._build_models_slow();
-    }
-
-    initComm.close();
-
-    const states: any = data.states;
-
-    // Extract buffer paths
-    // Why do we have to do this? Is there another way?
-    const bufferPaths: any = {};
-    for (const bufferPath of data.buffer_paths) {
-      if (!bufferPaths[bufferPath[0]]) {
-        bufferPaths[bufferPath[0]] = [];
-      }
-      bufferPaths[bufferPath[0]].push(bufferPath.slice(1));
-    }
-
-    const widgetPromises: Promise<base.WidgetModel>[] = [];
-
-    // Start creating all widgets
-    for (const [widget_id, state] of Object.entries(states) as any) {
-      try {
-        const comm = await this._create_comm('jupyter.widget', widget_id);
-
-        // Put binary buffers
-        if (widget_id in bufferPaths) {
-          const nBuffers = bufferPaths[widget_id].length;
-          base.put_buffers(
-            state,
-            bufferPaths[widget_id],
-            buffers.splice(0, nBuffers)
-          );
-        }
-
-        const modelPromise = this.new_model(
-          {
-            model_name: state.model_name,
-            model_module: state.model_module,
-            model_module_version: state.model_module_version,
-            model_id: widget_id,
-            comm: comm
-          },
-          state.state
-        );
-        widgetPromises.push(modelPromise);
-      } catch (error) {
-        // Failed to create a widget model, we continue creating other models so that
-        // other widgets can render
-        console.error(error);
-      }
-    }
-
-    // Wait for widgets to be created
-    const widgets = await Promise.all(widgetPromises);
-    for (const model of widgets) {
-      models[model.model_id] = model;
-    }
-
-    return models;
-  }
-
-  /**
-   * This is the old implementation of building widgets models
-   * We keep it around for supporting old ipywidgets versions (<=7.6)
-   */
-  async _build_models_slow(): Promise<{ [key: string]: base.WidgetModel }> {
-    const comm_ids = await this._get_comm_info();
-    const models: { [key: string]: base.WidgetModel } = {};
-    /**
-     * For the classical notebook, iopub_msg_rate_limit=1000 (default)
-     * And for zmq, we are affected by the default ZMQ_SNDHWM setting of 1000
-     * See https://github.com/voila-dashboards/voila/issues/534 for a discussion
-     */
-    const maxMessagesInTransit = 100; // really save limit compared to ZMQ_SNDHWM
-    const maxMessagesPerSecond = 500; // lets be on the save side, in case the kernel sends more msg'es
-    const widgets_info = await Promise.all(
-      batchRateMap(
-        Object.keys(comm_ids),
-        async comm_id => {
-          const comm = await this._create_comm(this.comm_target_name, comm_id);
-          return this._update_comm(comm);
-        },
-        { room: maxMessagesInTransit, rate: maxMessagesPerSecond }
-      )
-    );
-
-    await Promise.all(
-      widgets_info.map(async widget_info => {
-        const state = (widget_info as any).msg.content.data.state;
-        try {
-          const modelPromise = this.new_model(
-            {
-              model_name: state._model_name,
-              model_module: state._model_module,
-              model_module_version: state._model_module_version,
-              comm: (widget_info as any).comm
-            },
-            state
-          );
-          const model = await modelPromise;
-          models[model.model_id] = model;
-        } catch (error) {
-          // Failed to create a widget model, we continue creating other models so that
-          // other widgets can render
-          console.error(error);
-        }
-      })
-    );
-    return models;
-  }
-
-  async _update_comm(
-    comm: base.IClassicComm
-  ): Promise<{ comm: base.IClassicComm; msg: any }> {
-    return new Promise((resolve, reject) => {
-      comm.on_msg(async msg => {
-        if (msg.content.data.buffer_paths) {
-          base.put_buffers(
-            msg.content.data.state,
-            msg.content.data.buffer_paths,
-            msg.buffers
-          );
-        }
-        if (msg.content.data.method === 'update') {
-          resolve({ comm: comm, msg: msg });
-        }
-      });
-      comm.send({ method: 'request_state' }, {});
-    });
-  }
-
   private _loader: (name: any, version: any) => Promise<any>;
 }