@perspective-dev/viewer-datagrid 4.0.1 → 4.1.1

package/src/ts/data_listener/index.ts

@@ -0,0 +1,242 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { PRIVATE_PLUGIN_SYMBOL } from "../types.js";
+import { format_cell } from "./format_cell.js";
+import {
+    format_tree_header,
+    format_tree_header_row_path,
+} from "./format_tree_header.js";
+import type {
+    DatagridModel,
+    PerspectiveViewerElement,
+    RegularTable,
+    Schema,
+} from "../types.js";
+import type { CellScalar, DataResponse } from "regular-table/dist/esm/types.js";
+import { ViewWindow } from "@perspective-dev/client";
+
+interface ColumnData {
+    __ROW_PATH__?: unknown[][];
+    __ID__?: unknown[][];
+    [key: string]: unknown[] | undefined;
+}
+
+/**
+ * Creates a new DataListener, suitable for passing to `regular-table`'s
+ * `.setDataListener()` method. This should be called as a method on the
+ * plugin.
+ *
+ * @returns A data listener for the plugin.
+ */
+export function createDataListener(
+    viewer: PerspectiveViewerElement,
+): (
+    regularTable: RegularTable,
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+) => Promise<DataResponse> {
+    let last_meta: unknown[][] | undefined;
+    let last_column_paths: string[] | undefined;
+    let last_ids: unknown[][] | undefined;
+    let last_reverse_ids: Map<string, number> | undefined;
+    let last_reverse_columns: Map<string, number> | undefined;
+
+    return async function dataListener(
+        this: DatagridModel,
+        regularTable: RegularTable,
+        x0: number,
+        y0: number,
+        x1: number,
+        y1: number,
+    ): Promise<DataResponse> {
+        let columns: ColumnData = {};
+        const new_window: ViewWindow = {
+            start_row: y0,
+            start_col: x0,
+            end_row: y1,
+            end_col: x1,
+            id: true,
+        };
+
+        let num_columns: number | null = null;
+
+        if (x1 - x0 > 0 && y1 - y0 > 0) {
+            this._is_old_viewport =
+                this._last_window?.start_row === y0 &&
+                this._last_window?.end_row === y1 &&
+                this._last_window?.start_col === x0 &&
+                this._last_window?.end_col === x1;
+
+            const [x, z] = await Promise.all([
+                this._view.to_columns_string(new_window as any),
+                this._view.num_columns(),
+            ]);
+
+            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__",
+            );
+
+            let changed_cols = false;
+            for (let i = 0; i < new_col_paths.length; i++) {
+                if (
+                    this._column_paths[new_window.start_col! + i] !==
+                    new_col_paths[i]
+                ) {
+                    changed_cols = true;
+                    this._column_paths[new_window.start_col! + i] =
+                        new_col_paths[i];
+                }
+            }
+
+            if (changed_cols) {
+                const [a, b] = await Promise.all([
+                    this._view.schema(),
+                    this._view.expression_schema(),
+                ]);
+
+                this._schema = { ...(a as Schema), ...(b as Schema) };
+                for (let i = 0; i < new_col_paths.length; i++) {
+                    const column_path_parts = new_col_paths[i].split("|");
+                    const column =
+                        column_path_parts[this._config.split_by.length];
+
+                    this._is_editable[i + new_window.start_col!] =
+                        !!this._table_schema[column];
+
+                    this._column_types[i + new_window.start_col!] =
+                        this._schema[column];
+                }
+            }
+
+            this._last_window = new_window;
+            this._ids =
+                columns.__ID__ ||
+                Array(y1 - y0)
+                    .fill(null)
+                    .map((_, index) => [index + y0]);
+
+            this._reverse_columns = this._column_paths
+                .slice(x0, x1)
+                .reduce((acc, x, i) => {
+                    acc.set(x, i);
+                    return acc;
+                }, new Map<string, number>());
+
+            this._reverse_ids = this._ids?.reduce((acc, x, i) => {
+                acc.set(x?.join("|"), i);
+                return acc;
+            }, new Map<string, number>());
+        } else {
+            this._div_factory.clear();
+            num_columns = await this._view.num_columns();
+        }
+
+        const data: (string | HTMLElement)[][] = [];
+        const metadata: unknown[][] = [];
+        const column_headers: string[][] = [];
+        const column_paths: string[] = [];
+
+        const is_settings_open = viewer.hasAttribute("settings");
+        for (
+            let ipath = x0;
+            ipath < Math.min(x1, this._column_paths.length);
+            ++ipath
+        ) {
+            const path = this._column_paths[ipath];
+            const path_parts = path.split("|");
+            const column = columns[path] || new Array(y1 - y0).fill(null);
+            const agg_depth = Math.min(
+                (regularTable as any)[PRIVATE_PLUGIN_SYMBOL]?.[
+                    path_parts[this._config.split_by.length]
+                ]?.aggregate_depth || 0,
+                this._config.group_by.length,
+            );
+
+            data.push(
+                column.map((x, i) => {
+                    if ((columns?.__ROW_PATH__?.[i]?.length ?? 0) < agg_depth) {
+                        return "";
+                    } else {
+                        return format_cell.call(
+                            this,
+                            path_parts[this._config.split_by.length],
+                            x,
+                            (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {},
+                        ) as string | HTMLElement;
+                    }
+                }),
+            );
+
+            metadata.push(column as unknown[]);
+            if (is_settings_open) {
+                path_parts.push("");
+            }
+
+            column_headers.push(path_parts);
+            column_paths.push(path);
+        }
+
+        // Only update the last state if this is not a "phantom" call.
+        if (x1 - x0 > 0 && y1 - y0 > 0) {
+            this.last_column_paths = last_column_paths;
+            this.last_meta = last_meta;
+            this.last_ids = last_ids;
+            this.last_reverse_ids = last_reverse_ids;
+            this.last_reverse_columns = last_reverse_columns;
+
+            last_column_paths = column_paths;
+            last_meta = metadata;
+            last_ids = this._ids;
+            last_reverse_ids = this._reverse_ids;
+            last_reverse_columns = this._reverse_columns;
+        }
+
+        const is_row_path = columns.__ROW_PATH__ !== undefined;
+        const row_headers = Array.from(
+            (is_row_path
+                ? format_tree_header_row_path
+                : format_tree_header
+            ).call(
+                this,
+                columns.__ROW_PATH__,
+                this._config.group_by,
+                regularTable,
+            ),
+        ) as (string | HTMLElement)[][];
+
+        const num_row_headers = row_headers[0]?.length;
+
+        const result: DataResponse = {
+            num_column_headers:
+                this._config.split_by.length + (is_settings_open ? 2 : 1),
+            num_row_headers,
+            num_rows: this._num_rows,
+            num_columns,
+            row_headers: row_headers as CellScalar[][], // Add `HTMLElement`
+            column_headers,
+            data: data as CellScalar[][],
+            metadata,
+            column_header_merge_depth: Math.max(
+                0,
+                this._config.split_by.length,
+            ),
+        };
+
+        return result;
+    };
+}

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

