@perspective-dev/viewer-datagrid 4.4.0 → 4.4.1

package/src/ts/event_handlers/select_region.ts

@@ -13,16 +13,24 @@
 import { RegularTableElement } from "regular-table";
 import type {
     DatagridPluginElement,
-    PerspectiveViewerElement,
+    EditMode,
     SelectionArea,
 } from "../types.js";
-import { ViewWindow } from "@perspective-dev/client";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+import type { ViewWindow } from "@perspective-dev/client";
+import type { CellMetadataBody } from "regular-table/dist/esm/types.js";
 
 const MOUSE_SELECTED_AREA_CLASS = "mouse-selected-area";
 
+export type OnSelectCallback = (
+    area: SelectionArea,
+    isDeselect: boolean,
+) => void;
+
 interface AddAreaMouseSelectionOptions {
     className?: string;
     selected?: SelectionArea[];
+    onSelect?: OnSelectCallback;
 }
 
 export const addAreaMouseSelection = (
@@ -31,6 +39,7 @@ export const addAreaMouseSelection = (
     {
         className = MOUSE_SELECTED_AREA_CLASS,
         selected = [],
+        onSelect,
     }: AddAreaMouseSelectionOptions = {},
 ): RegularTableElement => {
     datagrid.model!._selection_state = {
@@ -50,7 +59,7 @@ export const addAreaMouseSelection = (
 
     table.addEventListener(
         "mouseup",
-        getMouseupListener(datagrid, table, className),
+        getMouseupListener(datagrid, table, className, onSelect),
     );
 
     table.addStyleListener(() =>
@@ -60,6 +69,10 @@ export const addAreaMouseSelection = (
     return table;
 };
 
+function isSingleClickMode(mode: EditMode): boolean {
+    return mode === "SELECT_ROW_TREE";
+}
+
 const getMousedownListener =
     (
         datagrid: DatagridPluginElement,
@@ -70,10 +83,9 @@ const getMousedownListener =
         const mouseEvent = event as MouseEvent;
         if (
             mouseEvent.button === 0 &&
-            (datagrid.model!._edit_mode === "SELECT_REGION" ||
-                datagrid.model!._edit_mode === "SELECT_ROW" ||
-                datagrid.model!._edit_mode === "SELECT_COLUMN")
+            isSelectionMode(datagrid.model!._edit_mode)
         ) {
+            if (isSingleClickMode(datagrid.model!._edit_mode)) return;
             datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES = {};
             const meta = table.getMeta(mouseEvent.target as HTMLElement);
             if (
@@ -122,11 +134,8 @@ const getMouseoverListener =
     ) =>
     (event: Event): void => {
         const mouseEvent = event as MouseEvent;
-        if (
-            datagrid.model!._edit_mode === "SELECT_REGION" ||
-            datagrid.model!._edit_mode === "SELECT_ROW" ||
-            datagrid.model!._edit_mode === "SELECT_COLUMN"
-        ) {
+        const mode = datagrid.model!._edit_mode;
+        if (isSelectionMode(mode) && !isSingleClickMode(mode)) {
             if (
                 datagrid.model!._selection_state
                     .CURRENT_MOUSEDOWN_COORDINATES &&
@@ -183,17 +192,63 @@ const getMouseupListener =
         datagrid: DatagridPluginElement,
         table: RegularTableElement,
         className: string,
+        onSelect?: OnSelectCallback,
     ) =>
     (event: Event): void => {
         const mouseEvent = event as MouseEvent;
-        if (
-            datagrid.model!._edit_mode === "SELECT_REGION" ||
-            datagrid.model!._edit_mode === "SELECT_ROW" ||
-            datagrid.model!._edit_mode === "SELECT_COLUMN"
-        ) {
+        const mode = datagrid.model!._edit_mode;
+        if (isSelectionMode(mode)) {
             const meta = table.getMeta(mouseEvent.target as HTMLElement);
             if (!meta) return;
 
+            // For single-click modes (SELECT_ROW_TREE), handle toggle
+            if (isSingleClickMode(mode)) {
+                if (
+                    (meta.type === "body" || meta.type === "row_header") &&
+                    meta.y !== undefined &&
+                    meta.y >= 0
+                ) {
+                    const existing =
+                        datagrid.model!._selection_state.selected_areas;
+                    const isSameRow =
+                        existing.length > 0 && existing[0].y0 === meta.y;
+
+                    if (isSameRow) {
+                        // Deselect
+                        datagrid.model!._selection_state.selected_areas = [];
+                        datagrid.model!._selection_state.dirty = true;
+                        applyMouseAreaSelections(
+                            datagrid,
+                            table,
+                            className,
+                            [],
+                        );
+                        onSelect?.(existing[0], true);
+                    } else {
+                        // Select new row
+                        const area: SelectionArea = {
+                            x0: 0,
+                            x1: 0,
+                            y0: meta.y,
+                            y1: meta.y,
+                        };
+                        datagrid.model!._selection_state.selected_areas = [
+                            area,
+                        ];
+                        datagrid.model!._selection_state.dirty = true;
+                        applyMouseAreaSelections(datagrid, table, className);
+                        onSelect?.(area, false);
+                    }
+                }
+
+                datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES =
+                    {};
+                datagrid.model!._selection_state.potential_selection =
+                    undefined;
+                return;
+            }
+
+            // Drag-based modes (SELECT_ROW, SELECT_COLUMN, SELECT_REGION)
             if (
                 (datagrid.model!._selection_state.old_selected_areas?.length ??
                     0) > 0
@@ -260,80 +315,103 @@ const getMouseupListener =
         }
     };
 
+function modeIncludesColumns(mode: EditMode): boolean {
+    return mode === "SELECT_COLUMN" || mode === "SELECT_REGION";
+}
+
+function modeIncludesRows(mode: EditMode): boolean {
+    return (
+        mode === "SELECT_ROW" ||
+        mode === "SELECT_REGION" ||
+        mode === "SELECT_ROW_TREE"
+    );
+}
+
 function set_psp_selection(
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     datagrid: DatagridPluginElement,
     { x0, x1, y0, y1 }: SelectionArea,
 ): void {
     const viewport: ViewWindow = {};
     const mode = datagrid.model!._edit_mode;
-    if (
-        x0 !== undefined &&
-        ["SELECT_COLUMN", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (x0 !== undefined && modeIncludesColumns(mode)) {
         viewport.start_col = x0;
     }
 
-    if (
-        x1 !== undefined &&
-        ["SELECT_COLUMN", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (x1 !== undefined && modeIncludesColumns(mode)) {
         viewport.end_col = x1 + 1;
     }
 
-    if (
-        y0 !== undefined &&
-        ["SELECT_ROW", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (y0 !== undefined && modeIncludesRows(mode)) {
         viewport.start_row = y0;
     }
 
-    if (
-        y1 !== undefined &&
-        ["SELECT_ROW", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (y1 !== undefined && modeIncludesRows(mode)) {
         viewport.end_row = y1 + 1;
     }
 
     viewer.setSelection(viewport);
 }
 
+type CellPredicate = (meta: CellMetadataBody, area: SelectionArea) => boolean;
+
+const SELECTION_PREDICATES: Record<string, CellPredicate> = {
+    SELECT_REGION: (m, a) =>
+        a.x0 <= m.x && m.x <= a.x1 && a.y0 <= m.y && m.y <= a.y1,
+    SELECT_ROW: (m, a) => a.y0 <= m.y && m.y <= a.y1,
+    SELECT_ROW_TREE: (m, a) => a.y0 <= m.y && m.y <= a.y1,
+    SELECT_COLUMN: (m, a) => a.x0 <= m.x && m.x <= a.x1,
+};
+
+function isSelectionMode(mode: EditMode): boolean {
+    return (
+        mode === "SELECT_REGION" ||
+        mode === "SELECT_ROW" ||
+        mode === "SELECT_COLUMN" ||
+        mode === "SELECT_ROW_TREE"
+    );
+}
+
 export const applyMouseAreaSelections = (
     datagrid: DatagridPluginElement,
     table: RegularTableElement,
     className: string,
     selected?: SelectionArea[],
 ): void => {
-    if (
-        datagrid.model!._edit_mode === "SELECT_REGION" ||
-        datagrid.model!._edit_mode === "SELECT_ROW" ||
-        datagrid.model!._edit_mode === "SELECT_COLUMN"
-    ) {
+    const mode = datagrid.model!._edit_mode;
+    if (isSelectionMode(mode)) {
         selected = datagrid.model!._selection_state.selected_areas.slice(0);
         if (datagrid.model!._selection_state.potential_selection) {
             selected.push(datagrid.model!._selection_state.potential_selection);
         }
 
-        const tds = table.querySelectorAll("tbody td");
-
         if (selected.length > 0) {
             set_psp_selection(
-                datagrid.parentElement as any,
+                datagrid.parentElement as HTMLPerspectiveViewerElement,
                 datagrid,
                 selected[0],
             );
-            applyMouseAreaSelection(datagrid, table, selected, className);
+
+            // SELECT_ROW_TREE styling is handled entirely by the
+            // identity-based system in body.ts, which styles both td
+            // and th uniformly in a single draw pass.
+            if (!isSingleClickMode(mode)) {
+                applyMouseAreaSelection(datagrid, table, selected, className);
+            }
         } else {
-            (datagrid.parentElement as any).setSelection();
+            (
+                datagrid.parentElement as HTMLPerspectiveViewerElement
+            ).setSelection();
+            const tds = table.querySelectorAll("tbody td");
             for (const td of tds) {
                 td.classList.remove(className);
             }
         }
     } else if (datagrid.model!._selection_state.dirty) {
         datagrid.model!._selection_state.dirty = false;
-        const tds = table.querySelectorAll("tbody td");
-        for (const td of tds) {
-            td.classList.remove(className);
+        const cells = table.querySelectorAll("tbody td, tbody th");
+        for (const cell of cells) {
+            cell.classList.remove(className);
         }
     }
 };
@@ -344,96 +422,29 @@ const applyMouseAreaSelection = (
     selected: SelectionArea[],
     className: string,
 ): void => {
-    if (datagrid.model!._edit_mode === "SELECT_REGION" && selected.length > 0) {
-        const tds = table.querySelectorAll("tbody td");
-
-        for (const td of tds) {
-            const meta = table.getMeta(td as HTMLElement);
-            if (!meta || meta.type !== "body") continue;
-            let rendered = false;
-            for (const { x0, x1, y0, y1 } of selected) {
-                if (
-                    x0 !== undefined &&
-                    y0 !== undefined &&
-                    x1 !== undefined &&
-                    y1 !== undefined
-                ) {
-                    if (
-                        x0 <= meta.x &&
-                        meta.x <= x1 &&
-                        y0 <= meta.y &&
-                        meta.y <= y1
-                    ) {
-                        rendered = true;
-                        datagrid.model!._selection_state.dirty = true;
-                        td.classList.add(className);
-                    }
-                }
-            }
-
-            if (!rendered) {
-                td.classList.remove(className);
-            }
-        }
-    } else if (
-        datagrid.model!._edit_mode === "SELECT_ROW" &&
-        selected.length > 0
-    ) {
-        const tds = table.querySelectorAll("tbody td");
-
-        for (const td of tds) {
-            const meta = table.getMeta(td as HTMLElement);
-            if (!meta) continue;
-            let rendered = false;
-            for (const { x0, x1, y0, y1 } of selected) {
-                if (
-                    x0 !== undefined &&
-                    y0 !== undefined &&
-                    x1 !== undefined &&
-                    y1 !== undefined &&
-                    meta?.type === "body"
-                ) {
-                    if (y0 <= meta.y && meta.y <= y1) {
-                        datagrid.model!._selection_state.dirty = true;
-                        rendered = true;
-                        td.classList.add(className);
-                    }
-                }
-            }
-
-            if (!rendered) {
-                td.classList.remove(className);
+    const predicate = SELECTION_PREDICATES[datagrid.model!._edit_mode];
+    if (!predicate || selected.length === 0) return;
+    const tds = table.querySelectorAll("tbody td");
+    for (const td of tds) {
+        const meta = table.getMeta(td as HTMLElement);
+        if (!meta || meta.type !== "body") continue;
+        let rendered = false;
+        for (const area of selected) {
+            if (
+                area.x0 !== undefined &&
+                area.y0 !== undefined &&
+                area.x1 !== undefined &&
+                area.y1 !== undefined &&
+                predicate(meta, area)
+            ) {
+                rendered = true;
+                datagrid.model!._selection_state.dirty = true;
+                td.classList.add(className);
             }
         }
-    } else if (
-        datagrid.model!._edit_mode === "SELECT_COLUMN" &&
-        selected.length > 0
-    ) {
-        const tds = table.querySelectorAll("tbody td");
-
-        for (const td of tds) {
-            const meta = table.getMeta(td as HTMLElement);
-            if (!meta) continue;
-            let rendered = false;
-            for (const { x0, x1, y0, y1 } of selected) {
-                if (
-                    x0 !== undefined &&
-                    y0 !== undefined &&
-                    x1 !== undefined &&
-                    y1 !== undefined &&
-                    meta?.type === "body"
-                ) {
-                    if (x0 <= meta.x && meta.x <= x1) {
-                        datagrid.model!._selection_state.dirty = true;
-                        rendered = true;
-                        td.classList.add(className);
-                    }
-                }
-            }
 
-            if (!rendered) {
-                td.classList.remove(className);
-            }
+        if (!rendered) {
+            td.classList.remove(className);
         }
     }
 };

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);
 }
 
 /**