Merge pull request #1738 from jasongrout/outputlayout

JLab Output displayed trigger

Author: jasongrout

packages/base/package.json

@@ -64,6 +64,7 @@
     "@types/lodash": "^4.14.66",
     "@types/semver": "^5.3.30",
     "backbone": "1.2.3",
+    "base64-js": "^1.2.1",
     "jquery": "^3.1.1",
     "lodash": "^4.17.4",
     "semver": "^5.1.0"

packages/controls/package.json

@@ -72,6 +72,7 @@
     "@phosphor/algorithm": "^1.1.0",
     "@phosphor/domutils": "^1.1.0",
     "@phosphor/messaging": "^1.2.0",
+    "@phosphor/signaling": "^1.2.0",
     "@phosphor/widgets": "^1.2.0",
     "@types/backbone": "^1.3.33",
     "@types/semver": "^5.3.30",

packages/jupyterlab-manager/src/output.ts

@@ -3,10 +3,18 @@
 
 import * as outputBase from '@jupyter-widgets/output';
 
+import {
+  DOMWidgetView, JupyterPhosphorWidget
+} from '@jupyter-widgets/base';
+
 import {
   IDisposable
 } from '@phosphor/disposable';
 
+import {
+  Message
+} from '@phosphor/messaging';
+
 import {
   Panel, Widget
 } from '@phosphor/widgets';
@@ -100,13 +108,51 @@ class OutputModel extends outputBase.OutputModel {
   private _outputs: OutputAreaModel;
 }
 
+export
+class JupyterPhosphorPanelWidget extends Panel {
+    constructor(options: JupyterPhosphorWidget.IOptions & Panel.IOptions) {
+        let view = options.view;
+        delete options.view;
+        super(options);
+        this._view = view;
+    }
+
+    /**
+     * Process the phosphor message.
+     *
+     * Any custom phosphor widget used inside a Jupyter widget should override
+     * the processMessage function like this.
+     */
+    processMessage(msg: Message) {
+        super.processMessage(msg);
+        this._view.processPhosphorMessage(msg);
+    }
+
+    /**
+     * Dispose the widget.
+     *
+     * 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;
+    }
+
+    private _view: DOMWidgetView;
+}
 
 export
 class OutputView extends outputBase.OutputView {
 
     _createElement(tagName: string) {
-        this.pWidget = new Panel();
-        return this.pWidget.node;
+      this.pWidget = new JupyterPhosphorPanelWidget({ view: this });
+      return this.pWidget.node;
     }
 
     _setElement(el: HTMLElement) {
@@ -123,6 +169,7 @@ class OutputView extends outputBase.OutputView {
    * Called when view is rendered.
    */
   render() {
+    super.render();
     this._outputView = new OutputArea({
       rendermime: this.model.widget_manager.rendermime,
       contentFactory: OutputArea.defaultContentFactory,
@@ -139,16 +186,6 @@ class OutputView extends outputBase.OutputView {
     this.update(); // Set defaults.
   }
 
-  /**
-   * Update the contents of this view
-   *
-   * Called when the model is changed.  The model may have been
-   * changed by another view or by a state update from the back-end.
-   */
-  update() {
-    return super.update();
-  }
-
   remove() {
     this._outputView.dispose();
     return super.remove();