@perspective-dev/viewer-datagrid 4.4.0 → 4.4.1

package/src/ts/color_utils.ts

@@ -10,15 +10,145 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import chroma from "chroma-js";
 import type { ColorRecord } from "./types.js";
 
+/** 8-bit sRGB color as `[r, g, b]` with each channel in `[0, 255]`. */
+export type RGB = [number, number, number];
+
+/** HSL color as `[h, s, l]` with `h` in degrees `[0, 360)` and `s`, `l` in `[0, 1]`. */
+export type HSL = [number, number, number];
+
+const parse_cache = new Map<string, RGB>();
+let parse_ctx: CanvasRenderingContext2D | null = null;
+
+/** Parse a CSS hex color (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`). Returns `null` if `input` is not a hex literal. Alpha is ignored. */
+function parse_hex(input: string): RGB | null {
+    const s = input.startsWith("#") ? input.slice(1) : input;
+    if (s.length === 3 || s.length === 4) {
+        const r = parseInt(s[0] + s[0], 16);
+        const g = parseInt(s[1] + s[1], 16);
+        const b = parseInt(s[2] + s[2], 16);
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return [r, g, b];
+    } else if (s.length === 6 || s.length === 8) {
+        const r = parseInt(s.slice(0, 2), 16);
+        const g = parseInt(s.slice(2, 4), 16);
+        const b = parseInt(s.slice(4, 6), 16);
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) return [r, g, b];
+    }
+    return null;
+}
+
+/** Parse a CSS `rgb()` or `rgba()` functional color. Returns `null` if `input` does not match. Alpha is ignored. */
+function parse_rgb_fn(input: string): RGB | null {
+    const m = input.match(
+        /^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)/i,
+    );
+    if (!m) return null;
+    return [
+        Math.round(parseFloat(m[1])),
+        Math.round(parseFloat(m[2])),
+        Math.round(parseFloat(m[3])),
+    ];
+}
+
+/** Fallback parser that defers to the browser by assigning `input` to a 2D canvas `fillStyle` and re-reading the normalized value. Handles named colors, `hsl()`, etc. Returns `[0, 0, 0]` if the value is invalid or no canvas context is available. */
+function parse_via_canvas(input: string): RGB {
+    if (!parse_ctx) {
+        const canvas = document.createElement("canvas");
+        canvas.width = canvas.height = 1;
+        parse_ctx = canvas.getContext("2d");
+    }
+    if (!parse_ctx) return [0, 0, 0];
+    parse_ctx.fillStyle = "#000";
+    parse_ctx.fillStyle = input;
+    const normalized = parse_ctx.fillStyle as string;
+    return parse_hex(normalized) ?? parse_rgb_fn(normalized) ?? [0, 0, 0];
+}
+
+/** Parse any CSS color string into an `RGB` triple. Tries hex and `rgb()` fast paths, then falls back to a canvas-based parser for named colors, `hsl()`, etc. Results are memoized per input. */
+export function parseColor(input: string): RGB {
+    const key = input.trim();
+    const cached = parse_cache.get(key);
+    if (cached) return cached;
+    const rgb = parse_hex(key) ?? parse_rgb_fn(key) ?? parse_via_canvas(key);
+    parse_cache.set(key, rgb);
+    return rgb;
+}
+
+/** Format a single channel as a clamped, zero-padded two-digit hex byte. */
+function toHex(c: number): string {
+    const v = Math.max(0, Math.min(255, Math.round(c)));
+    return v.toString(16).padStart(2, "0");
+}
+
+/** Format an `RGB` triple as a `#rrggbb` hex string. Channels are clamped to `[0, 255]`. */
+export function rgbToHex([r, g, b]: RGB): string {
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/** Convert sRGB to HSL. Output `h` is in degrees `[0, 360)`; `s` and `l` are in `[0, 1]`. */
+export function rgbToHsl([r, g, b]: RGB): HSL {
+    const rn = r / 255,
+        gn = g / 255,
+        bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    const l = (max + min) / 2;
+    const d = max - min;
+    let h = 0;
+    let s = 0;
+    if (d !== 0) {
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        if (max === rn) h = ((gn - bn) / d + (gn < bn ? 6 : 0)) * 60;
+        else if (max === gn) h = ((bn - rn) / d + 2) * 60;
+        else h = ((rn - gn) / d + 4) * 60;
+    }
+    return [h, s, l];
+}
+
+/** Convert HSL to sRGB. `h` is wrapped into `[0, 360)`; `s` and `l` are expected in `[0, 1]`. Output channels are rounded to integers in `[0, 255]`. */
+export function hslToRgb([h, s, l]: HSL): RGB {
+    const hn = (((h % 360) + 360) % 360) / 360;
+    if (s === 0) {
+        const v = Math.round(l * 255);
+        return [v, v, v];
+    }
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    const f = (t: number): number => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1 / 6) return p + (q - p) * 6 * t;
+        if (t < 1 / 2) return q;
+        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+        return p;
+    };
+    return [
+        Math.round(f(hn + 1 / 3) * 255),
+        Math.round(f(hn) * 255),
+        Math.round(f(hn - 1 / 3) * 255),
+    ];
+}
+
+/**
+ * Blend two `RGB` colors using LRGB (gamma-naive linear) interpolation,
+ * matching chroma-js's default `mix` mode. `f` is the weight of `b` in `[0, 1]`
+ * (0 returns `a`, 1 returns `b`).
+ */
+export function mixRgb(a: RGB, b: RGB, f = 0.5): RGB {
+    return [
+        Math.round(Math.sqrt(a[0] * a[0] * (1 - f) + b[0] * b[0] * f)),
+        Math.round(Math.sqrt(a[1] * a[1] * (1 - f) + b[1] * b[1] * f)),
+        Math.round(Math.sqrt(a[2] * a[2] * (1 - f) + b[2] * b[2] * f)),
+    ];
+}
+
+/** 50/50 LRGB blend of CSS color `a` with `RGB`-ish triple `b`, returned as `#rrggbb`. */
 export function blend(a: string, b: number[]): string {
-    return chroma.mix(a, `rgb(${b[0]},${b[1]},${b[2]})`, 0.5).hex();
+    return rgbToHex(mixRgb(parseColor(a), [b[0], b[1], b[2]], 0.5));
 }
 
