@perspective-dev/viewer-datagrid 4.2.0 → 4.3.0

package/dist/esm/types.d.ts

@@ -1,4 +1,4 @@
-import type { View, Table, ViewConfig, ColumnType, SortDir, ViewWindow } from "@perspective-dev/client";
+import type { View, Table, ViewConfig, ColumnType, SortDir, ViewWindow, ViewConfigUpdate } from "@perspective-dev/client";
 import { RegularTableElement } from "regular-table";
 import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
 export type { RegularTableElement as RegularTable };
@@ -158,19 +158,14 @@ export type FormatterCache = Map<string, FormatterCacheEntry>;
 export interface CellConfigResult {
     row: Record<string, unknown>;
     column_names: string[];
-    config: Partial<ViewConfig>;
+    config: ViewConfigUpdate;
 }
 export interface PerspectiveClickDetail {
     row: Record<string, unknown>;
     column_names: string[];
     config: Partial<ViewConfig>;
 }
-export interface PerspectiveSelectDetail {
-    selected: boolean;
-    row: Record<string, unknown>;
-    column_names?: string[];
-    config: Partial<ViewConfig>;
-}
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer";
 export interface HandledMouseEvent extends MouseEvent {
     handled?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-datagrid",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "Perspective datagrid plugin based on `regular-table`",
   "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
   "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
@@ -32,7 +32,7 @@
     "@perspective-dev/client": "",
     "@perspective-dev/viewer": "",
     "chroma-js": ">=3 <4",
-    "regular-table": "=0.8.1"
+    "regular-table": "=0.8.3"
   },
   "devDependencies": {
     "@prospective.co/procss": "0.1.18",

package/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 {

package/src/ts/custom_elements/datagrid.ts

@@ -133,6 +133,10 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return ["Columns"];
     }
 
+    get group_rollups(): string[] {
+        return ["rollup", "flat", "total"];
+    }
+
     /**
      * 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) {

package/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.
  */

package/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";
@@ -23,7 +24,7 @@ import type {
     Schema,
 } from "../types.js";
 import type { CellScalar, DataResponse } from "regular-table/dist/esm/types.js";
-import { ViewWindow } from "@perspective-dev/client";
+import { ViewConfig, ViewWindow } from "@perspective-dev/client";
 
 interface ColumnData {
     __ROW_PATH__?: unknown[][];
@@ -191,8 +192,10 @@ export function createDataListener(
             column_paths.push(path);
         }
 
+        const is_dim_call = x1 - x0 > 0 && y1 - y0 > 0;
+
         // Only update the last state if this is not a "phantom" call.
-        if (x1 - x0 > 0 && y1 - y0 > 0) {
+        if (is_dim_call) {
             this.last_column_paths = last_column_paths;
             this.last_meta = last_meta;
             this.last_ids = last_ids;
@@ -207,9 +210,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,
@@ -219,7 +225,9 @@ export function createDataListener(
             ),
         ) as (string | HTMLElement)[][];
 
-        const num_row_headers = row_headers[0]?.length;
+        const num_row_headers = !is_dim_call
+            ? row_header_depth(this._config)
+            : row_headers[0]?.length;
 
         const result: DataResponse = {
             num_column_headers:
@@ -240,3 +248,15 @@ export function createDataListener(
         return result;
     };
 }
+
+function row_header_depth(config: ViewConfig) {
+    if (config.group_rollup_mode === "flat") {
+        return config.group_by.length;
+    } else if (config.group_rollup_mode === "total") {
+        return 0;
+    } else if (config.group_by.length === 0) {
+        return 0;
+    } else {
+        return config.group_by.length + 1;
+    }
+}

package/src/ts/event_handlers/row_select_click.ts

@@ -11,11 +11,11 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import getCellConfig from "../get_cell_config.js";
-import type {
-    RegularTable,
-    DatagridModel,
-    PerspectiveViewerElement,
-    HandledMouseEvent,
+import {
+    type RegularTable,
+    type DatagridModel,
+    type PerspectiveViewerElement,
+    type HandledMouseEvent,
     PerspectiveSelectDetail,
 } from "../types.js";
 
@@ -52,28 +52,31 @@ export async function selectionListener(
         const is_deselect =
             !!selected && id.length === selected.length && key_match;
 
-        let detail: PerspectiveSelectDetail = {
-            selected: !is_deselect,
-            row: {},
-            config: { filter: [] },
-        };
-
         const { row, column_names, config } = await getCellConfig(
             this,
             meta.y,
             meta.type === "body" ? meta.x : 0,
         );
 
+        let detail: PerspectiveSelectDetail;
         if (is_deselect) {
             selected_rows_map.delete(regularTable);
-            detail = {
-                ...detail,
+            detail = new PerspectiveSelectDetail(
+                false,
                 row,
-                config: { filter: structuredClone(this._config.filter) },
-            };
+                [],
+                [],
+                [{ filter: structuredClone(this._config.filter) }],
+            );
         } else {
             selected_rows_map.set(regularTable, id);
-            detail = { ...detail, row, column_names, config };
+            detail = new PerspectiveSelectDetail(
+                true,
+                row,
+                column_names,
+                [],
+                [config],
+            );
         }
 
         await regularTable.draw({ preserve_width: true });

package/src/ts/event_handlers/sort.ts

@@ -28,13 +28,13 @@ const ROW_SORT_ORDER: SortRotationOrder = {
 
 const ROW_COL_SORT_ORDER: SortRotationOrder = {
     desc: "asc",
-    asc: "col desc",
+    asc: undefined,
     "desc abs": "asc abs",
-    "asc abs": "col desc abs",
-    "col desc": "col asc",
-    "col asc": undefined,
-    "col desc abs": "col asc abs",
-    "col asc abs": undefined,
+    "asc abs": undefined,
+    // "col desc": "col asc",
+    // "col asc": undefined,
+    // "col desc abs": "col asc abs",
+    // "col asc abs": undefined,
 };
 
 export async function sortHandler(
@@ -49,7 +49,7 @@ export async function sortHandler(
     const column_name = meta.column_header[this._config.split_by.length];
     const sort_method =
         event.ctrlKey ||
-        (event as MouseEvent & { metaKet?: boolean }).metaKet ||
+        (event as MouseEvent & { metaKey?: boolean }).metaKey ||
         event.altKey
             ? append_sort
             : override_sort;
@@ -97,6 +97,7 @@ export function override_sort(
             return sort ? [sort] : [];
         }
     }
+
     return [[column_name, abs ? "desc abs" : "desc"]];
 }
 
@@ -111,8 +112,10 @@ export function create_sort(
     const inc_sort_dir: SortDir | undefined = sort_dir
         ? order[sort_dir]
         : "desc";
+
     if (inc_sort_dir) {
         return [column_name, inc_sort_dir];
     }
+
     return undefined;
 }

package/src/ts/model/create.ts

@@ -87,21 +87,21 @@ export async function createModel(
         }
 
         let split_by_changed = old.split_by.length !== config.split_by.length;
-        if (split_by_changed) {
+        if (!split_by_changed) {
             for (const lvl in old.split_by) {
                 split_by_changed ||= config.split_by[lvl] !== old.split_by[lvl];
             }
         }
 
         let columns_changed = old.columns.length !== config.columns.length;
-        if (columns_changed) {
+        if (!columns_changed) {
             for (const lvl in old.columns) {
                 columns_changed ||= config.columns[lvl] !== old.columns[lvl];
             }
         }
 
         let filter_changed = old.filter.length !== config.filter.length;
-        if (filter_changed) {
+        if (!filter_changed) {
             for (const lvl in old.filter) {
                 for (const i in config.filter[lvl]) {
                     filter_changed ||=
@@ -112,7 +112,7 @@ export async function createModel(
         }
 
         let sort_changed = old.sort.length !== config.sort.length;
-        if (sort_changed) {
+        if (!sort_changed) {
             for (const lvl in old.sort) {
                 for (const i in config.sort[lvl]) {
                     sort_changed ||=
@@ -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 ||

package/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;

package/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];

package/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);

package/src/ts/types.ts

@@ -17,6 +17,7 @@ import type {
     ColumnType,
     SortDir,
     ViewWindow,
+    ViewConfigUpdate,
 } from "@perspective-dev/client";
 import { RegularTableElement } from "regular-table";
 import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
@@ -244,7 +245,7 @@ export type FormatterCache = Map<string, FormatterCacheEntry>;
 export interface CellConfigResult {
     row: Record<string, unknown>;
     column_names: string[];
-    config: Partial<ViewConfig>;
+    config: ViewConfigUpdate;
 }
 
 // Custom event detail types
@@ -254,12 +255,7 @@ export interface PerspectiveClickDetail {
     config: Partial<ViewConfig>;
 }
 
-export interface PerspectiveSelectDetail {
-    selected: boolean;
-    row: Record<string, unknown>;
-    column_names?: string[];
-    config: Partial<ViewConfig>;
-}
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer";
 
 // Mouse event with handled flag
 export interface HandledMouseEvent extends MouseEvent {