Merge pull request #782 from finos/workspace

`PerspectiveDockPanel` and `PerspectiveWorkspace` components

.travis.yml

@@ -1,12 +1,12 @@
 dist: trusty
 language: node_js
-node_js: "8"
+node_js: "10"
 sudo: required
 
 matrix:
   fast_finish: true
   include:
-    - node_js: "8"
+    - node_js: "10"
       language: node_js
       env: TEST=WASM
       services: docker
@@ -40,7 +40,8 @@ env:
 
 install:
   - if [ "$TEST" = "CPP_OSX" ]; then brew install yarn; fi
-  - if [ "$TEST" = "PYTHON"]; then curl -sL https://deb.nodesource.com/setup_8.x | bash - && apt-get install npm; fi
+  - if [ "$TEST" = "PYTHON" ]; then nvm install 10.13.0 && nvm use 10.13.0; fi
+  - node --version
   - yarn
 
 script:

examples/phosphor/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "phosphor",
+    "private": true,
+    "version": "0.3.9",
+    "description": "An example app built using `@finos/perspective-phosphor`.",
+    "scripts": {
+        "start": "webpack-dev-server --open",
+        "webpack": "webpack --colour"
+    },
+    "keywords": [],
+    "license": "Apache-2.0",
+    "dependencies": {
+        "@finos/perspective": "^0.3.9",
+        "@finos/perspective-viewer": "^0.3.9",
+        "@finos/perspective-viewer-d3fc": "^0.3.9",
+        "@finos/perspective-viewer-hypergrid": "^0.3.9",
+        "@finos/perspective-phosphor": "^0.3.9"
+    },
+    "devDependencies": {
+        "@finos/perspective-webpack-plugin": "^0.3.8",
+        "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/phosphor/src/index.js

@@ -0,0 +1,62 @@
+/******************************************************************************
+ *
+ * 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 {PerspectiveWorkspace, PerspectiveWidget} from "@finos/perspective-phosphor";
+import {Widget} from "@phosphor/widgets";
+import "@finos/perspective-phosphor/src/theme/vaporwave/index.less";
+
+import "@finos/perspective-viewer-hypergrid";
+import "@finos/perspective-viewer-d3fc";
+
+import "./style/index.less";
+
+const worker = perspective.shared_worker();
+const req = fetch("./superstore.arrow");
+
+window.addEventListener("load", async () => {
+    const resp = await req;
+    const buffer = await resp.arrayBuffer();
+    const table = worker.table(buffer);
+
+    const workspace = new PerspectiveWorkspace();
+
+    const widget1 = new PerspectiveWidget("One", {
+        "row-pivots": ["Sub-Category"],
+        columns: ["Profit", "Sales"]
+    });
+
+    const widget2 = new PerspectiveWidget("Two", {
+        plugin: "d3_x_bar",
+        "row-pivots": ["Region"],
+        columns: ["Region"]
+    });
+
+    const widget3 = new PerspectiveWidget("Three");
+    const widget4 = new PerspectiveWidget("Four");
+
+    workspace.addViewer(widget1);
+    workspace.addViewer(widget2, {mode: "split-bottom", ref: widget1});
+    workspace.addViewer(widget3, {mode: "split-right", ref: widget1});
+    workspace.addViewer(widget4, {mode: "split-right", ref: widget2});
+
+    Widget.attach(workspace, document.body);
+
+    widget1.load(table);
+    widget2.load(table);
+    widget3.load(table);
+    widget4.load(table);
+
+    window.onresize = () => {
+        workspace.update();
+    };
+
+    window.workspace = workspace;
+
+});

examples/phosphor/src/style/index.less

@@ -0,0 +1,41 @@
+/******************************************************************************
+ *
+ * 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.
+ *
+ */
+
+body {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+#menuBar {
+  flex: 0 0 auto;
+}
+
+
+#main {
+  flex: 1 1 auto;
+}
+
+
+#palette {
+  min-width: 300px;
+  border-right: 1px solid #DDDDDD;
+}
+
+
+#dock {
+  padding: 4px;
+}

examples/phosphor/webpack.config.js