-// AFAICT `chroma-js` has no alpha-aware blending? So we need a function to get
-// the color of a heatmap cell over the background.
+/** Composite a premultiplied-style `RGBA` cell color over `source` (default white) and return the resulting opaque `RGB`. Used to flatten heatmap cells against the background. */
 export function rgbaToRgb(
     [r, g, b, a]: [number, number, number, number],
     source: [number, number, number] = [255, 255, 255],
@@ -30,7 +160,7 @@ export function rgbaToRgb(
     return [f(0, r), f(1, g), f(2, b)];
 }
 
-// Chroma does this but why bother?
+/** Pick a readable foreground (`#161616` or `#ffffff`) for the given background using a perceptual luminance threshold. */
 export function infer_foreground_from_background([r, g, b]: [
     number,
     number,
@@ -42,21 +172,19 @@ export function infer_foreground_from_background([r, g, b]: [
         : "#ffffff";
 }
 
-function make_gradient(chromahex: chroma.Color): string {
-    const [r, g, b] = chromahex.rgb();
-    const [r1, g1, b1] = chromahex
-        .set("hsl.h", (chromahex.get("hsl.h") - 15) % 360)
-        .rgb();
-    const [r2, g2, b2] = chromahex
-        .set("hsl.h", (chromahex.get("hsl.h") + 15) % 360)
-        .rgb();
+/** Build a CSS `linear-gradient` that fans `rgb` ±15° in hue, used as the negative-value swatch in column color pickers. */
+function make_gradient(rgb: RGB): string {
+    const [h, s, l] = rgbToHsl(rgb);
+    const [r, g, b] = rgb;
+    const [r1, g1, b1] = hslToRgb([h - 15, s, l]);
+    const [r2, g2, b2] = hslToRgb([h + 15, s, l]);
     return `linear-gradient(to right top,rgb(${r1},${g1},${b1}),rgb(${r},${g},${b}) 50%,rgb(${r2},${g2},${b2}))`;
 }
 
+/** Precompute the tuple of derived color strings (RGB channels, gradient, opaque/transparent rgba) cached on the model for a configured plugin color. */
 export function make_color_record(color: string): ColorRecord {
-    const chroma_neg = chroma(color);
-    const _neg_grad = make_gradient(chroma_neg);
-    const rgb = chroma_neg.rgb();
+    const rgb = parseColor(color);
+    const _neg_grad = make_gradient(rgb);
     return [
         color,
         rgb[0],

package/src/ts/custom_elements/datagrid.ts

@@ -22,12 +22,14 @@ import datagridStyles from "../../../dist/css/perspective-viewer-datagrid.css";
 import { format_raw } from "../data_listener/format_cell.js";
 
 import type { View, ViewWindow } from "@perspective-dev/client";
-import type { IPerspectiveViewerPlugin } from "@perspective-dev/viewer";
+import type {
+    HTMLPerspectiveViewerElement,
+    IPerspectiveViewerPlugin,
+} from "@perspective-dev/viewer";
 import type {
     DatagridModel,
     DatagridToolbarElement,
     EditMode,
-    PerspectiveViewerElement,
     DatagridPluginConfig,
     ColumnsConfig,
 } from "../types.js";
@@ -171,7 +173,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
     }
 
     async render(viewport?: ViewWindow): Promise<string> {
-        const viewer = this.parentElement as PerspectiveViewerElement;
+        const viewer = this.parentElement as HTMLPerspectiveViewerElement;
         const view = await viewer.getView();
         const json = await view.to_columns(viewport as any);
         const cols = await view.column_paths(viewport as any);
@@ -210,7 +212,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return out.trim();
     }
 
-    async resize(): Promise<void> {
+    async resize(_view: View): Promise<void> {
         if (!this.isConnected || this.offsetParent == null) {
             return;
         }
@@ -225,25 +227,22 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         this.regular_table.clear();
     }
 
-    async save(): Promise<any> {
+    save(): any {
         return save.call(this);
     }
 
-    async restore(
-        token: DatagridPluginConfig,
-        columns_config?: ColumnsConfig,
-    ): Promise<any> {
+    restore(token: DatagridPluginConfig, columns_config?: ColumnsConfig): void {
         return restore.call(this, token, columns_config ?? {});
     }
 
-    async restyle(): Promise<void> {
+    async restyle(view: View): Promise<void> {
         // Get view from model if available, otherwise no-op
         if (this.model?._view) {
-            await this.draw(this.model._view);
+            await this.draw(view);
         }
     }
 
-    async delete(): Promise<void> {
+    delete(): void {
         this.disconnectedCallback();
         this._toolbar = undefined;
         if ((this.regular_table as any).table_model) {

package/src/ts/custom_elements/toolbar.ts

@@ -10,12 +10,10 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 import TOOLBAR_STYLE from "../../../dist/css/perspective-viewer-datagrid-toolbar.css";
 import { toggle_edit_mode, toggle_scroll_lock } from "../model/toolbar.js";
-import type {
-    DatagridPluginElement,
-    PerspectiveViewerElement,
-} from "../types.js";
+import type { DatagridPluginElement } from "../types.js";
 
 const stylesheet = new CSSStyleSheet();
 stylesheet.replaceSync(TOOLBAR_STYLE);
@@ -53,7 +51,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
             </div>
         `;
 
-        const viewer = this.parentElement as PerspectiveViewerElement;
+        const viewer = this.parentElement as HTMLPerspectiveViewerElement;
         const plugin = this.previousElementSibling as DatagridPluginElement;
 
         plugin._scroll_lock = this.shadowRoot!.querySelector(
@@ -66,6 +64,7 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
         plugin._edit_button = this.shadowRoot!.querySelector(
             "#edit_mode",
         ) as HTMLElement;
+
         plugin._edit_button.addEventListener("click", () => {
             toggle_edit_mode.call(plugin);
             plugin.regular_table.draw();

package/src/ts/data_listener/format_cell.ts

@@ -12,7 +12,7 @@
 
 import { FormatterCache, Formatter } from "./formatter_cache.js";
 import type { DatagridModel, ColumnsConfig, ColumnConfig } from "../types.js";
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 
 const FORMAT_CACHE = new FormatterCache();
 const MAX_BAR_WIDTH_PCT = 1;
@@ -44,7 +44,11 @@ export function format_cell(
     const plugin: ColumnConfig = plugins[title] || {};
     const is_numeric = type === "integer" || type === "float";
 
-    if (is_numeric && plugin?.number_fg_mode === "bar") {
+    if (
+        is_numeric &&
+        (plugin?.number_fg_mode === "bar" ||
+            plugin?.number_fg_mode === "label-bar")
+    ) {
         const a = Math.max(
             0,
             Math.min(
@@ -54,15 +58,30 @@ export function format_cell(
             ),
         );
 
-        const div = this._div_factory.get();
-        const anchor = (val as number) >= 0 ? "left" : "right";
+        const anchor = (val as number) >= 0 ? "" : "justify-self:flex-end;";
         const pct = (a * 100).toFixed(2);
-        div.setAttribute(
-            "style",
-            `width:calc(${pct}% - 4px);position:absolute;${anchor}:2px;height:80%;top:10%;pointer-events:none;`,
-        );
 
-        return div;
+        if (plugin.number_fg_mode === "bar") {
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
+                "style",
+                `${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
+            );
+
+            return div;
+        } else {
+            const formatter = FORMAT_CACHE.get(type, plugin);
+            const label = formatter ? formatter.format(val) : (val as string);
+
+            const div = this._div_factory.get();
+            div.className = "psp-bar";
+            div.setAttribute(
+                "style",
+                `--label:"${label}";${anchor}width:${pct}%;height:80%;top:10%;pointer-events:none;background:var(--psp-label-bar-color)`,
+            );
+            return div;
+        }
     } else if (plugin?.format === "link" && type === "string") {
         const anchor = document.createElement("a");
         anchor.setAttribute("href", val as string);

package/src/ts/data_listener/formatter_cache.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 { ColumnConfig } from "../types.js";
 
 export interface Formatter {

package/src/ts/data_listener/index.ts

@@ -17,14 +17,10 @@ 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 { 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 +36,7 @@ interface ColumnData {
  * @returns A data listener for the plugin.
  */
 export function createDataListener(
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
 ): (
     regularTable: RegularTable,
     x0: number,

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,
@@ -56,21 +57,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,30 @@
 
 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,7 +13,7 @@
 import type { RegularTable, DatagridModel } from "../types.js";
 
 export async function expandCollapseHandler(
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTable,
     event: MouseEvent,
 ): Promise<void> {
@@ -24,22 +24,22 @@ export async function expandCollapseHandler(
     );
 
     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();
 }