@perspective-dev/viewer-datagrid 4.3.0 → 4.4.1

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,18 @@ 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];
+    const column_name = meta.column_header[model._config.split_by.length];
     const sort_method =
         event.ctrlKey ||
         (event as MouseEvent & { metaKey?: boolean }).metaKey ||
@@ -55,22 +47,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 +79,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 +94,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/model/column_overrides.ts

@@ -46,7 +46,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 +60,21 @@ 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,27 @@ 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();
@@ -70,61 +86,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];
-            }
-        }
+        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 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];
-                }
-            }
-        }
-
-        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 +127,7 @@ export async function createModel(
             split_by_changed ||
             group_by_changed ||
             columns_changed ||
+            theme_changed ||
             type_changed;
     }
 
@@ -148,19 +137,19 @@ 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(
-        get_rule(regular, "--plugin--background", "#FFFFFF"),
-    ).rgb();
+    const _plugin_background = parseColor(
+        get_rule(regular, "--psp--background-color", "#FFFFFF"),
+    );
 
     const _pos_fg_color = make_color_record(
-        get_rule(regular, "--rt-pos-cell--color", "#338DCD"),
+        get_rule(regular, "--psp-datagrid--pos-cell--color", "#338DCD"),
     );
 
     const _neg_fg_color = make_color_record(
-        get_rule(regular, "--rt-neg-cell--color", "#FF5942"),
+        get_rule(regular, "--psp-datagrid--neg-cell--color", "#FF5942"),
     );
 
     const _pos_bg_color = make_color_record(
@@ -172,7 +161,7 @@ export async function createModel(
     );
 
     const _color = make_color_record(
-        get_rule(regular, "--active--color", "#ff0000"),
+        get_rule(regular, "--psp-active--color", "#ff0000"),
     );
 
     const _schema: Schema = {
@@ -187,10 +176,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";
+
+    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;
+    }
 
-    const _edit_mode: EditMode = this._edit_mode || "READ_ONLY";
     this._edit_button!.dataset.editMode = _edit_mode;
-
     const model: DatagridModel = Object.assign(extend, {
         _edit_port,
         _view: view,
@@ -208,6 +204,7 @@ export async function createModel(
         _neg_bg_color,
         _column_paths,
         _column_types,
+        _theme: theme,
         _is_editable,
         _edit_mode,
         _selection_state: {
@@ -224,10 +221,9 @@ export async function createModel(
     }) 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/model/toolbar.ts

@@ -10,7 +10,11 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { DatagridPluginElement, EditMode } from "../types.js";
+import type {
+    DatagridModel,
+    DatagridPluginElement,
+    EditMode,
+} from "../types.js";
 
 export const EDIT_MODES: readonly EditMode[] = [
     "READ_ONLY",
@@ -18,23 +22,37 @@ 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._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,
@@ -44,8 +62,6 @@ export function toggle_edit_mode(
     if (this._edit_button !== undefined) {
         this._edit_button.dataset.editMode = mode;
     }
-
-    this.dataset.editMode = mode;
 }
 
 export function toggle_scroll_lock(