Output widget - modified so layout applies to the OutputArea directly and prompt width is 0.

Author: Alan Fleming

packages/controls/css/widgets-base.css

@@ -125,6 +125,18 @@
   flex-direction: column;
 }
 
+.jupyter-widget-output {
+  box-sizing: border-box;
+  display: flex;
+  margin: 0;
+  overflow: auto;
+  flex-direction: column;
+}
+.jupyter-widget-output .jp-OutputArea-prompt{
+  width: 0;
+  flex : 0;
+}
+
 /* General Tags Styling */
 
 .jupyter-widget-tagsinput {

python/jupyterlab_widgets/src/output.ts

@@ -3,22 +3,20 @@
 
 import * as outputBase from '@jupyter-widgets/output';
 
-import { JupyterLuminoPanelWidget } from '@jupyter-widgets/base';
-
-import { Panel } from '@lumino/widgets';
-
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 
-import { KernelWidgetManager } from './manager';
+import type { KernelWidgetManager } from './manager';
 
-import { OutputAreaModel, OutputArea } from '@jupyterlab/outputarea';
+import { OutputArea, OutputAreaModel } from '@jupyterlab/outputarea';
 
 import * as nbformat from '@jupyterlab/nbformat';
 
-import { KernelMessage } from '@jupyterlab/services';
+import type { KernelMessage } from '@jupyterlab/services';
 
 import $ from 'jquery';
 
+import type { Message } from '@lumino/messaging';
+
 export const OUTPUT_WIDGET_VERSION = outputBase.OUTPUT_WIDGET_VERSION;
 
 export class OutputModel extends outputBase.OutputModel {
@@ -103,9 +101,50 @@ export class OutputModel extends outputBase.OutputModel {
   static rendermime: IRenderMimeRegistry;
 }
 
+class JupyterOutputArea extends OutputArea {
+  constructor(options: JupyterOutputArea.IOptions & OutputArea.IOptions) {
+    const view = options.view;
+    delete (options as any).view;
+    super(options);
+    this._view = view;
+  }
+
+  processMessage(msg: Message): void {
+    super.processMessage(msg);
+    this._view?.processLuminoMessage(msg);
+  }
+  /**
+   * Dispose the widget.
+   *
+   * This causes the view to be destroyed as well with 'remove'
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    super.dispose();
+    this._view?.remove();
+    this._view = null!;
+  }
+
+  private _view: OutputView;
+}
+
+export namespace JupyterOutputArea {
+  export interface IOptions {
+    view: OutputView;
+  }
+}
+
 export class OutputView extends outputBase.OutputView {
   _createElement(tagName: string): HTMLElement {
-    this.luminoWidget = new JupyterLuminoPanelWidget({ view: this });
+    this.luminoWidget = new JupyterOutputArea({
+      view: this,
+      rendermime: OutputModel.rendermime,
+      contentFactory: OutputArea.defaultContentFactory,
+      model: this.model.outputs,
+      promptOverlay: false,
+    });
     return this.luminoWidget.node;
   }
 
@@ -124,29 +163,16 @@ export class OutputView extends outputBase.OutputView {
    */
   render(): void {
     super.render();
-    this._outputView = new OutputArea({
-      rendermime: OutputModel.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.luminoWidget.insertWidget(0, this._outputView);
-
     this.luminoWidget.addClass('jupyter-widgets');
-    this.luminoWidget.addClass('widget-output');
+    this.luminoWidget.addClass('jupyter-widget-output');
     this.update(); // Set defaults.
   }
 
   remove(): any {
-    this._outputView.dispose();
+    this.luminoWidget.dispose();
     return super.remove();
   }
 
   model: OutputModel;
-  _outputView: OutputArea;
-  luminoWidget: Panel;
+  luminoWidget: OutputArea;
 }