Use JupyterLuminoPanelWidget for html manager output widget's lumino widget

Previously the processLuminoMessage was not getting called because Panel did not know to call it. This messed up the message propatation in the html manager output widget, with such affects as the layout widget for the output widget not getting initialized, the displayed event not being triggered, etc.

We also take the opportunity to make the JupyterLab output widget use the base JupyterLuminoPanelWidget, rather than having its own copy of the same code.

We also incorporate some fixes from the jlab output widget view into the html output widget view.

Fixes #3529

Author: jasongrout

packages/base/src/widget.ts

@@ -936,7 +936,7 @@ export class JupyterLuminoPanelWidget extends Panel {
       return;
     }
     super.dispose();
-    this._view.remove();
+    this._view?.remove();
     this._view = null!;
   }
 

packages/html-manager/src/output.ts

@@ -3,7 +3,7 @@
 
 import * as outputBase from '@jupyter-widgets/output';
 
-import { Panel } from '@lumino/widgets';
+import { JupyterLuminoPanelWidget } from '@jupyter-widgets/base';
 
 import { OutputAreaModel, OutputArea } from '@jupyterlab/outputarea';
 
@@ -52,7 +52,7 @@ export class OutputModel extends outputBase.OutputModel {
 
 export class OutputView extends outputBase.OutputView {
   _createElement(tagName: string): HTMLElement {
-    this.luminoWidget = new Panel();
+    this.luminoWidget = new JupyterLuminoPanelWidget({ view: this });
     return this.luminoWidget.node;
   }
 
@@ -66,10 +66,9 @@ export class OutputView extends outputBase.OutputView {
   }
 
   render(): void {
-    const manager = this.model.widget_manager;
-    const rendermime = manager.renderMime;
+    super.render();
     this._outputView = new OutputArea({
-      rendermime: rendermime,
+      rendermime: this.model.widget_manager.renderMime,
       model: this.model.outputs,
     });
     this.luminoWidget.insertWidget(0, this._outputView);
@@ -78,7 +77,12 @@ export class OutputView extends outputBase.OutputView {
     this.update();
   }
 
+  remove(): any {
+    this._outputView.dispose();
+    return super.remove();
+  }
+
   model: OutputModel;
   private _outputView: OutputArea;
-  luminoWidget: Panel;
+  luminoWidget: JupyterLuminoPanelWidget;
 }

python/jupyterlab_widgets/package.json

@@ -67,7 +67,6 @@
     "@lumino/algorithm": "^1.9.1",
     "@lumino/coreutils": "^1.11.1",
     "@lumino/disposable": "^1.10.1",
-    "@lumino/messaging": "^1.10.1",
     "@lumino/properties": "^1.8.1",
     "@lumino/signaling": "^1.10.1",
     "@lumino/widgets": "^1.30.0",

python/jupyterlab_widgets/src/output.ts

@@ -3,9 +3,7 @@
 
 import * as outputBase from '@jupyter-widgets/output';
 
-import { DOMWidgetView, JupyterLuminoWidget } from '@jupyter-widgets/base';
-
-import { Message } from '@lumino/messaging';
+import { JupyterLuminoPanelWidget } from '@jupyter-widgets/base';
 
 import { Panel } from '@lumino/widgets';
 
@@ -122,44 +120,6 @@ export class OutputModel extends outputBase.OutputModel {
   private _outputs: OutputAreaModel;
 }
 
-export class JupyterLuminoPanelWidget extends Panel {
-  constructor(options: JupyterLuminoWidget.IOptions & Panel.IOptions) {
-    const view = options.view;
-    delete (options as any).view;
-    super(options);
-    this._view = view;
-  }
-
-  /**
-   * Process the Lumino message.
-   *
-   * Any custom Lumino widget used inside a Jupyter widget should override
-   * the processMessage function like this.
-   */
-  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();
-    if (this._view) {
-      this._view.remove();
-    }
-    this._view = null!;
-  }
-
-  private _view: DOMWidgetView;
-}
-
 export class OutputView extends outputBase.OutputView {
   _createElement(tagName: string): HTMLElement {
     this.luminoWidget = new JupyterLuminoPanelWidget({ view: this });