@@ -0,0 +1,46 @@
+/******************************************************************************
+ *
+ * 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");
+const path = require("path");
+
+module.exports = {
+    mode: process.env.NODE_ENV || "development",
+    entry: "./src/index.js",
+    output: {
+        filename: "index.js"
+    },
+    plugins: [
+        new HtmlWebPackPlugin({
+            title: "Phosphor Example"
+        }),
+        new PerspectivePlugin({})
+    ],
+    module: {
+        rules: [
+            {
+                test: /\.less$/,
+                use: [{loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader"}]
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/i,
+                use: [
+                    {
+                        loader: "file-loader"
+                    }
+                ]
+            }
+        ]
+    },
+    devServer: {
+        contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "../simple")]
+    },
+    devtool: "source-map"
+};

package.json

@@ -14,6 +14,8 @@
         "@babel/plugin-transform-runtime": "^7.1.0",
         "@babel/polyfill": "^7.0.0",
         "@babel/preset-env": "^7.1.5",
+        "@typescript-eslint/eslint-plugin": "^2.4.0",
+        "@typescript-eslint/parser": "^2.4.0",
         "arraybuffer-loader": "^1.0.2",
         "babel-eslint": "^8.2.3",
         "babel-jest": "^24.5.0",
@@ -30,7 +32,7 @@
         "cpx": "^1.5.0",
         "css-loader": "^0.28.7",
         "dotenv": "^8.1.0",
-        "eslint": "^4.19.1",
+        "eslint": "^5.16.0",
         "eslint-config-prettier": "^3.0.1",
         "eslint-plugin-prettier": "^2.6.2",
         "file-loader": "^2.0.0",
@@ -58,8 +60,9 @@
         "source-map-explorer": "^2.0.1",
         "style-loader": "^0.18.2",
         "term-img": "^4.1.0",
-        "ts-loader": "^6.0.4",
-        "typescript": "~2.9.2",
+        "ts-loader": "^6.2.0",
+        "ts-jest": "^24.1.0",
+        "typescript": "^3.6.0",
         "webpack": "^4.31.0",
         "webpack-cli": "^3.3.2"
     },

packages/perspective-jupyterlab/package.json

@@ -44,8 +44,8 @@
         "isomorphic-fetch": "^2.2.1",
         "jest-transform-css": "^2.0.0",
         "source-map-support": "^0.5.9",
-        "ts-jest": "^23.10.4",
-        "typescript": "^3.2.4"
+        "ts-jest": "^24.1.0",
+        "typescript": "^3.6.0"
     },
     "jupyterlab": {
         "extension": "dist/index.js"

packages/perspective-jupyterlab/src/ts/.eslintrc.json

@@ -0,0 +1,38 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "extends":  [
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "plugins": [
+        "prettier",
+        "@typescript-eslint/eslint-plugin"
+    ],
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true,
+        "jasmine": true,
+        "jest": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 2017,
+        "ecmaFeatures": {},
+        "sourceType": "module",
+        "experimentalObjectRestSpread": true
+    },
+    "rules": {
+        "prettier/prettier": ["error", {
+            "printWidth": 200,
+            "tabWidth": 4,
+            "bracketSpacing": false
+        }],
+        "no-const-assign": "error",
+        "no-this-before-super": "error",
+        "no-undef": "error",
+        "no-unreachable": "error",
+        "no-unused-vars": "error",
+        "constructor-super": "error",
+        "valid-typeof": "error"
+    }
+}

packages/perspective-jupyterlab/src/ts/arraybuffer.d.ts

@@ -8,5 +8,5 @@
  */
 
 declare module "@finos/perspective/dist/esm/api/client";
-declare module '@finos/perspective/dist/umd/psp.async.wasm';
-declare module '!!file-worker-loader?inline=true!*';
+declare module "@finos/perspective/dist/umd/psp.async.wasm";
+declare module "!!file-worker-loader?inline=true!*";

packages/perspective-jupyterlab/src/ts/client.ts

@@ -7,32 +7,32 @@
  *
  */
 
-import { DOMWidgetView } from "@jupyter-widgets/base";
-import { Client } from "@finos/perspective/dist/esm/api/client";
+import {DOMWidgetView} from "@jupyter-widgets/base";
+import {Client} from "@finos/perspective/dist/esm/api/client";
 
 /**
  * The schema for a message passed to and from `PerspectiveJupyterClient`.
  */
 export interface PerspectiveJupyterMessage {
-    id : number;
-    type : string;
-    data : string;
+    id: number;
+    type: string;
+    data: string;
 }
 
 /**
  * `PerspectiveJupyterClient` acts as a message bus between the frontend and backend,
  * passing messages from `perspective-viewer` (method calls, `to_format()` calls, etc.) to
  * the `PerspectiveManager` on the python side of the plugin.
- * 
+ *
  * This client implements the `Client` class as defined in `@finos/perspective/api`.
  */
 export class PerspectiveJupyterClient extends Client {
-    view : DOMWidgetView;
+    view: DOMWidgetView;
 
     /**
      * Create a new instance of the client.
-     * 
-     * @param view {DOMWidgetView} the plugin view that can send messages to the Python backend. 
+     *
+     * @param view {DOMWidgetView} the plugin view that can send messages to the Python backend.
      */
     constructor(view: DOMWidgetView) {
         super();
@@ -41,18 +41,17 @@ export class PerspectiveJupyterClient extends Client {
 
     /**
      * Given a message, pass it to the `PerspectiveManager` instance on the ipywidget.
-     * 
+     *
      * The sent message conforms to the `PerspectiveJupyterMessage` interface.
      *
      * @param msg {any} the message to pass to the `PerspectiveManager`.
      */
-    send(msg: any) : void {
+    send(msg: any): void {
         const serialized = JSON.stringify(msg);
         this.view.send({
             id: msg.id,
             type: "cmd",
             data: serialized
         });
     }
-
-}
+}

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

@@ -19,3 +19,4 @@ import "!!style-loader!css-loader!less-loader!../less/index.less";
 
 import "@finos/perspective-viewer-hypergrid";
 import "@finos/perspective-viewer-highcharts";
+