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-datagrid/src/less/regular_table.less

@@ -128,7 +128,8 @@ perspective-viewer {
     border-color: var(--selected-row--background-color, #ea7319) !important;
 }
 
-.psp-row-selected.psp-tree-label:not(:hover):before {
+regular-table:not(.flat-group-rollup-mode)
+    .psp-row-selected.psp-tree-label:not(:hover):before {
     color: white;
 }
 
@@ -254,29 +255,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];

pnpm-workspace.yaml

@@ -39,7 +39,7 @@ catalog:
     "pro_self_extracting_wasm": "0.0.9"
     "react-dom": ">17 <20"
     "react": ">17 <20"
-    "regular-table": "=0.8.1"
+    "regular-table": "=0.8.2"
     "stoppable": "=1.1.0"
     "ws": "^8.17.0"
 

rust/perspective-client/perspective.proto

@@ -519,7 +519,7 @@ message ViewConfig {
     map<string, AggList> aggregates = 7;
     FilterReducer filter_op = 8;
     optional uint32 group_by_depth = 9;
-    optional bool leaves_only = 10;
+    optional GroupRollupMode group_rollup_mode = 10;
 
     message AggList {
         repeated string aggregations = 1;
@@ -540,6 +540,12 @@ message ViewConfig {
         AND = 0;
         OR = 1;
     }
+
+    enum GroupRollupMode {
+        ROLLUP = 0;
+        FLAT = 1;
+        // TOTAL = 2;
+    }
 }
 
 message ColumnsUpdate {