Merge pull request #3015 from finos/d3fc-style-2

Fix `perspective-viewer-datagrid` draw error when `group_by`+`split_by`+`filter` are empty

Author: texodus

packages/perspective-viewer-d3fc/package.json

@@ -51,6 +51,8 @@
         "@finos/perspective-viewer": "workspace:^",
         "chroma-js": "^1.3.4",
         "d3fc": "^15.2.4",
+        "@d3fc/d3fc-chart": "^5.1.9",
+        "@d3fc/d3fc-element": "^6.2.0",
         "d3-selection": "^3.0.0",
         "d3-array": "^3.2.1",
         "d3-svg-legend": "^2.25.6",

packages/perspective-viewer-d3fc/src/ts/index.ts

@@ -11,9 +11,9 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import type { IPerspectiveViewerPlugin } from "@finos/perspective-viewer";
-import { init } from "./plugin/d3fc_global_styles";
+import { register } from "./plugin/plugin";
 
-await init();
+await register();
 
 declare global {
     interface CustomElementRegistry {

packages/perspective-viewer-d3fc/src/ts/plugin/d3fc_global_styles.ts

@@ -21,6 +21,9 @@ import * as d3 from "d3";
 
 import { Chart, Settings, Type } from "../types";
 
+import * as d3fc_style_1 from "@d3fc/d3fc-chart/src/css.js";
+import * as d3fc_style_2 from "@d3fc/d3fc-element/src/css.js";
+
 const DEFAULT_PLUGIN_SETTINGS = {
     initial: {
         type: "number",
@@ -30,7 +33,13 @@ const DEFAULT_PLUGIN_SETTINGS = {
     selectMode: "select",
 };
 
-const D3FC_GLOBAL_STYLES = [];
+const D3FC_GLOBAL_STYLES = [d3fc_style_1.css, d3fc_style_2.css, style].map(
+    (x) => {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(x);
+        return sheet;
+    }
+);
 
 const EXCLUDED_SETTINGS = [
     "crossValues",
@@ -53,18 +62,6 @@ async function register_element(plugin_name: string) {
     await perspectiveViewerClass.registerPlugin(plugin_name);
 }
 
-export function createStyleSheets(sheets) {
-    for (const style of sheets) {
-        const sheet = new CSSStyleSheet();
-        sheet.replaceSync(style.textContent);
-        D3FC_GLOBAL_STYLES.push(sheet);
-    }
-
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(style);
-    D3FC_GLOBAL_STYLES.push(sheet);
-}
-
 export function register(...plugin_names: string[]) {
     const plugins = new Set(
         plugin_names.length > 0

packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts

@@ -35,7 +35,7 @@
         "@finos/perspective": "workspace:^",
         "@finos/perspective-viewer": "workspace:^",
         "chroma-js": "^1.3.4",
-        "regular-table": "=0.6.7"
+        "regular-table": "=0.6.8"
     },
     "devDependencies": {
         "@prospective.co/procss": "^0.1.16",

packages/perspective-viewer-datagrid/package.json

@@ -128,6 +128,8 @@ export function createDataListener(viewer) {
         }
 
         return {
+            num_column_headers: column_headers[0]?.length || 1,
+            num_row_headers: this._config.group_by.length + 1,
             num_rows: this._num_rows,
             num_columns: this._column_paths.length,
             row_headers: Array.from(

packages/perspective-viewer-datagrid/src/js/data_listener/index.js

@@ -143,12 +143,6 @@ export async function createModel(regular, table, view, extend = {}) {
         this.parentElement.getEditPort(),
     ]);
 
-    // Due to conflation, this plugin may be called on a `View` that has yet
-    // to be populated with data by a `poll()`.
-    if (Object.keys(schema).length === 0) {
-        return undefined;
-    }
-
     const _plugin_background = chroma(
         get_rule(regular, "--plugin--background", "#FFFFFF")
     ).rgb();

packages/perspective-viewer-datagrid/src/js/model/create.js

@@ -0,0 +1,4 @@
+-   viewer settings
+    -   Viewer/engine Settings
+    -   Stats
+    *   Debug Columns .. _ Style _ Attributes Plugins .. - Plugin Settings

packages/perspective-viewer-datagrid/src/js/plugin/* viewer settings.md

@@ -95,7 +95,14 @@ export function column_header_style_listener(regularTable, viewer) {
             1
         );
 
-        style_column_header_row.call(this, regularTable, col_headers, false);
+        if (col_headers) {
+            style_column_header_row.call(
+                this,
+                regularTable,
+                col_headers,
+                false
+            );
+        }
 
         let [style_menu_headers] = group_header_trs.splice(
             this._config.split_by.length,
@@ -116,7 +123,7 @@ export function column_header_style_listener(regularTable, viewer) {
 function style_column_header_row(regularTable, col_headers, is_menu_row) {
     // regular header styling
     const header_depth = regularTable._view_cache.config.row_pivots.length - 1;
-    for (const td of col_headers?.children) {
+    for (const td of col_headers.children) {
         const metadata = regularTable.getMeta(td);
         const column_name =
             metadata.column_header?.[this._config.split_by.length];

packages/perspective-viewer-datagrid/src/js/style_handlers/column_header.js

@@ -94,6 +94,32 @@ test.describe("Datagrid with superstore data set", () => {
             "column-headers-are-printed-correctly-split-by-a-date-column.txt"
         );
     });
+
+    test("A filtered-to-empty dataset with group_by and split_by does not error internally", async ({
+        page,
+    }) => {
+        await page.goto("/tools/perspective-test/src/html/basic-test.html");
+        await page.evaluate(async () => {
+            while (!window["__TEST_PERSPECTIVE_READY__"]) {
+                await new Promise((x) => setTimeout(x, 10));
+            }
+        });
+
+        await page.evaluate(async () => {
+            await document.querySelector("perspective-viewer").restore({
+                plugin: "Datagrid",
+                columns: ["Sales", "Profit"],
+                group_by: ["State"],
+                split_by: ["Ship Mode"],
+                filter: [["State", "==", "Schmexas"]],
+            });
+        });
+
+        compareContentsToSnapshot(
+            await getDatagridContents(page),
+            "a-filtered-to-empty-dataset-with-group-by-and-split-by-does-not-error-internally.txt"
+        );
+    });
 });
 
 test.describe("Datagrid with superstore arrow data set", () => {