@perspective-dev/viewer-datagrid 4.1.1 → 4.3.0

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,13 +49,13 @@ 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;
 
     const abs = event.shiftKey;
-    const sort = sort_method.call(this, column_name, abs);
+    const sort = sort_method.call(this, `${column_name}`, abs);
     await viewer.restore({ 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/get_cell_config.ts

@@ -49,6 +49,7 @@ export default async function getCellConfig(
         column_names: [],
         config: { filter: [] },
     };
+
     let column_filters: Filter[] = [];
     if (column_paths) {
         const split_by_values = column_paths.split("|");

package/src/ts/model/create.ts

@@ -19,16 +19,17 @@ import type {
     View,
     ViewConfig,
 } from "@perspective-dev/client";
-import type {
-    DatagridModel,
-    DatagridPluginElement,
-    RegularTable,
-    Schema,
-    CellMeta,
-    ElemFactory,
-    EditMode,
-    PerspectiveViewerElement,
+import {
+    type DatagridModel,
+    type DatagridPluginElement,
+    type RegularTable,
+    type Schema,
+    type ElemFactory,
+    type EditMode,
+    type PerspectiveViewerElement,
+    get_psp_type,
 } from "../types.js";
+import { CellMetadata } from "regular-table/dist/esm/types.js";
 
 function get_rule(regular: HTMLElement, tag: string, def: string): string {
     const color = window.getComputedStyle(regular).getPropertyValue(tag).trim();
@@ -64,14 +65,6 @@ class ElemFactoryImpl implements ElemFactory {
     }
 }
 
-function get_psp_type(this: DatagridModel, metadata: CellMeta): ColumnType {
-    if (metadata.x !== undefined && metadata.x >= 0) {
-        return this._column_types[metadata.x];
-    } else {
-        return this._row_header_types[metadata.row_header_x! - 1];
-    }
-}
-
 export async function createModel(
     this: DatagridPluginElement,
     regular: RegularTable,
@@ -94,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 ||=
@@ -119,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 ||=
@@ -129,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 =
@@ -139,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 ||
@@ -222,7 +219,7 @@ export async function createModel(
         }),
         _series_color_map: new Map<string, string>(),
         _series_color_seed: new Map<string, number>(),
-        get_psp_type,
+        // get_psp_type,
         _div_factory: extend._div_factory || new ElemFactoryImpl("div"),
     }) as DatagridModel;
 

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

@@ -12,11 +12,12 @@
 
 import { RegularTableElement } from "regular-table";
 
-import type {
-    DatagridModel,
-    PerspectiveViewerElement,
-    ColumnsConfig,
-    DatagridPluginElement,
+import {
+    type DatagridModel,
+    type PerspectiveViewerElement,
+    type ColumnsConfig,
+    type DatagridPluginElement,
+    get_psp_type,
 } from "../types.js";
 
 import { cell_style_numeric } from "./table_cell/numeric.js";
@@ -28,20 +29,7 @@ import {
     CollectedCell,
     LocalSelectedPositionMap,
     LocalSelectedRowsMap,
-    CellMetaExtended,
 } from "./types.js";
-import { ColumnType } from "@perspective-dev/client";
-
-function get_psp_type(
-    model: DatagridModel,
-    metadata: CellMetaExtended,
-): ColumnType {
-    if (metadata.x !== undefined && metadata.x >= 0) {
-        return model._column_types[metadata.x];
-    } else {
-        return model._row_header_types[(metadata.row_header_x ?? 0) - 1];
-    }
-}
 
 /**
  * Apply styles to all body cells in a single pass.
@@ -61,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];
@@ -71,6 +64,7 @@ export function applyBodyCellStyles(
         const is_numeric = type === "integer" || type === "float";
 
         // Calculate aggregate depth visibility
+        // @ts-ignore
         metadata._is_hidden_by_aggregate_depth = ((x?: number) =>
             x === 0 || x === undefined
                 ? false
@@ -109,6 +103,7 @@ export function applyBodyCellStyles(
             "psp-bool-type",
             type === "boolean" && metadata.user !== null,
         );
+
         td.classList.toggle("psp-null", metadata.value === null);
         td.classList.toggle("psp-align-right", !isHeader && is_numeric);
         td.classList.toggle("psp-align-left", isHeader || !is_numeric);
@@ -138,14 +133,18 @@ export function applyBodyCellStyles(
         }
 
         if (
-            metadata.row_header_x === undefined ||
+            metadata.type !== "row_header" ||
             metadata.row_header_x ===
                 (metadata.row_header as unknown[]).length - 1 ||
             (metadata.row_header as unknown[])[metadata.row_header_x + 1] ===
                 undefined
         ) {
             td.dataset.y = String(metadata.y);
-            td.dataset.x = String(metadata.x);
+            if (metadata.type !== "row_header") {
+                td.dataset.x = String(metadata.x);
+            } else {
+                delete td.dataset.x;
+            }
         } else {
             delete td.dataset.y;
             delete td.dataset.x;
@@ -166,6 +165,7 @@ export function applyBodyCellStyles(
                 const selectedArr = selected as unknown[];
                 if (isHeader) {
                     if (
+                        metadata.type === "row_header" &&
                         metadata.row_header_x !== undefined &&
                         !!id[metadata.row_header_x]
                     ) {
@@ -195,7 +195,7 @@ export function applyBodyCellStyles(
         }
 
         // Apply editable styling (if editable)
-        if (!isHeader && metadata.x !== undefined) {
+        if (!isHeader && metadata.type === "body") {
             if (isEditable && this._is_editable[metadata.x]) {
                 const col_name =
                     metadata.column_header?.[this._config.split_by.length];

package/src/ts/style_handlers/column_header.ts

@@ -11,7 +11,11 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { RegularTableElement } from "regular-table";
-import type { DatagridModel, PerspectiveViewerElement } from "../types.js";
+import {
+    get_psp_type,
+    type DatagridModel,
+    type PerspectiveViewerElement,
+} from "../types.js";
 import { CollectedHeaderRow } from "./types.js";
 
 /**
@@ -93,20 +97,28 @@ 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) continue;
+        if (
+            !metadata ||
+            metadata.type === "body" ||
+            metadata.type === "row_header"
+        )
+            continue;
 
         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.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);
@@ -147,7 +159,7 @@ export function styleColumnHeaderRow(
             !is_menu_row && !!sort && sort[1] === "col desc abs",
         );
 
-        const type = this.get_psp_type(metadata);
+        const type = get_psp_type(this, metadata);
         const is_numeric = type === "integer" || type === "float";
         const is_string = type === "string";
         const is_date = type === "date";

package/src/ts/style_handlers/consolidated.ts

@@ -11,8 +11,6 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { RegularTableElement } from "regular-table";
-import { CellMetadata } from "regular-table/dist/esm/types.js";
-import { ColumnType } from "@perspective-dev/client";
 import { PRIVATE_PLUGIN_SYMBOL } from "../model/index.js";
 import type {
     DatagridModel,
@@ -27,14 +25,11 @@ import { styleColumnHeaderRow } from "./column_header.js";
 import { applyColumnHeaderStyles } from "./editable.js";
 import { applyGroupHeaderStyles } from "./group_header.js";
 import { applyBodyCellStyles } from "./body.js";
-
-interface CellMetaExtended extends CellMetadata {
-    _is_hidden_by_aggregate_depth?: boolean;
-}
+import { CellMetadata } from "regular-table/dist/esm/types.js";
 
 interface CollectedCell {
     element: HTMLElement;
-    metadata: CellMetaExtended;
+    metadata: CellMetadata;
     isHeader: boolean;
 }
 
@@ -118,9 +113,9 @@ export function createConsolidatedStyleListener(
         if (tbody) {
             for (const tr of tbody.children) {
                 for (const cell of tr.children) {
-                    const metadata = regularTable.getMeta(cell) as
-                        | CellMetaExtended
-                        | undefined;
+                    const metadata = regularTable.getMeta(
+                        cell as HTMLElement,
+                    ) as CellMetadata | undefined;
 
                     if (metadata) {
                         const isHeader = cell.tagName === "TH";
@@ -144,9 +139,9 @@ export function createConsolidatedStyleListener(
                 };
 
                 for (const cell of tr.children) {
-                    const metadata = regularTable.getMeta(cell) as
-                        | CellMetadata
-                        | undefined;
+                    const metadata = regularTable.getMeta(
+                        cell as HTMLElement,
+                    ) as CellMetadata | undefined;
 
                     rowData.cells.push({
                         element: cell as HTMLTableCellElement,

package/src/ts/style_handlers/focus.ts

@@ -12,12 +12,7 @@
 
 import { RegularTableElement } from "regular-table";
 import type { DatagridModel, SelectedPosition } from "../types.js";
-
-import {
-    CollectedCell,
-    LocalSelectedPositionMap,
-    CellMetaExtended,
-} from "./types.js";
+import { CollectedCell, LocalSelectedPositionMap } from "./types.js";
 
 /**
  * Apply focus style to the selected cell.
@@ -35,6 +30,7 @@ export function applyFocusStyle(
     if (selected_position) {
         for (const { element: td, metadata } of cells) {
             if (
+                metadata.type === "body" &&
                 metadata.x === selected_position.x &&
                 metadata.y === selected_position.y
             ) {
@@ -77,11 +73,9 @@ export function focusSelectedCell(
     if (tbody) {
         for (const tr of tbody.children) {
             for (const cell of tr.children) {
-                const metadata = regularTable.getMeta(cell) as
-                    | CellMetaExtended
-                    | undefined;
+                const metadata = regularTable.getMeta(cell as HTMLElement);
                 if (
-                    metadata &&
+                    metadata?.type === "body" &&
                     metadata.x === selected_position.x &&
                     metadata.y === selected_position.y
                 ) {

package/src/ts/style_handlers/group_header.ts

@@ -38,8 +38,10 @@ export function applyGroupHeaderStyles(
             td.style.backgroundColor = "";
 
             const needs_border =
-                (header_depth > 0 && metadata.row_header_x === header_depth) ||
-                (metadata.x ?? -1) >= 0;
+                (metadata.type === "corner" &&
+                    header_depth > 0 &&
+                    metadata.row_header_x === header_depth) ||
+                (metadata.type === "column_header" && metadata.x >= 0);
 
             td.classList.toggle("psp-align-right", false);
             td.classList.toggle("psp-align-left", false);
@@ -48,8 +50,9 @@ export function applyGroupHeaderStyles(
             td.classList.toggle("psp-header-border", needs_border);
             td.classList.toggle(
                 "psp-header-group-corner",
-                typeof metadata.x === "undefined",
+                metadata.type === "corner",
             );
+
             td.classList.toggle("psp-color-mode-bar", false);
             td.classList.toggle("psp-header-sort-asc", false);
             td.classList.toggle("psp-header-sort-desc", false);

package/src/ts/style_handlers/table_cell/boolean.ts

@@ -13,16 +13,13 @@
 import { CellMetadata } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 
-interface CellMetaWithFlags extends CellMetadata {
-    _is_hidden_by_aggregate_depth?: boolean;
-}
-
 export function cell_style_boolean(
     this: DatagridModel,
     _plugin: ColumnConfig | undefined,
     td: HTMLElement,
-    metadata: CellMetaWithFlags,
+    metadata: CellMetadata,
 ): void {
+    // @ts-ignore
     if (metadata._is_hidden_by_aggregate_depth) {
         td.style.backgroundColor = "";
         td.style.color = "";

package/src/ts/style_handlers/table_cell/cell_flash.ts

@@ -10,12 +10,12 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { CellMetadata } from "regular-table/dist/esm/types.js";
+import { CellMetadataBody } from "regular-table/dist/esm/types.js";
 import type { DatagridModel, ColorRecord } from "../../types.js";
 
 export function style_cell_flash(
     this: DatagridModel,
-    metadata: CellMetadata,
+    metadata: CellMetadataBody,
     td: HTMLElement,
     [, , , , , pos_s, pos_e]: ColorRecord,
     [, , , , , neg_s, neg_e]: ColorRecord,

package/src/ts/style_handlers/table_cell/datetime.ts

@@ -17,15 +17,11 @@ import {
 } from "../../color_utils.js";
 import type { DatagridModel, ColumnConfig, ColorRecord } from "../../types.js";
 
-interface CellMetaWithFlags extends CellMetadata {
-    _is_hidden_by_aggregate_depth?: boolean;
-}
-
 export function cell_style_datetime(
     this: DatagridModel,
     plugin: ColumnConfig,
     td: HTMLElement,
-    metadata: CellMetaWithFlags,
+    metadata: CellMetadata,
 ): void {
     const colorRecord: ColorRecord = //(() => {
         // if (plugin?.color !== undefined) {
@@ -38,6 +34,7 @@ export function cell_style_datetime(
 
     const [hex, r, g, b] = colorRecord;
 
+    // @ts-ignore
     if (metadata._is_hidden_by_aggregate_depth) {
         td.style.backgroundColor = "";
         td.style.color = "";

package/src/ts/style_handlers/table_cell/row_header.ts

@@ -10,19 +10,18 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { CellMetadata } from "regular-table/dist/esm/types.js";
+import {
+    CellMetadata,
+    CellMetadataRowHeader,
+} from "regular-table/dist/esm/types.js";
 import type { DatagridModel } from "../../types.js";
 import { RegularTableElement } from "regular-table";
 
-interface NextMeta {
-    row_header?: unknown[];
-}
-
 export function cell_style_row_header(
     this: DatagridModel,
     regularTable: RegularTableElement,
     td: HTMLElement,
-    metadata: CellMetadata,
+    metadata: CellMetadataRowHeader,
 ): void {
     const is_not_empty =
         metadata.value !== undefined &&
@@ -33,12 +32,14 @@ export function cell_style_row_header(
     const next = regularTable.getMeta({
         dx: 0,
         dy: (metadata.y ?? 0) - (metadata.y0 ?? 0) + 1,
-    } as unknown as Element) as NextMeta | undefined;
+    } as CellMetadata);
+
     const is_collapse =
         next &&
         next.row_header &&
         typeof next.row_header[(metadata.row_header_x ?? 0) + 1] !==
             "undefined";
+
     td.classList.toggle("psp-tree-label", is_not_empty && !is_leaf);
     td.classList.toggle(
         "psp-tree-label-expand",

package/src/ts/style_handlers/types.ts

@@ -11,16 +11,16 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { RegularTableElement } from "regular-table";
-import { CellMetadata } from "regular-table/dist/esm/types.js";
+import {
+    CellMetadata,
+    CellMetadataBody,
+    CellMetadataRowHeader,
+} from "regular-table/dist/esm/types.js";
 import type { SelectedPosition } from "../types.js";
 
-export interface CellMetaExtended extends CellMetadata {
-    _is_hidden_by_aggregate_depth?: boolean;
-}
-
 export interface CollectedCell {
     element: HTMLElement;
-    metadata: CellMetaExtended;
+    metadata: CellMetadataRowHeader | CellMetadataBody;
     isHeader: boolean;
 }
 

package/src/ts/types.ts

@@ -17,13 +17,28 @@ import type {
     ColumnType,
     SortDir,
     ViewWindow,
+    ViewConfigUpdate,
 } from "@perspective-dev/client";
 import { RegularTableElement } from "regular-table";
 import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
 
 // Re-export types from regular-table for use throughout the codebase
 export type { RegularTableElement as RegularTable };
-export type { CellMetadata as CellMeta };
+
+export function get_psp_type(
+    model: DatagridModel,
+    metadata: CellMetadata,
+): ColumnType {
+    if (
+        metadata.type === "body" ||
+        metadata.type === "column_header" ||
+        metadata.type === "corner"
+    ) {
+        return model._column_types[metadata.x];
+    } else {
+        return model._row_header_types[(metadata.row_header_x ?? 0) - 1];
+    }
+}
 
 // Edit mode for the datagrid
 export type EditMode =
@@ -230,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
@@ -240,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 {