Skip to content

Commit 38bb33b

Browse files
yangw-devyangw-dev
authored
[BE] Clean up the benchmark v3 forlder and add RegerssionSummaryReport api hook (#7292)
## [BE] - Move some utils into common lib - Group pages in page folders ## [FIX] - remove select mode toggle for each chart, user can select any - when user select in chart, navigate user to the dom element based on element existence, order is [ table field -> table -> table toggle section] Link: https://torchci-git-summaryreport-fbopensource.vercel.app/benchmark/compilers_regression ## Setup Summary Report Page Setup summary report page initaiton. Link; https://torchci-git-summaryreport-fbopensource.vercel.app/benchmark/regression_report/compiler_regression
1 parent 220df70 commit 38bb33b

30 files changed

+430
-283
lines changed

‎torchci/components/benchmark/v3/components/benchmarkSideBar/components/CommitWorkfowSelectSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Typography } from "@mui/material";
22
import { Stack } from "@mui/system";
33
import { QueryParameterConverterInputs } from "components/benchmark/v3/configs/utils/dataBindingRegistration";
44
import { UMDenseCommitDropdown } from "components/uiModules/UMDenseComponents";
5-
import { useBenchmarkCommitsData } from "lib/benchmark/api_helper/compilers/type";
5+
import { useBenchmarkCommitsData } from "lib/benchmark/api_helper/apis/hooks";
66
import { useDashboardSelector } from "lib/benchmark/store/benchmark_dashboard_provider";
77
import { BenchmarkCommitMeta } from "lib/benchmark/store/benchmark_regression_store";
88
import { useEffect, useState } from "react";

‎torchci/components/benchmark/v3/components/benchmarkSideBar/components/SideBarMainSection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { UMCopyLink } from "components/uiModules/UMCopyLink";
88
import { UMDateButtonPicker } from "components/uiModules/UMDateRangePicker";
99
import { UMDenseButtonLight } from "components/uiModules/UMDenseComponents";
1010
import dayjs from "dayjs";
11-
import { useBenchmarkCommitsData } from "lib/benchmark/api_helper/compilers/type";
11+
import { useBenchmarkCommitsData } from "lib/benchmark/api_helper/apis/hooks";
1212
import { useDashboardSelector } from "lib/benchmark/store/benchmark_dashboard_provider";
1313
import { useRouter } from "next/router";
1414
import { useEffect, useRef } from "react";

‎torchci/components/benchmark/v3/components/common/navigate.tsx‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ export async function navigateToDataGrid(
2121
openToggleSectionById(toggleId);
2222
await delay(350); // wait for toggle animation
2323
}
24-
return scrollToDataGridView(sectionId, keywords, field);
24+
const target = scrollToDataGridView(sectionId, keywords, field);
25+
await delay(300); // wait for scroll animation
26+
return target;
2527
}
2628

