widgets: setup comm for all widgets that get created

- this is needed, e.g., to handle on_click for buttons, and makes it so
  they now work
- the target_name is critical to set or the comm messages get silently
  ignored, though they used to be seen in ipywidgets 7.x.

Author: williamstein

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

@@ -470,13 +470,19 @@ export class JupyterActions extends JupyterActions0 {
     this.deprecated("command", name);
   };
 
-  send_comm_message_to_kernel = async (
-    comm_id: string,
-    data: any,
-  ): Promise<string> => {
+  send_comm_message_to_kernel = async ({
+    comm_id,
+    target_name,
+    data,
+  }: {
+    comm_id: string;
+    target_name: string;
+    data: any;
+  }): Promise<string> => {
     const msg_id = uuid();
-    await this.api_call("comm", [msg_id, comm_id, data]);
-    console.log("send_comm_message_to_kernel", "sent", [msg_id, comm_id, data]);
+    const msg = { msg_id, target_name, comm_id, data };
+    await this.api_call("comm", msg);
+    // console.log("send_comm_message_to_kernel", "sent", msg);
     return msg_id;
   };
 

src/packages/frontend/jupyter/output-messages/widget.tsx

@@ -259,7 +259,11 @@ export const Widget: React.FC<WidgetProps> = React.memo(
       view.current.send = (content) => {
         if (!is_mounted.current || actions == null) return;
         const data = { method: "custom", content };
-        actions.send_comm_message_to_kernel(model_id, data);
+        actions.send_comm_message_to_kernel({
+          comm_id: model_id,
+          data,
+          target_name: "jupyter.widget",
+        });
       };
     }
 

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

@@ -135,6 +135,14 @@ export class WidgetManager {
       return;
     }
     const state = await this.deserializeState(model, changed);
+    if (state.hasOwnProperty("outputs") && state["outputs"] == null) {
+      // It can definitely be 'undefined' but set, e.g., the 'out.clear_output()' example at
+      // https://ipywidgets.readthedocs.io/en/latest/examples/Output%20Widget.html
+      // causes this, which then totally breaks rendering (due to how the
+      // upstream widget manager works).  This works around that.
+      state["outputs"] = [];
+    }
+
     log("set_state", state);
     model.set_state(state);
   };
@@ -265,10 +273,23 @@ export class WidgetManager {
     if (this.watching.has(model_id)) {
       return;
     }
-    const model = await this.manager.get_model(model_id);
-    model.on("change", this.handleModelChange);
+    // do this before anything else async, or we could end up watching it more
+    // than once at a time.
     this.watching.add(model_id);
+    const model = await this.manager.get_model(model_id);
     this.last_changed[model_id] = { last_changed: 0 };
+    model.on("change", this.handleModelChange);
+
+    // Also, setup comm channel.
+    const comm = await this.openCommChannel({
+      comm_id: model_id,
+      target_name: "jupyter.widget",
+    });
+    model.comm = comm;
+    model.comm_live = true;
+    // TODO: we need to setup handling comm messages from
+    // the kernel, which should call model._handle_comm_msg.
+    // See ipywidgets/packages/base/src/widget.ts
   };
 
   // handleModelChange is called when an ipywidgets model changes.
@@ -430,6 +451,49 @@ export class WidgetManager {
     // log("dereferenceModelLinks", "AFTER (success)", state);
     return true;
   };
+
+  openCommChannel = async ({
+    comm_id,
+    target_name,
+    data,
+    buffers,
+  }: {
+    comm_id: string;
+    target_name: string;
+    data?: unknown;
+    buffers?: ArrayBuffer[];
+  }): Promise<Comm> => {
+    log("openCommChannel", { comm_id, target_name, data, buffers });
+    const { send_comm_message_to_kernel } = this.actions;
+    const comm = {
+      async send(data: unknown, opts?: { buffers?: ArrayBuffer[] }) {
+        // TODO: buffers!  These need to get sent somehow.
+        log("comm.send", data, opts);
+        await send_comm_message_to_kernel({ comm_id, target_name, data });
+      },
+
+      close() {
+        // nothing to actually do (?)
+        log("Connection closed");
+      },
+
+      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* () {},
+        };
+      },
+    };
+
+    if (data != null || buffers != null) {
+      await comm.send(data, { buffers });
+    }
+    return comm;
+  };
 }
 
 class Environment implements WidgetEnvironment {
@@ -451,6 +515,13 @@ class Environment implements WidgetEnvironment {
         state = this.manager.ipywidgets_state.get_model_state(model_id);
       }
     }
