How to use @jupyterlab/outputarea - 10 common examples

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();
    }

render() {
        super.render();
        this._outputView = new OutputArea({
            rendermime: renderMime,
            contentFactory: OutputArea.defaultContentFactory,
            model: this.model.outputs
        });
        this.pWidget.insertWidget(0, this._outputView);

        this.pWidget.addClass('jupyter-widgets');
        this.pWidget.addClass('widget-output');
        this.update(); // Set defaults.
    }

constructor(options: CodeCell.IOptions) {
    super(options);
    this.addClass(CODE_CELL_CLASS);

    // Only save options not handled by parent constructor.
    let rendermime = (this._rendermime = options.rendermime);
    let contentFactory = this.contentFactory;
    let model = this.model;

    // Insert the output before the cell footer.
    let outputWrapper = (this._outputWrapper = new Panel());
    outputWrapper.addClass(CELL_OUTPUT_WRAPPER_CLASS);
    let outputCollapser = new OutputCollapser();
    outputCollapser.addClass(CELL_OUTPUT_COLLAPSER_CLASS);
    let output = (this._output = new OutputArea({
      model: model.outputs,
      rendermime,
      contentFactory: contentFactory
    }));
    output.addClass(CELL_OUTPUT_AREA_CLASS);
    // Set a CSS if there are no outputs, and connect a signal for future
    // changes to the number of outputs. This is for conditional styling
    // if there are no outputs.
    if (model.outputs.length === 0) {
      this.addClass(NO_OUTPUTS_CLASS);
    }
    output.outputLengthChanged.connect(this._outputLengthHandler, this);
    outputWrapper.addWidget(outputCollapser);
    outputWrapper.addWidget(output);
    (this.layout as PanelLayout).insertWidget(2, outputWrapper);

constructor(options: CodeCell.IOptions) {
    super(options);
    this.addClass(CODE_CELL_CLASS);

    // Only save options not handled by parent constructor.
    let rendermime = (this._rendermime = options.rendermime);
    let contentFactory = this.contentFactory;
    let model = this.model;

    // Insert the output before the cell footer.
    let outputWrapper = (this._outputWrapper = new Panel());
    outputWrapper.addClass(CELL_OUTPUT_WRAPPER_CLASS);
    let outputCollapser = new OutputCollapser();
    outputCollapser.addClass(CELL_OUTPUT_COLLAPSER_CLASS);
    let output = (this._output = new OutputArea({
      model: model.outputs,
      rendermime,
      contentFactory: contentFactory
    }));
    output.addClass(CELL_OUTPUT_AREA_CLASS);
    // Set a CSS if there are no outputs, and connect a signal for future
    // changes to the number of outputs. This is for conditional styling
    // if there are no outputs.
    if (model.outputs.length === 0) {
      this.addClass(NO_OUTPUTS_CLASS);
    }
    output.outputLengthChanged.connect(
      this._outputLengthHandler,
      this
    );
    outputWrapper.addWidget(outputCollapser);

metadata = {
      ...model.metadata.toJSON(),
      ...metadata,
      ...cellId
    };
    model.executionCount = null;
    cell.outputHidden = false;
    cell.setPrompt('*');
    model.trusted = true;

    let future: Kernel.IFuture<
      KernelMessage.IExecuteRequestMsg,
      KernelMessage.IExecuteReplyMsg
    >;
    try {
      const msgPromise = OutputArea.execute(
        code,
        cell.outputArea,
        session,
        metadata
      );
      // Save this execution's future so we can compare in the catch below.
      future = cell.outputArea.future;
      const msg = await msgPromise;
      model.executionCount = msg.content.execution_count;
      return msg;
    } catch (e) {
      // If this is still the current execution, clear the prompt.
      if (e.message === 'Canceled' && cell.outputArea.future === future) {
        cell.setPrompt('');
      }
      throw e;

render() {
        super.render();
        this._outputView = new OutputArea({
            rendermime: this.model.widget_manager.renderMime,
            contentFactory: OutputArea.defaultContentFactory,
            model: this.model.outputs
        });
        this.pWidget.insertWidget(0, this._outputView);
        this.pWidget.addClass('jupyter-widgets');
        this.pWidget.addClass('widget-output');
        this.update(); // Set defaults.
    }

render() {
        super.render();
        this._outputView = new OutputArea({
            rendermime: renderMime,
            contentFactory: OutputArea.defaultContentFactory,
            model: this.model.outputs
        });
        this.pWidget.insertWidget(0, this._outputView);

        this.pWidget.addClass('jupyter-widgets');
        this.pWidget.addClass('widget-output');
        this.update(); // Set defaults.
    }

render() {
    super.render();
    this._outputView = new OutputArea({
      rendermime: this.model.widget_manager.renderMime,
      contentFactory: OutputArea.defaultContentFactory,
      model: this.model.outputs,
    });
    this.pWidget.insertWidget(0, this._outputView);
    this.pWidget.addClass("jupyter-widgets");
    this.pWidget.addClass("widget-output");
    this.update(); // Set defaults.
  }

render() {
    super.render();
    this._outputView = new OutputArea({
      rendermime: this.model.widget_manager.rendermime,
      contentFactory: OutputArea.defaultContentFactory,
      model: this.model.outputs
    });
    // TODO: why is this a readonly property now?
    // this._outputView.model = this.model.outputs;
    // TODO: why is this on the model now?
    // this._outputView.trusted = true;
    this.pWidget.insertWidget(0, this._outputView);

    this.pWidget.addClass('jupyter-widgets');
    this.pWidget.addClass('widget-output');
    this.update(); // Set defaults.
  }

it('should create an output area widget', () => {
          let factory = new CodeCellWidget.ContentFactory({ editorFactory });
          let model = new OutputAreaModel();
          let output = factory.createOutputArea({
            model,
            rendermime,
            contentFactory: OutputAreaWidget.defaultContentFactory
          });
          expect(output).to.be.an(OutputAreaWidget);
        });