How to use @jupyter-widgets/output - 10 common examples

// This is mostly copied from
// https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/jupyterlab-manager/src/output.ts

import * as outputBase from '@jupyter-widgets/output';

import { DOMWidgetView, JupyterPhosphorWidget } from '@jupyter-widgets/base';

import { Panel } from '@phosphor/widgets';

import { OutputAreaModel, OutputArea } from '@jupyterlab/outputarea';

const OUTPUT_WIDGET_VERSION = outputBase.OUTPUT_WIDGET_VERSION;

export
class OutputModel extends outputBase.OutputModel {
    defaults() {
        return {
            ...super.defaults(),
            msg_id: ''
        };
    }

    initialize(attributes, options) {
        super.initialize(attributes, options)
        // The output area model is trusted since widgets are
        // only rendered in trusted contexts.
        this._outputs = new OutputAreaModel({trusted: true});
        this.listenTo(this, 'change:msg_id', this.onMsgIdChange);
        this.onMsgIdChange();
    }

// This is mostly copied from
// https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/jupyterlab-manager/src/output.ts

import * as outputBase from "@jupyter-widgets/output";

import { DOMWidgetView, JupyterPhosphorWidget } from "@jupyter-widgets/base";

import { Panel } from "@phosphor/widgets";

import { OutputAreaModel, OutputArea } from "@jupyterlab/outputarea";

const OUTPUT_WIDGET_VERSION = outputBase.OUTPUT_WIDGET_VERSION;

export class OutputModel extends outputBase.OutputModel {
  defaults() {
    return Object.assign({}, super.defaults(), {
      msg_id: "",
    });
  }

  initialize(attributes, options) {
    super.initialize(attributes, options);
    // The output area model is trusted since widgets are
    // only rendered in trusted contexts.
    this._outputs = new OutputAreaModel({ trusted: true });
    this.listenTo(this, "change:msg_id", this.onMsgIdChange);
    this.onMsgIdChange();
  }

