diff --git a/explorer/e2e/routes/entry-links.spec.ts b/explorer/e2e/routes/entry-links.spec.ts new file mode 100644 index 00000000..d0ff894e --- /dev/null +++ b/explorer/e2e/routes/entry-links.spec.ts @@ -0,0 +1,66 @@ +import { expect, test } from "@playwright/test"; +import { fixtureIds, waitForShell } from "../support/fixtures"; + +const RUN_IDS = `${fixtureIds.shortIds.duckdb},${fixtureIds.shortIds.datafusion}`; +const CHART_IDS = ["distribution_box", "cdf_chart"] as const; + +test.describe("entry links", () => { + test("serves one header, main and footer once the app has mounted", async ({ page }) => { + await page.goto("/results/"); + await waitForShell(page); + + await expect(page.locator('header nav[aria-label="BenchBox"]')).toHaveCount(1); + await expect(page.locator("main#main")).toHaveCount(1); + await expect(page.locator("footer")).toHaveCount(1); + await expect(page.getByRole("link", { name: "Skip to content" })).toHaveAttribute("href", "#main"); + }); + + test("moves focus to the main region from the skip link", async ({ page }) => { + await page.goto("/results/"); + await waitForShell(page); + + await page.getByRole("link", { name: "Skip to content" }).focus(); + await page.keyboard.press("Enter"); + + await expect(page.locator("main#main")).toBeFocused(); + await expect(page).toHaveURL(/\/results\/#main$/); + }); + + for (const chartId of CHART_IDS) { + test(`opens the comparison at the ${chartId} chart from the compare link`, async ({ page }) => { + await page.goto(`/results/compare?ids=${RUN_IDS}&chart=${chartId}`); + await waitForShell(page); + + const chart = page.getByTestId(`chart-panel-chart-${chartId}`); + await expect(chart).toBeFocused({ timeout: 30_000 }); + expect(new URL(page.url()).searchParams.get("chart")).toBe(chartId); + }); + + test(`redirects the older ${chartId} link to the same chart`, async ({ page }) => { + await page.goto(`/results/?chart=${chartId}&ids=${RUN_IDS}`); + await waitForShell(page); + + await expect(page).toHaveURL(/\/results\/compare\?/); + await expect(page.getByTestId(`chart-panel-chart-${chartId}`)).toBeFocused({ timeout: 30_000 }); + }); + } + + test("redirects the older compare flag link to the selected runs", async ({ page }) => { + await page.goto(`/results/?compare=true&ids=${RUN_IDS}`); + await waitForShell(page); + + await expect(page).toHaveURL(/\/results\/compare\?/); + expect(new URL(page.url()).searchParams.get("ids")?.split(",").sort()).toEqual(RUN_IDS.split(",").sort()); + }); + + for (const entry of ["/results/?mode=local", "/results/#local", "/results/local"]) { + test(`focuses the local file chooser from ${entry}`, async ({ page }) => { + await page.goto(entry); + await waitForShell(page); + + await expect(page).toHaveURL(/\/results\/local$/); + await expect(page.getByRole("button", { name: "Choose result file" })).toBeFocused(); + await expect(page.getByTestId("local-result-file-input").first()).toBeAttached(); + }); + } +}); diff --git a/explorer/e2e/routes/local-result-preview.spec.ts b/explorer/e2e/routes/local-result-preview.spec.ts index 9969b98f..ce0d9fc8 100644 --- a/explorer/e2e/routes/local-result-preview.spec.ts +++ b/explorer/e2e/routes/local-result-preview.spec.ts @@ -65,10 +65,11 @@ test.describe("local result preview", () => { await expect(page.getByTestId("local-result-banner")).toBeVisible(); }); - test("uses the local recovery view for the bare local route", async ({ page }) => { + test("offers the file chooser on the bare local route", async ({ page }) => { await page.goto("/results/local/"); - await expect(page.getByRole("alert")).toContainText("No result ID provided"); - await expect(page.getByRole("button", { name: "Open result file again" })).toBeVisible(); + await expect(page.getByRole("heading", { name: "Open a local result" })).toBeVisible(); + await expect(page.getByRole("alert")).toHaveCount(0); + await expect(page.getByRole("button", { name: "Choose result file" })).toBeFocused(); await expect(page.getByRole("heading", { name: /local results/i })).toHaveCount(0); }); }); diff --git a/explorer/index.html b/explorer/index.html index c5db506e..838b153e 100644 --- a/explorer/index.html +++ b/explorer/index.html @@ -9,19 +9,20 @@ - BenchBox Results Explorer + Results Explorer - BenchBox - + - + + -
+ +
+
+
+ +
+ +
+
+
+
+
+ Loading the Results Explorer… +
+ +
+ +
diff --git a/explorer/src/components/ChartPanel.tsx b/explorer/src/components/ChartPanel.tsx index 0ec4be78..aeb2beb0 100644 --- a/explorer/src/components/ChartPanel.tsx +++ b/explorer/src/components/ChartPanel.tsx @@ -70,6 +70,7 @@ interface ChartPanelProps { queryFilter?: readonly string[]; cardAnchors?: Readonly>; forceOpenChartId?: string | null; + focusChartId?: string | null; queryHref?: (queryId: string) => string; rankGateReason?: string | null; rankGateContext?: { benchmark: string; scaleFactor: string; phase: string }; @@ -526,7 +527,9 @@ function ChartPanelLong({ excludeChartIds, queryFilter, queryHref, + focusChartId, }: ChartPanelProps) { + const panelRef = useRef(null); const charts = useMemo( () => selectPanelCharts(context, excludeChartIds, queryFilter), [context, excludeChartIds, queryFilter], @@ -569,6 +572,15 @@ function ChartPanelLong({ if (!isBaselineControlled) setLocalBaselineIdx(0); }, [context, isBaselineControlled]); + const focusTargetPresent = focusChartId ? charts.some((chart) => chart.id === focusChartId) : false; + useEffect(() => { + if (!focusChartId || !focusTargetPresent) return; + const target = panelRef.current?.querySelector(`[data-chart-id="${focusChartId}"]`); + if (!target) return; + if (typeof target.scrollIntoView === "function") target.scrollIntoView({ block: "start" }); + target.focus({ preventScroll: true }); + }, [focusChartId, focusTargetPresent]); + if (charts.length === 0) return null; const showBaseline = @@ -577,7 +589,7 @@ function ChartPanelLong({ charts.some((chart) => chart.id === "normalized_speedup" || chart.id === "diverging_bar"); return ( -
+
{context.kind === "compare" && summary && (
@@ -687,7 +699,12 @@ function ChartFigure({ const fewUsableQueries = Boolean(queryFilter && (chartSummary?.query_ids.length ?? 0) < 2); return ( -
+

{chart.title}

diff --git a/explorer/src/components/FacetRail.tsx b/explorer/src/components/FacetRail.tsx index 72a17f52..4c14091d 100644 --- a/explorer/src/components/FacetRail.tsx +++ b/explorer/src/components/FacetRail.tsx @@ -196,6 +196,7 @@ function ActiveChipPreview({ activeChips }: { activeChips: ActiveFacetChip[] }) {activeChips.map((chip) => ( {chip.label} @@ -358,7 +359,7 @@ function FacetGroupSection({ disabled={option.disabled} onChange={() => onToggle(group.key, option.value)} /> - {option.displayLabel} + {option.displayLabel} {option.count !== undefined && ( {option.count.toLocaleString()} diff --git a/explorer/src/components/Layout.tsx b/explorer/src/components/Layout.tsx index a14266c6..d244c79c 100644 --- a/explorer/src/components/Layout.tsx +++ b/explorer/src/components/Layout.tsx @@ -15,7 +15,7 @@ export function Layout({ children }: LayoutProps) {
-
{children}
+
{children}

Maintainers review every result before publishing it. You can reproduce a run with{" "} diff --git a/explorer/src/components/LocalResultPicker.tsx b/explorer/src/components/LocalResultPicker.tsx index 882e546f..0b59609f 100644 --- a/explorer/src/components/LocalResultPicker.tsx +++ b/explorer/src/components/LocalResultPicker.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import { route } from "preact-router"; import { useLocalResultState } from "@/lib/localResultState"; import { errMsg } from "@/utils"; @@ -6,14 +6,24 @@ import { errMsg } from "@/utils"; interface LocalResultPickerProps { label?: string; className?: string; + autoFocus?: boolean; } -export function LocalResultPicker({ label = "Open local result", className = "btn btn-secondary" }: LocalResultPickerProps) { +export function LocalResultPicker({ + label = "Open local result", + className = "btn btn-secondary", + autoFocus = false, +}: LocalResultPickerProps) { const inputRef = useRef(null); + const buttonRef = useRef(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const { importFile } = useLocalResultState(); + useEffect(() => { + if (autoFocus) buttonRef.current?.focus(); + }, [autoFocus]); + async function handleFile(file: File | undefined) { if (!file) return; setError(null); @@ -43,6 +53,7 @@ export function LocalResultPicker({ label = "Open local result", className = "bt onChange={(event) => void handleFile(event.currentTarget.files?.[0])} />

-
+
+

Loading search…

+
+
+ Looking for benchmark runs? Explore Results → +