widgets: refactoring and cleanup -- doesn't fix anything

Author: williamstein

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

@@ -38,7 +38,8 @@ export function IpyWidget({ value, actions }: WidgetProps) {
       // console.log("IpyWidget: not rendering due to actions=null");
       return;
     }
-    if (divRef.current == null) {
+    const div = divRef.current;
+    if (div == null) {
       // console.log("IpyWidget: not rendering due to divRef.current=null");
       return;
     }
@@ -60,27 +61,7 @@ export function IpyWidget({ value, actions }: WidgetProps) {
       // console.log("IpyWidget: not rendering due to manager not being set");
       return;
     }
-    try {
-      manager.render(id, divRef.current);
-
-      // HACK: because upstream ipywidgets only checks for  MathJax.Hub to be defined then
-      // crashes on load -- they don't see this bug because user has to explicitly re-evaluate
-      // code to see anything on page refresh, due to all state being on the frontend.
-      // @ts-ignore
-      if (window.MathJax != null && window.MathJax.Hub == null) {
-        // @ts-ignore
-        MathJax.Hub.Queue = () => {};
-      }
-      setTimeout(() => {
-        // Run mathjax on labels:   widgets.HBox([widgets.Label(value="The $m$ in $E=mc^2$:"), widgets.FloatSlider()])
-        // @ts-ignore
-        $(divRef.current).find(".widget-label").katex?.({ preProcess: true });
-        // @ts-ignore
-        $(divRef.current).find(".widget-htmlmath").katex?.({ preProcess: true });
-      }, 0);
-    } catch (err) {
-      console.warn(err);
-    }
+    render({ manager, id, div });
   }, []);
 
   if (unknown) {
@@ -99,3 +80,27 @@ export function IpyWidget({ value, actions }: WidgetProps) {
     </div>
   );
 }
+
+async function render({ manager, id, div }) {
+  try {
+    await manager.render(id, div);
+
+    // HACK: because upstream ipywidgets only checks for  MathJax.Hub to be defined then
+    // crashes on load -- they don't see this bug because user has to explicitly re-evaluate
+    // code to see anything on page refresh, due to all state being on the frontend.
+    // @ts-ignore
+    if (window.MathJax != null && window.MathJax.Hub == null) {
+      // @ts-ignore
+      MathJax.Hub.Queue = () => {};
+    }
+    setTimeout(() => {
+      // @ts-ignore
+      const elt = $(div) as any;
+      // Run mathjax on labels:   widgets.HBox([widgets.Label(value="The $m$ in $E=mc^2$:"), widgets.FloatSlider()])
+      elt.find(".widget-label").katex?.({ preProcess: true });
+      elt.find(".widget-htmlmath").katex?.({ preProcess: true });
+    }, 0);
+  } catch (err) {
+    console.error("Error Rendering Widget:", err);
+  }
+}

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

@@ -16,7 +16,6 @@ import * as react_output from "./output";
 import * as react_controls from "./controls";
 import { size } from "lodash";
 import { delay } from "awaiting";
-import * as k3d from "./k3d";
 
 /*
 NOTES: Third party custom widgets:
@@ -592,7 +591,7 @@ export class WidgetManager extends base.ManagerBase<HTMLElement> {
     } else if (moduleName === "k3d") {
       // NOTE: I completely rewrote the entire k3d widget interface, since
       // it made tons of assumptions that break RTC.
-      module = k3d;
+      module = await import('k3d');
     } else if (moduleName === "jupyter-matplotlib") {
       //module = await import("jupyter-matplotlib");
       throw Error(`custom widgets: ${moduleName} not installed`);

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

@@ -69,10 +69,8 @@ export class WidgetManager {
     if (this.ipywidgets_state.get_state() != "ready") {
       return;
     }
-    log("initAllModels");
     for (const { model_id, type } of this.ipywidgets_state.keys()) {
       if (type == "state") {
-        log("initAllModels", model_id);
         (async () => {
           try {
             await this.manager.get_model(model_id);
@@ -258,12 +256,13 @@ export class WidgetManager {
     */
     const { buffer_paths, buffers } =
       await this.ipywidgets_state.get_model_buffers(model_id);
-    log("handleBuffersChange: ", { model_id, buffer_paths, buffers });
     if (buffer_paths.length == 0) {
       return;
     }
+    log("handleBuffersChange: ", { model_id, buffer_paths, buffers });
     const state = this.ipywidgets_state.get_model_state(model_id);
     if (state == null) {
+      log("handleBuffersChange: no state data", { model_id });
       return;
     }
     const change: { [key: string]: any } = {};
@@ -272,11 +271,15 @@ export class WidgetManager {
       setInObject(state, buffer_paths[i], buffers[i]);
       change[key] = state[key];
     }
-    log("handleBuffersChange: ", model_id, { change });
     if (len(change) > 0) {
       const model = await this.manager.get_model(model_id);
+      const deserializedChange = await this.deserializeState(model, change);
+      log("handleBuffersChange: settings ", model_id, {
+        change,
+        deserializedChange,
+      });
       try {
-        model.set(change);
+        model.set(deserializedChange);
       } catch (err) {
         // window.y = { model_id, model, change, buffer_paths, buffers };
         console.error("saved to y", err);
@@ -490,7 +493,7 @@ export class WidgetManager {
     comm_id,
     target_name,
     data,
-    metadata,
+    metadata: _metadata,
     buffers,
   }: {
     comm_id: string;
@@ -499,7 +502,7 @@ export class WidgetManager {
     metadata?: JSONValue;
     buffers?: ArrayBuffer[];
   }): Promise<IClassicComm> => {
-    log("openCommChannel", { comm_id, target_name, data, buffers, metadata });
+    // 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
@@ -585,7 +588,7 @@ class Environment implements WidgetEnvironment {
     }
   }
 
-  async getModelState(model_id) {
+  async getSerializedModelState(model_id) {
     // log("getModelState", model_id);
     if (this.manager.ipywidgets_state.get_state() != "ready") {
       await once(this.manager.ipywidgets_state, "ready");
@@ -608,6 +611,7 @@ class Environment implements WidgetEnvironment {
           model_id,
           "k3d: waiting for state.type to be defined",
         );
+
         await once(this.manager.ipywidgets_state, "change");
         state = this.manager.ipywidgets_state.get_model_state(model_id);
       }
@@ -631,9 +635,9 @@ class Environment implements WidgetEnvironment {
         setInObject(state, buffer_paths[i], buffer);
       }
     }
-    setTimeout(() => this.manager.watchModel(model_id), 1);
 
     log("getModelState", { model_id, state });
+    setTimeout(() => this.manager.watchModel(model_id), 1);
     return {
       modelName: state._model_name,
       modelModule: state._model_module,

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.1.1",
+    "@cocalc/widgets": "^1.1.2",
     "@cocalc/xpra-lz4": "^1.1.0",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",