Ported to lit-html

finos · texodus · Sep 23, 2019 · Sep 23, 2019 · Sep 23, 2019 · Sep 23, 2019
commit ffb2a8725e0687674e5f8e543af4e01b4cebcff4
diff --git a/packages/perspective-test/jest.all.config.js b/packages/perspective-test/jest.all.config.js
@@ -12,6 +12,7 @@ module.exports = {
         ".js$": "@finos/perspective-test/src/js/transform.js",
         ".html$": "html-loader-jest"
     },
+    transformIgnorePatterns: ["/node_modules/(?!lit-html).+$"],
     automock: false,
     setupFiles: ["@finos/perspective-test/src/js/beforeEachSpec.js"],
     reporters: ["default", "@finos/perspective-test/src/js/reporter.js"]

diff --git a/packages/perspective-test/jest.config.js b/packages/perspective-test/jest.config.js
@@ -7,6 +7,7 @@ module.exports = {
         ".js$": "@finos/perspective-test/src/js/transform.js",
         ".html$": "html-loader-jest"
     },
+    transformIgnorePatterns: ["/node_modules/(?!lit-html).+\\.js"],
     automock: false,
     setupFiles: ["@finos/perspective-test/src/js/beforeEachSpec.js"],
     reporters: ["default", "@finos/perspective-test/src/js/reporter.js"]

diff --git a/packages/perspective-viewer/src/js/row.js b/packages/perspective-viewer/src/js/row.js
@@ -19,18 +19,20 @@ import {get_type_config} from "@finos/perspective/dist/esm/config";
 import template from "../html/row.html";
 
 import style from "../less/row.less";
+import {html, render} from "lit-html";
+
+const SPAN = document.createElement("span");
+SPAN.style.visibility = "hidden";
+SPAN.style.fontFamily = "monospace";
+SPAN.style.fontSize = "12px";
+SPAN.style.position = "absolute";
 
 function get_text_width(text, max = 0) {
-    let span = document.createElement("span");
     // FIXME get these values form the stylesheet
-    span.style.visibility = "hidden";
-    span.style.fontFamily = "monospace";
-    span.style.fontSize = "12px";
-    span.style.position = "absolute";
-    span.innerHTML = text;
-    document.body.appendChild(span);
-    let width = `${Math.max(max, span.offsetWidth) + 20}px`;
-    document.body.removeChild(span);
+    SPAN.innerHTML = text;
+    document.body.appendChild(SPAN);
+    let width = `${Math.max(max, SPAN.offsetWidth) + 20}px`;
+    document.body.removeChild(SPAN);
     return width;
 }
 
@@ -43,6 +45,19 @@ class Row extends HTMLElement {
         elem.innerHTML = this.getAttribute("name");
     }
 
