@perspective-dev/viewer-datagrid 4.4.0 → 4.5.0

package/src/ts/event_handlers/sort.ts

@@ -10,14 +10,10 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { RegularTableElement } from "regular-table";
-import type {
-    DatagridModel,
-    PerspectiveViewerElement,
-    SortRotationOrder,
-    SortTerm,
-} from "../types.js";
-import { SortDir } from "@perspective-dev/client";
+import type { RegularTableElement } from "regular-table";
+import type { DatagridModel, SortRotationOrder, SortTerm } from "../types.js";
+import type { SortDir } from "@perspective-dev/client";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 const ROW_SORT_ORDER: SortRotationOrder = {
     desc: "asc",
@@ -31,22 +27,21 @@ const ROW_COL_SORT_ORDER: SortRotationOrder = {
     asc: undefined,
     "desc abs": "asc abs",
     "asc abs": undefined,
-    // "col desc": "col asc",
-    // "col asc": undefined,
-    // "col desc abs": "col asc abs",
-    // "col asc abs": undefined,
 };
 
 export async function sortHandler(
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTableElement,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     event: MouseEvent,
     target: HTMLElement,
 ): Promise<void> {
     const meta = regularTable.getMeta(target);
-    if (!meta?.column_header) return;
-    const column_name = meta.column_header[this._config.split_by.length];
+    if (!meta?.column_header) {
+        return;
+    }
+
+    const column_name = meta.column_header[model._config.split_by.length];
     const sort_method =
         event.ctrlKey ||
         (event as MouseEvent & { metaKey?: boolean }).metaKey ||
@@ -55,22 +50,22 @@ export async function sortHandler(
             : override_sort;
 
     const abs = event.shiftKey;
-    const sort = sort_method.call(this, `${column_name}`, abs);
+    const sort = sort_method(model, `${column_name}`, abs);
     await viewer.restore({ sort });
 }
 
 export function append_sort(
-    this: DatagridModel,
+    model: DatagridModel,
     column_name: string,
     abs: boolean,
 ): SortTerm[] {
     const sort: SortTerm[] = [];
     let found = false;
-    for (const sort_term of this._config.sort) {
+    for (const sort_term of model._config.sort) {
         const [_column_name, _sort_dir] = sort_term;
         if (_column_name === column_name) {
             found = true;
-            const term = create_sort.call(this, column_name, _sort_dir, abs);
+            const term = create_sort(model, column_name, _sort_dir, abs);
             if (term) {
                 sort.push(term);
             }
@@ -87,13 +82,13 @@ export function append_sort(
 }
 
 export function override_sort(
-    this: DatagridModel,
+    model: DatagridModel,
     column_name: string,
     abs: boolean,
 ): SortTerm[] {
-    for (const [_column_name, _sort_dir] of this._config.sort) {
+    for (const [_column_name, _sort_dir] of model._config.sort) {
         if (_column_name === column_name) {
-            const sort = create_sort.call(this, column_name, _sort_dir, abs);
+            const sort = create_sort(model, column_name, _sort_dir, abs);
             return sort ? [sort] : [];
         }
     }
@@ -102,12 +97,12 @@ export function override_sort(
 }
 
 export function create_sort(
-    this: DatagridModel,
+    model: DatagridModel,
     column_name: string,
     sort_dir: SortDir | undefined,
     _abs: boolean,
 ): SortTerm | undefined {
-    const is_col_sortable = this._config.split_by.length > 0;
+    const is_col_sortable = model._config.split_by.length > 0;
     const order = is_col_sortable ? ROW_COL_SORT_ORDER : ROW_SORT_ORDER;
     const inc_sort_dir: SortDir | undefined = sort_dir
         ? order[sort_dir]

package/src/ts/get_cell_config.ts

@@ -12,6 +12,7 @@
 
 import type { View, ViewConfig, Filter, Scalar } from "@perspective-dev/client";
 import type { CellConfigResult } from "./types.js";
+import { isMetaColumn } from "./model/meta_columns.js";
 
 interface ModelWithViewAndConfig {
     _view: View;
@@ -42,8 +43,14 @@ export default async function getCellConfig(
         })
         .filter((x): x is Filter => x !== undefined);
 
-    const column_index = group_by.length > 0 ? col_idx + 1 : col_idx;
-    const column_paths = Object.keys(r[0])[column_index];
+    // Filter out *all* meta columns before indexing into the row's
+    // keys — the DuckDB virtual server's JSON output now includes
+    // per-level `__ROW_PATH_<n>__` columns alongside the
+    // `__ROW_PATH__` sidecar, so the previous `+1` skip (which
+    // assumed exactly one leading meta column) lands on a meta key
+    // when group_by has multiple levels.
+    const user_keys = Object.keys(r[0]).filter((k) => !isMetaColumn(k));
+    const column_paths = user_keys[col_idx];
     const result: CellConfigResult = {
         row: r[0] as Record<string, unknown>,
         column_names: [],
@@ -60,7 +67,7 @@ export default async function getCellConfig(
                 return pivot_value ? [pivot, "==", pivot_value] : undefined;
             })
             .filter((x): x is Filter => x !== undefined)
-            .filter(([, , value]) => value !== "__ROW_PATH__");
+            .filter(([, , value]) => !isMetaColumn(value as string));
     }
 
     const filter = _config.filter.concat(row_filters).concat(column_filters);

package/src/ts/model/column_overrides.ts

@@ -10,11 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type {
-    ColumnOverrides,
-    DatagridPluginElement,
-    RegularTable,
-} from "../types.js";
+import type { ColumnOverrides, DatagridPluginElement } from "../types.js";
 
 interface RegularTableWithOverrides {
     restoreColumnSizes(overrides: Record<number, number | undefined>): void;
@@ -46,7 +42,10 @@ export function restore_column_size_overrides(
         this._cached_column_sizes = old_sizes;
     }
 
-    const overrides: Record<number, number | undefined> = {};
+    const regular_table = this.regular_table as RegularTableWithOverrides;
+    const overrides: Record<number, number | undefined> = {
+        ...regular_table.saveColumnSizes(),
+    };
     const { group_by } = this.model!._config;
     const tree_header_offset = group_by?.length > 0 ? group_by.length + 1 : 0;
 
@@ -57,15 +56,23 @@ export function restore_column_size_overrides(
                 | undefined;
         } else {
             const index = this.model!._column_paths.indexOf(key);
+
+            // Skip keys that don't resolve to a known column — e.g. on the
+            // first draw after `activate`, `_column_paths` has not yet been
+            // populated by the data listener, so we leave any existing
+            // `regular-table` widths untouched rather than clobbering them
+            // with garbage indices.
+            if (index === -1) {
+                continue;
+            }
+
             overrides[index + tree_header_offset] = old_sizes[key] as
                 | number
                 | undefined;
         }
     }
 
-    (this.regular_table as RegularTableWithOverrides).restoreColumnSizes(
-        overrides,
-    );
+    regular_table.restoreColumnSizes(overrides);
 }
 
 /**

package/src/ts/model/create.ts

@@ -10,9 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import chroma from "chroma-js";
 import { createDataListener } from "../data_listener/index.js";
-import { blend, make_color_record } from "../color_utils.js";
+import { blend, make_color_record, parseColor } from "../color_utils.js";
 import type {
     ColumnType,
     Table,
@@ -26,10 +25,42 @@ import {
     type Schema,
     type ElemFactory,
     type EditMode,
-    type PerspectiveViewerElement,
-    get_psp_type,
 } from "../types.js";
-import { CellMetadata } from "regular-table/dist/esm/types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+
+function arraysChanged<T>(a: T[], b: T[]): boolean {
+    if (a.length !== b.length) {
+        return true;
+    }
+
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function nestedArraysChanged<T>(a: T[][], b: T[][]): boolean {
+    if (a.length !== b.length) {
+        return true;
+    }
+
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].length !== b[i].length) {
+            return true;
+        }
+
+        for (let j = 0; j < a[i].length; j++) {
+            if (a[i][j] !== b[i][j]) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
 
 function get_rule(regular: HTMLElement, tag: string, def: string): string {
     const color = window.getComputedStyle(regular).getPropertyValue(tag).trim();
@@ -59,6 +90,7 @@ class ElemFactoryImpl implements ElemFactory {
         if (!this._elements[this._index]) {
             this._elements[this._index] = document.createElement(this._name);
         }
+
         const elem = this._elements[this._index];
         this._index += 1;
         return elem;
@@ -70,61 +102,33 @@ export async function createModel(
     regular: RegularTable,
     table: Table,
     view: View,
+    theme: string,
     extend: Partial<DatagridModel> = {},
 ): Promise<DatagridModel> {
     const config = (await view.get_config()) as ViewConfig;
     if (this?.model?._config) {
         const old = this.model._config;
-        let group_by_changed = old.group_by.length !== config.group_by.length;
+        const group_by_changed = arraysChanged(old.group_by, config.group_by);
         const type_changed =
             (old.group_by.length === 0 || config.group_by.length === 0) &&
             group_by_changed;
 
-        if (!group_by_changed) {
-            for (const lvl in old.group_by) {
-                group_by_changed ||= config.group_by[lvl] !== old.group_by[lvl];
-            }
-        }
-
-        let split_by_changed = old.split_by.length !== config.split_by.length;
-        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) {
-            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) {
-            for (const lvl in old.filter) {
-                for (const i in config.filter[lvl]) {
-                    filter_changed ||=
-                        config.filter[lvl][i as unknown as number] !==
-                        old.filter[lvl][i as unknown as number];
-                }
-            }
-        }
+        const split_by_changed = arraysChanged(old.split_by, config.split_by);
+        const columns_changed = arraysChanged(old.columns, config.columns);
+        const filter_changed = nestedArraysChanged(
+            old.filter as unknown[][],
+            config.filter as unknown[][],
+        );
 
-        let sort_changed = old.sort.length !== config.sort.length;
-        if (!sort_changed) {
-            for (const lvl in old.sort) {
-                for (const i in config.sort[lvl]) {
-                    sort_changed ||=
-                        config.sort[lvl][i as unknown as number] !==
-                        old.sort[lvl][i as unknown as number];
-                }
-            }
-        }
+        const sort_changed = nestedArraysChanged(
+            old.sort as unknown[][],
+            config.sort as unknown[][],
+        );
 
         const group_rollup_mode_changed =
             old.group_rollup_mode !== config.group_rollup_mode;
 
+        const theme_changed = this.model._theme !== theme;
         this._reset_scroll_top = group_by_changed;
         this._reset_scroll_left = split_by_changed;
         this._reset_select =
@@ -139,6 +143,7 @@ export async function createModel(
             split_by_changed ||
             group_by_changed ||
             columns_changed ||
+            theme_changed ||
             type_changed;
     }
 
@@ -148,12 +153,12 @@ export async function createModel(
             view.num_rows(),
             view.schema(),
             view.expression_schema(),
-            (this.parentElement as PerspectiveViewerElement).getEditPort(),
+            (this.parentElement as HTMLPerspectiveViewerElement).getEditPort(),
         ]);
 
-    const _plugin_background = chroma(
+    const _plugin_background = parseColor(
         get_rule(regular, "--psp--background-color", "#FFFFFF"),
-    ).rgb();
+    );
 
     const _pos_fg_color = make_color_record(
         get_rule(regular, "--psp-datagrid--pos-cell--color", "#338DCD"),
@@ -187,10 +192,17 @@ export async function createModel(
     const _column_paths: string[] = [];
     const _is_editable: boolean[] = [];
     const _column_types: ColumnType[] = [];
+    let _edit_mode: EditMode = this._edit_mode || "READ_ONLY";
 
-    const _edit_mode: EditMode = this._edit_mode || "READ_ONLY";
-    this._edit_button!.dataset.editMode = _edit_mode;
+    if (
+        _edit_mode === "SELECT_ROW_TREE" &&
+        (config.group_by.length === 0 || config.group_rollup_mode === "flat")
+    ) {
+        _edit_mode = "READ_ONLY";
+        this._edit_mode = _edit_mode;
+    }
 
+    this._edit_button!.dataset.editMode = _edit_mode;
     const model: DatagridModel = Object.assign(extend, {
         _edit_port,
         _view: view,
@@ -208,6 +220,7 @@ export async function createModel(
         _neg_bg_color,
         _column_paths,
         _column_types,
+        _theme: theme,
         _is_editable,
         _edit_mode,
         _selection_state: {
@@ -219,15 +232,15 @@ export async function createModel(
         }),
         _series_color_map: new Map<string, string>(),
         _series_color_seed: new Map<string, number>(),
+
         // get_psp_type,
         _div_factory: extend._div_factory || new ElemFactoryImpl("div"),
     }) as DatagridModel;
 
     regular.setDataListener(
-        createDataListener(this.parentElement as PerspectiveViewerElement).bind(
-            model,
-            regular,
-        ) as any,
+        createDataListener(
+            this.parentElement as HTMLPerspectiveViewerElement,
+        ).bind(model, regular) as any,
         {
             virtual_mode: (window
                 .getComputedStyle(regular)

package/src/ts/{event_handlers/deselect_all.ts → model/meta_columns.ts}

@@ -10,19 +10,38 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { RegularTableElement } from "regular-table";
-import type { PerspectiveViewerElement } from "../types.js";
+/**
+ * Single-source-of-truth predicate for "this column is metadata, hide
+ * it from the user-visible grid." Five distinct names show up across
+ * the perspective protocol; older datagrid code filtered them by
+ * exact-match in three places, which only worked when the wire shape
+ * was the JSON-sidecar form (`__ROW_PATH__` array-of-arrays).
+ *
+ * The DuckDB virtual-server backend additionally surfaces per-level
+ * `__ROW_PATH_<n>__` columns directly in `to_columns_string` /
+ * `to_json` output (a side effect of keeping them in the frozen Arrow
+ * batch so that `to_arrow` consumers — viewer-charts via
+ * `with_typed_arrays` — see them inline, matching native
+ * `perspective-server`'s `to_arrow` behavior). Without this helper,
+ * those per-level columns slip through the legacy exact-match filters
+ * and render as user columns to the right of the grid.
+ *
+ * Match list:
+ *   - `__ROW_PATH__`     — JSON sidecar; used by the tree header.
+ *   - `__ROW_PATH_<n>__` — per-level columns from the virtual server's
+ *                          inline-arrow shape.
+ *   - `__ID__`           — per-row identity column.
+ *   - `__GROUPING_ID__`  — internal SQL-rollup discriminator. The
+ *                          virtual server strips it server-side, but
+ *                          we cover it defensively in case a future
+ *                          backend leaks it.
+ *
+ * User columns named with leading/trailing double-underscores (e.g.
+ * `__user_col__`) are *not* matched — the regex requires the exact
+ * stems above.
+ */
+const META_COLUMN_RE = /^__(?:ROW_PATH(?:_\d+)?|ID|GROUPING_ID)__$/;
 
-type SelectedRowsMap = Map<RegularTableElement, unknown[]>;
-
-export async function deselect_all_listener(
-    regularTable: RegularTableElement,
-    _viewer: PerspectiveViewerElement,
-    selected_rows_map: SelectedRowsMap,
-): Promise<void> {
-    selected_rows_map.delete(regularTable);
-    for (const td of regularTable.querySelectorAll("td,th")) {
-        td.classList.toggle("psp-row-selected", false);
-        td.classList.toggle("psp-row-subselected", false);
-    }
+export function isMetaColumn(name: string): boolean {
+    return META_COLUMN_RE.test(name);
 }

package/src/ts/model/toolbar.ts

@@ -10,7 +10,12 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { DatagridPluginElement, EditMode } from "../types.js";
+import { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+import type {
+    DatagridModel,
+    DatagridPluginElement,
+    EditMode,
+} from "../types.js";
 
 export const EDIT_MODES: readonly EditMode[] = [
     "READ_ONLY",
@@ -18,34 +23,54 @@ export const EDIT_MODES: readonly EditMode[] = [
     "SELECT_ROW",
     "SELECT_COLUMN",
     "SELECT_REGION",
+    "SELECT_ROW_TREE",
 ] as const;
 
+function isSelectRowTreeAvailable(model?: DatagridModel): boolean {
+    if (!model) {
+        return false;
+    }
+
+    return (
+        model._config.group_by.length > 0 &&
+        model._config.group_rollup_mode !== "flat"
+    );
+}
+
 export function toggle_edit_mode(
     this: DatagridPluginElement,
     mode?: EditMode,
 ): void {
     if (typeof mode === "undefined") {
-        mode =
-            EDIT_MODES[
-                (EDIT_MODES.indexOf(this._edit_mode) + 1) % EDIT_MODES.length
-            ];
+        let idx = EDIT_MODES.indexOf(this._edit_mode);
+        do {
+            idx = (idx + 1) % EDIT_MODES.length;
+        } while (
+            EDIT_MODES[idx] === "SELECT_ROW_TREE" &&
+            !isSelectRowTreeAvailable(this.model)
+        );
+
+        mode = EDIT_MODES[idx];
     }
 
-    (this.parentElement as any)?.setSelection?.();
+    (this.parentElement as HTMLPerspectiveViewerElement)?.setSelection?.();
     this._edit_mode = mode;
     if (this.model) {
         this.model._edit_mode = mode;
+        this.model._tree_selection_id = undefined;
         this.model._selection_state = {
             selected_areas: [],
             dirty: true,
         };
     }
 
+    (this.parentElement as HTMLPerspectiveViewerElement)?.restore?.({
+        plugin_config: { edit_mode: mode },
+    });
+
     if (this._edit_button !== undefined) {
         this._edit_button.dataset.editMode = mode;
     }
-
-    this.dataset.editMode = mode;
 }
 
 export function toggle_scroll_lock(