Merge pull request #990 from finos/workspace-fixes

perspective-workspace fixes

examples/remote-workspace/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "remote-workspace",
+    "private": true,
+    "version": "0.4.6",
+    "description": "An example app built using `@finos/perspective-workspace`.",
+    "scripts": {
+        "start:server": "webpack-dev-server --open",
+        "start:client": "node server.js",
+        "start": "npm-run-all -p start:server start:client"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.4.6",
+        "@finos/perspective-viewer": "^0.4.6",
+        "@finos/perspective-viewer-d3fc": "^0.4.6",
+        "@finos/perspective-viewer-datagrid": "^0.4.6",
+        "@finos/perspective-workspace": "^0.4.6"
+    },
+    "devDependencies": {
+        "@finos/perspective-webpack-plugin": "^0.4.6",
+        "css-loader": "^0.28.7",
+        "file-loader": "^4.2.0",
+        "html-webpack-plugin": "^3.2.0",
+        "http-server": "^0.11.1",
+        "less-loader": "^4.0.5",
+        "npm-run-all": "^4.1.3",
+        "rimraf": "^2.5.2",
+        "style-loader": "^0.18.2",
+        "webpack-cli": "^3.3.7",
+        "webpack-dev-server": "^3.8.0"
+    }
+}

examples/remote-workspace/server.js

@@ -0,0 +1,5 @@
+const perspective = require("@finos/perspective");
+const {securities} = require("../datasources");
+
+const host = new perspective.WebSocketServer();
+securities().then(table => host.host_table("securities", table));

examples/remote-workspace/src/index.js

@@ -0,0 +1,53 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2018, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+import perspective from "@finos/perspective";
+import "@finos/perspective-viewer-datagrid";
+import "@finos/perspective-viewer-d3fc";
+import "@finos/perspective-workspace";
+
+import "./index.less";
+
+window.addEventListener("load", () => {
+    const websocket = perspective.websocket("ws://localhost:8080");
+    const table = websocket.open_table("securities");
+
+    const workspace = document.createElement("perspective-workspace");
+    document.body.appendChild(workspace);
+
+    workspace.tables.set("superstore", table);
+
+    workspace.restore({
+        detail: {
+            main: {
+                type: "split-area",
+                orientation: "horizontal",
+                children: [
+                    {
+                        type: "tab-area",
+                        widgets: ["One"],
+                        currentIndex: 0
+                    },
+                    {
+                        type: "tab-area",
+                        widgets: ["Two"],
+                        currentIndex: 0
+                    }
+                ],
+                sizes: [0.5, 0.5]
+            }
+        },
+        viewers: {
+            One: {table: "superstore", name: "Heat Map", plugin: "heatmap", "row-pivots": ["client"], columns: ["chg"], "column-pivots": '["name"]'},
+            Two: {table: "superstore", name: "Bar Chart", plugin: "x_bar", "row-pivots": ["client"], columns: ["chg"]}
+        }
+    });
+
+    window.workspace = workspace;
+});

examples/remote-workspace/src/index.less

@@ -0,0 +1,24 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2018, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+@import "~@finos/perspective-workspace/dist/theme/material.less";
+
+body {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+

examples/remote-workspace/webpack.config.js

@@ -0,0 +1,34 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+const PerspectivePlugin = require("@finos/perspective-webpack-plugin");
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+    mode: process.env.NODE_ENV || "development",
+    entry: "./src/index.js",
+    output: {
+        filename: "index.js"
+    },
+    plugins: [
+        new HtmlWebPackPlugin({
+            title: "Workspace Example"
+        }),
+        new PerspectivePlugin({})
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.less$/,
+                use: [{loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader"}]
+            }
+        ]
+    },
+    devtool: "source-map"
+};

packages/perspective-workspace/src/js/workspace/widget.js

@@ -81,7 +81,7 @@ export class PerspectiveViewerWidget extends Widget {
         }
         this.linked = linked;
 
-        this.viewer.restore({...viewerConfig});
+        return this.viewer.restore({...viewerConfig});
     }
 
     save() {

packages/perspective-workspace/src/js/workspace/workspace.js

@@ -265,20 +265,20 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
         }
 
         if (widget.linked) {
-            this._linkedViewers.push(widget.viewer);
+            this._linkWidget(widget);
         }
         return widget;
     }
 
     _validate(table) {
-        if (!table.hasOwnProperty("view") || table.type !== "table") {
+        if (!("view" in table) || typeof table?.view !== "function") {
             throw new Error("Only `perspective.Table()` instances can be added to `tables`");
         }
         return table;
     }
 
     _set_listener(name, table) {
-        if (table instanceof Promise) {
+        if (typeof table?.then === "function") {
             table = table.then(this._validate);
         } else {
             this._validate(table);
@@ -348,6 +348,9 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
         const config = widget.save();
         config.name = config.name ? `${config.name} (duplicate)` : "";
         const duplicate = this._createWidgetAndNode({config});
+        if (config.linked) {
+            this._linkWidget(duplicate);
+        }
         if (widget.master) {
             const index = this.masterPanel.widgets.indexOf(widget) + 1;
             this.masterPanel.insertWidget(index, duplicate);
@@ -474,10 +477,9 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
         return this._linkedViewers.indexOf(widget.viewer) > -1;
     }
 
-    toggleLink(widget) {
-        widget.linked = !widget.linked;
-        if (widget.linked) {
-            widget.title.className += " linked";
+    _linkWidget(widget) {
+        widget.title.className += " linked";
+        if (this._linkedViewers.indexOf(widget.viewer) === -1) {
             this._linkedViewers.push(widget.viewer);
             // if this is the first linked viewer, make viewers with row-pivots selectable
             if (this._linkedViewers.length === 1) {
@@ -488,6 +490,13 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
                     }
                 });
             }
+        }
+    }
+
+    toggleLink(widget) {
+        widget.linked = !widget.linked;
+        if (widget.linked) {
+            this._linkWidget(widget);
         } else {
             widget.title.className = widget.title.className.replace(/ linked/g, "");
             this._linkedViewers = this._linkedViewers.filter(viewer => viewer !== widget.viewer);
@@ -678,11 +687,12 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
         this.element.dispatchEvent(event);
         widget.title.closable = true;
         this.element.appendChild(widget.viewer);
-        this._addWidgetEventListeners(widget);
         if (table) {
             widget.viewer.load(table);
         }
-        widget.restore(config);
+        widget.restore(config).then(() => {
+            this._addWidgetEventListeners(widget);
+        });
         return widget;
     }
 
@@ -703,7 +713,10 @@ export class PerspectiveWorkspace extends DiscreteSplitPanel {
             if (this.mode === MODE.LINKED) {
                 const config = event.target?.save();
                 if (config) {
-                    event.target.restore({selectable: this._linkedViewers.length > 0 && !!config["row-pivots"]});
+                    const selectable = this._linkedViewers.length > 0 && !!config["row-pivots"];
+                    if (selectable !== !!config.selectable) {
+                        event.target.restore({selectable});
+                    }
                 }
             }
         };