Backport PR jupyter-widgets#3370: 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

@@ -14,27 +14,38 @@ import $ from 'jquery';
 import '../css/output.css';
 
 export class OutputModel extends outputBase.OutputModel {
-    defaults() {
+    defaults(): Backbone.ObjectHash {
         return {
             ...super.defaults(),
-            msg_id: ''
+            msg_id: '',
+            outputs: [],
         };
     }
 
-    initialize(attributes: any, options: any) {
+    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() {
         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

@@ -205,4 +205,44 @@ describe('Output widget', function() {
         );
         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);
+    });
 });