Skip to content

Commit b5f3732

Browse files
texodustexodus
authored
Merge pull request #3116 from perspective-dev/datagrid-types
Better TypeScript types for `viewer-datagrid`
2 parents af27e88 + 1e1f81b commit b5f3732

File tree

28 files changed

+163
-143
lines changed

28 files changed

+163
-143
lines changed

‎examples/blocks/src/market/market.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ async function init_tables() {
255255
name: "gui",
256256
});
257257

258-
return { market_table, gui_table };
258+
return { market_table, gui_table, gui_worker };
259259
}
260260

261261
async function init_layouts() {
@@ -265,13 +265,14 @@ async function init_layouts() {
265265

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

268-
const [{ market_table, gui_table }, layouts] = await Promise.all(INIT_TASK);
268+
const [{ market_table, gui_table, gui_worker }, layouts] =
269+
await Promise.all(INIT_TASK);
269270
const market = new Market(market_table, skew_model);
270271
const settings = !/(iPad|iPhone|iPod)/g.test(navigator.userAgent);
271272
const select = document.querySelector("select");
272273
const button = document.querySelector("button");
273274
const viewer = document.querySelector("perspective-viewer");
274-
viewer.load(gui_table);
275+
viewer.load(gui_worker);
275276
viewer.restore({ theme: "Pro Dark", table: "gui", settings, ...layouts[0] });
276277
await market.poll(progress);
277278
for (const layout of layouts) {

‎packages/viewer-datagrid/src/ts/color_utils.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ export function make_color_record(color: string): ColorRecord {
5757
const chroma_neg = chroma(color);
5858
const _neg_grad = make_gradient(chroma_neg);
5959
const rgb = chroma_neg.rgb();
60-
6160
return [
6261
color,
6362
rgb[0],

‎packages/viewer-datagrid/src/ts/event_handlers/click/edit_click.ts‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,26 @@
1010
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

13-
import type {
14-
RegularTable,
15-
DatagridModel,
16-
PerspectiveViewerElement,
13+
import { CellMetadataBody } from "regular-table/dist/esm/types.js";
14+
import {
15+
type RegularTable,
16+
type DatagridModel,
17+
type PerspectiveViewerElement,
18+
get_psp_type,
1719
} from "../../types.js";
1820

1921
export function write_cell(
2022
table: RegularTable,
2123
model: DatagridModel,
2224
active_cell: HTMLElement,
2325
): boolean {
24-
const meta = table.getMeta(active_cell);
26+
const meta = table.getMeta(active_cell) as CellMetadataBody;
2527
if (!meta) {
2628
return false;
2729
}
28-
const type = model._schema[model._column_paths[meta.x]];
30+
const type = model._schema[model._column_paths[meta.x!]];
2931
let text: string | number | boolean | null = active_cell.textContent || "";
30-
const id = model._ids[meta.y - meta.y0][0];
32+
const id = model._ids[meta.y! - meta.y0][0];
3133
if (type === "float" || type === "integer") {
3234
const parsed = parseFloat(text.replace(/,/g, ""));
3335
if (isNaN(parsed)) {
@@ -59,13 +61,14 @@ export function clickListener(
5961
_viewer: PerspectiveViewerElement,
6062
event: MouseEvent,
6163
): void {
62-
const meta = table.getMeta(event.target as Element);
63-
if (typeof meta?.x !== "undefined") {
64+
const meta = table.getMeta(event.target as HTMLElement);
65+
if (meta?.type === "body" || meta?.type === "column_header") {
6466
const is_editable2 = this._is_editable[meta.x];
65-
const is_bool = this.get_psp_type(meta) === "boolean";
67+
const is_bool = get_psp_type(this, meta) === "boolean";
6668
const is_null = (event.target as Element).classList.contains(
6769
"psp-null",
6870
);
71+
6972
if (is_editable2 && is_bool && !is_null) {
7073
write_cell(table, this, event.target as HTMLElement);
7174
}

‎packages/viewer-datagrid/src/ts/event_handlers/dispatch_click.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,10 @@ export async function dispatch_click_listener(
2424
viewer: PerspectiveViewerElement,
2525
event: MouseEvent,
2626
): Promise<void> {
27-
const meta = table.getMeta(event.target as Element);
28-
if (!meta) return;
27+
const meta = table.getMeta(event.target as HTMLElement);
28+
if (!meta || meta.type !== "body") return;
2929
const { x, y } = meta;
30-
3130
const { row, column_names, config } = await getCellConfig(this, y, x);
32-
3331
viewer.dispatchEvent(
3432
new CustomEvent<PerspectiveClickDetail>("perspective-click", {
3533
bubbles: true,

‎packages/viewer-datagrid/src/ts/event_handlers/expand_collapse.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,12 @@ export async function expandCollapseHandler(
1717
regularTable: RegularTable,
1818
event: MouseEvent,
1919
): Promise<void> {
20-
const meta = regularTable.getMeta(event.target as Element);
21-
if (!meta?.row_header) return;
22-
20+
const meta = regularTable.getMeta(event.target as HTMLElement);
21+
if (!meta || meta.type !== "row_header") return;
2322
const is_collapse = (event.target as Element).classList.contains(
2423
"psp-tree-label-collapse",
2524
);
25+
2626
if (event.shiftKey && is_collapse) {
2727
this._view.set_depth(
2828
(meta.row_header as unknown[]).filter((x) => x !== undefined)
@@ -38,6 +38,7 @@ export async function expandCollapseHandler(
3838
} else {
3939
this._view.expand(meta.y);
4040
}
41+
4142
this._num_rows = await this._view.num_rows();
4243
this._num_columns = await this._view.num_columns();
4344
regularTable.draw();

‎packages/viewer-datagrid/src/ts/event_handlers/focus.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function focusinListener(
5252
): void {
5353
const target = event.target as HTMLElement;
5454
const meta = table.getMeta(target);
55-
if (meta) {
55+
if (meta?.type === "body") {
5656
const new_state: SelectedPosition = {
5757
x: meta.x,
5858
y: meta.y,

‎packages/viewer-datagrid/src/ts/event_handlers/header_click.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export async function mousedown_listener(
5050
if (target.classList.contains("psp-menu-enabled")) {
5151
const meta = regularTable.getMeta(target);
5252
const column_name = meta?.column_header?.[this._config.split_by.length];
53-
await viewer.toggleColumnSettings(column_name);
53+
await viewer.toggleColumnSettings(`${column_name}`);
5454
} else if (target.classList.contains("psp-sort-enabled")) {
5555
sortHandler.call(this, regularTable, viewer, event, target);
5656
}

‎packages/viewer-datagrid/src/ts/event_handlers/keydown/edit_keydown.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const moveSelection = lock(async function (
7676
dy: number,
7777
): Promise<void> {
7878
const meta = table.getMeta(active_cell);
79-
if (!meta) return;
79+
if (!meta || meta.type !== "body") return;
8080
const num_columns = this._column_paths.length;
8181
const num_rows = this._num_rows;
8282
const selected_position = selected_position_map.get(table);
@@ -118,7 +118,7 @@ function isLastCell(
118118
target: HTMLElement,
119119
): boolean {
120120
const meta = table.getMeta(target);
121-
return meta !== undefined && meta.y === model._num_rows - 1;
121+
return meta?.type === "body" && meta.y === model._num_rows - 1;
122122
}
123123

124124
export function keydownListener(

‎packages/viewer-datagrid/src/ts/event_handlers/row_select_click.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,22 @@ export async function selectionListener(
2828
selected_rows_map: SelectedRowsMap,
2929
event: HandledMouseEvent,
3030
): Promise<void> {
31-
const meta = regularTable.getMeta(event.target as Element);
31+
const meta = regularTable.getMeta(event.target as HTMLElement);
3232
if (!viewer.hasAttribute("selectable")) return;
3333
if (event.handled) return;
3434
if (event.shiftKey) return;
3535
if (event.button !== 0) {
3636
return;
3737
}
38+
3839
event.stopImmediatePropagation();
3940

4041
if (!meta) {
4142
return;
4243
}
4344

44-
const id = this._ids?.[meta.y - meta.y0];
45-
if (meta && meta.y >= 0) {
45+
if ((meta.type === "body" || meta.type === "row_header") && meta.y >= 0) {
46+
const id = this._ids?.[meta.y - meta.y0];
4647
const selected = selected_rows_map.get(regularTable);
4748
const key_match =
4849
!!selected &&
@@ -56,10 +57,11 @@ export async function selectionListener(
5657
row: {},
5758
config: { filter: [] },
5859
};
60+
5961
const { row, column_names, config } = await getCellConfig(
6062
this,
6163
meta.y,
62-
meta.x,
64+
meta.type === "body" ? meta.x : 0,
6365
);
6466

6567
if (is_deselect) {

‎packages/viewer-datagrid/src/ts/event_handlers/select_region.ts‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,12 @@ const getMousedownListener =
7575
datagrid.model!._edit_mode === "SELECT_COLUMN")
7676
) {
7777
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES = {};
78-
const meta = table.getMeta(mouseEvent.target as Element);
79-
if (meta && meta.x !== undefined && meta.y !== undefined) {
78+
const meta = table.getMeta(mouseEvent.target as HTMLElement);
79+
if (
80+
meta?.type === "body" &&
81+
meta.x !== undefined &&
82+
meta.y !== undefined
83+
) {
8084
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES =
8185
{
8286
x: meta.x,
@@ -129,8 +133,12 @@ const getMouseoverListener =
129133
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES
130134
.x !== undefined
131135
) {
132-
const meta = table.getMeta(mouseEvent.target as Element);
133-
if (meta && meta.x !== undefined && meta.y !== undefined) {
136+
const meta = table.getMeta(mouseEvent.target as HTMLElement);
137+
if (
138+
meta?.type === "body" &&
139+
meta.x !== undefined &&
140+
meta.y !== undefined
141+
) {
134142
const potentialSelection: SelectionArea = {
135143
x0: Math.min(
136144
meta.x,
@@ -183,7 +191,7 @@ const getMouseupListener =
183191
datagrid.model!._edit_mode === "SELECT_ROW" ||
184192
datagrid.model!._edit_mode === "SELECT_COLUMN"
185193
) {
186-
const meta = table.getMeta(mouseEvent.target as Element);
194+
const meta = table.getMeta(mouseEvent.target as HTMLElement);
187195
if (!meta) return;
188196

189197
if (
@@ -195,6 +203,7 @@ const getMouseupListener =
195203
if (
196204
selected.x0 === selected.x1 &&
197205
selected.y0 === selected.y1 &&
206+
meta?.type === "body" &&
198207
selected.x0 === meta.x &&
199208
selected.y0 === meta.y
200209
) {
@@ -216,6 +225,7 @@ const getMouseupListener =
216225
.CURRENT_MOUSEDOWN_COORDINATES &&
217226
datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES
218227
.x !== undefined &&
228+
meta?.type === "body" &&
219229
meta.x !== undefined &&
220230
meta.y !== undefined
221231
) {
@@ -338,8 +348,8 @@ const applyMouseAreaSelection = (
338348
const tds = table.querySelectorAll("tbody td");
339349

340350
for (const td of tds) {
341-
const meta = table.getMeta(td);
342-
if (!meta) continue;
351+
const meta = table.getMeta(td as HTMLElement);
352+
if (!meta || meta.type !== "body") continue;
343353
let rendered = false;
344354
for (const { x0, x1, y0, y1 } of selected) {
345355
if (
@@ -372,15 +382,16 @@ const applyMouseAreaSelection = (
372382
const tds = table.querySelectorAll("tbody td");
373383

374384
for (const td of tds) {
375-
const meta = table.getMeta(td);
385+
const meta = table.getMeta(td as HTMLElement);
376386
if (!meta) continue;
377387
let rendered = false;
378388
for (const { x0, x1, y0, y1 } of selected) {
379389
if (
380390
x0 !== undefined &&
381391
y0 !== undefined &&
382392
x1 !== undefined &&
383-
y1 !== undefined
393+
y1 !== undefined &&
394+
meta?.type === "body"
384395
) {
385396
if (y0 <= meta.y && meta.y <= y1) {
386397
datagrid.model!._selection_state.dirty = true;
@@ -401,15 +412,16 @@ const applyMouseAreaSelection = (
401412
const tds = table.querySelectorAll("tbody td");
402413

403414
for (const td of tds) {
404-
const meta = table.getMeta(td);
415+
const meta = table.getMeta(td as HTMLElement);
405416
if (!meta) continue;
406417
let rendered = false;
407418
for (const { x0, x1, y0, y1 } of selected) {
408419
if (
409420
x0 !== undefined &&
410421
y0 !== undefined &&
411422
x1 !== undefined &&
412-
y1 !== undefined
423+
y1 !== undefined &&
424+
meta?.type === "body"
413425
) {
414426
if (x0 <= meta.x && meta.x <= x1) {
415427
datagrid.model!._selection_state.dirty = true;

0 commit comments

Comments
 (0)