Merge pull request #1475 from finos/flicker

Upgrade `regular-table`

Author: texodus

packages/perspective-viewer-datagrid/package.json

@@ -41,7 +41,7 @@
         "@finos/perspective": "^0.10.0",
         "@finos/perspective-viewer": "^0.10.0",
         "chroma-js": "^1.3.4",
-        "regular-table": "=0.4.0"
+        "regular-table": "=0.4.1"
     },
     "devDependencies": {
         "@finos/perspective-test": "^0.10.0"

packages/perspective-viewer-datagrid/src/js/plugin.js

@@ -18,57 +18,28 @@ import {configureEditable} from "./editing.js";
 import {configureSortable} from "./sorting.js";
 import {PLUGIN_SYMBOL} from "./plugin_menu.js";
 
-function lock(body) {
-    let lock;
-    return async function(...args) {
-        while (lock) {
-            await lock;
-        }
-
-        let resolve;
-        try {
-            lock = new Promise(x => (resolve = x));
-            await body.apply(this, args);
-        } finally {
-            lock = undefined;
-            resolve();
-        }
-    };
-}
-
-async function with_safe_view(f) {
-    try {
-        return await f();
-    } catch (e) {
-        if (e.message !== "View is not initialized") {
-            throw e;
-        }
-    }
-}
-
 customElements.define(
     "perspective-viewer-datagrid",
     class extends HTMLElement {
         constructor() {
             super();
             this.datagrid = document.createElement("regular-table");
             this.datagrid.formatters = formatters;
-            this.draw = lock(this.draw);
         }
 
         async activate(view) {
             let viewer = this.parentElement;
             let table = viewer.table;
             if (!this._initialized) {
-                this._initialized = true;
+                this.model = await createModel(this.datagrid, table, view);
                 this.innerHTML = "";
                 this.appendChild(this.datagrid);
-                this.model = await createModel(this.datagrid, table, view);
                 configureRegularTable(this.datagrid, this.model);
                 await configureRowSelectable.call(this.model, this.datagrid, viewer);
                 await configureClick.call(this.model, this.datagrid, viewer);
                 await configureEditable.call(this.model, this.datagrid, viewer);
                 await configureSortable.call(this.model, this.datagrid, viewer);
+                this._initialized = true;
             } else {
                 await createModel(this.datagrid, table, view, this.model);
             }
@@ -87,39 +58,34 @@ customElements.define(
         }
 
         async draw(view) {
-            await with_safe_view(async () => {
-                await this.activate(view);
-                let viewer = this.parentElement;
-                const draw = this.datagrid.draw({invalid_columns: true});
-                if (!this.model._preserve_focus_state) {
-                    this.datagrid.scrollTop = 0;
-                    this.datagrid.scrollLeft = 0;
-                    deselect(this.datagrid, viewer);
-                    this.datagrid._resetAutoSize();
-                } else {
-                    this.model._preserve_focus_state = false;
-                }
+            await this.activate(view);
+            let viewer = this.parentElement;
+            const draw = this.datagrid.draw({invalid_columns: true});
+            if (!this.model._preserve_focus_state) {
+                this.datagrid.scrollTop = 0;
+                this.datagrid.scrollLeft = 0;
+                deselect(this.datagrid, viewer);
+                this.datagrid._resetAutoSize();
+            } else {
+                this.model._preserve_focus_state = false;
+            }
 
-                await draw;
-            });
+            await draw;
         }
 
         async update(view) {
-            await with_safe_view(async () => {
-                this.model._num_rows = await view.num_rows();
-                await this.datagrid.draw();
-            });
+            this.model._num_rows = await view.num_rows();
+            await this.datagrid.draw();
         }
 
         async resize() {
-            await with_safe_view(async () => {
-                if (this._initialized) {
-                    await this.datagrid.draw();
-                }
-            });
+            if (this._initialized) {
+                await this.datagrid.draw();
+            }
         }
 
         async clear() {
+            this.datagrid._resetAutoSize();
             this.datagrid.clear();
         }
 

packages/perspective-viewer/src/js/custom_styles.js

@@ -19,7 +19,7 @@
  * A Template DOM object.
  */
 
-export function importTemplate(template) {
+function importTemplate(template) {
     const div = document.createElement("div");
     div.innerHTML = template;
     return Array.prototype.slice.call(div.children)[0];

packages/perspective-viewer/src/js/utils.js

@@ -512,9 +512,8 @@ class PerspectiveViewer extends ActionElement {
                 this.removeAttribute("throttle");
             }
         }
-        // Returns the throttle time, but also perform validaiton - we only want
-        // the latter here.
-        this._calculate_throttle_timeout();
+
+        this._vieux._set_render_time(this.getAttribute("throttle"));
     }
 
     /*
@@ -607,11 +606,10 @@ class PerspectiveViewer extends ActionElement {
      *
      */
     @throttlePromise
-    async notifyResize(immediate) {
+    async notifyResize() {
         const resized = await this._check_responsive_layout();
         if (!resized && !document.hidden && this.offsetParent) {
-            let plugin = await this._vieux.get_plugin();
-            await plugin.resize(immediate);
+            await this._vieux.resize();
         }
     }
 

packages/perspective-viewer/src/js/viewer.js

@@ -12,34 +12,6 @@ import {DomElement} from "./dom_element.js";
 import {findExpressionByAlias, throttlePromise} from "../utils.js";
 
 export class ActionElement extends DomElement {
-    async _toggle_config(event) {
-        if (!event || event.button !== 2) {
-            this._show_config = !this._show_config;
-            const panel = this.shadowRoot.querySelector("#pivot_chart_container");
-            if (!this._show_config) {
-                await this._pre_resize(
-                    panel.clientWidth + this._side_panel().clientWidth,
-                    panel.clientHeight + this._top_panel.clientHeight,
-                    () => {
-                        this._app.classList.remove("settings-open");
-                        this.removeAttribute("settings");
-                    },
-                    () => this.dispatchEvent(new CustomEvent("perspective-toggle-settings", {detail: this._show_config}))
-                );
-            } else {
-                await this._post_resize(
-                    () => {
-                        this.toggleAttribute("settings", true);
-                    },
-                    () => {
-                        this._app.classList.add("settings-open");
-                        this.dispatchEvent(new CustomEvent("perspective-toggle-settings", {detail: this._show_config}));
-                    }
-                );
-            }
-        }
-    }
-
     /**
      * Given a targe `width` and `height`, pre-size the plugin before modifying
      * the HTML to reduce visual tearing.
@@ -58,8 +30,7 @@ export class ActionElement extends DomElement {
         this._datavis.style.height = `${height}px`;
         try {
             if (!document.hidden && this.offsetParent) {
-                let plugin = await this._vieux.get_plugin();
-                await plugin.resize();
+                await this._vieux.resize();
             }
         } finally {
             pre?.();
@@ -69,18 +40,6 @@ export class ActionElement extends DomElement {
         }
     }
 
-    async _post_resize(post, pre) {
-        pre?.();
-        try {
-            if (!document.hidden && this.offsetParent) {
-                let plugin = await this._vieux.get_plugin();
-                await plugin.resize();
-            }
-        } finally {
-            post();
-        }
-    }
-
     /**
      * Display the expressions editor.
      *