widgets: working on fully implementing clear output properly

Author: williamstein

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

@@ -222,7 +222,6 @@ export class WidgetManager {
   };
 
   private ipywidgets_state_BuffersChange = async (model_id: string) => {
-    log("handleBuffersChange: ", model_id);
     /*
     The data structures currently don't store which buffers changed, so we're
     updating all of them before, which is of course inefficient.
@@ -237,6 +236,7 @@ export class WidgetManager {
     const model = await this.manager.get_model(model_id);
     const { buffer_paths, buffers } =
       await this.ipywidgets_state.get_model_buffers(model_id);
+    log("handleBuffersChange: ", model_id, buffer_paths);
     const deserialized_state = model.get_state(true);
     const serializers = (model.constructor as any).serializers;
     const change: { [key: string]: any } = {};
@@ -245,10 +245,13 @@ export class WidgetManager {
       // Will that break something?  We do set things properly later.
       const buffer = buffers[i];
       const key = buffer_paths[i][0];
-      change[key] =
+      const value =
         serializers[key]?.serialize({ buffer, ...deserialized_state[key] }) ??
-        deserialized_state[key];
+        deserialized_state[key] ??
+        null; // must be null, not undefined, so can json.
+      change[key] = value;
     }
+    log("handleBuffersChange: ", model_id, change);
     model.set_state(change);
   };
 
@@ -543,7 +546,9 @@ class Environment implements WidgetEnvironment {
   async renderOutput(outputItem: any, destination: Element): Promise<void> {
     // the gaussian plume notebook has example of this!
     log("renderOutput", { outputItem, destination });
-    //$(destination).append($(`<pre>${JSON.stringify(outputItem)}</pre>`));
+    if (outputItem == null) {
+      return;
+    }
     const message = fromJS(outputItem);
     const myDiv = document.createElement("div");
     destination.appendChild(myDiv);

src/packages/sync/editor/generic/ipywidgets-state.ts

@@ -342,12 +342,13 @@ export class IpywidgetsState extends EventEmitter {
     type: "value" | "state" | "buffers" | "message",
     data: any,
     fire_change_event: boolean = true,
+    merge?: "none" | "shallow" | "deep",
   ): void => {
     const string_id = this.syncdoc.get_string_id();
     if (typeof data != "object") {
       throw Error("TypeError -- data must be a map");
     }
-    let merge: "none" | "shallow" | "deep";
+    let defaultMerge: "none" | "shallow" | "deep";
     if (type == "value") {
       // we manually do the shallow merge only on the data field.
       const data0 = this.get_model_value(model_id);
@@ -357,16 +358,19 @@ export class IpywidgetsState extends EventEmitter {
         }
         data = data0;
       }
-      merge = "none";
+      defaultMerge = "none";
     } else if (type == "buffers") {
       // we keep around the buffers that were
       // already set, but overwrite
       // when they change.
-      merge = "deep";
+      defaultMerge = "shallow";
     } else if (type == "message") {
-      merge = "none";
+      defaultMerge = "none";
     } else {
-      merge = "deep";
+      defaultMerge = "deep";
+    }
+    if (merge == null) {
+      merge = defaultMerge;
     }
     this.table.set(
       { string_id, type, model_id, data },
@@ -733,11 +737,12 @@ export class IpywidgetsState extends EventEmitter {
     if (model_id == null) return false; // should not happen.
 
     if (mesg.header.msg_type == "clear_output") {
-      if (mesg.content != null && mesg.content.wait) {
+      if (mesg.content?.wait) {
         this.clear_output[model_id] = true;
       } else {
         delete this.clear_output[model_id];
-        this.set_model_value(model_id, { outputs: [] });
+        this.clearOutputBuffers();
+        this.set_model_value(model_id, { outputs: null });
       }
       return true;
     }
@@ -747,9 +752,10 @@ export class IpywidgetsState extends EventEmitter {
       return false;
     }
 
-    let outputs: any[];
+    let outputs: any;
     if (this.clear_output[model_id]) {
       delete this.clear_output[model_id];
+      this.clearOutputBuffers();
       outputs = [];
     } else {
       outputs = this.get_model_value(model_id).outputs;
@@ -762,6 +768,29 @@ export class IpywidgetsState extends EventEmitter {
     return true;
   };
 
+  private clearOutputBuffers = () => {
+    // TODO: need to clear all output buffers.
+    /* Example where if you do not properly clear buffers, then broken output re-appears:
+
+import ipywidgets as widgets
+from IPython.display import YouTubeVideo
+out = widgets.Output(layout={'border': '1px solid black'})
+out.append_stdout('Output appended with append_stdout')
+out.append_display_data(YouTubeVideo('eWzY2nGfkXk'))
+out
+
+---
+
+out.clear_output()
+
+---
+
+with out:
+   print('hi')
+    */
+    // TODO!!!!
+  };
+
   private sendCustomMessage = async (
     model_id: string,
     message: object,