  onMsgIdChange() {

// Distributed under the terms of the Modified BSD License.
"use strict";

// This widget is strongly coupled to the notebook because of the outputarea
// dependency.
var widgets = require("@jupyter-widgets/controls");
var outputBase = require("@jupyter-widgets/output");
var _ = require("underscore");
require('./widget_output.css');

var outputArea = new Promise(function(resolve, reject) {
        requirejs(["notebook/js/outputarea"], resolve, reject)
});

var OutputModel = outputBase.OutputModel.extend({
    defaults: _.extend({}, outputBase.OutputModel.prototype.defaults(), {
        msg_id: "",
        outputs: []
    }),

    initialize: function(attributes, options) {
        OutputModel.__super__.initialize.apply(this, arguments);
        this.listenTo(this, 'change:msg_id', this.reset_msg_id);

        if (this.comm && this.comm.kernel) {
            this.kernel = this.comm.kernel;
            this.kernel.set_callbacks_for_msg(this.model_id, this.callbacks(), false);
        }

        var that = this;
        // Create an output area to handle the data model part
        outputArea.then(function(outputArea) {

// https://github.com/jupyter-widgets/ipywidgets/blob/master/packages/jupyterlab-manager/src/output.ts

import * as outputBase from '@jupyter-widgets/output';

import { DOMWidgetView, JupyterPhosphorWidget } from '@jupyter-widgets/base';

import { Panel } from '@phosphor/widgets';

import { OutputAreaModel, OutputArea } from '@jupyterlab/outputarea';

import { renderMime } from './renderMime'

const OUTPUT_WIDGET_VERSION = outputBase.OUTPUT_WIDGET_VERSION;

export
class OutputModel extends outputBase.OutputModel {
    defaults() {
        return {
            ...super.defaults(),
            msg_id: ''
        };
    }

    initialize(attributes, options) {
        super.initialize(attributes, options)
        // The output area model is trusted since widgets are
        // only rendered in trusted contexts.
        this._outputs = new OutputAreaModel({trusted: true});
        this.listenTo(this, 'change:msg_id', this.onMsgIdChange);
        this.onMsgIdChange();
    }

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
"use strict";

// This widget is strongly coupled to the notebook because of the outputarea
// dependency.
var widgets = require("@jupyter-widgets/controls");
var outputBase = require("@jupyter-widgets/output");
var _ = require("underscore");
require('./widget_output.css');

var outputArea = new Promise(function(resolve, reject) {
        requirejs(["notebook/js/outputarea"], resolve, reject)
});

var OutputModel = outputBase.OutputModel.extend({
    defaults: _.extend({}, outputBase.OutputModel.prototype.defaults(), {
        msg_id: "",
        outputs: []
    }),

    initialize: function(attributes, options) {
        OutputModel.__super__.initialize.apply(this, arguments);
        this.listenTo(this, 'change:msg_id', this.reset_msg_id);

        if (this.comm && this.comm.kernel) {
            this.kernel = this.comm.kernel;
            this.kernel.set_callbacks_for_msg(this.model_id, this.callbacks(), false);
        }

        var that = this;
        // Create an output area to handle the data model part

// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.

import * as outputBase from '@jupyter-widgets/output';

import { Panel } from '@phosphor/widgets';

import { OutputAreaModel, OutputArea } from '@jupyterlab/outputarea';

import { HTMLManager } from './htmlmanager';

import $ from 'jquery';

import '../css/output.css';

export class OutputModel extends outputBase.OutputModel {
    defaults() {
        return {
            ...super.defaults(),
            msg_id: ''
        };
    }

    initialize(attributes: any, options: any) {
        super.initialize(attributes, options);
        this._outputs = new OutputAreaModel({
            values: attributes.outputs,
            // Widgets (including this output widget) are only rendered in
            // trusted contexts
            trusted: true,
        });
    }

import {
  nbformat
} from '@jupyterlab/coreutils';

import {
  KernelMessage, Session
} from '@jupyterlab/services';

import $ from 'jquery';

export
const OUTPUT_WIDGET_VERSION = outputBase.OUTPUT_WIDGET_VERSION;

export
class OutputModel extends outputBase.OutputModel {
  defaults() {
    return {...super.defaults(),
      msg_id: '',
      outputs: []
    };
  }

  initialize(attributes: any, options: any) {
    super.initialize(attributes, options);
    // The output area model is trusted since widgets are only rendered in trusted contexts.
    this._outputs = new OutputAreaModel({trusted: true});
    this._msgHook = (msg) => {
      this.add(msg);
      return false;
    };

*
     * This causes the view to be destroyed as well with 'remove'
     */
    dispose() {
        if (this.isDisposed) {
            return;
        }
        super.dispose();
        if (this._view) {
            this._view.remove();
        }
        this._view = null;
    }
}

export class OutputView extends outputBase.OutputView {

    _createElement(tagName) {
        this.pWidget = new Panel()
        return this.pWidget.node;
    }

    _setElement(el) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }

        this.el = this.pWidget.node;
    }

    /**

*
     * This causes the view to be destroyed as well with 'remove'
     */
    dispose() {
        if (this.isDisposed) {
            return;
        }
        super.dispose();
        if (this._view) {
            this._view.remove();
        }
        this._view = null;
    }
}

export class OutputView extends outputBase.OutputView {

    _createElement(tagName) {
        this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
        return this.pWidget.node;
    }

    _setElement(el) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }

        this.el = this.pWidget.node;
    }

    /**

dispose() {
        if (this.isDisposed) {
            return;
        }
        super.dispose();
        if (this._view) {
            this._view.remove();
        }
        this._view = null;
    }

    private _view: DOMWidgetView;
}

export
class OutputView extends outputBase.OutputView {

    _createElement(tagName: string) {
      this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
      return this.pWidget.node;
    }

    _setElement(el: HTMLElement) {
        if (this.el || el !== this.pWidget.node) {
            // Boxes don't allow setting the element beyond the initial creation.
            throw new Error('Cannot reset the DOM element.');
        }

        this.el = this.pWidget.node;
        this.$el = $(this.pWidget.node);
     }