@perspective-dev/viewer-datagrid 4.4.0 → 4.4.1

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,12 +137,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 +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(

package/src/ts/plugin/activate.ts

@@ -12,33 +12,41 @@
 
 import { style_selected_column } from "../style_handlers/column_header.js";
 import {
-    click_listener,
-    mousedown_listener,
+    createMousedownListener,
+    createClickListener,
+    createDblclickListener,
 } from "../event_handlers/header_click.js";
 
-import { focusinListener, focusoutListener } from "../event_handlers/focus.js";
-import { keydownListener, clickListener } from "../event_handlers/click.js";
-
-import { selectionListener } from "../event_handlers/row_select_click.js";
-import { deselect_all_listener } from "../event_handlers/deselect_all.js";
+import {
+    createFocusinListener,
+    createFocusoutListener,
+} from "../event_handlers/focus.js";
+import {
+    createKeydownListener,
+    createEditClickListener,
+} from "../event_handlers/click.js";
 
 import { createModel } from "../model/create.js";
-import { dispatch_click_listener } from "../event_handlers/dispatch_click.js";
-
-import { addAreaMouseSelection } from "../event_handlers/select_region.js";
+import { createDispatchClickListener } from "../event_handlers/dispatch_click.js";
 
 import {
-    createConsolidatedStyleListener,
-    installConsolidatedStyleMethods,
-} from "../style_handlers/consolidated.js";
+    addAreaMouseSelection,
+    type OnSelectCallback,
+} from "../event_handlers/select_region.js";
+
+import { createConsolidatedStyleListener } from "../style_handlers/consolidated.js";
+
+import getCellConfig from "../get_cell_config.js";
 
 import type { View } from "@perspective-dev/client";