@@ -0,0 +1,73 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type {
+    RegularTable,
+    DatagridModel,
+    PerspectiveViewerElement,
+} from "../../types.js";
+
+export function write_cell(
+    table: RegularTable,
+    model: DatagridModel,
+    active_cell: HTMLElement,
+): boolean {
+    const meta = table.getMeta(active_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];
+    if (type === "float" || type === "integer") {
+        const parsed = parseFloat(text.replace(/,/g, ""));
+        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;
+    }
+
+    const msg = {
+        __INDEX__: id,
+        [model._column_paths[meta.x]]: text,
+    };
+
+    model._table.update([msg], { port_id: model._edit_port, format: null });
+    return true;
+}
+
+export function clickListener(
+    this: DatagridModel,
+    table: RegularTable,
+    _viewer: PerspectiveViewerElement,
+    event: MouseEvent,
+): void {
+    const meta = table.getMeta(event.target as Element);
+    if (typeof meta?.x !== "undefined") {
+        const is_editable2 = this._is_editable[meta.x];
+        const is_bool = this.get_psp_type(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);
+        }
+    }
+}

package/src/ts/event_handlers/click.ts

@@ -0,0 +1,92 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+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 { RegularTableElement } from "regular-table";
+import { HTMLPerspectiveViewerDatagridPluginElement } from "../custom_elements/datagrid.js";
+
+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,
+    table: RegularTableElement,
+    viewer: PerspectiveViewerElement,
+    selected_position_map: SelectedPositionMap,
+    event: KeyboardEvent,
+): void {
+    if (this._edit_mode === "EDIT") {
+        if (!is_editable.call(this, 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`,
+        );
+    }
+}
+
+export function clickListener(
+    this: DatagridModel,
+    table: RegularTableElement,
+    viewer: PerspectiveViewerElement,
+    event: MouseEvent,
+): void {
+    if (this._edit_mode === "EDIT") {
+        if (!is_editable.call(this, 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`,
+        );
+    }
+}

package/src/ts/event_handlers/deselect_all.ts

@@ -0,0 +1,28 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ 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";
+
+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);
+    }
+}