+    _option_template(agg) {
+        return html`
+            <option value="${agg}">${agg}</option>
+        `;
+    }
+
+    _select_template(category, type) {
+        const items = perspective[category][type] || [];
+        return html`
+            ${items.map(this._option_template)}
+        `;
+    }
+
     set type(t) {
         let elem = this.shadowRoot.querySelector("#name");
         let type = this.getAttribute("type");
@@ -54,29 +69,10 @@ class Row extends HTMLElement {
         elem.classList.add(type);
         let agg_dropdown = this.shadowRoot.querySelector("#column_aggregate");
         let filter_dropdown = this.shadowRoot.querySelector("#filter_operator");
-        switch (type_config.type || type) {
-            case "float":
-            case "integer":
-                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.float.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.float.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                break;
-            case "boolean":
-                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.boolean.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.boolean.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                break;
-            case "date":
-                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                break;
-            case "datetime":
-                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                break;
-            case "string":
-                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.string.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.string.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-            default:
-        }
+
+        render(this._select_template("TYPE_AGGREGATES", type_config.type || type), agg_dropdown);
+        render(this._select_template("TYPE_FILTERS", type_config.type || type), filter_dropdown);
+
         if (!this.hasAttribute("aggregate")) {
             this.aggregate = type_config.aggregate;
         } else {

diff --git a/packages/perspective-viewer/src/js/viewer.js b/packages/perspective-viewer/src/js/viewer.js
@@ -66,6 +66,7 @@ class PerspectiveViewer extends ActionElement {
         this._register_debounce_instance();
         this._show_config = true;
         this._show_warnings = true;
+        this.__render_times = [];
         window.addEventListener("load", this._resize_handler);
         window.addEventListener("resize", this._resize_handler);
     }

diff --git a/packages/perspective-viewer/src/js/viewer/dom_element.js b/packages/perspective-viewer/src/js/viewer/dom_element.js
@@ -12,6 +12,21 @@ import {dragend} from "./dragdrop.js";
 import {renderers} from "./renderers.js";
 
 import {PerspectiveElement} from "./perspective_element.js";
+import {html, render} from "lit-html";
+
+/**
+ * Render `<option>` blocks
+ * @param {*} names name objects
+ */
+const options = vals => {
+    const opts = [];
+    for (name in vals) {
+        opts.push(html`
+            <option value="${name}">${vals[name].name || name}</option>
+        `);
+    }
+    return opts;
+};
 
 export class DomElement extends PerspectiveElement {
     _clear_columns() {
@@ -290,11 +305,7 @@ export class DomElement extends PerspectiveElement {
     // sets state, manipulates DOM
     _register_view_options() {
         let current_renderers = renderers.getInstance();
-        for (let name in current_renderers) {
-            const display_name = current_renderers[name].name || name;
-            const opt = `<option value="${name}">${display_name}</option>`;
-            this._vis_selector.innerHTML += opt;
-        }
+        render(options(current_renderers), this._vis_selector);
     }
 
     // sets state

diff --git a/packages/perspective-viewer/src/js/viewer/perspective_element.js b/packages/perspective-viewer/src/js/viewer/perspective_element.js
@@ -8,6 +8,7 @@
  */
 
 import _ from "lodash";
+import {html, render} from "lit-html";
 
 import perspective from "@finos/perspective";
 import {get_type_config} from "@finos/perspective/dist/esm/config";
@@ -88,6 +89,32 @@ function calculate_throttle_timeout(render_time) {
     return Math.min(10000, Math.max(0, timeout));
 }
 
+const _total_template = args => {
+    if (args) {
+        const x = numberWithCommas(args[0]);
+        const y = numberWithCommas(args[1]);
+        const total = Math.floor((args[0] / args[1]) * 100);
+        return html`
+            <span title="${x} / ${y}" class="plugin_information--overflow-hint">&nbsp;<span class="plugin_information--overflow-hint-percent">${total}%</span>&nbsp;</span>
+        `;
+    }
+};
+
+const _nowrap_template = text => {
+    if (text !== "") {
+        return html`
+            <span style="white-space:nowrap">${text}</span>
+        `;
+    }
+};
+
+/**
+ * Render warning template tagged literal.
+ * @param {*} strings
+ * @param  {...[n, m]} args tuples of rationals to be formatted.
+ */
+const _warning = (strings, ...args) => strings.flatMap((str, idx) => [_nowrap_template(str), _total_template(args[idx])]).filter(x => x);
+
 /******************************************************************************
  *
  * PerspectiveElement
@@ -212,34 +239,26 @@ export class PerspectiveElement extends StateElement {
     }
 
     async _warn_render_size_exceeded(max_cols, max_rows) {
-        const total = (n, m) =>
-            `<span title="${numberWithCommas(n)} / ~${numberWithCommas(m)}" class="plugin_information--overflow-hint">&nbsp;<span class="plugin_information--overflow-hint-percent">${Math.floor(
-                (n / m) * 100
-            )}%</span>&nbsp;</span>`;
         if (this._show_warnings && (max_cols || max_rows)) {
             const num_columns = await this._view.num_columns();
             const num_rows = await this._view.num_rows();
             const count = num_columns * num_rows;
-
             const columns_are_truncated = max_cols && max_cols < num_columns;
             const rows_are_truncated = max_rows && max_rows < num_rows;
             if (columns_are_truncated && rows_are_truncated) {
                 this._plugin_information.classList.remove("hidden");
-                const warning = `<span style="white-space:nowrap">Rendering </span>${total(max_cols, num_columns)}<span style="white-space:nowrap"> of columns and </span>${total(
-                    num_columns * max_rows,
-                    count
-                )}<span style="white-space:nowrap"> of points.</span>`;
-                this._plugin_information_message.innerHTML = warning;
+                const warning = _warning`Rendering ${[max_cols, num_columns]} of columns and ${[num_columns * max_rows, count]} of points.`;
+                render(warning, this._plugin_information_message);
                 return true;
             } else if (columns_are_truncated) {
                 this._plugin_information.classList.remove("hidden");
-                const warning = `<span style="white-space:nowrap">Rendering </span>${total(max_cols, num_columns)}<span style="white-space:nowrap"> of columns.</span>`;
-                this._plugin_information_message.innerHTML = warning;
+                const warning = _warning`Rendering ${[max_cols, num_columns]} of columns.`;
+                render(warning, this._plugin_information_message);
                 return true;
             } else if (rows_are_truncated) {
                 this._plugin_information.classList.remove("hidden");
-                const warning = `<span style="white-space:nowrap">Rendering </span>${total(num_columns * max_rows, count)}<span style="white-space:nowrap"> of points.</span>`;
-                this._plugin_information_message.innerHTML = warning;
+                const warning = _warning`Rendering ${[num_columns * max_rows, count]} of points.`;
+                render(warning, this._plugin_information_message);
                 return true;
             } else {
                 this._plugin_information.classList.add("hidden");

diff --git a/packages/perspective-viewer/src/js/viewer/renderers.js b/packages/perspective-viewer/src/js/viewer/renderers.js
@@ -7,9 +7,11 @@
  *
  */
 
+import {html, render} from "lit-html";
+
 const RENDERERS = {};
 
-export const renderers = new class {
+export const renderers = new (class {
     /**
      * Register a plugin with the <perspective-viewer> component.
      *
@@ -43,19 +45,24 @@ export const renderers = new class {
     getInstance() {
         return RENDERERS;
     }
-}();
+})();
 
 global.registerPlugin = renderers.registerPlugin;
 
 global.getPlugin = renderers.getPlugin;
 
+const template = csv =>
+    html`
+        <pre style="margin:0;overflow:scroll;position:absolute;width:100%;height:100%">${csv}</pre>
+    `;
+
 export function register_debug_plugin() {
     global.registerPlugin("debug", {
         name: "Debug",
         create: async function(div) {
             const csv = await this._view.to_csv({config: {delimiter: "|"}});
             const timer = this._render_time();
-            div.innerHTML = `<pre style="margin:0;overflow:scroll;position:absolute;width:100%;height:100%">${csv}</pre>`;
+            render(template(csv), div);
             timer();
         },
         selectMode: "toggle",