Maxoutissue

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,24 @@
+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,
+  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 +28,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 {
+  key?: 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 +58,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 +77,7 @@ export function BranchAndCommitPicker({
   titlePrefix,
   fallbackIndex,
   timeRange,
+  highlightConfig,
 }: {
   queryName: string;
   queryParams: { [k: string]: any };
@@ -65,6 +88,7 @@ export function BranchAndCommitPicker({
   titlePrefix: string;
   fallbackIndex: number;
   timeRange: any;
+  highlightConfig?: HighlightConfig;
 }) {
   const url = `/api/clickhouse/${queryName}?parameters=${encodeURIComponent(
     JSON.stringify(queryParams)
@@ -160,7 +184,6 @@ export function BranchAndCommitPicker({
           ))}
         </Select>
       </FormControl>
-
       <FormControl>
         <InputLabel id={`commit-picker-input-label-${commit}`}>
           {titlePrefix} Commit
@@ -171,12 +194,29 @@ export function BranchAndCommitPicker({
           labelId={`commit-picker-select-label-${commit}`}
           onChange={handleCommitChange}
           id={`commit-picker-select-${commit}`}
+          sx={{
+            ...(isCommitStringHighlight(
+              commit,
+              branches[branch],
+              highlightConfig?.key
+            ) && { 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?.key, r)}
+              customColor={highlightConfig?.highlightColor}
+            >
               {r.head_sha.substring(0, SHA_DISPLAY_LENGTH)} (
               {dayjs(r.event_time).format("YYYY/MM/DD")})
-            </MenuItem>
+              {isCommitHighlight(highlightConfig?.key, r) && (
+                <Tooltip id="button-report" title={highlightConfig?.key}>
+                  <InfoOutlinedIcon />
+                </Tooltip>
+              )}
+            </HighlightMenuItem>
           ))}
         </Select>
       </FormControl>

torchci/components/benchmark/HighlightMenu.tsx

@@ -0,0 +1,56 @@
+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[],
+  filenameFilter: string | undefined
+) {
+  const matchedCommit = commits.find((c: any) => c.head_sha === commit);
+  if (!matchedCommit) {
+    return false;
+  }
+  return isCommitHighlight(filenameFilter, matchedCommit);
+}
+
+export function isCommitHighlight(
+  filenameFilter: string | undefined,
+  commit: any
+) {
+  if (filenameFilter === undefined || filenameFilter == "all") {
+    return false;
+  }
+  const found = commit.filenames.filter((f: string) =>
+    f.includes(filenameFilter)
+  );
+  return found.length > 0;
+}

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,
@@ -172,6 +174,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(() => {
@@ -300,6 +305,12 @@ export default function Page() {
           dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
           label={"Device"}
         />
+        <DTypePicker
+          dtype={highlightKey}
+          setDType={setHighlightKey}
+          dtypes={Object.values(DISPLAY_KEYS_TO_HIGHLIGHT)}
+          label={"Highlight"}
+        />
         <BranchAndCommitPicker
           queryName={"compilers_benchmark_performance_branches"}
           queryParams={queryParams}
@@ -310,6 +321,10 @@ export default function Page() {
           titlePrefix={"Base"}
           fallbackIndex={-1} // Default to the next to latest in the window
           timeRange={timeRange}
+          highlightConfig={{
+            key: highlightKey,
+            highlightColor: "yellow",
+          }}
         />
         <Divider orientation="vertical" flexItem>
           &mdash;Diff→
@@ -324,6 +339,10 @@ export default function Page() {
           titlePrefix={"New"}
           fallbackIndex={0} // Default to the latest commit
           timeRange={timeRange}
+          highlightConfig={{
+            key: highlightKey,
+            highlightColor: "yellow",
+          }}
         />
       </Stack>
       <Report