Skip to content

Commit d6e1b56

Browse files
texodustexodus
authored
Merge pull request #3138 from perspective-dev/remove-pubsub-viewer
Refactor `<perspective-viewer>` and add tests
2 parents 8669501 + 36f4e87 commit d6e1b56

137 files changed

Lines changed: 5271 additions & 3775 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ __pycache__/
99
.clangd
1010
.DS_Store
1111
.emsdk
12+
.pnpm-store
1213
.ipynb_checkpoints
1314
.perspectiverc
1415
.vscode/*

‎docs/src/components/Demo/layouts.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const LAYOUTS = {
3131
fg_gradient: 17.4,
3232
},
3333
},
34+
group_rollup_mode: "rollup",
3435
settings: true,
3536
title: "Market Monitor",
3637
group_by: ["name"],
@@ -52,6 +53,7 @@ export const LAYOUTS = {
5253
plugin: "datagrid",
5354
title: "Blotter",
5455
columns: ["ask", "bid", "chg"],
56+
group_rollup_mode: "rollup",
5557
sort: [
5658
["name", "desc"],
5759
["lastUpdate", "desc"],
@@ -63,6 +65,7 @@ export const LAYOUTS = {
6365
},
6466
"x bar": {
6567
title: "Px (Δ)",
68+
group_rollup_mode: "flat",
6669
columns: ["chg"],
6770
plugin: "X Bar",
6871
sort: [["chg", "asc"]],
@@ -71,6 +74,7 @@ export const LAYOUTS = {
7174
},
7275
"y line": {
7376
title: "Time Series (Px)",
77+
group_rollup_mode: "flat",
7478
plugin: "Y Line",
7579
group_by: ["lastUpdate"],
7680
split_by: [],
@@ -81,6 +85,7 @@ export const LAYOUTS = {
8185
},
8286
"xy scatter": {
8387
title: "Spread Scatter",
88+
group_rollup_mode: "flat",
8489
plugin: "X/Y Scatter",
8590
group_by: ["name"],
8691
split_by: [],
@@ -90,6 +95,7 @@ export const LAYOUTS = {
9095
},
9196
treemap: {
9297
plugin: "Treemap",
98+
group_rollup_mode: "flat",
9399
title: "Volume Map",
94100
group_by: ["name", "client"],
95101
split_by: [],
@@ -101,6 +107,7 @@ export const LAYOUTS = {
101107
],
102108
},
103109
heatmap: {
110+
group_rollup_mode: "flat",
104111
title: "Spread Heatmap",
105112
columns: ["name"],
106113
plugin: "Heatmap",

‎examples/blocks/src/dataset/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,13 +175,13 @@
175175
const make_run_click_callback = (state) => async () => {
176176
state.table?.delete?.({ lazy: true });
177177
state.table = gen_data();
178-
await window.psp_workspace.addTable("superstore", state.table);
178+
// await window.psp_workspace.addTable("superstore", state.table);
179179
};
180180

181181
const make_del_click_callback = (state) => async () => {
182182
if (state.table) {
183183
// await viewer.eject();
184-
await window.psp_workspace.removeTable("superstore");
184+
// await window.psp_workspace.removeTable("superstore");
185185
await state.table.then((x) => x.delete({ lazy: true }));
186186
state.table = undefined;
187187
}

‎examples/blocks/src/fractal/index.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ c`;
5656
function generate_layout(params) {
5757
return {
5858
plugin: "Heatmap",
59+
table: "raw_data",
5960
settings: true,
6061
group_by: [`floor("index" / ${params.resolution})`],
6162
split_by: [`"index" % ${params.resolution}`],
@@ -116,10 +117,16 @@ const make_run_click_callback = (worker, state) => async () => {
116117

117118
window.run.disabled = true;
118119
if (!state.table) {
119-
state.table = await worker.table({
120-
index: "integer",
121-
});
122-
window.viewer.load(Promise.resolve(state.table));
120+
state.table = await worker.table(
121+
{
122+
index: "integer",
123+
},
124+
{
125+
name: "raw_data",
126+
},
127+
);
128+
129+
window.viewer.load(worker);
123130
}
124131

125132
const run = document.getElementById("run");
@@ -154,4 +161,5 @@ run.addEventListener(
154161
"click",
155162
make_run_click_callback(await perspective.worker(), {}),
156163
);
164+
157165
run.dispatchEvent(new Event("click"));

‎packages/viewer-d3fc/test/js/axisLabel.spec.ts‎

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function confirmDataIsNotEpochForm(dateValues: any[]) {
6060
test.describe("Axis Values With Grouped Data With A Date Field In The Group", () => {
6161
test("X Bar y-axis label with grouped data", async ({ page }) => {
6262
await page.click('div[data-plugin="X Bar"]');
63-
await page.waitForSelector("perspective-viewer");
63+
await page.waitForSelector("perspective-viewer-d3fc-xbar");
6464

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

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

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

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

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

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

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

167-
if (!viewer) {
168-
return Error("Invalid Viewer");
169-
}
168+
if (!viewer) {
169+
return Error("Invalid Viewer");
170+
}
170171

171-
const plugin_element = viewer.querySelector(
172-
`perspective-viewer-d3fc-heatmap`,
173-
);
172+
const plugin_element = viewer.querySelector(
173+
`perspective-viewer-d3fc-heatmap`,
174+
);
174175

175-
if (!plugin_element) {
176-
throw Error("Invalid Plugin Element");
177-
}
176+
if (!plugin_element) {
177+
throw Error("Invalid Plugin Element");
178+
}
178179

179-
const shadowRoot = plugin_element.shadowRoot;
180-
const dateTextElements = shadowRoot.querySelectorAll(
181-
"div d3fc-group d3fc-svg.x-axis.bottom-axis svg g.group:last-child g.tick text",
182-
);
180+
const shadowRoot = plugin_element.shadowRoot;
181+
const dateTextElements = shadowRoot.querySelectorAll(
182+
"div d3fc-group d3fc-svg.x-axis.bottom-axis svg g.group:last-child g.tick text",
183+
);
183184

184-
// collect and return the actual date data to be used.
185-
return Array.from(dateTextElements).map((el) =>
186-
el.textContent?.trim(),
187-
);
188-
});
185+
// collect and return the actual date data to be used.
186+
return Array.from(dateTextElements).map((el) =>
187+
el.textContent?.trim(),
188+
);
189+
})
190+
.catch((e) => e);
191+
192+
await page.pause();
189193

190194
confirmDataIsNotEpochForm(dateValues);
191195
});
192196

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

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

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

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

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

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

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

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

‎packages/viewer-d3fc/test/js/line.spec.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,7 @@ test.describe("Line regressions", () => {
7272
?.shadowRoot?.innerHTML;
7373
});
7474

75-
compareContentsToSnapshot(out!, [
76-
"line-charts-denser-than-one-second-regression.txt",
77-
]);
75+
await compareContentsToSnapshot(out!);
7876
});
7977

8078
test("Zoom on a chart with split Y axis renders the right axis", async ({

‎packages/viewer-datagrid/src/ts/style_handlers/body.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,18 +65,20 @@ export function applyBodyCellStyles(
6565

6666
// Calculate aggregate depth visibility
6767
// @ts-ignore
68-
metadata._is_hidden_by_aggregate_depth = ((x?: number) =>
69-
x === 0 || x === undefined
70-
? false
71-
: x - 1 <
72-
Math.min(
73-
this._config.group_by.length,
74-
plugin?.aggregate_depth || 0,
75-
))(
76-
(metadata.row_header as unknown[] | undefined)?.filter(
77-
(x) => x !== undefined,
78-
)?.length,
79-
);
68+
metadata._is_hidden_by_aggregate_depth =
69+
this._config.group_rollup_mode === "rollup" &&
70+
((x?: number) =>
71+
x === 0 || x === undefined
72+
? false
73+
: x - 1 <
74+
Math.min(
75+
this._config.group_by.length,
76+
plugin?.aggregate_depth || 0,
77+
))(
78+
(metadata.row_header as unknown[] | undefined)?.filter(
79+
(x) => x !== undefined,
80+
)?.length,
81+
);
8082

8183
// Apply type-specific cell styling
8284
if (is_numeric) {

0 commit comments

Comments
 (0)