+    if (state.hasOwnProperty("outputs") && state["outputs"] == null) {
+      // It can definitely be 'undefined' but set, e.g., the 'out.clear_output()' example at
+      // https://ipywidgets.readthedocs.io/en/latest/examples/Output%20Widget.html
+      // causes this, which then totally breaks rendering (due to how the
+      // upstream widget manager works).  This works around that.
+      state["outputs"] = [];
+    }
     setTimeout(() => this.manager.watchModel(model_id), 1);
     return {
       modelName: state._model_name,
@@ -461,37 +532,12 @@ class Environment implements WidgetEnvironment {
   }
 
   async openCommChannel(
-    targetName: string,
+    target_name: string,
     data?: unknown,
     buffers?: ArrayBuffer[],
   ): Promise<Comm> {
-    log("openCommChannel", { targetName, data, buffers });
-    const { send_comm_message_to_kernel } = this.manager.actions;
-    const comm = {
-      async send(data: unknown, opts?: { buffers?: ArrayBuffer[] }) {
-        // TODO: buffers!  These need to get encoded separately (?).
-        log("comm.send -- (todo: buffers)", data, opts);
-        await send_comm_message_to_kernel(targetName, data);
-      },
-
-      close() {
-        log("Connection closed");
-      },
-
-      get messages() {
-        //         const message = {
-        //           data: "Hello",
-        //           buffers: [new ArrayBuffer(8)],
-        //         };
-        return {
-          [Symbol.asyncIterator]: async function* () {
-            //yield message;
-          },
-        };
-      },
-    };
-    await comm.send(data, { buffers });
-    return comm;
+    log("Environment: openCommChannel", { target_name, data, buffers });
+    throw Error("Not implemented!");
   }
 
   async renderOutput(outputItem: any, destination: Element): Promise<void> {

src/packages/jupyter/kernel/kernel.ts

@@ -990,18 +990,24 @@ class JupyterKernel extends EventEmitter implements JupyterKernelInterface {
     );
   }
 
-  public send_comm_message_to_kernel(
-    msg_id: string,
-    comm_id: string,
-    data: any,
-  ): void {
+  public send_comm_message_to_kernel({
+    msg_id,
+    comm_id,
+    target_name,
+    data,
+  }: {
+    msg_id: string;
+    comm_id: string;
+    target_name: string;
+    data: any;
+  }): void {
     const dbg = this.dbg("send_comm_message_to_kernel");
 
     const message = {
       parent_header: {},
       metadata: {},
       channel: "shell",
-      content: { comm_id, data },
+      content: { comm_id, target_name, data },
       header: {
         msg_id,
         username: "user",

src/packages/jupyter/kernel/websocket-api.ts

@@ -78,8 +78,7 @@ export async function handleApiRequest(
         return {};
       }
     case "comm":
-      const [msg_id, comm_id, data] = query;
-      return kernel.send_comm_message_to_kernel(msg_id, comm_id, data);
+      return kernel.send_comm_message_to_kernel(query);
     default:
       throw Error(`unknown endpoint "${endpoint}"`);
   }

src/packages/jupyter/redux/project-actions.ts

@@ -1336,11 +1336,12 @@ export class JupyterActions extends JupyterActions0 {
       if (type === "value") {
         const state = this.syncdb.ipywidgets_state.get_model_value(model_id);
         data = { method: "update", state };
-        this.jupyter_kernel.send_comm_message_to_kernel(
-          misc.uuid(),
-          model_id,
+        this.jupyter_kernel.send_comm_message_to_kernel({
+          msg_id: misc.uuid(),
+          target_name: "jupyter.widget",
+          comm_id: model_id,
           data,
-        );
+        });
       } else if (type === "buffers") {
         // TODO: we will implement this soon.  A good example where this is required
         // is by the file upload widget:

src/packages/jupyter/types/project-interface.ts

@@ -60,7 +60,7 @@ export interface Message {
 // which case value not in doc and sent via different channel).
 export type StdinFunction = (
   prompt: string,
-  password: boolean
+  password: boolean,
 ) => Promise<string>;
 
 export interface ExecOpts {
@@ -141,12 +141,17 @@ export interface JupyterKernelInterface extends EventEmitterInterface {
   nbconvert(args: string[], timeout?: number): Promise<void>;
   load_attachment(path: string): Promise<string>;
   process_attachment(base64, mime): string | undefined;
-  send_comm_message_to_kernel(msg_id: string, comm_id: string, data: any): void;
+  send_comm_message_to_kernel(msg: {
+    msg_id: string;
+    comm_id: string;
+    target_name: string;
+    data: any;
+  }): void;
   get_connection_file(): string | undefined;
 
   _execute_code_queue: CodeExecutionEmitterInterface[];
   clear_execute_code_queue(): void;
-  _process_execute_code_queue(): Promise<void>
+  _process_execute_code_queue(): Promise<void>;
 
   chdir(path: string): Promise<void>;
   ensure_running(): Promise<void>;