Merge pull request #3370 from MrBago/html-ow-update

Allow Output widget in html manager to render state updates

Author: jasongrout

examples/web3/jupyter-logo.svg

@@ -1,14 +1,19 @@
 [
-  "from ipywidgets import IntSlider, Text, VBox",
-  "from IPython.display import display",
+  "from ipywidgets import IntSlider, Output, Text, VBox",
+  "from IPython.display import Image, display",
   "",
-  "s = IntSlider(max=200, value=100)",
-  "t = Text()",
+  "s = IntSlider(min=1, max=500, value=200, description='Width')",
+  "t = Text(description='Area', disabled=True)",
+  "o = Output()",
+  "display(VBox([s, t, o]))",
   "",
-  "def update_text(change=None):",
-  "    t.value = str(s.value ** 2)",
+  "def update(change=None):",
+  "    width = s.value",
+  "    t.value = str(width ** 2)",
+  "    o.outputs = ()",
+  "    img = Image(url='jupyter-logo.svg', width=width)",
+  "    o.append_display_data(img)",
   "",
-  "s.observe(update_text, names='value')",
-  "update_text()",
-  "display(VBox([s, t]))"
+  "s.observe(update, names='value')",
+  "update()"
 ]

examples/web3/widget_code.json

@@ -18,23 +18,34 @@ export class OutputModel extends outputBase.OutputModel {
     return {
       ...super.defaults(),
       msg_id: '',
+      outputs: [],
     };
   }
 
   initialize(attributes: any, options: any): void {
     super.initialize(attributes, options);
-    this._outputs = new OutputAreaModel({
-      values: attributes.outputs,
-      // Widgets (including this output widget) are only rendered in
-      // trusted contexts
-      trusted: true,
-    });
+    this._outputs = new OutputAreaModel({ trusted: true });
+    this.listenTo(this, 'change:outputs', this.setOutputs);
+    this.setOutputs();
   }
 
   get outputs(): OutputAreaModel {
     return this._outputs;
   }
 
+  clear_output(wait = false): void {
+    this._outputs.clear(wait);
+  }
+
+  setOutputs(model?: any, value?: any, options?: any): void {
+    if (!(options && options.newMessage)) {
+      // fromJSON does not clear the existing output
+      this.clear_output();
+      // fromJSON does not copy the message, so we make a deep copy
+      this._outputs.fromJSON(JSON.parse(JSON.stringify(this.get('outputs'))));
+    }
+  }
+
   private _outputs: OutputAreaModel;
   widget_manager: HTMLManager;
 }

packages/html-manager/src/output.ts

@@ -197,4 +197,44 @@ describe('Output widget', function () {
     await manager.display_view(manager.create_view(model), widgetTag);
     expect(widgetTag.innerText).to.equal('something different');
   });
+
+  it('renders text output', async () => {
+    const manager = new HTMLManager();
+    const modelId = 'u-u-i-d';
+    const modelCreate: base.IModelOptions = {
+      model_name: 'OutputModel',
+      model_id: modelId,
+      model_module: '@jupyter-widgets/output',
+      model_module_version: '*',
+    };
+
+    const startingText = 'starting text';
+    const endingText = 'ending text';
+    const modelState = {
+      _view_module: '@jupyter-widgets/output',
+      outputs: [
+        {
+          output_type: 'stream',
+          name: 'stdout',
+          text: startingText,
+        },
+      ],
+    };
+
+    const widgetTag = document.createElement('div');
+    widgetTag.className = 'widget-subarea';
+    document.body.appendChild(widgetTag);
+    const model = await manager.new_model(modelCreate, modelState);
+    await manager.display_view(manager.create_view(model), widgetTag);
+    expect(widgetTag.innerText).to.equal(startingText);
+
+    model.set('outputs', [
+      {
+        output_type: 'stream',
+        name: 'stdout',
+        text: endingText,
+      },
+    ]);
+    expect(widgetTag.innerText).to.equal(endingText);
+  });
 });