Skip to content

Refactor <perspective-viewer> and add tests #3138

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 3 commits into from
Mar 17, 2026
Merged

Refactor <perspective-viewer> and add tests #3138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2c0b117
Update UI integration test suite
texodus Mar 16, 2026
7aa374a
Refactor viewer state model
texodus Mar 16, 2026
36f4e87
Clean up CSS
texodus Feb 22, 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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ __pycache__/
.clangd
.DS_Store
.emsdk
.pnpm-store
.ipynb_checkpoints
.perspectiverc
.vscode/*
Expand Down
7 changes: 7 additions & 0 deletions docs/src/components/Demo/layouts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const LAYOUTS = {
fg_gradient: 17.4,
},
},
group_rollup_mode: "rollup",
settings: true,
title: "Market Monitor",
group_by: ["name"],
Expand All @@ -52,6 +53,7 @@ export const LAYOUTS = {
plugin: "datagrid",
title: "Blotter",
columns: ["ask", "bid", "chg"],
group_rollup_mode: "rollup",
sort: [
["name", "desc"],
["lastUpdate", "desc"],
Expand All @@ -63,6 +65,7 @@ export const LAYOUTS = {
},
"x bar": {
title: "Px (Δ)",
group_rollup_mode: "flat",
columns: ["chg"],
plugin: "X Bar",
sort: [["chg", "asc"]],
Expand All @@ -71,6 +74,7 @@ export const LAYOUTS = {
},
"y line": {
title: "Time Series (Px)",
group_rollup_mode: "flat",
plugin: "Y Line",
group_by: ["lastUpdate"],
split_by: [],
Expand All @@ -81,6 +85,7 @@ export const LAYOUTS = {
},
"xy scatter": {
title: "Spread Scatter",
group_rollup_mode: "flat",
plugin: "X/Y Scatter",
group_by: ["name"],
split_by: [],
Expand All @@ -90,6 +95,7 @@ export const LAYOUTS = {
},
treemap: {
plugin: "Treemap",
group_rollup_mode: "flat",
title: "Volume Map",
group_by: ["name", "client"],
split_by: [],
Expand All @@ -101,6 +107,7 @@ export const LAYOUTS = {
],
},
heatmap: {
group_rollup_mode: "flat",
title: "Spread Heatmap",
columns: ["name"],
plugin: "Heatmap",
Expand Down
4 changes: 2 additions & 2 deletions examples/blocks/src/dataset/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,13 +175,13 @@
const make_run_click_callback = (state) => async () => {
state.table?.delete?.({ lazy: true });
state.table = gen_data();
await window.psp_workspace.addTable("superstore", state.table);
// await window.psp_workspace.addTable("superstore", state.table);
};

const make_del_click_callback = (state) => async () => {
if (state.table) {
// await viewer.eject();
await window.psp_workspace.removeTable("superstore");
// await window.psp_workspace.removeTable("superstore");
await state.table.then((x) => x.delete({ lazy: true }));
state.table = undefined;
}
Expand Down
16 changes: 12 additions & 4 deletions examples/blocks/src/fractal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ c`;
function generate_layout(params) {
return {
plugin: "Heatmap",
table: "raw_data",
settings: true,
group_by: [`floor("index" / ${params.resolution})`],
split_by: [`"index" % ${params.resolution}`],
Expand Down Expand Up @@ -116,10 +117,16 @@ const make_run_click_callback = (worker, state) => async () => {

window.run.disabled = true;
if (!state.table) {
state.table = await worker.table({
index: "integer",
});
window.viewer.load(Promise.resolve(state.table));
state.table = await worker.table(
{
index: "integer",
},
{
name: "raw_data",
},
);

window.viewer.load(worker);
}

const run = document.getElementById("run");
Expand Down Expand Up @@ -154,4 +161,5 @@ run.addEventListener(
"click",
make_run_click_callback(await perspective.worker(), {}),
);

run.dispatchEvent(new Event("click"));
60 changes: 32 additions & 28 deletions packages/viewer-d3fc/test/js/axisLabel.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ function confirmDataIsNotEpochForm(dateValues: any[]) {
test.describe("Axis Values With Grouped Data With A Date Field In The Group", () => {
test("X Bar y-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="X Bar"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-xbar");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
Expand Down Expand Up @@ -93,7 +93,7 @@ test.describe("Axis Values With Grouped Data With A Date Field In The Group", ()

test("Y Bar x-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="Y Bar"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-ybar");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
Expand Down Expand Up @@ -126,7 +126,7 @@ test.describe("Axis Values With Grouped Data With A Date Field In The Group", ()

test("OHLC x-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="OHLC"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-ohlc");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
Expand Down Expand Up @@ -159,40 +159,44 @@ test.describe("Axis Values With Grouped Data With A Date Field In The Group", ()

test("Heatmap x-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="Heatmap"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-heatmap");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
const dateValues = await page
.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");

if (!viewer) {
return Error("Invalid Viewer");
}
if (!viewer) {
return Error("Invalid Viewer");
}

const plugin_element = viewer.querySelector(
`perspective-viewer-d3fc-heatmap`,
);
const plugin_element = viewer.querySelector(
`perspective-viewer-d3fc-heatmap`,
);

if (!plugin_element) {
throw Error("Invalid Plugin Element");
}
if (!plugin_element) {
throw Error("Invalid Plugin Element");
}

const shadowRoot = plugin_element.shadowRoot;
const dateTextElements = shadowRoot.querySelectorAll(
"div d3fc-group d3fc-svg.x-axis.bottom-axis svg g.group:last-child g.tick text",
);
const shadowRoot = plugin_element.shadowRoot;
const dateTextElements = shadowRoot.querySelectorAll(
"div d3fc-group d3fc-svg.x-axis.bottom-axis svg g.group:last-child g.tick text",
);

// collect and return the actual date data to be used.
return Array.from(dateTextElements).map((el) =>
el.textContent?.trim(),
);
});
// collect and return the actual date data to be used.
return Array.from(dateTextElements).map((el) =>
el.textContent?.trim(),
);
})
.catch((e) => e);

await page.pause();

confirmDataIsNotEpochForm(dateValues);
});

test("Y Line x-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="Y Line"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-yline");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
Expand Down Expand Up @@ -225,7 +229,7 @@ test.describe("Axis Values With Grouped Data With A Date Field In The Group", ()

test("Y Area x-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="Y Area"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-yarea");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
Expand Down Expand Up @@ -258,7 +262,7 @@ test.describe("Axis Values With Grouped Data With A Date Field In The Group", ()

test("Y Scatter x-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="Y Scatter"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-yscatter");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
Expand Down Expand Up @@ -291,7 +295,7 @@ test.describe("Axis Values With Grouped Data With A Date Field In The Group", ()

test("CandleStick x-axis label with grouped data", async ({ page }) => {
await page.click('div[data-plugin="Candlestick"]');
await page.waitForSelector("perspective-viewer");
await page.waitForSelector("perspective-viewer-d3fc-candlestick");

const dateValues = await page.evaluate(async () => {
let viewer = document.querySelector("perspective-viewer");
Expand Down
4 changes: 1 addition & 3 deletions packages/viewer-d3fc/test/js/line.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,7 @@ test.describe("Line regressions", () => {
?.shadowRoot?.innerHTML;
});

compareContentsToSnapshot(out!, [
"line-charts-denser-than-one-second-regression.txt",
]);
await compareContentsToSnapshot(out!);
});

test("Zoom on a chart with split Y axis renders the right axis", async ({
Expand Down
26 changes: 14 additions & 12 deletions packages/viewer-datagrid/src/ts/style_handlers/body.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,18 +65,20 @@ export function applyBodyCellStyles(

// Calculate aggregate depth visibility
// @ts-ignore
metadata._is_hidden_by_aggregate_depth = ((x?: number) =>
x === 0 || x === undefined
? false
: x - 1 <
Math.min(
this._config.group_by.length,
plugin?.aggregate_depth || 0,
))(
(metadata.row_header as unknown[] | undefined)?.filter(
(x) => x !== undefined,
)?.length,
);
metadata._is_hidden_by_aggregate_depth =
this._config.group_rollup_mode === "rollup" &&
((x?: number) =>
x === 0 || x === undefined
? false
: x - 1 <
Math.min(
this._config.group_by.length,
plugin?.aggregate_depth || 0,
))(
(metadata.row_header as unknown[] | undefined)?.filter(
(x) => x !== undefined,
)?.length,
);

// Apply type-specific cell styling
if (is_numeric) {
Expand Down
Loading
Loading