-import type {
-    DatagridPluginElement,
-    PerspectiveViewerElement,
-    SelectedPosition,
+import {
+    type DatagridPluginElement,
+    type SelectedPositionMap,
+    type SelectionArea,
+    PerspectiveSelectDetail,
 } from "../types.js";
-import type { RegularTableElement } from "regular-table";
+
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 interface ToggleColumnSettingsEvent extends CustomEvent {
     detail: {
@@ -54,7 +62,7 @@ export async function activate(
     this: DatagridPluginElement,
     view: View,
 ): Promise<void> {
-    const viewer = this.parentElement as PerspectiveViewerElement;
+    const viewer = this.parentElement as HTMLPerspectiveViewerElement;
     const table = await viewer.getTable();
 
     if (!this._initialized) {
@@ -70,132 +78,151 @@ export async function activate(
             this.regular_table,
             table,
             view,
+            viewer.getAttribute("theme")!,
         );
 
         if (!this.model) {
             return;
         }
 
+        const model = this.model;
+        const regularTable = this.regular_table;
+        const onSelect: OnSelectCallback = async (
+            area: SelectionArea,
+            isDeselect: boolean,
+        ) => {
+            if (model._edit_mode !== "SELECT_ROW_TREE") return;
+
+            // Store the selected row identity on the model so it persists
+            // even when the selected row scrolls out of the viewport.
+            if (isDeselect) {
+                model._tree_selection_id = undefined;
+            } else {
+                const idx = area.y0 - (model._last_window?.start_row ?? 0);
+                if (idx >= 0 && idx < model._ids.length) {
+                    model._tree_selection_id = model._ids[idx];
+                }
+            }
+
+            const { row, column_names, config } = await getCellConfig(
+                model,
+                area.y0,
+                0,
+            );
+
+            let detail: PerspectiveSelectDetail;
+            if (isDeselect) {
+                if ((model._last_insert_configs?.length || 0) > 0) {
+                    detail = new PerspectiveSelectDetail(
+                        false,
+                        row,
+                        [],
+                        model._last_insert_configs ?? [],
+                        [],
+                    );
+                } else {
+                    throw new Error("Suprious deselect");
+                }
+
+                model._last_insert_configs = undefined;
+            } else {
+                detail = new PerspectiveSelectDetail(
+                    true,
+                    row,
+                    column_names,
+                    model._last_insert_configs ?? [],
+                    [config],
+                );
+                model._last_insert_configs = [config];
+            }
+
+            await regularTable.draw({ preserve_width: true });
+            viewer.dispatchEvent(
+                new CustomEvent<PerspectiveSelectDetail>(
+                    "perspective-global-filter",
+                    {
+                        bubbles: true,
+                        composed: true,
+                        detail,
+                    },
+                ),
+            );
+        };
+
         addAreaMouseSelection(this, this.regular_table, {
             className: "psp-select-region",
+            onSelect,
         });
 
-        // Create shared state maps for selection and focus tracking
-        const selected_rows_map = new WeakMap<
-            RegularTableElement,
-            Set<number>
-        >();
-        const selected_position_map = new WeakMap<
-            RegularTableElement,
-            SelectedPosition
-        >();
-
-        // Install consolidated style methods on model prototype
-        installConsolidatedStyleMethods(this.model);
-
-        // Single consolidated style listener replaces:
-        // - table_cell_style_listener
-        // - group_header_style_listener
-        // - column_header_style_listener
-        // - selectionStyleListener
-        // - editable_style_listener
-        // - focus_style_listener
+        // Create shared state map for focus tracking
+        const selected_position_map: SelectedPositionMap = new WeakMap();
+
         this.regular_table.addStyleListener(
             createConsolidatedStyleListener(
                 this,
-                selected_rows_map as any,
-                selected_position_map as any,
-            ).bind(this.model, this.regular_table, viewer),
-        );
-
-        // uh ..
-        this.regular_table.addEventListener(
-            "click",
-            click_listener.bind(
-                this.model,
-                this.regular_table,
-            ) as EventListener,
-        );
-
-        this.regular_table.addEventListener(
-            "mousedown",
-            selectionListener.bind(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_rows_map as any,
-            ) as unknown as EventListener,
+                selected_position_map,
+            ),
         );
 
         this.regular_table.addEventListener(
-            "psp-deselect-all",
-            deselect_all_listener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-                selected_rows_map as any,
-            ) as unknown as EventListener,
+            "click",
+            createClickListener(this.regular_table),
         );
 
         // User event click
         this.regular_table.addEventListener(
             "click",
-            dispatch_click_listener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-            ) as unknown as EventListener,
+            createDispatchClickListener(this.model, this.regular_table, viewer),
         );
 
         // tree collapse, expand, edit button headers
         this.regular_table.addEventListener(
             "mousedown",
-            mousedown_listener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-            ) as unknown as EventListener,
+            createMousedownListener(this.model, this.regular_table, viewer),
         );
 
-        // Editing event handlers (style handling is now in consolidated listener)
-        // TODO relies on this.model._is_editable
+        this.regular_table.addEventListener(
+            "dblclick",
+            createDblclickListener(this.model, this.regular_table, viewer),
+        );
+
+        // Editing event handlers
         this.regular_table.addEventListener(
             "click",
-            clickListener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-            ) as EventListener,
+            createEditClickListener(this.model, this.regular_table, viewer),
         );
 
         this.regular_table.addEventListener(
             "focusin",
-            focusinListener.bind(
+            createFocusinListener(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_position_map as any,
-            ) as EventListener,
+                selected_position_map,
+            ),
         );
 
         this.regular_table.addEventListener(
             "focusout",
-            focusoutListener.bind(
+            createFocusoutListener(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_position_map as any,
-            ) as EventListener,
+                selected_position_map,
+            ),
         );
 
         this.regular_table.addEventListener(
             "keydown",
-            keydownListener.bind(
+            createKeydownListener(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_position_map as any,
-            ) as EventListener,
+                selected_position_map,
+            ),
         );
 
         // viewer event listeners
@@ -204,7 +231,7 @@ export async function activate(
             (event: Event) => {
                 const toggleEvent = event as ToggleColumnSettingsEvent;
                 if (this.isConnected) {
-                    style_selected_column.call(
+                    style_selected_column(
                         this.model!,
                         this.regular_table,
                         viewer,
@@ -229,6 +256,7 @@ export async function activate(
             this.regular_table,
             table,
             view,
+            viewer.getAttribute("theme")!,
             this.model,
         );
     }

package/src/ts/plugin/column_style_controls.ts

@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 import type { DatagridPluginElement } from "../types.js";
 
 interface NumberStyleOpts {

package/src/ts/plugin/save.ts

@@ -41,5 +41,6 @@ export function save(
 
         return JSON.parse(JSON.stringify(token));
     }
+
     return {};
 }