package/src/ts/event_handlers/dispatch_click.ts

@@ -0,0 +1,44 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { RegularTableElement } from "regular-table";
+import getCellConfig from "../get_cell_config.js";
+import type {
+    DatagridModel,
+    PerspectiveViewerElement,
+    PerspectiveClickDetail,
+} from "../types.js";
+
+export async function dispatch_click_listener(
+    this: DatagridModel,
+    table: RegularTableElement,
+    viewer: PerspectiveViewerElement,
+    event: MouseEvent,
+): Promise<void> {
+    const meta = table.getMeta(event.target as Element);
+    if (!meta) 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,
+            },
+        }),
+    );
+}

package/src/ts/event_handlers/expand_collapse.ts

@@ -0,0 +1,44 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type { RegularTable, DatagridModel } from "../types.js";
+
+export async function expandCollapseHandler(
+    this: DatagridModel,
+    regularTable: RegularTable,
+    event: MouseEvent,
+): Promise<void> {
+    const meta = regularTable.getMeta(event.target as Element);
+    if (!meta?.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(
+            (meta.row_header as unknown[]).filter((x) => x !== undefined)
+                .length - 2,
+        );
+    } else if (event.shiftKey) {
+        this._view.set_depth(
+            (meta.row_header as unknown[]).filter((x) => x !== undefined)
+                .length - 1,
+        );
+    } else if (is_collapse) {
+        this._view.collapse(meta.y);
+    } else {
+        this._view.expand(meta.y);
+    }
+    this._num_rows = await this._view.num_rows();
+    this._num_columns = await this._view.num_columns();
+    regularTable.draw();
+}

package/src/ts/event_handlers/focus.ts

@@ -0,0 +1,63 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ 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,
+} from "../types.js";
+
+type SelectedPositionMap = Map<RegularTable, SelectedPosition>;
+
+export function focusoutListener(
+    this: DatagridModel,
+    table: RegularTable,
+    viewer: PerspectiveViewerElement,
+    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();
+            }
+        }
+    }
+}
+
+export function focusinListener(
+    this: DatagridModel,
+    table: RegularTable,
+    _viewer: PerspectiveViewerElement,
+    selected_position_map: SelectedPositionMap,
+    event: FocusEvent,
+): void {
+    const target = event.target as HTMLElement;
+    const meta = table.getMeta(target);
+    if (meta) {
+        const new_state: SelectedPosition = {
+            x: meta.x,
+            y: meta.y,
+            content: target.textContent || undefined,
+        };
+        selected_position_map.set(table, new_state);
+    }
+}