From 83064c4b62b1160b550af65c5b247ab243951e78 Mon Sep 17 00:00:00 2001 From: Yang Wang Date: Tue, 28 Jan 2025 16:51:05 -0800 Subject: [PATCH] Maxoutissue (#6229) # Add customized highlight option for BranchAndCommitPicker Add customized highlight option for commit select https://github.com/pytorch/test-infra/issues/6175 # Details - add filename as part of the query for Commit - filter and highlight commits based on the selected key word. - add info icon present highlight section's details # Other Options (can be future) define a dropdown to filter multiple keys to highlight ![image](https://github.com/user-attachments/assets/452211aa-df0b-420d-9847-ac80526ec887) ## Demo Tooltip to indicate the highlight reason: ![image](https://github.com/user-attachments/assets/683d035c-cadf-4ca4-bc49-e0a78d69815a) Gif for the action ![Jan-28-2025 14-33-14](https://github.com/user-attachments/assets/bdded1e1-7545-4a77-ac05-bb61b385946e) --- .../query.sql | 1 + .../benchmark/BranchAndCommitPicker.tsx | 52 +++++++++- .../components/benchmark/HighlightMenu.tsx | 97 +++++++++++++++++++ .../components/benchmark/compilers/common.tsx | 6 ++ torchci/lib/clickhouse.ts | 1 + torchci/pages/benchmark/compilers.tsx | 23 +++++ 6 files changed, 176 insertions(+), 4 deletions(-) create mode 100644 torchci/components/benchmark/HighlightMenu.tsx diff --git a/torchci/clickhouse_queries/compilers_benchmark_performance_branches/query.sql b/torchci/clickhouse_queries/compilers_benchmark_performance_branches/query.sql index 7029538d56..420ec53bc5 100644 --- a/torchci/clickhouse_queries/compilers_benchmark_performance_branches/query.sql +++ b/torchci/clickhouse_queries/compilers_benchmark_performance_branches/query.sql @@ -4,6 +4,7 @@ SELECT DISTINCT w.head_branch AS head_branch, w.head_sha, w.id, + p.filename, toStartOfDay(fromUnixTimestamp64Milli(p.timestamp)) AS event_time FROM benchmark.inductor_torch_dynamo_perf_stats p diff --git a/torchci/components/benchmark/BranchAndCommitPicker.tsx b/torchci/components/benchmark/BranchAndCommitPicker.tsx index bb32be072e..a819c78aa2 100644 --- a/torchci/components/benchmark/BranchAndCommitPicker.tsx +++ b/torchci/components/benchmark/BranchAndCommitPicker.tsx @@ -1,3 +1,4 @@ +import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import { FormControl, InputLabel, @@ -5,12 +6,20 @@ import { Select, SelectChangeEvent, Skeleton, + Tooltip, } from "@mui/material"; import { MAIN_BRANCH, SHA_DISPLAY_LENGTH } from "components/benchmark/common"; import dayjs from "dayjs"; import { fetcher } from "lib/GeneralUtils"; import { useEffect } from "react"; import useSWR from "swr"; +import { + DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR, + getMatchedFilters, + HighlightMenuItem, + isCommitHighlight, + isCommitStringHighlight, +} from "./HighlightMenu"; // Keep the mapping from workflow ID to commit, so that we can use it to // zoom in and out of the graph. NB: this is to avoid sending commit sha @@ -20,16 +29,28 @@ import useSWR from "swr"; export const COMMIT_TO_WORKFLOW_ID: { [k: string]: number } = {}; export const WORKFLOW_ID_TO_COMMIT: { [k: number]: string } = {}; +interface HighlightConfig { + keys?: string[]; + highlightColor?: string; +} + function groupCommitByBranch(data: any) { const dedups: { [k: string]: Set } = {}; const branches: { [k: string]: any[] } = {}; + data.forEach((r: any) => { const b = r.head_branch; if (!(b in branches)) { branches[b] = []; dedups[b] = new Set(); } + if (dedups[b].has(r.head_sha)) { + if (r.filename) { + branches[b] + ?.find((c: any) => c.head_sha === r.head_sha) + .filenames.push(r.filename); + } return; } @@ -38,10 +59,12 @@ function groupCommitByBranch(data: any) { event_time: r.event_time, // This is used to sort the list of branches to show the main branch first display_priority: r.head_branch === MAIN_BRANCH ? 99 : 1, + // store list of config files for the commit, this is used to highlight + filenames: r.filename ? [r.filename] : [], + id: r.id, }); dedups[b].add(r.head_sha); }); - return branches; } @@ -55,6 +78,7 @@ export function BranchAndCommitPicker({ titlePrefix, fallbackIndex, timeRange, + highlightConfig, }: { queryName: string; queryParams: { [k: string]: any }; @@ -65,6 +89,7 @@ export function BranchAndCommitPicker({ titlePrefix: string; fallbackIndex: number; timeRange: any; + highlightConfig?: HighlightConfig; }) { const url = `/api/clickhouse/${queryName}?parameters=${encodeURIComponent( JSON.stringify(queryParams) @@ -160,7 +185,6 @@ export function BranchAndCommitPicker({ ))} - {titlePrefix} Commit @@ -171,12 +195,32 @@ export function BranchAndCommitPicker({ labelId={`commit-picker-select-label-${commit}`} onChange={handleCommitChange} id={`commit-picker-select-${commit}`} + sx={{ + ...(isCommitStringHighlight( + commit, + branches[branch], + highlightConfig?.keys + ) && { backgroundColor: DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR }), + }} > {branches[branch].map((r: any) => ( - + {r.head_sha.substring(0, SHA_DISPLAY_LENGTH)} ( {dayjs(r.event_time).format("YYYY/MM/DD")}) - + {isCommitHighlight(highlightConfig?.keys, r) && ( + + + + )} + ))} diff --git a/torchci/components/benchmark/HighlightMenu.tsx b/torchci/components/benchmark/HighlightMenu.tsx new file mode 100644 index 0000000000..f39d2ff1df --- /dev/null +++ b/torchci/components/benchmark/HighlightMenu.tsx @@ -0,0 +1,97 @@ +import { MenuItem } from "@mui/material"; + +interface HighlightMenuItemProps extends React.ComponentProps { + condition: boolean; + customColor?: string; +} + +export const DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR = "yellow"; + +export const HighlightMenuItem = ({ + condition, + children, + customColor = DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR, + ...props +}: HighlightMenuItemProps) => { + const highlightStyle = { + backgroundColor: customColor + ? customColor + : DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR, + }; + return ( + + {children} + + ); +}; + +export function isCommitStringHighlight( + commit: string, + commits: any[], + filenameFilterList: string[] | undefined +) { + const matchedCommit = commits.find((c: any) => c.head_sha === commit); + if (!matchedCommit) { + return false; + } + return isCommitHighlight(filenameFilterList, matchedCommit); +} + +/** + * isCommitHighlight returns true if the commit's filenames list contains all filter names from filenameFilterList. + * @param filenameFilterList + * @param commit + * @returns + */ +export function isCommitHighlight( + filenameFilterList: string[] | undefined, + commit: any +) { + if (filenameFilterList === undefined || filenameFilterList.length == 0) { + return false; + } + + if (!commit || !commit.filenames) { + return false; + } + return isStringMatchedAll(filenameFilterList, commit.filenames.join(",")); +} + +/** + * getMatchedFilters return all matched filtername in commit.filename list. + * @param filenameFilterList + * @param commit + * @returns + */ +export function getMatchedFilters( + filenameFilterList: string[] | undefined, + commit: any +) { + if (filenameFilterList === undefined || filenameFilterList.length == 0) { + return []; + } + + if (!commit || !commit.filenames) { + return []; + } + return getMatchedList(commit.filenames.join(","), filenameFilterList); +} + +function getMatchedList(text: string, substrings: string[]): string[] { + let matched = []; + for (const substring of substrings) { + if (text.includes(substring)) { + matched.push(substring); + } + } + return matched; +} + +function isStringMatchedAll(substrings: string[], text: string) { + return substrings.every((substring) => text.includes(substring)); +} diff --git a/torchci/components/benchmark/compilers/common.tsx b/torchci/components/benchmark/compilers/common.tsx index d76828b05a..82df1128b9 100644 --- a/torchci/components/benchmark/compilers/common.tsx +++ b/torchci/components/benchmark/compilers/common.tsx @@ -76,3 +76,9 @@ export const DISPLAY_NAMES_TO_WORKFLOW_NAMES: { [k: string]: string } = { rocm: "inductor-perf-nightly-rocm", mps: "inductor-perf-nightly-macos", }; + +export const DEFAULT_HIGHLIGHT_KEY = "none"; +export const DISPLAY_KEYS_TO_HIGHLIGHT: { [k: string]: string } = { + None: DEFAULT_HIGHLIGHT_KEY, + Max_autotune: "max_autotune", +}; diff --git a/torchci/lib/clickhouse.ts b/torchci/lib/clickhouse.ts index 311a2c21dd..fdceacb38d 100644 --- a/torchci/lib/clickhouse.ts +++ b/torchci/lib/clickhouse.ts @@ -17,6 +17,7 @@ export function getClickhouseClient() { password: process.env.CLICKHOUSE_HUD_USER_PASSWORD ?? "", }); } +// export function getClickhouseClientWritable() { return createClient({ diff --git a/torchci/pages/benchmark/compilers.tsx b/torchci/pages/benchmark/compilers.tsx index 2cb126d8b6..e2926b2d44 100644 --- a/torchci/pages/benchmark/compilers.tsx +++ b/torchci/pages/benchmark/compilers.tsx @@ -9,6 +9,8 @@ import { import { BenchmarkLogs } from "components/benchmark/compilers/BenchmarkLogs"; import { DEFAULT_DEVICE_NAME, + DEFAULT_HIGHLIGHT_KEY, + DISPLAY_KEYS_TO_HIGHLIGHT, DISPLAY_NAMES_TO_DEVICE_NAMES, DISPLAY_NAMES_TO_WORKFLOW_NAMES, DTYPES, @@ -34,6 +36,10 @@ import { useEffect, useState } from "react"; import useSWR from "swr"; import { COMPILER_SUITES_MAP } from "../../lib/benchmark/compliers/CompilerSuites"; import { TimeRangePicker } from "../metrics"; +const HardCodedHightlightConfig = { + keys: ["max_autotune"], + highlightColor: "yellow", +}; function Report({ queryParams, @@ -172,6 +178,9 @@ export default function Page() { const [rCommit, setRCommit] = useState(""); const [baseUrl, setBaseUrl] = useState(""); const [deviceName, setDeviceName] = useState(DEFAULT_DEVICE_NAME); + const [highlightKey, setHighlightKey] = useState( + DEFAULT_HIGHLIGHT_KEY + ); // Set the dropdown value what is in the param useEffect(() => { @@ -274,6 +283,12 @@ export default function Page() { /> + —Diff→ @@ -324,6 +343,10 @@ export default function Page() { titlePrefix={"New"} fallbackIndex={0} // Default to the latest commit timeRange={timeRange} + highlightConfig={{ + keys: highlightKey === DEFAULT_HIGHLIGHT_KEY ? [] : [highlightKey], + highlightColor: "yellow", + }} />