@perspective-dev/viewer-datagrid 4.4.0 → 4.5.0

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,153 @@ 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 +233,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 +258,7 @@ export async function activate(
             this.regular_table,
             table,
             view,
+            viewer.getAttribute("theme")!,
             this.model,
         );
     }

package/src/ts/plugin/column_config_schema.ts

@@ -0,0 +1,187 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { ColumnType } from "@perspective-dev/client";
+import type { DatagridPluginElement } from "../types.js";
+
+interface ViewerConfigLike {
+    group_by?: string[];
+    group_rollup_mode?: string;
+}
+
+type ControlSpec = Record<string, unknown> & { kind: string };
+
+export interface ColumnConfigSchema {
+    fields: ControlSpec[];
+}
+
+/**
+ * Plugin schema for the Datagrid column-settings sidebar. Returns the
+ * controls the viewer should render in the Style tab for a given column.
+ *
+ * Each entry in `fields` is a `ControlSpec` discriminated by `kind`.
+ * Composite kinds (`NumberStyle`, `DatetimeFormat`, `StringFormat`,
+ * `NumberFormat`, `AggregateDepth`) own a fixed key namespace and
+ * carry only their `default`. Primitive kinds (`Enum`, `Bool`, `Color`,
+ * etc.) carry their own `key` (storage) and `label` (UI) inline.
+ *
+ * Aggregate Depth is plugin-owned — surfaced only inside the Datagrid
+ * because rollup-mode pivots are a Datagrid concern. Emitted only when
+ * the active view has a non-empty `group_by` and rollup mode is `Rollup`.
+ */
+interface ColumnStats {
+    abs_max?: number;
+}
+
+export default function column_config_schema(
+    this: DatagridPluginElement,
+    type: ColumnType,
+    _group: string | undefined,
+    _column_name: string,
+    current_value: Record<string, unknown> | null,
+    viewer_config?: ViewerConfigLike,
+    column_stats?: ColumnStats,
+): ColumnConfigSchema {
+    const fields: ControlSpec[] = [];
+
+    if (type === "integer" || type === "float") {
+        const pos_fg = this.model!._pos_fg_color[0];
+        const neg_fg = this.model!._neg_fg_color[0];
+        const pos_bg = this.model!._pos_bg_color[0];
+        const neg_bg = this.model!._neg_bg_color[0];
+
+        fields.push({
+            kind: "Enum",
+            key: "number_fg_mode",
+            default: "color",
+            variants: [
+                { value: "disabled", label: "Disabled" },
+                { value: "color", label: "Color" },
+                { value: "bar", label: "Bar" },
+                { value: "label-bar", label: "Gradient" },
+            ],
+        });
+
+        const fg_mode = (current_value?.number_fg_mode as string) ?? "color";
+        if (fg_mode !== "disabled") {
+            fields.push({
+                kind: "ColorRange",
+                key_pos: "pos_fg_color",
+                key_neg: "neg_fg_color",
+                default_pos: pos_fg,
+                default_neg: neg_fg,
+                is_gradient: false,
+            });
+        }
+
+        if (fg_mode === "bar" || fg_mode === "label-bar") {
+            fields.push({
+                kind: "Number",
+                key: "fg_gradient",
+                default: column_stats?.abs_max ?? 0,
+                include: true,
+            });
+        }
+
+        fields.push({
+            kind: "Enum",
+            key: "number_bg_mode",
+            default: "disabled",
+            variants: [
+                { value: "disabled", label: "Disabled" },
+                { value: "color", label: "Color" },
+                { value: "gradient", label: "Gradient" },
+                { value: "pulse", label: "Pulse" },
+            ],
+        });
+
+        const bg_mode = (current_value?.number_bg_mode as string) ?? "disabled";
+        if (bg_mode !== "disabled") {
+            fields.push({
+                kind: "ColorRange",
+                key_pos: "pos_bg_color",
+                key_neg: "neg_bg_color",
+                default_pos: pos_bg,
+                default_neg: neg_bg,
+                is_gradient: bg_mode === "gradient" || bg_mode === "pulse",
+            });
+        }
+
+        if (bg_mode === "gradient") {
+            fields.push({
+                kind: "Number",
+                key: "bg_gradient",
+                include: true,
+                default: column_stats?.abs_max ?? 0,
+            });
+        }
+
+        fields.push({ kind: "NumberFormat" });
+    } else if (type === "date" || type === "datetime") {
+        fields.push({ kind: "DatetimeFormat" });
+
+        fields.push({
+            kind: "Enum",
+            key: "datetime_color_mode",
+            default: "none",
+            variants: [
+                { value: "none", label: "None" },
+                { value: "foreground", label: "Foreground" },
+                { value: "background", label: "Background" },
+            ],
+        });
+
+        const dt_mode =
+            (current_value?.datetime_color_mode as string) ?? "none";
+
+        if (dt_mode !== "none") {
+            fields.push({
+                kind: "Color",
+                key: "color",
+                default: this.model!._color[0],
+            });
+        }
+    } else if (type === "string") {
+        fields.push({ kind: "StringFormat" });
+
+        fields.push({
+            kind: "Enum",
+            key: "string_color_mode",
+            default: "none",
+            variants: [
+                { value: "none", label: "None" },
+                { value: "foreground", label: "Foreground" },
+                { value: "background", label: "Background" },
+                { value: "series", label: "Series" },
+            ],
+        });
+
+        const str_mode = (current_value?.string_color_mode as string) ?? "none";
+        if (str_mode !== "none") {
+            fields.push({
+                kind: "Color",
+                key: "color",
+                default: this.model!._color[0],
+            });
+        }
+    }
+
+    const group_by = viewer_config?.group_by ?? [];
+    const is_rollup =
+        (viewer_config?.group_rollup_mode ?? "rollup") === "rollup";
+
+    if (group_by.length > 0 && is_rollup) {
+        fields.push({ kind: "AggregateDepth" });
+    }
+
+    return { fields };
+}

package/src/ts/plugin/draw.ts

@@ -47,6 +47,7 @@ export async function draw(
         this.regular_table.scrollLeft = 0;
         this._reset_scroll_left = false;
     }
+
     if (this._reset_select) {
         this.regular_table.dispatchEvent(
             new CustomEvent("psp-deselect-all", { bubbles: false }),

package/src/ts/plugin/restore.ts

@@ -92,16 +92,20 @@ export function restore(
         }
     }
 
-    if ("edit_mode" in token && token.edit_mode) {
-        if (EDIT_MODES.indexOf(token.edit_mode) !== -1) {
+    if ("edit_mode" in token) {
+        if (EDIT_MODES.indexOf(token.edit_mode!) !== -1) {
             toggle_edit_mode.call(this, token.edit_mode);
         } else {
             console.error("Unknown edit mode " + token.edit_mode);
         }
+    } else {
+        toggle_edit_mode.call(this, "READ_ONLY");
     }
 
     if ("scroll_lock" in token) {
         toggle_scroll_lock.call(this, token.scroll_lock);
+    } else {
+        toggle_scroll_lock.call(this, false);
     }
 
     const datagrid = this.regular_table;

package/src/ts/plugin/save.ts

@@ -11,11 +11,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { save_column_size_overrides } from "../model/column_overrides.js";
-import type {
-    DatagridPluginElement,
-    DatagridPluginConfig,
-    EditMode,
-} from "../types.js";
+import type { DatagridPluginElement, DatagridPluginConfig } from "../types.js";
 
 export function save(
     this: DatagridPluginElement,
@@ -41,5 +37,6 @@ export function save(
 
         return JSON.parse(JSON.stringify(token));
     }
+
     return {};
 }