UI Support

Signed-off-by: Andrew Stein <steinlink@gmail.com>

Author: texodus

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

@@ -136,6 +136,10 @@ class HTMLPerspectiveViewerD3fcPluginElement extends HTMLElement {
         return this._chart.plugin.selectMode || "select";
     }
 
+    get group_rollups(): string[] {
+        return ["flat"];
+    }
+
     get min_config_columns() {
         return (
             this._chart.plugin.initial?.count ||

packages/viewer-d3fc/test/js/barWidth.spec.ts

@@ -47,6 +47,7 @@ test.describe("Bar Width", () => {
             group_by: ["Order Date"],
             split_by: ["Profit"],
             theme: "Pro Light",
+            group_rollup_mode: "flat",
         });
 
         await compareSVGContentsToSnapshot(

packages/viewer-datagrid/src/less/regular_table.less

@@ -128,10 +128,20 @@ perspective-viewer {
     border-color: var(--selected-row--background-color, #ea7319) !important;
 }
 
+regular-table.flat-group-rollup-mode.vertical-row-headers
+    th.psp-tree-label:not(:last-of-type) {
+    writing-mode: vertical-lr;
+}
+
 .psp-row-selected.psp-tree-label:not(:hover):before {
     color: white;
 }
 
+regular-table:not(.flat-group-rollup-mode)
+    .psp-row-selected.psp-tree-label:not(:hover):before {
+    color: white;
+}
+
 .psp-row-subselected,
 :hover .psp-row-subselected,
 :hover th.psp-tree-leaf.psp-row-subselected,
@@ -254,29 +264,36 @@ tbody th:empty {
     max-width: 20px;
     pointer-events: none;
 }
-.psp-tree-label {
-    max-width: 0px;
-    min-width: 0px;
-}
-.psp-tree-label:before {
-    color: var(--icon--color);
-    font-family: var(--button--font-family, inherit);
-    padding-right: 11px;
-}
-.psp-tree-label-expand:before {
-    content: var(--tree-label-expand--content, "+");
-}
-.psp-tree-label-collapse:before {
-    content: var(--tree-label-collapse--content, "-");
-}
-.psp-tree-label-expand,
-.psp-tree-label-collapse {
-    cursor: pointer;
-}
 
-.psp-tree-label:hover:before {
-    color: var(--active--color);
-    text-shadow: 0px 0px 5px var(--active--color);
+regular-table:not(.flat-group-rollup-mode) {
+    .psp-tree-label {
+        max-width: 0px;
+        min-width: 0px;
+    }
+
+    .psp-tree-label:before {
+        color: var(--icon--color);
+        font-family: var(--button--font-family, inherit);
+        padding-right: 11px;
+    }
+
+    .psp-tree-label-expand:before {
+        content: var(--tree-label-expand--content, "+");
+    }
+
+    .psp-tree-label-collapse:before {
+        content: var(--tree-label-collapse--content, "-");
+    }
+
+    .psp-tree-label-expand,
+    .psp-tree-label-collapse {
+        cursor: pointer;
+    }
+
+    .psp-tree-label:hover:before {
+        color: var(--active--color);
+        text-shadow: 0px 0px 5px var(--active--color);
+    }
 }
 
 .psp-tree-leaf {

packages/viewer-datagrid/src/ts/custom_elements/datagrid.ts

@@ -133,6 +133,10 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return ["Columns"];
     }
 
+    get group_rollups(): string[] {
+        return ["rollup", "flat"];
+    }
+
     /**
      * Give the Datagrid a higher priority so it is loaded
      * over the default charts by default.
@@ -179,6 +183,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
             viewport?.start_row !== null
                 ? viewport.end_row - viewport.start_row
                 : await view.num_rows();
+
         let out = "";
         for (let ridx = 0; ridx < nrows; ridx++) {
             for (const col_name of cols) {

packages/viewer-datagrid/src/ts/data_listener/format_tree_header.ts

@@ -52,6 +52,22 @@ export function* format_tree_header_row_path(
     }
 }
 
+export function* format_flat_header_row_path(
+    this: DatagridModel,
+    paths: unknown[][] = [],
+    row_headers: string[],
+    regularTable: RegularTable,
+): Generator<RowHeaderCell[]> {
+    const plugins: ColumnsConfig =
+        (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
+
+    for (let path of paths) {
+        yield path.map((part, i) =>
+            format_cell.call(this, row_headers[i], part, plugins, true),
+        ) as RowHeaderCell[];
+    }
+}
+
 /**
  * Format a single cell of the `group_by` tree header.
  */

packages/viewer-datagrid/src/ts/data_listener/index.ts

@@ -13,6 +13,7 @@
 import { PRIVATE_PLUGIN_SYMBOL } from "../types.js";
 import { format_cell } from "./format_cell.js";
 import {
+    format_flat_header_row_path,
     format_tree_header,
     format_tree_header_row_path,
 } from "./format_tree_header.js";
@@ -207,9 +208,12 @@ export function createDataListener(
         }
 
         const is_row_path = columns.__ROW_PATH__ !== undefined;
+        const is_flat = this._config.group_rollup_mode === "flat";
         const row_headers = Array.from(
             (is_row_path
-                ? format_tree_header_row_path
+                ? is_flat
+                    ? format_flat_header_row_path
+                    : format_tree_header_row_path
                 : format_tree_header
             ).call(
                 this,

packages/viewer-datagrid/src/ts/model/create.ts

@@ -122,6 +122,9 @@ export async function createModel(
             }
         }
 
+        const group_rollup_mode_changed =
+            old.group_rollup_mode !== config.group_rollup_mode;
+
         this._reset_scroll_top = group_by_changed;
         this._reset_scroll_left = split_by_changed;
         this._reset_select =
@@ -132,6 +135,7 @@ export async function createModel(
             columns_changed;
 
         this._reset_column_size =
+            group_rollup_mode_changed ||
             split_by_changed ||
             group_by_changed ||
             columns_changed ||

packages/viewer-datagrid/src/ts/plugin/draw.ts

@@ -37,6 +37,7 @@ export async function draw(
     const drawPromise = this.regular_table.draw({
         invalid_columns: true,
     } as any);
+
     if (this._reset_scroll_top) {
         this.regular_table.scrollTop = 0;
         this._reset_scroll_top = false;

packages/viewer-datagrid/src/ts/style_handlers/body.ts

@@ -49,6 +49,11 @@ export function applyBodyCellStyles(
     const hasSelected = selectedRowsMap.has(regularTable);
     const selected = selectedRowsMap.get(regularTable);
 
+    regularTable.classList.toggle(
+        "flat-group-rollup-mode",
+        this._config.group_rollup_mode === "flat",
+    );
+
     for (const { element: td, metadata, isHeader } of cells) {
         const column_name =
             metadata.column_header?.[this._config.split_by.length];

packages/viewer-datagrid/src/ts/style_handlers/column_header.ts

@@ -97,9 +97,11 @@ export function styleColumnHeaderRow(
     regularTable: RegularTableElement,
     is_menu_row: boolean,
 ): void {
-    const header_depth = this._config.group_by.length;
-    const selectedColumn = this._column_settings_selected_column;
+    const header_depth =
+        this._config.group_by.length -
+        (this._config.group_rollup_mode === "flat" ? 1 : 0);
 
+    const selectedColumn = this._column_settings_selected_column;
     for (const { element: td, metadata } of headerRow.cells) {
         if (
             !metadata ||
@@ -110,14 +112,13 @@ export function styleColumnHeaderRow(
 
         const column_name =
             metadata.column_header?.[this._config.split_by.length];
+
         const sort = this._config.sort.find((x) => x[0] === column_name);
-        let needs_border =
-            metadata.type === "corner" &&
-            metadata.row_header_x === header_depth;
         const is_corner = typeof metadata.x === "undefined";
-        needs_border =
-            needs_border ||
-            (metadata.x !== undefined &&
+        const needs_border =
+            (metadata.type === "corner" &&
+                metadata.row_header_x === header_depth) ||
+            (!is_corner &&
                 (metadata.x + 1) % this._config.columns.length === 0);
 
         td.classList.toggle("psp-header-border", needs_border);