diff --git a/examples/web3/jupyter-logo.svg b/examples/web3/jupyter-logo.svg new file mode 100644 index 0000000000..ab25508743 --- /dev/null +++ b/examples/web3/jupyter-logo.svg @@ -0,0 +1,90 @@ + +Group.svg +Created using Figma 0.90 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/web3/widget_code.json b/examples/web3/widget_code.json index f9afddd000..a059b97166 100644 --- a/examples/web3/widget_code.json +++ b/examples/web3/widget_code.json @@ -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()" ] diff --git a/packages/html-manager/src/output.ts b/packages/html-manager/src/output.ts index 961b972fa1..3a732c72b4 100644 --- a/packages/html-manager/src/output.ts +++ b/packages/html-manager/src/output.ts @@ -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; } diff --git a/packages/html-manager/test/src/output_test.ts b/packages/html-manager/test/src/output_test.ts index 2679b3262d..f5ac1d7707 100644 --- a/packages/html-manager/test/src/output_test.ts +++ b/packages/html-manager/test/src/output_test.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); + }); });