@perspective-dev/viewer-datagrid 4.4.0 → 4.5.0

package/src/ts/data_listener/index.ts

@@ -11,20 +11,17 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { PRIVATE_PLUGIN_SYMBOL } from "../types.js";
+import { isMetaColumn } from "../model/meta_columns.js";
 import { format_cell } from "./format_cell.js";
 import {
     format_flat_header_row_path,
     format_tree_header,
     format_tree_header_row_path,
 } from "./format_tree_header.js";
-import type {
-    DatagridModel,
-    PerspectiveViewerElement,
-    RegularTable,
-    Schema,
-} from "../types.js";
+import type { DatagridModel, RegularTable, Schema } from "../types.js";
 import type { CellScalar, DataResponse } from "regular-table/dist/esm/types.js";
-import { ViewConfig, ViewWindow } from "@perspective-dev/client";
+import type { ViewConfig, ViewWindow } from "@perspective-dev/client";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 interface ColumnData {
     __ROW_PATH__?: unknown[][];
@@ -40,7 +37,7 @@ interface ColumnData {
  * @returns A data listener for the plugin.
  */
 export function createDataListener(
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
 ): (
     regularTable: RegularTable,
     x0: number,
@@ -88,9 +85,14 @@ export function createDataListener(
             num_columns = z;
             columns = JSON.parse(x as string) as ColumnData;
             const y = Object.keys(columns);
-            const new_col_paths = y.filter(
-                (x) => x !== "__ROW_PATH__" && x !== "__ID__",
-            );
+            // `isMetaColumn` covers `__ROW_PATH__`, `__ID__`,
+            // `__GROUPING_ID__`, and the per-level `__ROW_PATH_<n>__`
+            // columns the DuckDB virtual server emits inline alongside
+            // the JSON sidecar. Exact-match against `__ROW_PATH__` /
+            // `__ID__` (the previous filter) misses the per-level
+            // form and the virtual server's columns leak into the
+            // visible grid.
+            const new_col_paths = y.filter((x) => !isMetaColumn(x));
 
             let changed_cols = false;
             for (let i = 0; i < new_col_paths.length; i++) {

package/src/ts/event_handlers/click/edit_click.ts

@@ -14,10 +14,11 @@ import { CellMetadataBody } from "regular-table/dist/esm/types.js";
 import {
     type RegularTable,
     type DatagridModel,
-    type PerspectiveViewerElement,
     get_psp_type,
 } from "../../types.js";
 
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+
 export function write_cell(
     table: RegularTable,
     model: DatagridModel,
@@ -27,6 +28,7 @@ export function write_cell(
     if (!meta) {
         return false;
     }
+
     const type = model._schema[model._column_paths[meta.x!]];
     let text: string | number | boolean | null = active_cell.textContent || "";
     const id = model._ids[meta.y! - meta.y0][0];
@@ -35,12 +37,14 @@ export function write_cell(
         if (isNaN(parsed)) {
             return false;
         }
+
         text = parsed;
     } else if (type === "date" || type === "datetime") {
         const parsed = Date.parse(text);
         if (isNaN(parsed)) {
             return false;
         }
+
         text = parsed;
     } else if (type === "boolean") {
         text = text === "true" ? false : text === "false" ? true : null;
@@ -56,21 +60,21 @@ export function write_cell(
 }
 
 export function clickListener(
-    this: DatagridModel,
+    model: DatagridModel,
     table: RegularTable,
-    _viewer: PerspectiveViewerElement,
+    _viewer: HTMLPerspectiveViewerElement,
     event: MouseEvent,
 ): void {
     const meta = table.getMeta(event.target as HTMLElement);
     if (meta?.type === "body" || meta?.type === "column_header") {
-        const is_editable2 = this._is_editable[meta.x];
-        const is_bool = get_psp_type(this, meta) === "boolean";
+        const is_editable2 = model._is_editable[meta.x];
+        const is_bool = get_psp_type(model, meta) === "boolean";
         const is_null = (event.target as Element).classList.contains(
             "psp-null",
         );
 
         if (is_editable2 && is_bool && !is_null) {
-            write_cell(table, this, event.target as HTMLElement);
+            write_cell(table, model, event.target as HTMLElement);
         }
     }
 }

package/src/ts/event_handlers/click.ts

@@ -12,81 +12,52 @@
 
 import * as edit_click from "./click/edit_click.js";
 import * as edit_keydown from "./keydown/edit_keydown.js";
-import type {
-    DatagridModel,
-    PerspectiveViewerElement,
-    SelectedPosition,
-} from "../types.js";
+import type { DatagridModel, SelectedPositionMap } from "../types.js";
+import { isEditableMode } from "../types.js";
 import { RegularTableElement } from "regular-table";
-import { HTMLPerspectiveViewerDatagridPluginElement } from "../custom_elements/datagrid.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
-type SelectedPositionMap = Map<RegularTableElement, SelectedPosition>;
-
-export function is_editable(
-    this: DatagridModel,
-    viewer: PerspectiveViewerElement,
-    allowed: boolean = false,
-): boolean {
-    const has_pivots =
-        this._config.group_by.length === 0 &&
-        this._config.split_by.length === 0;
-    const selectable = viewer.hasAttribute("selectable");
-    const plugin = viewer.children[0] as
-        | HTMLPerspectiveViewerDatagridPluginElement
-        | undefined;
-    const editable = allowed || !!(plugin?._edit_mode === "EDIT");
-    return has_pivots && !selectable && editable;
-}
-
-export function keydownListener(
-    this: DatagridModel,
+export function createKeydownListener(
+    model: DatagridModel,
     table: RegularTableElement,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     selected_position_map: SelectedPositionMap,
-    event: KeyboardEvent,
-): void {
-    if (this._edit_mode === "EDIT") {
-        if (!is_editable.call(this, viewer)) {
-            return;
-        }
+): EventListener {
+    return (event: Event): void => {
+        const keyEvent = event as KeyboardEvent;
+        if (model._edit_mode === "EDIT") {
+            if (!isEditableMode(model, viewer)) {
+                return;
+            }
 
-        edit_keydown.keydownListener.call(
-            this,
-            table,
-            viewer,
-            selected_position_map,
-            event,
-        );
-    } else {
-        console.debug(
-            `Mode ${this._edit_mode} for "keydown" event not yet implemented`,
-        );
-    }
+            edit_keydown.keydownListener(
+                model,
+                table,
+                viewer,
+                selected_position_map,
+                keyEvent,
+            );
+        } else {
+            console.debug(
+                `Mode ${model._edit_mode} for "keydown" event not yet implemented`,
+            );
+        }
+    };
 }
 
-export function clickListener(
-    this: DatagridModel,
+export function createEditClickListener(
+    model: DatagridModel,
     table: RegularTableElement,
-    viewer: PerspectiveViewerElement,
-    event: MouseEvent,
-): void {
-    if (this._edit_mode === "EDIT") {
-        if (!is_editable.call(this, viewer)) {
-            return;
-        }
+    viewer: HTMLPerspectiveViewerElement,
+): EventListener {
+    return (event: Event): void => {
+        const mouseEvent = event as MouseEvent;
+        if (model._edit_mode === "EDIT") {
+            if (!isEditableMode(model, viewer)) {
+                return;
+            }
 
-        edit_click.clickListener.call(this, table, viewer, event);
-    } else if (this._edit_mode === "READ_ONLY") {
-        // No-op for read-only mode
-    } else if (this._edit_mode === "SELECT_COLUMN") {
-        // Not yet implemented
-    } else if (this._edit_mode === "SELECT_ROW") {
-        // Not yet implemented
-    } else if (this._edit_mode === "SELECT_REGION") {
-        // Not yet implemented
-    } else {
-        console.debug(
-            `Mode ${this._edit_mode} for "click" event not yet implemented`,
-        );
-    }
+            edit_click.clickListener(model, table, viewer, mouseEvent);
+        }
+    };
 }

package/src/ts/event_handlers/dispatch_click.ts

@@ -12,31 +12,33 @@
 
 import { RegularTableElement } from "regular-table";
 import getCellConfig from "../get_cell_config.js";
-import type {
-    DatagridModel,
-    PerspectiveViewerElement,
-    PerspectiveClickDetail,
-} from "../types.js";
+import type { DatagridModel, PerspectiveClickDetail } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
-export async function dispatch_click_listener(
-    this: DatagridModel,
+export function createDispatchClickListener(
+    model: DatagridModel,
     table: RegularTableElement,
-    viewer: PerspectiveViewerElement,
-    event: MouseEvent,
-): Promise<void> {
-    const meta = table.getMeta(event.target as HTMLElement);
-    if (!meta || meta.type !== "body") return;
-    const { x, y } = meta;
-    const { row, column_names, config } = await getCellConfig(this, y, x);
-    viewer.dispatchEvent(
-        new CustomEvent<PerspectiveClickDetail>("perspective-click", {
-            bubbles: true,
-            composed: true,
-            detail: {
-                row,
-                column_names,
-                config,
-            },
-        }),
-    );
+    viewer: HTMLPerspectiveViewerElement,
+): EventListener {
+    return async (event: Event): Promise<void> => {
+        const mouseEvent = event as MouseEvent;
+        const meta = table.getMeta(mouseEvent.target as HTMLElement);
+        if (!meta || meta.type !== "body") {
+            return;
+        }
+
+        const { x, y } = meta;
+        const { row, column_names, config } = await getCellConfig(model, y, x);
+        viewer.dispatchEvent(
+            new CustomEvent<PerspectiveClickDetail>("perspective-click", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    row,
+                    column_names,
+                    config,
+                },
+            }),
+        );
+    };
 }

package/src/ts/event_handlers/expand_collapse.ts

@@ -13,33 +13,36 @@
 import type { RegularTable, DatagridModel } from "../types.js";
 
 export async function expandCollapseHandler(
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTable,
     event: MouseEvent,
 ): Promise<void> {
     const meta = regularTable.getMeta(event.target as HTMLElement);
-    if (!meta || meta.type !== "row_header") return;
+    if (!meta || meta.type !== "row_header") {
+        return;
+    }
+
     const is_collapse = (event.target as Element).classList.contains(
         "psp-tree-label-collapse",
     );
 
     if (event.shiftKey && is_collapse) {
-        this._view.set_depth(
+        model._view.set_depth(
             (meta.row_header as unknown[]).filter((x) => x !== undefined)
                 .length - 2,
         );
     } else if (event.shiftKey) {
-        this._view.set_depth(
+        model._view.set_depth(
             (meta.row_header as unknown[]).filter((x) => x !== undefined)
                 .length - 1,
         );
     } else if (is_collapse) {
-        this._view.collapse(meta.y);
+        model._view.collapse(meta.y);
     } else {
-        this._view.expand(meta.y);
+        model._view.expand(meta.y);
     }
 
-    this._num_rows = await this._view.num_rows();
-    this._num_columns = await this._view.num_columns();
+    model._num_rows = await model._view.num_rows();
+    model._num_columns = await model._view.num_columns();
     regularTable.draw();
 }

package/src/ts/event_handlers/focus.ts

@@ -10,54 +10,57 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { is_editable } from "./click.js";
 import { write_cell } from "./click/edit_click.js";
 import type {
     RegularTable,
     DatagridModel,
-    PerspectiveViewerElement,
     SelectedPosition,
+    SelectedPositionMap,
 } from "../types.js";
+import { isEditableMode } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
-type SelectedPositionMap = Map<RegularTable, SelectedPosition>;
-
-export function focusoutListener(
-    this: DatagridModel,
+export function createFocusoutListener(
+    model: DatagridModel,
     table: RegularTable,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     selected_position_map: SelectedPositionMap,
-    event: FocusEvent,
-): void {
-    if (is_editable.call(this, viewer) && selected_position_map.has(table)) {
-        const target = event.target as HTMLElement;
-        target.classList.remove("psp-error");
-        const selectedPosition = selected_position_map.get(table)!;
-        selected_position_map.delete(table);
-        if (selectedPosition.content !== target.textContent) {
-            if (!write_cell(table, this, target)) {
-                target.textContent = selectedPosition.content || "";
-                target.classList.add("psp-error");
-                target.focus();
+): EventListener {
+    return (event: Event): void => {
+        const focusEvent = event as FocusEvent;
+        if (isEditableMode(model, viewer) && selected_position_map.has(table)) {
+            const target = focusEvent.target as HTMLElement;
+            target.classList.remove("psp-error");
+            const selectedPosition = selected_position_map.get(table)!;
+            selected_position_map.delete(table);
+            if (selectedPosition.content !== target.textContent) {
+                if (!write_cell(table, model, target)) {
+                    target.textContent = selectedPosition.content || "";
+                    target.classList.add("psp-error");
+                    target.focus();
+                }
             }
         }
-    }
+    };
 }
 
-export function focusinListener(
-    this: DatagridModel,
+export function createFocusinListener(
+    _model: DatagridModel,
     table: RegularTable,
-    _viewer: PerspectiveViewerElement,
+    _viewer: HTMLPerspectiveViewerElement,
     selected_position_map: SelectedPositionMap,
-    event: FocusEvent,
-): void {
-    const target = event.target as HTMLElement;
-    const meta = table.getMeta(target);
-    if (meta?.type === "body") {
-        const new_state: SelectedPosition = {
-            x: meta.x,
-            y: meta.y,
-            content: target.textContent || undefined,
-        };
-        selected_position_map.set(table, new_state);
-    }
+): EventListener {
+    return (event: Event): void => {
+        const focusEvent = event as FocusEvent;
+        const target = focusEvent.target as HTMLElement;
+        const meta = table.getMeta(target);
+        if (meta?.type === "body") {
+            const new_state: SelectedPosition = {
+                x: meta.x,
+                y: meta.y,
+                content: target.textContent || undefined,
+            };
+            selected_position_map.set(table, new_state);
+        }
+    };
 }

package/src/ts/event_handlers/header_click.ts

@@ -12,74 +12,119 @@
 
 import { sortHandler } from "./sort.js";
 import { expandCollapseHandler } from "./expand_collapse.js";
-import type {
-    RegularTable,
-    DatagridModel,
-    PerspectiveViewerElement,
-} from "../types.js";
-
-export async function mousedown_listener(
-    this: DatagridModel,
+import type { RegularTable, DatagridModel } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+
+export function createMousedownListener(
+    model: DatagridModel,
     regularTable: RegularTable,
-    viewer: PerspectiveViewerElement,
-    event: MouseEvent,
-): Promise<void> {
-    if (event.which !== 1) {
-        return;
-    }
-
-    let target = event.target as HTMLElement | null;
-    if (target?.tagName === "A") {
-        return;
-    }
-
-    while (target && target.tagName !== "TD" && target.tagName !== "TH") {
-        target = target.parentElement;
-        if (!target || !regularTable.contains(target)) {
+    viewer: HTMLPerspectiveViewerElement,
+): EventListener {
+    return async (event: Event): Promise<void> => {
+        const mouseEvent = event as MouseEvent;
+        if (mouseEvent.which !== 1) {
+            return;
+        }
+
+        let target = mouseEvent.target as HTMLElement | null;
+        if (target?.tagName === "A") {
+            return;
+        }
+
+        while (target && target.tagName !== "TD" && target.tagName !== "TH") {
+            target = target.parentElement;
+            if (!target || !regularTable.contains(target)) {
+                return;
+            }
+        }
+
+        if (!target) {
             return;
         }
-    }
-
-    if (!target) return;
-
-    if (target.classList.contains("psp-tree-label")) {
-        expandCollapseHandler.call(this, regularTable, event);
-        return;
-    }
-
-    if (target.classList.contains("psp-menu-enabled")) {
-        const meta = regularTable.getMeta(target);
-        const column_name = meta?.column_header?.[this._config.split_by.length];
-        await viewer.toggleColumnSettings(`${column_name}`);
-    } else if (target.classList.contains("psp-sort-enabled")) {
-        sortHandler.call(this, regularTable, viewer, event, target);
-    }
+
+        if (target.classList.contains("psp-tree-label")) {
+            if (model._edit_mode !== "SELECT_ROW_TREE") {
+                expandCollapseHandler(model, regularTable, mouseEvent);
+            }
+
+            return;
+        }
+
+        if (target.classList.contains("psp-menu-enabled")) {
+            const meta = regularTable.getMeta(target);
+            const column_name =
+                meta?.column_header?.[model._config.split_by.length];
+            await viewer.toggleColumnSettings(`${column_name}`);
+        } else if (target.classList.contains("psp-sort-enabled")) {
+            sortHandler(model, regularTable, viewer, mouseEvent, target);
+        }
+    };
 }
 
-export function click_listener(
+export function createDblclickListener(
+    model: DatagridModel,
     regularTable: RegularTable,
-    event: MouseEvent,
-): void {
-    if (event.which !== 1) {
-        return;
-    }
-
-    let target = event.target as HTMLElement | null;
-    while (target && target.tagName !== "TD" && target.tagName !== "TH") {
-        target = target.parentElement;
-        if (!target || !regularTable.contains(target)) {
+    viewer: HTMLPerspectiveViewerElement,
+): EventListener {
+    return async (event: Event): Promise<void> => {
+        const mouseEvent = event as MouseEvent;
+        if (mouseEvent.which !== 1) {
+            return;
+        }
+
+        let target = mouseEvent.target as HTMLElement | null;
+        if (target?.tagName === "A") {
             return;
         }
-    }
-
-    if (!target) return;
-
-    if (target.classList.contains("psp-tree-label") && event.offsetX < 26) {
-        event.stopImmediatePropagation();
-    } else if (
-        target.classList.contains("psp-header-leaf") &&
-        !target.classList.contains("psp-header-corner")
-    ) {
-        event.stopImmediatePropagation();
-    }
+
+        while (target && target.tagName !== "TD" && target.tagName !== "TH") {
+            target = target.parentElement;
+            if (!target || !regularTable.contains(target)) {
+                return;
+            }
+        }
+
+        if (!target) {
+            return;
+        }
+
+        if (target.classList.contains("psp-tree-label")) {
+            if (model._edit_mode === "SELECT_ROW_TREE") {
+                expandCollapseHandler(model, regularTable, mouseEvent);
+            }
+        }
+    };
+}
+
+export function createClickListener(regularTable: RegularTable): EventListener {
+    return (event: Event): void => {
+        const mouseEvent = event as MouseEvent;
+        if (mouseEvent.which !== 1) {
+            return;
+        }
+
+        let target = mouseEvent.target as HTMLElement | null;
+        while (target && target.tagName !== "TD" && target.tagName !== "TH") {
+            target = target.parentElement;
+            if (!target || !regularTable.contains(target)) {
+                return;
+            }
+        }
+
+        if (!target) {
+            return;
+        }
+
+        if (
+            target.classList.contains("psp-tree-label") &&
+            mouseEvent.offsetX < 26
+        ) {
+            mouseEvent.stopImmediatePropagation();
+        } else if (
+            target.classList.contains("psp-header-leaf") &&
+            !target.classList.contains("psp-header-corner")
+        ) {
+            mouseEvent.stopImmediatePropagation();
+        }
+    };
 }