finos · texodus · May 6, 2021 · May 3, 2021 · May 2, 2021 · May 6, 2021
diff --git a/.gitignore b/.gitignore
@@ -181,3 +181,4 @@ docs/static/css/material.dark.css
 docs/i18n/en.json
 docs/static/js
 
+rust/perspective-vieux/target.vscode
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -4,7 +4,7 @@
     "version": "0.8.0",
     "description": "An example app built using `@finos/perspective-viewer`.",
     "scripts": {
-        "start": "webpack-dev-server --open",
+        "start": "webpack serve --open",
         "webpack": "webpack --colour"
     },
     "keywords": [],
@@ -21,12 +21,8 @@
         "@finos/perspective-webpack-plugin": "^0.8.0",
         "@types/react": "^16.8.6",
         "@types/react-dom": "^16.9.4",
-        "css-loader": "^0.28.7",
-        "html-webpack-plugin": "^3.2.0",
         "source-map-loader": "^0.2.4",
-        "style-loader": "^0.18.2",
         "ts-loader": "^6.2.1",
-        "typescript": "^3.7.4",
-        "webpack-dev-server": "^3.11.2"
+        "typescript": "^3.7.4"
     }
 }
diff --git a/examples/react/webpack.config.js b/examples/react/webpack.config.js
@@ -31,7 +31,7 @@ module.exports = {
             {
                 test: /\.ts(x?)$/,
                 exclude: /node_modules/,
-                loader: ["ts-loader"]
+                loader: "ts-loader"
             },
             {
                 test: /\.css$/,

diff --git a/examples/remote-workspace/package.json b/examples/remote-workspace/package.json
@@ -4,7 +4,7 @@
     "version": "0.8.0",
     "description": "An example app built using `@finos/perspective-workspace`.",
     "scripts": {
-        "start:server": "webpack-dev-server --open",
+        "start:server": "webpack serve --open",
         "start:client": "node server.js",
         "start": "npm-run-all -p start:server start:client"
     },

diff --git a/examples/remote-workspace/server.js b/examples/remote-workspace/server.js
@@ -1,5 +1,5 @@
 const perspective = require("@finos/perspective");
 const {securities} = require("../datasources");
 
-const host = new perspective.WebSocketServer();
+const host = new perspective.WebSocketServer({port: 8081});
 securities().then(table => host.host_table("securities_table", table));
diff --git a/examples/remote-workspace/src/index.html b/examples/remote-workspace/src/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+</body>
+</html>
diff --git a/examples/remote-workspace/src/index.js b/examples/remote-workspace/src/index.js
@@ -14,11 +14,11 @@ import "@finos/perspective-workspace";
 
 import "./index.less";
 
-window.addEventListener("load", async () => {
-    const websocket = perspective.websocket("ws://localhost:8080");
+window.addEventListener("DOMContentLoaded", async () => {
+    const websocket = perspective.websocket("ws://localhost:8081");
     const worker = perspective.shared_worker();
-    const view = websocket.open_view("securities");
-    const table = await worker.table(view, {limit: 10000});
+    const server_table = websocket.open_table("securities_table");
+    const table = await worker.table(await server_table.view(), {limit: 10000});
 
     const workspace = document.createElement("perspective-workspace");
     document.body.appendChild(workspace);

diff --git a/examples/remote-workspace/webpack.config.js b/examples/remote-workspace/webpack.config.js
@@ -9,6 +9,7 @@
 
 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",
@@ -18,7 +19,8 @@ module.exports = {
     },
     plugins: [
         new HtmlWebPackPlugin({
-            title: "Workspace Example"
+            title: "Workspace Example",
+            template: "./src/index.html"
         }),
         new PerspectivePlugin({})
     ],
@@ -30,5 +32,8 @@ module.exports = {
             }
         ]
     },
+    devServer: {
+        contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "../../node_modules/superstore-arrow")]
+    },
     devtool: "source-map"
 };
diff --git a/examples/workspace/webpack.config.js b/examples/workspace/webpack.config.js
@@ -26,6 +26,11 @@ module.exports = {
     ],
     module: {
         rules: [
+            {
+                test: /\.js$/,
+                enforce: "pre",
+                use: ["source-map-loader"]
+            },
             {
                 test: /\.less$/,
                 use: [{loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader"}]

diff --git a/packages/perspective-viewer/src/js/utils.js b/packages/perspective-viewer/src/js/utils.js
@@ -190,7 +190,13 @@ export const invertPromise = () => {
     return promise;
 };
 
-export function throttlePromise(target, property, descriptor) {
+export function throttlePromise(target, property, descriptor, clear = false) {
+    if (typeof target === "boolean") {
+        return function(target, property, descriptor) {
+            return throttlePromise(target, property, descriptor, true);
+        };
+    }
+
     // Each call to `throttlePromise` has a unique `lock`
     const lock = Symbol("private lock");
     const _super = descriptor.value;
@@ -247,7 +253,7 @@ export function throttlePromise(target, property, descriptor) {
             // If this invocation is still the latest, clear the attribute
             // state.
             // TODO this is likely not he behavior we want for this event ..
-            if (id === this[lock].gen) {
+            if (id === this[lock].gen && clear) {
                 this.removeAttribute("updating");
                 this.dispatchEvent(new Event("perspective-update-complete"));
             }
@@ -260,12 +266,12 @@ export function throttlePromise(target, property, descriptor) {
 
     // A function which clears the lock just like the main wrapper, but then
     // does nothing.
-    descriptor.value.flush = async function() {
-        if (this[lock]?.lock) {
-            await this[lock].lock;
+    descriptor.value.flush = async function(obj) {
+        if (obj[lock]?.lock) {
+            await obj[lock].lock;
             await new Promise(requestAnimationFrame);
-            if (this[lock]?.lock) {
-                await this[lock].lock;
+            if (obj[lock]?.lock) {
+                await obj[lock].lock;
             }
         }
     };

diff --git a/packages/perspective-viewer/src/js/viewer.js b/packages/perspective-viewer/src/js/viewer.js
@@ -577,6 +577,8 @@ class PerspectiveViewer extends ActionElement {
      */
     async load(data) {
         let table;
+        const resolve = this._set_updating();
+
         if (data instanceof Promise) {
             this._vieux.load(data);
             table = await data;
@@ -585,13 +587,15 @@ class PerspectiveViewer extends ActionElement {
                 this._vieux.load(Promise.resolve(data));
                 table = data;
             } else {
+                resolve();
                 throw new Error(`Unrecognized input type ${typeof data}.  Please use a \`perspective.Table()\``);
             }
         }
         if (this.isConnected) {
-            await this._load_table(table);
+            await this._load_table(table, resolve);
         } else {
             this._table = table;
+            this._table_resolve = resolve;
         }
     }
 
@@ -615,7 +619,8 @@ class PerspectiveViewer extends ActionElement {
      * @param {any} widget A `<perspective-viewer>` instance to clone.
      */
     clone(widget) {
-        this._load_table(widget.table);
+        const resolve = this._set_updating();
+        this._load_table(widget.table, resolve);
         this.restore(widget.save());
     }
 
@@ -716,7 +721,7 @@ class PerspectiveViewer extends ActionElement {
      * attribute state has been applied.
      */
     async flush() {
-        await Promise.all([this._updating_promise || Promise.resolve(), this.notifyResize.flush()]);
+        await Promise.all([this._updating_promise || Promise.resolve(), this.notifyResize.flush(this)]);
     }
 
     /**

diff --git a/packages/perspective-viewer/src/js/viewer/perspective_element.js b/packages/perspective-viewer/src/js/viewer/perspective_element.js
@@ -159,9 +159,8 @@ export class PerspectiveElement extends StateElement {
      * @param {*} table
      * @param {*} computed
      */
-    async _load_table(table) {
+    async _load_table(table, resolve) {
         this.shadowRoot.querySelector("#app").classList.add("hide_message");
-        const resolve = this._set_updating();
 
         this._clear_state();
         this._table = table;
@@ -536,10 +535,12 @@ export class PerspectiveElement extends StateElement {
     }
 
     _check_loaded_table() {
-        if (this._table) {
+        if (this._table && this._table_resolver) {
             const table = this._table;
+            const resolve = this._table_resolver;
             delete this._table;
-            this._load_table(table);
+            delete this._table_resolver;
+            this._load_table(table, resolve);
         }
     }
 
@@ -584,7 +585,7 @@ export class PerspectiveElement extends StateElement {
         return resolve;
     }
 
-    @throttlePromise
+    @throttlePromise(true)
     async _update(ignore_size_check, force_update, limit_points) {
         await new Promise(setTimeout);
         await this._new_view({ignore_size_check, force_update, limit_points});

diff --git a/packages/perspective-viewer/src/themes/material-dense.dark.less b/packages/perspective-viewer/src/themes/material-dense.dark.less
@@ -25,9 +25,11 @@
 
 perspective-column-style {
     background-color: @grey700;
-    color: @grey60;
+    color: #FFFFFF;
     border: 1px solid @grey500;
     --input--border-color: @grey500;
+    --active-color: #2770a9;
+    --inactive-color: @grey500;
 }
 
 perspective-viewer, .perspective-viewer-material-dense-dark{

diff --git a/packages/perspective-viewer/src/themes/material-dense.less b/packages/perspective-viewer/src/themes/material-dense.less
@@ -28,6 +28,7 @@ perspective-column-style {
    color: #161616;
    border: 1px solid #E0E4E9;
    --input--border-color: #E0E4E9;
+   --active-color: @blue500;
 }
 
 perspective-viewer, .perspective-viewer-material-dense {

diff --git a/packages/perspective-viewer/src/themes/material.dark.less b/packages/perspective-viewer/src/themes/material.dark.less
@@ -13,9 +13,11 @@
 
 perspective-column-style {
     background-color: @grey700;
-    color: @grey60;
+    color: #FFFFFF;
     border: 1px solid @grey500;
     --input--border-color: @grey500;
+    --active-color: #2770a9;
+    --inactive-color: @grey500;
 }
 
 perspective-viewer, .perspective-viewer-material-dark {

diff --git a/packages/perspective-viewer/src/themes/material.less b/packages/perspective-viewer/src/themes/material.less
@@ -20,6 +20,7 @@ perspective-column-style {
     color: #161616;
     border: 1px solid #E0E4E9;
     --input--border-color: #E0E4E9;
+    --active-color: @blue500;
 }
 
 .perspective-viewer-material-base() {

diff --git a/packages/perspective-workspace/src/js/index.js b/packages/perspective-workspace/src/js/index.js
@@ -139,18 +139,6 @@ class PerspectiveWorkspaceElement extends HTMLElement {
      */
     restore(layout) {
         this.workspace.restore(layout);
-        MessageLoop.flush();
-    }
-
-    /**
-     * An async function which resolves when all pending DOM changes at the
-     * time of invocation are resolved.
-     */
-    async flush() {
-        MessageLoop.flush();
-        await new Promise(requestAnimationFrame);
-        await new Promise(requestAnimationFrame);
-        await Promise.all(Array.from(this.children).map(x => x.flush()));
     }
 
     addTable(name, table) {
@@ -186,7 +174,6 @@ class PerspectiveWorkspaceElement extends HTMLElement {
      */
     notifyResize() {
         this.workspace.update();
-        MessageLoop.flush();
     }
 
     _light_dom_changed() {
@@ -223,7 +210,6 @@ class PerspectiveWorkspaceElement extends HTMLElement {
         MessageLoop.sendMessage(this.workspace, Widget.Msg.BeforeAttach);
         container.insertBefore(this.workspace.node, null);
         MessageLoop.sendMessage(this.workspace, Widget.Msg.AfterAttach);
-        MessageLoop.flush();
 
         window.onresize = this.workspace.update.bind(this.workspace);
     }

diff --git a/packages/perspective-workspace/src/theme/material.dark.less b/packages/perspective-workspace/src/theme/material.dark.less
@@ -27,9 +27,11 @@ perspective-viewer.workspace-master-widget {
 
 perspective-column-style {
     background-color: @grey700;
-    color: @grey60;
+    color: #FFFFFF;
     border: 1px solid @grey500;
     --input--border-color: @grey500;
+    --active-color: #2770a9;
+    --inactive-color: @grey500;
 }
 
 .p-Menu {

diff --git a/packages/perspective-workspace/src/theme/material.less b/packages/perspective-workspace/src/theme/material.less
@@ -27,6 +27,7 @@ perspective-column-style {
     color: #161616;
     border: 1px solid #E0E4E9;
     --input--border-color: #E0E4E9;
+    --active-color: @blue500;
 }
 
 .perspective-workspace-material-base() {

diff --git a/packages/perspective-workspace/test/js/integration/dom.spec.js b/packages/perspective-workspace/test/js/integration/dom.spec.js
@@ -40,13 +40,13 @@ utils.with_server({paths: PATHS}, () => {
                             workspace.appendChild(viewer);
                             workspace.appendChild(viewer2);
                         });
-                        await page.evaluate(async () => await document.querySelector("perspective-workspace").flush());
+                        while ((await page.$$("perspective-workspace > perspective-viewer[updating]")).length > 0);
                         await page.evaluate(() => {
                             const viewer = document.body.querySelector('perspective-viewer[name="one"]');
                             const workspace = document.getElementById("workspace");
                             workspace.removeChild(viewer);
                         });
-                        await page.evaluate(async () => await document.querySelector("perspective-workspace").flush());
+                        while ((await page.$$("perspective-workspace > perspective-viewer[updating]")).length > 0);
                     },
                     {timeout: 30000}
                 );
@@ -63,7 +63,7 @@ utils.with_server({paths: PATHS}, () => {
                             const workspace = document.getElementById("workspace");
                             workspace.appendChild(viewer);
                         });
-                        await page.evaluate(async () => await document.querySelector("perspective-workspace").flush());
+                        while ((await page.$$("perspective-workspace > perspective-viewer[updating]")).length > 0);
                     },
                     {timeout: 30000}
                 );
@@ -82,7 +82,7 @@ utils.with_server({paths: PATHS}, () => {
                             workspace.appendChild(viewer);
                             workspace.appendChild(viewer2);
                         });
-                        await page.evaluate(async () => await document.querySelector("perspective-workspace").flush());
+                        while ((await page.$$("perspective-workspace > perspective-viewer[updating]")).length > 0);
                     },
                     {timeout: 30000}
                 );
@@ -98,7 +98,7 @@ utils.with_server({paths: PATHS}, () => {
                             const workspace = document.getElementById("workspace");
                             workspace.appendChild(viewer);
                         });
-                        await page.evaluate(async () => await document.querySelector("perspective-workspace").flush());
+                        while ((await page.$$("perspective-workspace > perspective-viewer[updating]")).length > 0);
                     },
                     {timeout: 30000}
                 );
@@ -112,7 +112,7 @@ utils.with_server({paths: PATHS}, () => {
                             const workspace = document.getElementById("workspace");
                             workspace.appendChild(viewer);
                         });
-                        await page.evaluate(async () => await document.querySelector("perspective-workspace").flush());
+                        while ((await page.$$("perspective-workspace > perspective-viewer[updating]")).length > 0);
                     },
                     {timeout: 30000}
                 );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -181,3 +181,4 @@ docs/static/css/material.dark.css
		docs/i18n/en.json
		docs/static/js

		rust/perspective-vieux/target.vscode