Skip to content

Better TypeScript types for viewer-datagrid #3116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
texodus merged 2 commits into from
Feb 4, 2026
Merged

Better TypeScript types for viewer-datagrid #3116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c3358a
Update datagrid types
texodus Feb 4, 2026
1e1f81b
Fix flappy test
texodus Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions examples/blocks/src/market/market.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ async function init_tables() {
name: "gui",
});

return { market_table, gui_table };
return { market_table, gui_table, gui_worker };
}

async function init_layouts() {
Expand All @@ -265,13 +265,14 @@ async function init_layouts() {

const INIT_TASK = [init_tables(), init_layouts()];

const [{ market_table, gui_table }, layouts] = await Promise.all(INIT_TASK);
const [{ market_table, gui_table, gui_worker }, layouts] =
await Promise.all(INIT_TASK);
const market = new Market(market_table, skew_model);
const settings = !/(iPad|iPhone|iPod)/g.test(navigator.userAgent);
const select = document.querySelector("select");
const button = document.querySelector("button");
const viewer = document.querySelector("perspective-viewer");
viewer.load(gui_table);
viewer.load(gui_worker);
viewer.restore({ theme: "Pro Dark", table: "gui", settings, ...layouts[0] });
await market.poll(progress);
for (const layout of layouts) {
Expand Down
1 change: 0 additions & 1 deletion packages/viewer-datagrid/src/ts/color_utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ 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();

return [
color,
rgb[0],
Expand Down
23 changes: 13 additions & 10 deletions packages/viewer-datagrid/src/ts/event_handlers/click/edit_click.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,26 @@
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import type {
RegularTable,
DatagridModel,
PerspectiveViewerElement,
import { CellMetadataBody } from "regular-table/dist/esm/types.js";
Copy link
Contributor

@sinistersnare sinistersnare Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be great if this was exported at the top level of regular-table instead of needing to reach into its dist/ dir

import {
type RegularTable,
type DatagridModel,
type PerspectiveViewerElement,
get_psp_type,
} from "../../types.js";

export function write_cell(
table: RegularTable,
model: DatagridModel,
active_cell: HTMLElement,
): boolean {
const meta = table.getMeta(active_cell);
const meta = table.getMeta(active_cell) as CellMetadataBody;
if (!meta) {
return false;
}
const type = model._schema[model._column_paths[meta.x]];
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];
const id = model._ids[meta.y! - meta.y0][0];
if (type === "float" || type === "integer") {
const parsed = parseFloat(text.replace(/,/g, ""));
if (isNaN(parsed)) {
Expand Down Expand Up @@ -59,13 +61,14 @@ export function clickListener(
_viewer: PerspectiveViewerElement,
event: MouseEvent,
): void {
const meta = table.getMeta(event.target as Element);
if (typeof meta?.x !== "undefined") {
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 = this.get_psp_type(meta) === "boolean";
const is_bool = get_psp_type(this, 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);
}
Expand Down
6 changes: 2 additions & 4 deletions packages/viewer-datagrid/src/ts/event_handlers/dispatch_click.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,10 @@ export async function dispatch_click_listener(
viewer: PerspectiveViewerElement,
event: MouseEvent,
): Promise<void> {
const meta = table.getMeta(event.target as Element);
if (!meta) return;
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,
Expand Down
7 changes: 4 additions & 3 deletions packages/viewer-datagrid/src/ts/event_handlers/expand_collapse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@ export async function expandCollapseHandler(
regularTable: RegularTable,
event: MouseEvent,
): Promise<void> {
const meta = regularTable.getMeta(event.target as Element);
if (!meta?.row_header) return;

const meta = regularTable.getMeta(event.target as HTMLElement);
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(
(meta.row_header as unknown[]).filter((x) => x !== undefined)
Expand All @@ -38,6 +38,7 @@ export async function expandCollapseHandler(
} else {
this._view.expand(meta.y);
}

this._num_rows = await this._view.num_rows();
this._num_columns = await this._view.num_columns();
regularTable.draw();
Expand Down
2 changes: 1 addition & 1 deletion packages/viewer-datagrid/src/ts/event_handlers/focus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export function focusinListener(
): void {
const target = event.target as HTMLElement;
const meta = table.getMeta(target);
if (meta) {
if (meta?.type === "body") {
const new_state: SelectedPosition = {
x: meta.x,
y: meta.y,
Expand Down
2 changes: 1 addition & 1 deletion packages/viewer-datagrid/src/ts/event_handlers/header_click.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export async function mousedown_listener(
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);
await viewer.toggleColumnSettings(`${column_name}`);
} else if (target.classList.contains("psp-sort-enabled")) {
sortHandler.call(this, regularTable, viewer, event, target);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/viewer-datagrid/src/ts/event_handlers/keydown/edit_keydown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const moveSelection = lock(async function (
dy: number,
): Promise<void> {
const meta = table.getMeta(active_cell);
if (!meta) return;
if (!meta || meta.type !== "body") return;
const num_columns = this._column_paths.length;
const num_rows = this._num_rows;
const selected_position = selected_position_map.get(table);
Expand Down Expand Up @@ -118,7 +118,7 @@ function isLastCell(
target: HTMLElement,
): boolean {
const meta = table.getMeta(target);
return meta !== undefined && meta.y === model._num_rows - 1;
return meta?.type === "body" && meta.y === model._num_rows - 1;
}

export function keydownListener(
Expand Down
10 changes: 6 additions & 4 deletions packages/viewer-datagrid/src/ts/event_handlers/row_select_click.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,22 @@ export async function selectionListener(
selected_rows_map: SelectedRowsMap,
event: HandledMouseEvent,
): Promise<void> {
const meta = regularTable.getMeta(event.target as Element);
const meta = regularTable.getMeta(event.target as HTMLElement);
if (!viewer.hasAttribute("selectable")) return;
if (event.handled) return;
if (event.shiftKey) return;
if (event.button !== 0) {
return;
}

event.stopImmediatePropagation();

if (!meta) {
return;
}

const id = this._ids?.[meta.y - meta.y0];
if (meta && meta.y >= 0) {
if ((meta.type === "body" || meta.type === "row_header") && meta.y >= 0) {
const id = this._ids?.[meta.y - meta.y0];
const selected = selected_rows_map.get(regularTable);
const key_match =
!!selected &&
Expand All @@ -56,10 +57,11 @@ export async function selectionListener(
row: {},
config: { filter: [] },
};

const { row, column_names, config } = await getCellConfig(
this,
meta.y,
meta.x,
meta.type === "body" ? meta.x : 0,
);

if (is_deselect) {
Expand Down
34 changes: 23 additions & 11 deletions packages/viewer-datagrid/src/ts/event_handlers/select_region.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,12 @@ const getMousedownListener =
datagrid.model!._edit_mode === "SELECT_COLUMN")
) {
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES = {};
const meta = table.getMeta(mouseEvent.target as Element);
if (meta && meta.x !== undefined && meta.y !== undefined) {
const meta = table.getMeta(mouseEvent.target as HTMLElement);
if (
meta?.type === "body" &&
meta.x !== undefined &&
meta.y !== undefined
) {
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES =
{
x: meta.x,
Expand Down Expand Up @@ -129,8 +133,12 @@ const getMouseoverListener =
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES
.x !== undefined
) {
const meta = table.getMeta(mouseEvent.target as Element);
if (meta && meta.x !== undefined && meta.y !== undefined) {
const meta = table.getMeta(mouseEvent.target as HTMLElement);
if (
meta?.type === "body" &&
meta.x !== undefined &&
meta.y !== undefined
) {
const potentialSelection: SelectionArea = {
x0: Math.min(
meta.x,
Expand Down Expand Up @@ -183,7 +191,7 @@ const getMouseupListener =
datagrid.model!._edit_mode === "SELECT_ROW" ||
datagrid.model!._edit_mode === "SELECT_COLUMN"
) {
const meta = table.getMeta(mouseEvent.target as Element);
const meta = table.getMeta(mouseEvent.target as HTMLElement);
if (!meta) return;

if (
Expand All @@ -195,6 +203,7 @@ const getMouseupListener =
if (
selected.x0 === selected.x1 &&
selected.y0 === selected.y1 &&
meta?.type === "body" &&
selected.x0 === meta.x &&
selected.y0 === meta.y
) {
Expand All @@ -216,6 +225,7 @@ const getMouseupListener =
.CURRENT_MOUSEDOWN_COORDINATES &&
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES
.x !== undefined &&
meta?.type === "body" &&
meta.x !== undefined &&
meta.y !== undefined
) {
Expand Down Expand Up @@ -338,8 +348,8 @@ const applyMouseAreaSelection = (
const tds = table.querySelectorAll("tbody td");

for (const td of tds) {
const meta = table.getMeta(td);
if (!meta) continue;
const meta = table.getMeta(td as HTMLElement);
if (!meta || meta.type !== "body") continue;
let rendered = false;
for (const { x0, x1, y0, y1 } of selected) {
if (
Expand Down Expand Up @@ -372,15 +382,16 @@ const applyMouseAreaSelection = (
const tds = table.querySelectorAll("tbody td");

for (const td of tds) {
const meta = table.getMeta(td);
const meta = table.getMeta(td as HTMLElement);
if (!meta) continue;
let rendered = false;
for (const { x0, x1, y0, y1 } of selected) {
if (
x0 !== undefined &&
y0 !== undefined &&
x1 !== undefined &&
y1 !== undefined
y1 !== undefined &&
meta?.type === "body"
) {
if (y0 <= meta.y && meta.y <= y1) {
datagrid.model!._selection_state.dirty = true;
Expand All @@ -401,15 +412,16 @@ const applyMouseAreaSelection = (
const tds = table.querySelectorAll("tbody td");

for (const td of tds) {
const meta = table.getMeta(td);
const meta = table.getMeta(td as HTMLElement);
if (!meta) continue;
let rendered = false;
for (const { x0, x1, y0, y1 } of selected) {
if (
x0 !== undefined &&
y0 !== undefined &&
x1 !== undefined &&
y1 !== undefined
y1 !== undefined &&
meta?.type === "body"
) {
if (x0 <= meta.x && meta.x <= x1) {
datagrid.model!._selection_state.dirty = true;
Expand Down
2 changes: 1 addition & 1 deletion packages/viewer-datagrid/src/ts/event_handlers/sort.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export async function sortHandler(
: override_sort;

const abs = event.shiftKey;
const sort = sort_method.call(this, column_name, abs);
const sort = sort_method.call(this, `${column_name}`, abs);
await viewer.restore({ sort });
}

Expand Down
1 change: 1 addition & 0 deletions packages/viewer-datagrid/src/ts/get_cell_config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export default async function getCellConfig(
column_names: [],
config: { filter: [] },
};

let column_filters: Filter[] = [];
if (column_paths) {
const split_by_values = column_paths.split("|");
Expand Down
29 changes: 11 additions & 18 deletions packages/viewer-datagrid/src/ts/model/create.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,17 @@ import type {
View,
ViewConfig,
} from "@perspective-dev/client";
import type {
DatagridModel,
DatagridPluginElement,
RegularTable,
Schema,
CellMeta,
ElemFactory,
EditMode,
PerspectiveViewerElement,
import {
type DatagridModel,
type DatagridPluginElement,
type RegularTable,
type Schema,
type ElemFactory,
type EditMode,
type PerspectiveViewerElement,
get_psp_type,
} from "../types.js";
import { CellMetadata } from "regular-table/dist/esm/types.js";

function get_rule(regular: HTMLElement, tag: string, def: string): string {
const color = window.getComputedStyle(regular).getPropertyValue(tag).trim();
Expand Down Expand Up @@ -64,14 +65,6 @@ class ElemFactoryImpl implements ElemFactory {
}
}

function get_psp_type(this: DatagridModel, metadata: CellMeta): ColumnType {
if (metadata.x !== undefined && metadata.x >= 0) {
return this._column_types[metadata.x];
} else {
return this._row_header_types[metadata.row_header_x! - 1];
}
}

export async function createModel(
this: DatagridPluginElement,
regular: RegularTable,
Expand Down Expand Up @@ -222,7 +215,7 @@ export async function createModel(
}),
_series_color_map: new Map<string, string>(),
_series_color_seed: new Map<string, number>(),
get_psp_type,
// get_psp_type,
Comment on lines -225 to +218
Copy link
Contributor

@sinistersnare sinistersnare Feb 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dead code

_div_factory: extend._div_factory || new ElemFactoryImpl("div"),
}) as DatagridModel;

Expand Down
Loading
Loading