@perspective-dev/viewer-datagrid 4.4.1 → 4.5.0

package/dist/esm/plugin/column_config_schema.d.ts

@@ -0,0 +1,31 @@
+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;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer-datagrid",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "Perspective datagrid plugin based on `regular-table`",
   "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
   "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",

package/src/ts/color_utils.ts

@@ -28,13 +28,18 @@ function parse_hex(input: string): RGB | null {
         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];
+        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];
+        if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+            return [r, g, b];
+        }
     }
+
     return null;
 }
 
@@ -43,7 +48,10 @@ 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;
+    if (!m) {
+        return null;
+    }
+
     return [
         Math.round(parseFloat(m[1])),
         Math.round(parseFloat(m[2])),
@@ -58,7 +66,11 @@ function parse_via_canvas(input: string): RGB {
         canvas.width = canvas.height = 1;
         parse_ctx = canvas.getContext("2d");
     }
-    if (!parse_ctx) return [0, 0, 0];
+
+    if (!parse_ctx) {
+        return [0, 0, 0];
+    }
+
     parse_ctx.fillStyle = "#000";
     parse_ctx.fillStyle = input;
     const normalized = parse_ctx.fillStyle as string;
@@ -69,7 +81,10 @@ function parse_via_canvas(input: string): RGB {
 export function parseColor(input: string): RGB {
     const key = input.trim();
     const cached = parse_cache.get(key);
-    if (cached) return cached;
+    if (cached) {
+        return cached;
+    }
+
     const rgb = parse_hex(key) ?? parse_rgb_fn(key) ?? parse_via_canvas(key);
     parse_cache.set(key, rgb);
     return rgb;
@@ -99,10 +114,15 @@ export function rgbToHsl([r, g, b]: RGB): HSL {
     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;
+        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];
 }
 
@@ -113,16 +133,33 @@ export function hslToRgb([h, s, l]: HSL): RGB {
         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;
+        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),

package/src/ts/custom_elements/datagrid.ts

@@ -15,16 +15,17 @@ import { activate } from "../plugin/activate.js";
 import { restore } from "../plugin/restore.js";
 import { save } from "../plugin/save.js";
 import { draw } from "../plugin/draw.js";
-import column_style_controls, {
-    ColumnStyleOpts,
-} from "../plugin/column_style_controls.js";
+import column_config_schema, {
+    ColumnConfigSchema,
+} from "../plugin/column_config_schema.js";
 import datagridStyles from "../../../dist/css/perspective-viewer-datagrid.css";
 import { format_raw } from "../data_listener/format_cell.js";
+import { sourceColumn } from "@perspective-dev/viewer/src/ts/column-format.js";
 
 import type { View, ViewWindow } from "@perspective-dev/client";
 import type {
-    HTMLPerspectiveViewerElement,
     IPerspectiveViewerPlugin,
+    PluginStaticConfig,
 } from "@perspective-dev/viewer";
 import type {
     DatagridModel,
@@ -115,44 +116,64 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return await activate.call(this, view);
     }
 
-    get name(): string {
-        return "Datagrid";
+    get_static_config(): PluginStaticConfig {
+        return {
+            name: "Datagrid",
+            category: "Basic",
+            select_mode: "toggle",
+            config_column_names: ["Columns"],
+            group_rollup_modes: ["rollup", "flat", "total"],
+            // Higher priority than the chart plugins so the Datagrid is
+            // loaded by default.
+            priority: 1,
+            can_render_column_styles: true,
+        };
     }
 
-    get category(): string {
-        return "Basic";
+    plugin_config_schema(): ColumnConfigSchema {
+        const fields = [];
+        fields.push({
+            kind: "Enum",
+            key: "edit_mode",
+            default: "READ_ONLY",
+            variants: [
+                { value: "EDIT", label: "Edit" },
+                { value: "READ_ONLY", label: "Read-only" },
+                { value: "SELECT_ROW", label: "Row Select" },
+                { value: "SELECT_COLUMN", label: "Column Select" },
+                { value: "SELECT_REGION", label: "Region Select" },
+                { value: "SELECT_ROW_TREE", label: "Tree Select" },
+            ],
+        });
+
+        fields.push({
+            kind: "Bool",
+            key: "scroll_lock",
+            default: false,
+        });
+
+        return {
+            fields,
+        };
     }
 
-    get select_mode(): string {
-        return "toggle";
-    }
-
-    get min_config_columns(): number | undefined {
-        return undefined;
-    }
-
-    get config_column_names(): string[] {
-        return ["Columns"];
-    }
-
-    get group_rollups(): string[] {
-        return ["rollup", "flat", "total"];
-    }
-
-    /**
-     * Give the Datagrid a higher priority so it is loaded
-     * over the default charts by default.
-     */
-    get priority(): number {
-        return 1;
-    }
-
-    can_render_column_styles(type: string, _group: string): boolean {
-        return type !== "boolean";
-    }
-
-    column_style_controls(type: string, group: string): ColumnStyleOpts {
-        return column_style_controls.call(this, type as any, group);
+    column_config_schema(
+        type: string,
+        group: string | undefined,
+        column_name: string,
+        current_value: Record<string, unknown> | null,
+        viewer_config?: { group_by?: string[]; group_rollup_mode?: string },
+        column_stats?: { abs_max: number },
+    ): ColumnConfigSchema {
+        return column_config_schema.call(
+            this,
+            type as any,
+            group,
+            column_name,
+            current_value,
+            viewer_config,
+            column_stats,
+        );
     }
 
     async draw(view: View): Promise<void> {
@@ -172,9 +193,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         }
     }
 
-    async render(viewport?: ViewWindow): Promise<string> {
-        const viewer = this.parentElement as HTMLPerspectiveViewerElement;
-        const view = await viewer.getView();
+    async render(view: View, viewport?: ViewWindow): Promise<string> {
         const json = await view.to_columns(viewport as any);
         const cols = await view.column_paths(viewport as any);
 
@@ -194,7 +213,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
                 const pluginConfig = (this.regular_table as any)[
                     PRIVATE_PLUGIN_SYMBOL
                 ] as ColumnsConfig | undefined;
-                const columnName = col_name.split("|").at(-1)!;
+                const columnName = sourceColumn(col_name);
                 const formatter = format_raw(
                     type,
                     pluginConfig?.[columnName] || {},
@@ -206,6 +225,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
                     out += col[ridx] + "\t";
                 }
             }
+
             out += "\n";
         }
 
@@ -235,12 +255,7 @@ export class HTMLPerspectiveViewerDatagridPluginElement
         return restore.call(this, token, columns_config ?? {});
     }
 
-    async restyle(view: View): Promise<void> {
-        // Get view from model if available, otherwise no-op
-        if (this.model?._view) {
-            await this.draw(view);
-        }
-    }
+    restyle() {}
 
     delete(): void {
         this.disconnectedCallback();

package/src/ts/data_listener/format_tree_header.ts

@@ -27,7 +27,7 @@ export function* format_tree_header_row_path(
 ): Generator<RowHeaderCell[]> {
     const plugins: ColumnsConfig =
         (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
-    for (let path of paths) {
+    for (const path of paths) {
         const fullPath: unknown[] = ["TOTAL", ...path];
         const last = fullPath[fullPath.length - 1];
         let newPath: RowHeaderCell[] = fullPath
@@ -61,7 +61,7 @@ export function* format_flat_header_row_path(
     const plugins: ColumnsConfig =
         (regularTable as any)[PRIVATE_PLUGIN_SYMBOL] || {};
 
-    for (let path of paths) {
+    for (const path of paths) {
         yield path.map((part, i) =>
             format_cell.call(this, row_headers[i], part, plugins, true),
         ) as RowHeaderCell[];

package/src/ts/data_listener/formatter_cache.ts

@@ -11,6 +11,11 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import type { ColumnType } from "@perspective-dev/client";
+import {
+    createDateFormatter,
+    createDatetimeFormatter,
+    createNumberFormatter,
+} from "@perspective-dev/viewer/src/ts/column-format.js";
 import type { ColumnConfig } from "../types.js";
 
 export interface Formatter {
@@ -26,30 +31,6 @@ class BooleanFormatter implements Formatter {
 // PluginConfig is a subset of ColumnConfig with the formatting properties
 type PluginConfig = Pick<ColumnConfig, "date_format" | "number_format">;
 
-const LEGACY_CONFIG: Record<
-    string,
-    { format: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions }
-> = {
-    float: {
-        format: {
-            style: "decimal",
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-        },
-    },
-    datetime: {
-        format: {
-            dateStyle: "short",
-            timeStyle: "medium",
-        } as Intl.DateTimeFormatOptions,
-    },
-    date: {
-        format: {
-            dateStyle: "short",
-        } as Intl.DateTimeFormatOptions,
-    },
-};
-
 export class FormatterCache {
     private _formatters: Map<string, Formatter | false>;
 
@@ -61,89 +42,21 @@ export class FormatterCache {
         _type: ColumnType,
         plugin: PluginConfig,
     ): Intl.DateTimeFormat {
-        if (plugin.date_format?.format !== "custom") {
-            const options: Intl.DateTimeFormatOptions = {
-                timeZone: plugin.date_format?.timeZone,
-                dateStyle:
-                    plugin.date_format?.dateStyle === "disabled"
-                        ? undefined
-                        : (plugin.date_format?.dateStyle ?? "short"),
-                timeStyle:
-                    plugin.date_format?.timeStyle === "disabled"
-                        ? undefined
-                        : (plugin.date_format?.timeStyle ?? "medium"),
-            };
-
-            return new Intl.DateTimeFormat(
-                navigator.languages as string[],
-                options,
-            );
-        } else {
-            const options: Intl.DateTimeFormatOptions = {
-                timeZone: plugin.date_format?.timeZone,
-                hour12: plugin.date_format?.hour12 ?? true,
-                fractionalSecondDigits:
-                    plugin.date_format?.fractionalSecondDigits,
-            };
-
-            if (plugin.date_format?.year !== "disabled") {
-                options.year = plugin.date_format?.year ?? "2-digit";
-            }
-            if (plugin.date_format?.month !== "disabled") {
-                options.month = plugin.date_format?.month ?? "numeric";
-            }
-            if (plugin.date_format?.day !== "disabled") {
-                options.day = plugin.date_format?.day ?? "numeric";
-            }
-            if (
-                plugin.date_format?.weekday &&
-                plugin.date_format?.weekday !== "disabled"
-            ) {
-                options.weekday = plugin.date_format.weekday;
-            }
-            if (plugin.date_format?.hour !== "disabled") {
-                options.hour = plugin.date_format?.hour ?? "numeric";
-            }
-            if (plugin.date_format?.minute !== "disabled") {
-                options.minute = plugin.date_format?.minute ?? "numeric";
-            }
-            if (plugin.date_format?.second !== "disabled") {
-                options.second = plugin.date_format?.second ?? "numeric";
-            }
-
-            return new Intl.DateTimeFormat(
-                navigator.languages as string[],
-                options,
-            );
-        }
+        return createDatetimeFormatter(plugin.date_format);
     }
 
     private create_date_formatter(
         _type: ColumnType,
         plugin: PluginConfig,
     ): Intl.DateTimeFormat {
-        const options: Intl.DateTimeFormatOptions = {
-            timeZone: "utc",
-            dateStyle:
-                plugin.date_format?.dateStyle === "disabled"
-                    ? undefined
-                    : (plugin.date_format?.dateStyle ?? "short"),
-        };
-
-        return new Intl.DateTimeFormat(
-            navigator.languages as string[],
-            options,
-        );
+        return createDateFormatter(plugin.date_format);
     }
 
     private create_number_formatter(
         type: ColumnType,
         plugin: PluginConfig,
     ): Intl.NumberFormat {
-        const format =
-            plugin.number_format ??
-            (LEGACY_CONFIG[type]?.format as Intl.NumberFormatOptions);
-        return new Intl.NumberFormat(navigator.languages as string[], format);
+        return createNumberFormatter(type, plugin.number_format);
     }
 
     private create_boolean_formatter(

package/src/ts/data_listener/index.ts

@@ -11,6 +11,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 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,
@@ -84,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

@@ -28,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];
@@ -36,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;

package/src/ts/event_handlers/dispatch_click.ts

@@ -23,7 +23,10 @@ export function createDispatchClickListener(
     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;
+        if (!meta || meta.type !== "body") {
+            return;
+        }
+
         const { x, y } = meta;
         const { row, column_names, config } = await getCellConfig(model, y, x);
         viewer.dispatchEvent(

package/src/ts/event_handlers/expand_collapse.ts

@@ -18,7 +18,10 @@ export async function expandCollapseHandler(
     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",
     );

package/src/ts/event_handlers/header_click.ts

@@ -38,7 +38,9 @@ export function createMousedownListener(
             }
         }
 
-        if (!target) return;
+        if (!target) {
+            return;
+        }
 
         if (target.classList.contains("psp-tree-label")) {
             if (model._edit_mode !== "SELECT_ROW_TREE") {
@@ -82,7 +84,9 @@ export function createDblclickListener(
             }
         }
 
-        if (!target) return;
+        if (!target) {
+            return;
+        }
 
         if (target.classList.contains("psp-tree-label")) {
             if (model._edit_mode === "SELECT_ROW_TREE") {
@@ -107,7 +111,9 @@ export function createClickListener(regularTable: RegularTable): EventListener {
             }
         }
 
-        if (!target) return;
+        if (!target) {
+            return;
+        }
 
         if (
             target.classList.contains("psp-tree-label") &&

package/src/ts/event_handlers/keydown/edit_keydown.ts

@@ -68,7 +68,10 @@ function getPos(elem: ContentEditableElement): number {
         const _range = (elem.getRootNode() as Document)
             .getSelection()
             ?.getRangeAt(0);
-        if (!_range) return 0;
+        if (!_range) {
+            return 0;
+        }
+
         const range = _range.cloneRange();
         range.selectNodeContents(elem);
         range.setEnd(_range.endContainer, _range.endOffset);
@@ -87,7 +90,10 @@ const moveSelection = lock(async function (
     dy: number,
 ): Promise<void> {
     const meta = table.getMeta(active_cell);
-    if (!meta || meta.type !== "body") return;
+    if (!meta || meta.type !== "body") {
+        return;
+    }
+
     const num_columns = model._column_paths.length;
     const num_rows = model._num_rows;
     const selected_position = selected_position_map.get(table);
@@ -167,6 +173,7 @@ export function keydownListener(
                     1,
                 );
             }
+
             break;
         case "ArrowLeft":
             if (getPos(target as ContentEditableElement) === 0) {
@@ -180,6 +187,7 @@ export function keydownListener(
                     0,
                 );
             }
+
             break;
         case "ArrowUp":
             event.preventDefault();
@@ -200,6 +208,7 @@ export function keydownListener(
                     0,
                 );
             }
+
             break;
         case "ArrowDown":
             event.preventDefault();

package/src/ts/event_handlers/select_region.ts

@@ -85,7 +85,10 @@ const getMousedownListener =
             mouseEvent.button === 0 &&
             isSelectionMode(datagrid.model!._edit_mode)
         ) {
-            if (isSingleClickMode(datagrid.model!._edit_mode)) return;
+            if (isSingleClickMode(datagrid.model!._edit_mode)) {
+                return;
+            }
+
             datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES = {};
             const meta = table.getMeta(mouseEvent.target as HTMLElement);
             if (
@@ -199,7 +202,9 @@ const getMouseupListener =
         const mode = datagrid.model!._edit_mode;
         if (isSelectionMode(mode)) {
             const meta = table.getMeta(mouseEvent.target as HTMLElement);
-            if (!meta) return;
+            if (!meta) {
+                return;
+            }
 
             // For single-click modes (SELECT_ROW_TREE), handle toggle
             if (isSingleClickMode(mode)) {
@@ -423,11 +428,17 @@ const applyMouseAreaSelection = (
     className: string,
 ): void => {
     const predicate = SELECTION_PREDICATES[datagrid.model!._edit_mode];
-    if (!predicate || selected.length === 0) return;
+    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;
+        if (!meta || meta.type !== "body") {
+            continue;
+        }
+
         let rendered = false;
         for (const area of selected) {
             if (