Merge pull request #3536 from jasongrout/htmloutput

Use JupyterLuminoPanelWidget for html manager output widget's lumino widget

Author: martinRenou

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