widgets: rewrite opencomm to use current upstream api instead of ancient colab widgets one

Author: williamstein

src/packages/frontend/jupyter/browser-actions.ts

@@ -471,15 +471,19 @@ export class JupyterActions extends JupyterActions0 {
   };
 
   send_comm_message_to_kernel = async ({
+    msg_id,
     comm_id,
     target_name,
     data,
   }: {
+    msg_id?: string;
     comm_id: string;
     target_name: string;
     data: any;
   }): Promise<string> => {
-    const msg_id = uuid();
+    if (!msg_id) {
+      msg_id = uuid();
+    }
     const msg = { msg_id, target_name, comm_id, data };
     await this.api_call("comm", msg);
     // console.log("send_comm_message_to_kernel", "sent", msg);

src/packages/frontend/jupyter/widgets/manager.ts

@@ -49,9 +49,6 @@ const MAX_DEREF_WAIT_MS = 1000 * 15;
 
 export type SendCommFunction = (string, data) => string;
 
-// v2 wip
-import { createWidgetManager, WidgetEnvironment, Comm } from "@cocalc/widgets";
-
 export class WidgetManager extends base.ManagerBase<HTMLElement> {
   public ipywidgets_state: IpywidgetsState;
   private setWidgetModelIdState: (
@@ -76,117 +73,6 @@ export class WidgetManager extends base.ManagerBase<HTMLElement> {
     this.init_ipywidgets_state();
   }
 
-  private _v2;
-  v2() {
-    if (this._v2 != null) {
-      return this._v2;
-    }
-    class Environment implements WidgetEnvironment {
-      private manager: WidgetManager;
-      constructor(manager) {
-        this.manager = manager;
-      }
-
-      async getModelState(modelId) {
-        const state = this.manager.ipywidgets_state.get_model_state(modelId);
-        if (!state) {
-          return undefined;
-        }
-        return {
-          modelName: state._model_name,
-          modelModule: state._model_module,
-          modelModuleVersion: state._model_module_version,
-          state,
-        };
-      }
-
-      async openCommChannel(
-        targetName: string,
-        data?: unknown,
-        buffers?: ArrayBuffer[],
-      ): Promise<Comm> {
-        console.log("openCommChannel", { targetName, data, buffers });
-        const comm = {
-          send(data: unknown, opts?: { buffers?: ArrayBuffer[] }) {
-            return new Promise<void>((resolve, _reject) => {
-              console.log("Data sent:", data, "With options:", opts);
-              resolve();
-            });
-          },
-
-          close() {
-            console.log("Connection closed");
-          },
-
-          get messages() {
-            const message = {
-              data: "Hello",
-              buffers: [new ArrayBuffer(8)],
-            };
-            return {
-              [Symbol.asyncIterator]: async function* () {
-                yield message;
-              },
-            };
-          },
-        };
-        return comm;
-      }
-
-      async renderOutput(
-        outputItem: unknown,
-        destination: Element,
-      ): Promise<void> {
-        console.log("renderOutput", { outputItem, destination });
-      }
-    }
-
-    const provider = new Environment(this);
-    const manager = createWidgetManager(provider);
-    this.manager = manager;
-
-    // not efficient -- just a proof of concept/
-    /*
-    this.ipywidgets_state.on("change", async (keys) => {
-      for (const key of keys) {
-        const [, model_id] = JSON.parse(key);
-        const state = this.ipywidgets_state.get_model_state(model_id);
-        await this.dereference_model_links(state);
-        const model = await manager.get_model(model_id);
-        console.log("updating rendering of ", model_id);
-        model.set_state(state);
-      }
-    });
-    */
-    this._v2 = manager;
-    return this._v2;
-    /*
-    from IPython.display import display, HTML; display(HTML('<div id="v2">widget here</div>'))
-
----
-
-    id = "c5cba2c1634b4b9c8b0a2dbed33af91a"
-    manager = y.cocalc_manager.v2()
-    await manager.render(id, $("#v2")[0]);
-    model = await manager.get_model(id)
-
-    // make changes to widget in cocalc, even from another browser...
-
-    state = y.cocalc_manager.ipywidgets_state.get_model_state(id)
-    await y.cocalc_manager.dereference_model_links(state)
-    model.set_state(state)
-
-    // this works when changing the v2 model to sync back, but how can we
-    // do this directly with ipywidgets_state instead?
-    cmodel = await y.cocalc_manager.get_model(id)
-    cmodel.set_state(model.get_state())
-
-    // maybe this?  yes this works, but you only see the change
-    // on another browser, which seems reasonable.
-    await y.cocalc_manager.handle_model_change(model)
-    */
-  }
-
   private async init_ipywidgets_state(): Promise<void> {
     if (this.ipywidgets_state.get_state() != "ready") {
       // wait until ready to use.

src/packages/frontend/jupyter/widgets/manager2.ts

@@ -5,13 +5,19 @@
 
 import * as base from "@jupyter-widgets/base";
 import { createWidgetManager, is_unpack_models } from "@cocalc/widgets";
-import type { WidgetEnvironment, Comm } from "@cocalc/widgets";
+import type {
+  WidgetEnvironment,
+  IClassicComm,
+  ICallbacks,
+  JSONValue,
+  JSONObject,
+} from "@cocalc/widgets";
 import {
   IpywidgetsState,
   ModelState,
 } from "@cocalc/sync/editor/generic/ipywidgets-state";
 import { once } from "@cocalc/util/async-utils";
-import { copy, is_array, is_object, len } from "@cocalc/util/misc";
+import { copy, is_array, is_object, len, uuid } from "@cocalc/util/misc";
 import { fromJS } from "immutable";
 import { CellOutputMessage } from "@cocalc/frontend/jupyter/output-messages/message";
 import React from "react";
@@ -459,41 +465,78 @@ export class WidgetManager {
     comm_id,
     target_name,
     data,
+    metadata,
     buffers,
   }: {
     comm_id: string;
     target_name: string;
-    data?: unknown;
+    data?: JSONValue;
+    metadata?: JSONValue;
     buffers?: ArrayBuffer[];
-  }): Promise<Comm> => {
-    log("openCommChannel", { comm_id, target_name, data, buffers });
+  }): Promise<IClassicComm> => {
+    log("openCommChannel", { comm_id, target_name, data, buffers, metadata });
     const { send_comm_message_to_kernel } = this.actions;
+
+    // TODO: we do not currently have anything at all that
+    // routes messages to this.
+    type Handler = (x: any) => void;
+    const messageHandlers: Handler[] = [];
+    const closeHandlers: Handler[] = [];
+
     const comm = {
-      async send(data: unknown, opts?: { buffers?: ArrayBuffer[] }) {
+      comm_id,
+
+      target_name,
+
+      open(
+        data: JSONValue,
+        callbacks?: ICallbacks,
+        metadata?: JSONObject,
+        buffers?: ArrayBuffer[] | ArrayBufferView[],
+      ): string {
+        log("comm.open", { data, callbacks, metadata, buffers });
+        throw Error("comm.open is not implemented");
+      },
+
+      send(
+        data: JSONValue,
+        callbacks?: ICallbacks,
+        metadata?: JSONObject,
+        buffers?: ArrayBuffer[] | ArrayBufferView[],
+      ): string {
         // TODO: buffers!  These need to get sent somehow.
-        log("comm.send", data, opts);
-        await send_comm_message_to_kernel({ comm_id, target_name, data });
+        log("comm.send", { data, buffers, metadata, callbacks });
+        const msg_id = uuid();
+        send_comm_message_to_kernel({ msg_id, comm_id, target_name, data });
+        return msg_id;
+      },
+
+      close(
+        data?: JSONValue,
+        callbacks?: ICallbacks,
+        metadata?: JSONObject,
+        buffers?: ArrayBuffer[] | ArrayBufferView[],
+      ): string {
+        log("comm.close", { data, callbacks, metadata, buffers });
+        throw Error("comm.close not implemented");
       },
 
-      close() {
-        // nothing to actually do (?)
-        log("Connection closed");
+      on_msg(callback: Handler): void {
+        log("comm.on_msg -- adding a handler");
+        messageHandlers.push(callback);
       },
 
-      get messages() {
-        // TODO:
-        log("comm.message: Not Implemented");
-        // upstream widgets handles these via
-        //   comm.on_msg(this._handle_comm_msg.bind(this));
-        // see ipywidgets/packages/base/src/widget.ts
-        return {
-          [Symbol.asyncIterator]: async function* () {},
-        };
+      on_close(callback: Handler): void {
+        log("comm.on_close -- adding a handler");
+        closeHandlers.push(callback);
       },
     };
 
-    if (data != null || buffers != null) {
-      await comm.send(data, { buffers });
+    if (data != null) {
+      // [ ] TODO: I think we need a flag so that this is a *create* comm message...
+      //     unless that just happens automatically.
+      // [ ] TODO: what about metadata?
+      await comm.send(data, undefined, undefined, buffers);
     }
     return comm;
   };
@@ -534,13 +577,9 @@ class Environment implements WidgetEnvironment {
     };
   }
 
-  async openCommChannel(
-    target_name: string,
-    data?: unknown,
-    buffers?: ArrayBuffer[],
-  ): Promise<Comm> {
-    log("Environment: openCommChannel", { target_name, data, buffers });
-    throw Error("Not implemented!");
+  async openCommChannel(opts) {
+    log("Environment: openCommChannel", opts);
+    return await this.manager.openCommChannel(opts);
   }
 
   async renderOutput(outputItem: any, destination: Element): Promise<void> {

src/packages/frontend/package.json

@@ -45,7 +45,7 @@
     "@cocalc/local-storage-lru": "^2.4.3",
     "@cocalc/sync": "workspace:*",
     "@cocalc/util": "workspace:*",
-    "@cocalc/widgets": "^1.0.4",
+    "@cocalc/widgets": "^1.1.0",
     "@cocalc/xpra-lz4": "^1.1.0",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",