Maxoutissue (#6229)

# Add customized highlight option for BranchAndCommitPicker
Add customized highlight option for commit select
#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)

Author: yangw-dev

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

torchci/components/benchmark/BranchAndCommitPicker.tsx

@@ -1,16 +1,25 @@
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import {
   FormControl,
   InputLabel,
   MenuItem,
   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<string> } = {};
   const branches: { [k: string]: any[] } = {};
+
   data.forEach((r: any) => {
     const b = r.head_branch;
     if (!(b in branches)) {
       branches[b] = [];
       dedups[b] = new Set<string>();
     }
+
     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({
           ))}
         </Select>
       </FormControl>
-
       <FormControl>
         <InputLabel id={`commit-picker-input-label-${commit}`}>
           {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) => (
-            <MenuItem key={r.head_sha} value={r.head_sha}>
+            <HighlightMenuItem
+              key={r.head_sha}
+              value={r.head_sha}
+              condition={isCommitHighlight(highlightConfig?.keys, r)}
+              customColor={highlightConfig?.highlightColor}
+            >
               {r.head_sha.substring(0, SHA_DISPLAY_LENGTH)} (
               {dayjs(r.event_time).format("YYYY/MM/DD")})
-            </MenuItem>
+              {isCommitHighlight(highlightConfig?.keys, r) && (
+                <Tooltip
+                  id="button-report"
+                  title={getMatchedFilters(highlightConfig?.keys, r).join(",")}
+                >
+                  <InfoOutlinedIcon />
+                </Tooltip>
+              )}
+            </HighlightMenuItem>
           ))}
         </Select>
       </FormControl>

torchci/components/benchmark/HighlightMenu.tsx

@@ -0,0 +1,97 @@
+import { MenuItem } from "@mui/material";
+
+interface HighlightMenuItemProps extends React.ComponentProps<typeof MenuItem> {
+  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 (
+    <MenuItem
+      {...props}
+      sx={{
+        ...(condition && highlightStyle),
+      }}
+    >
+      {children}
+    </MenuItem>
+  );
+};
+
+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));
+}

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",
+};

torchci/lib/clickhouse.ts

@@ -17,6 +17,7 @@ export function getClickhouseClient() {
     password: process.env.CLICKHOUSE_HUD_USER_PASSWORD ?? "",
   });
 }
+//
 
 export function getClickhouseClientWritable() {
   return createClient({

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<string>("");
   const [baseUrl, setBaseUrl] = useState<string>("");
   const [deviceName, setDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
+  const [highlightKey, setHighlightKey] = useState<string>(
+    DEFAULT_HIGHLIGHT_KEY
+  );
 
   // Set the dropdown value what is in the param
   useEffect(() => {
@@ -274,6 +283,12 @@ export default function Page() {
         />
       </Stack>
       <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
+        <DTypePicker
+          dtype={highlightKey}
+          setDType={setHighlightKey}
+          dtypes={Object.values(DISPLAY_KEYS_TO_HIGHLIGHT)}
+          label={"Highlight"}
+        ></DTypePicker>
         <TimeRangePicker
           startTime={startTime}
           setStartTime={setStartTime}
@@ -310,6 +325,10 @@ export default function Page() {
           titlePrefix={"Base"}
           fallbackIndex={-1} // Default to the next to latest in the window
           timeRange={timeRange}
+          highlightConfig={{
+            keys: highlightKey === DEFAULT_HIGHLIGHT_KEY ? [] : [highlightKey],
+            highlightColor: "yellow",
+          }}
         />
         <Divider orientation="vertical" flexItem>
           &mdash;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",
+          }}
         />
       </Stack>
       <Report