Support perspective widget in vs-code

Signed-off-by: Tim Paine <[email protected]>
Signed-off-by: Andrew Stein <[email protected]>

# Conflicts:
#	packages/perspective-jupyterlab/src/less/index.less

Author: timkpaine

packages/perspective-jupyterlab/src/js/notebook/css.js

@@ -0,0 +1,20 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import THEMES from "../../../dist/css/perspective-jupyterlab.css";
+
+// Export the required load_ipython_extension
+exports.load_css = () => {
+    const style = document.createElement("style");
+    style.textContent = THEMES;
+    document.head.appendChild(style);
+};

packages/perspective-jupyterlab/src/js/notebook/extension.js

@@ -11,17 +11,11 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 /* eslint-disable no-underscore-dangle */
+import { load_css } from "./css";
 
 // This file contains the javascript that is run when the notebook is loaded.
 // It contains some requirejs configuration and the `load_ipython_extension`
 // which is required for any notebook extension.
-//
-// Some static assets may be required by the custom widget javascript. The base
-// url for the notebook is not known at build time and is therefore computed
-// dynamically.
-
-import THEMES from "../../../dist/css/perspective-jupyterlab.css";
-
 if (window.require) {
     window.require.config({
         map: {
@@ -33,9 +27,6 @@ if (window.require) {
     });
 }
 
-// Export the required load_ipython_extension
 exports.load_ipython_extension = () => {
-    const style = document.createElement("style");
-    style.textContent = THEMES;
-    document.head.appendChild(style);
+    load_css();
 };

packages/perspective-jupyterlab/src/js/notebook/index.js

@@ -14,8 +14,14 @@ import "@finos/perspective-viewer-datagrid";
 import "@finos/perspective-viewer-d3fc";
 import "@finos/perspective-viewer-openlayers";
 
+import { load_css } from "./css";
 import { PerspectiveView } from "../view";
 import { PerspectiveModel } from "../model";
 
 exports.PerspectiveModel = PerspectiveModel;
 exports.PerspectiveView = PerspectiveView;
+
+// Run if in vs-code
+if (window.vscIPyWidgets) {
+    load_css();
+}

packages/perspective-jupyterlab/src/js/view.js

@@ -404,10 +404,16 @@ export class PerspectiveView extends DOMWidgetView {
                 table.update(updated.delta);
         }
 
-        this._client_view.on_update(
-            (updated) => this._client_view_update_callback(updated),
-            { mode: "row" }
-        );
+        if (this._client_view) {
+            // NOTE: if `plugin_config_changed` called before
+            // `_handle_load_message`, this will be undefined
+            // Ignore, as `_handle_load_message` is sure to
+            // follow.
+            this._client_view.on_update(
+                (updated) => this._client_view_update_callback(updated),
+                { mode: "row" }
+            );
+        }
 
         this._kernel_view.on_update(
             (updated) => this._kernel_view_update_callback(updated),

packages/perspective-jupyterlab/src/less/index.less

@@ -36,8 +36,11 @@ div.PSPContainer {
 }
 
 // Widget height for Voila
-body[data-voila="voila"] .jp-OutputArea-output div.PSPContainer {
+// Widget height for VS Code
+body[data-voila="voila"] .jp-OutputArea-output div.PSPContainer,
+body[data-vscode-theme-id] .cell-output-ipywidget-background div.PSPContainer {
     min-height: 520px;
+    height: 520px;
 }
 
 div.PSPContainer perspective-viewer[theme="Pro Light"] {