2729
function scrollToDataGridView(
@@ -31,6 +33,9 @@ function scrollToDataGridView(
3133
) {
3234
const section = document.getElementById(sectionId);
3335
if (!section) return null;
36+
37+
let target: HTMLElement | null = section;
38+
3439
const grid = section.querySelector(".MuiDataGrid-root") as HTMLElement | null;
3540
if (!grid) return null;
3641

@@ -42,18 +47,18 @@ function scrollToDataGridView(
4247
});
4348

4449
if (!match) return null;
50+
target = match;
4551

4652
// Scroll to the row
4753
match.scrollIntoView({ behavior: "smooth", block: "center" });
4854
// If a specific column (field) is given, focus on that cell
49-
let target: HTMLElement | null = match;
5055
if (field) {
5156
const cell = match.querySelector<HTMLElement>(
5257
`[data-field="${CSS.escape(field)}"]`
5358
);
5459
if (cell) {
5560
target = cell;
56-
cell.scrollIntoView({ behavior: "smooth", block: "center" });
61+
scrollingToElement(cell);
5762
}
5863
}
5964
return target;
@@ -64,7 +69,7 @@ export async function navigateToEchartInGroup(
6469
chartId: string,
6570
toggleId?: string // optional toggleId to open
6671
): Promise<HTMLElement | null> {
67-
const section = document.getElementById(sectionId);
72+
const section = getElementById(sectionId);
6873
if (!section) return null;
6974

7075
let target: HTMLElement | null = section.querySelector<HTMLElement>(
@@ -80,6 +85,20 @@ export async function navigateToEchartInGroup(
8085
return null;
8186
}
8287
// scroll into view
83-
target.scrollIntoView({ behavior: "smooth", block: "center" });
88+
scrollingToElement(target);
8489
return target;
8590
}
91+
92+
// Accss element from DOM by id
93+
export function getElementById(id: string): HTMLElement | null {
94+
return document.getElementById(id);
95+
}
96+
97+
export async function scrollingToElement(
98+
target: HTMLElement | null,
99+
delay_ts: number = 200
100+
) {
101+
if (!target) return null;
102+
target.scrollIntoView({ behavior: "smooth", block: "center" });
103+
await delay(delay_ts);
104+
}

‎torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChart.tsx‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ type Props = {
3131
timeseries: BenchmarkTimeSeriesInput[];
3232
customizedConfirmDialog?: { type: string; id?: string };
3333
renderOptions?: BenchmarkTimeSeriesCharRenderOpiton;
34-
defaultSelectMode?: boolean;
3534
markArea?: {
3635
start?: string;
3736
end?: string;
3837
singleGap?: number;
3938
};
39+
enableSelectMode?: boolean;
4040
/** Called when user clicks Confirm with L/R selected for a single series. */
4141
onSelect?: (sel: ConfirmPayload) => void;
4242
};
@@ -47,17 +47,16 @@ const DEFAULT_HEIGHT = 200;
4747
const DEFAULT_MARK_AREA_SINGLE_GAP = 60 * 60 * 1000;
4848

4949
const BenchmarkTimeSeriesChart: React.FC<Props> = ({
50+
enableSelectMode = true,
5051
timeseries,
5152
renderOptions,
5253
customizedConfirmDialog,
5354
markArea,
54-
defaultSelectMode = false,
5555
onSelect = () => {},
5656
}) => {
5757
const chartRef = useRef<ReactECharts>(null);
5858

5959
// Selection state
60-
const [selectMode, setSelectMode] = useState<boolean>(defaultSelectMode);
6160
const [selectedSeriesIdx, setSelectedSeriesIdx] = useState<number | null>(
6261
null
6362
);
@@ -108,7 +107,6 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
108107
}
109108

110109
function handlePointClick(seriesIndex: number, dataIndex: number) {
111-
if (!selectMode) return;
112110
// Lock to a series on first click
113111
if (selectedSeriesIdx == null) {
114112
setSelectedSeriesIdx(seriesIndex);
@@ -275,6 +273,7 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
275273

276274
const onEvents = {
277275
click: (p: any) => {
276+
if (!enableSelectMode) return;
278277
if (!p || p.seriesType !== "line") return;
279278
if (typeof p.seriesIndex !== "number" || typeof p.dataIndex !== "number")
280279
return;
@@ -294,11 +293,11 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
294293

295294
const left =
296295
selectedSeriesIdx != null && leftIdx != null
297-
? (seriesDatas[selectedSeriesIdx][leftIdx].meta as RawTimeSeriesPoint)
296+
? (seriesDatas[selectedSeriesIdx][leftIdx]?.meta as RawTimeSeriesPoint)
298297
: null;
299298
const right =
300299
selectedSeriesIdx != null && rightIdx != null
301-
? (seriesDatas[selectedSeriesIdx][rightIdx].meta as RawTimeSeriesPoint)
300+
? (seriesDatas[selectedSeriesIdx][rightIdx]?.meta as RawTimeSeriesPoint)
302301
: null;
303302

304303
function select() {
@@ -310,6 +309,7 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
310309
left: left!,
311310
right: right!,
312311
});
312+
resetSelection();
313313
}
314314

315315
return (
@@ -320,20 +320,17 @@ const BenchmarkTimeSeriesChart: React.FC<Props> = ({
320320
}}
321321
>
322322
{/* Selection controls */}
323-
<ChartSelectionControl
324-
selectMode={selectMode}
325-
setSelectMode={(v) => {
326-
setSelectMode(v);
327-
if (!v) resetSelection();
328-
}}
329-
left={left}
330-
right={right}
331-
onClear={resetSelection}
332-
onSelect={select}
333-
confirmDisabled={!hasBoth}
334-
clearDisabled={!left && !right}
335-
customizedConfirmDialog={customizedConfirmDialog}
336-
/>
323+
{enableSelectMode ? (
324+
<ChartSelectionControl
325+
left={left}
326+
right={right}
327+
onClear={resetSelection}
328+
onSelect={select}
329+
confirmDisabled={!hasBoth}
330+
clearDisabled={!left && !right}
331+
customizedConfirmDialog={customizedConfirmDialog}
332+
/>
333+
) : null}
337334
{/* Echart controls */}
338335
<ReactECharts
339336
ref={chartRef}

‎torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChartGroup.tsx‎ renamed to ‎torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChartGroup.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import {
88
getBenchmarkTimeSeriesTitle,
99
makeGroupKeyAndLabel,
1010
passesFilter,
11-
} from "../helper";
12-
import BenchmarkTimeSeriesChart from "./BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChart";
11+
} from "../../helper";
12+
import BenchmarkTimeSeriesChart from "./BenchmarkTimeSeriesChart";
1313

1414
type Props = {
1515
data: any[];
@@ -18,16 +18,17 @@ type Props = {
1818
lcommit?: BenchmarkCommitMeta;
1919
rcommit?: BenchmarkCommitMeta;
2020
onSelect?: (payload: any) => void;
21+
enableSelectMode?: boolean;
2122
};
2223

2324
// ---- Real React component with hooks (internal) ----
2425
export default function BenchmarkTimeSeriesChartGroup({
2526
data,
2627
chartGroup,
27-
defaultSelectMode = false,
2828
lcommit,
2929
rcommit,
3030
onSelect = () => {},
31+
enableSelectMode = true,
3132
}: Props) {
3233
const filtered = useMemo(
3334
() =>
@@ -72,6 +73,12 @@ export default function BenchmarkTimeSeriesChartGroup({
7273
);
7374
}
7475

76+
const onConfirm = (payload: any) => {
77+
if (onSelect) {
78+
onSelect(payload);
79+
}
80+
};
81+
7582
return (
7683
<Grid container spacing={1}>
7784
{groups.map((g) => {
@@ -81,6 +88,10 @@ export default function BenchmarkTimeSeriesChartGroup({
8188
g.labels.join("-"),
8289
chartGroup?.chart
8390
);
91+
92+
console.log(g.labels.join("-"), chartGroup?.sectionSelectMode);
93+
const enableSelectMode =
94+
chartGroup?.sectionSelectMode?.[g.labels.join("-")] ?? true;
8495
return (
8596
<Grid
8697
key={g.key}
@@ -94,6 +105,7 @@ export default function BenchmarkTimeSeriesChartGroup({
94105
{title.description}
95106
</Typography>
96107
<BenchmarkTimeSeriesChart
108+
enableSelectMode={enableSelectMode}
97109
timeseries={groupSeries}
98110
customizedConfirmDialog={
99111
chartGroup?.chart?.customizedConfirmDialog
@@ -103,8 +115,7 @@ export default function BenchmarkTimeSeriesChartGroup({
103115
end: rcommit?.date ?? undefined,
104116
}}
105117
renderOptions={chartGroup?.chart?.renderOptions}
106-
defaultSelectMode={defaultSelectMode}
107-
onSelect={onSelect}
118+
onSelect={onConfirm}
108119
/>
109120
</Grid>
110121
);

‎torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/BenchmarkChartSection.tsx‎ renamed to ‎torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChartSection.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import { Paper, Typography } from "@mui/material";
22
import { Box } from "@mui/system";
33
import { BenchmarkCommitMeta } from "lib/benchmark/store/benchmark_regression_store";
44
import { useMemo } from "react";
5-
import BenchmarkTimeSeriesChartGroup from "./components/BenchmarkTimeSeriesChartGroup";
65
import {
76
BenchmarkChartSectionConfig,
87
BenchmarkTimeSeriesInput,
98
makeGroupKeyAndLabel,
109
passesFilter,
11-
} from "./helper";
10+
} from "../../helper";
11+
import BenchmarkTimeSeriesChartGroup from "./BenchmarkTimeSeriesChartGroup";
1212

1313
const styles = {
1414
container: {
@@ -98,6 +98,7 @@ export default function BenchmarkChartSection({
9898
onSelect={(payload: any) => {
9999
onSelect?.(payload);
100100
}}
101+
enableSelectMode
101102
lcommit={lcommit}
102103
rcommit={rcommit}
103104
/>

‎torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/ChartSelectionControl.tsx‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { Button, FormControlLabel, Switch, Typography } from "@mui/material";
1+
import { Button, Typography } from "@mui/material";
22
import { Stack } from "@mui/system";
33
import { SelectionDialog } from "components/benchmark/v3/components/common/SelectionDialog";
44
import dayjs from "dayjs";
55
import { useState } from "react";
66
import { RawTimeSeriesPoint } from "../../helper";
77

88
type SelectionControlsProps = {
9-
selectMode: boolean;
10-
setSelectMode: (v: boolean) => void;
119
left: RawTimeSeriesPoint | null;
1210
right: RawTimeSeriesPoint | null;
1311
onClear: () => void;
@@ -18,8 +16,6 @@ type SelectionControlsProps = {
1816
};
1917

2018
export const ChartSelectionControl: React.FC<SelectionControlsProps> = ({
21-
selectMode,
22-
setSelectMode,
2319
left,
2420
right,
2521
onClear,
@@ -41,16 +37,6 @@ export const ChartSelectionControl: React.FC<SelectionControlsProps> = ({
4137
alignItems="center"
4238
sx={{ mt: 1, flexWrap: "wrap" }}
4339
>
44-
<FormControlLabel
45-
control={
46-
<Switch
47-
size="small"
48-
checked={selectMode}
49-
onChange={(e) => setSelectMode(e.target.checked)}
50-
/>
51-
}
52-
label="Select mode"
53-
/>
5440
<Typography variant="body2" sx={{ ml: 2 }}>
5541
L:&nbsp;
5642
{left ? (

‎torchci/components/benchmark/v3/components/dataRender/components/benchmarkTimeSeries/helper.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ export type ChartGroupConfig = {
7979
filterByFieldValues?: Record<string, Array<string>>;
8080
lineKey?: string[];
8181
renderOptions?: any;
82+
// default is true, if set to false, the chart section select mode will be disabled
83+
sectionSelectMode?: {
84+
[key: string]: boolean;
85+
};
8286
chart?: ChartConfig;
8387
};
8488

‎torchci/components/benchmark/v3/components/dataRender/fanout/FanoutComponents.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { FanoutComponentProps } from "components/benchmark/v3/configs/utils/fanoutRegistration";
2-
import BenchmarkChartSection from "../components/benchmarkTimeSeries/BenchmarkChartSection";
2+
import BenchmarkChartSection from "../components/benchmarkTimeSeries/components/BenchmarkTimeSeriesChart/BenchmarkTimeSeriesChartSection";
33
import BenchmarkTimeSeriesComparisonTableSection from "../components/benchmarkTimeSeries/components/BenchmarkTimeSeriesComparisonSection/BenchmarkTimeSeriesComparisonTableSection";
44
import { BenchmarkChartSectionConfig } from "../components/benchmarkTimeSeries/helper";
55

‎torchci/components/benchmark/v3/components/dataRender/fanout/defaultFanoutRenderContent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { HighlightStyles } from "components/benchmark/v3/components/common/highl
44
import { getConfig } from "components/benchmark/v3/configs/configBook";
55
import { getFanoutRenderComponent } from "components/benchmark/v3/configs/utils/fanoutRegistration";
66
import LoadingPage from "components/common/LoadingPage";
7-
import { useBenchmarkData } from "lib/benchmark/api_helper/compilers/type";
7+
import { useBenchmarkData } from "lib/benchmark/api_helper/apis/hooks";
88
import { useDashboardSelector } from "lib/benchmark/store/benchmark_dashboard_provider";
99
import { BenchmarkCommitMeta } from "lib/benchmark/store/benchmark_regression_store";
1010
import { useState } from "react";

0 commit comments

Comments
 (0)