test

torchci/components/benchmark/BranchAndCommitPicker.tsx

@@ -1,20 +1,24 @@
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import {
   FormControl,
-  IconButton,
   InputLabel,
   MenuItem,
   Select,
   SelectChangeEvent,
   Skeleton,
   Tooltip,
 } from "@mui/material";
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 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 "./compilers/HighlightMenu";
+import {
+  DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR,
+  HighlightMenuItem,
+  isCommitHighlight,
+  isCommitStringHighlight,
+} from "./compilers/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
@@ -41,7 +45,9 @@ function groupCommitByBranch(data: any) {
     }
 
     if (dedups[b].has(r.head_sha)) {
-      branches[b]?.find((c: any) => c.head_sha === r.head_sha).filenames.push(r.filename);
+      branches[b]
+        ?.find((c: any) => c.head_sha === r.head_sha)
+        .filenames.push(r.filename);
       return;
     }
 
@@ -70,7 +76,7 @@ export function BranchAndCommitPicker({
   titlePrefix,
   fallbackIndex,
   timeRange,
-  highlightConfig
+  highlightConfig,
 }: {
   queryName: string;
   queryParams: { [k: string]: any };
@@ -187,16 +193,28 @@ 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 })}}
+          sx={{
+            ...(isCommitStringHighlight(
+              commit,
+              branches[branch],
+              highlightConfig?.key
+            ) && { backgroundColor: DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR }),
+          }}
         >
           {branches[branch].map((r: any) => (
-            <HighlightMenuItem key={r.head_sha} value={r.head_sha} condition={isCommitHighlight(highlightConfig?.key,r)} customColor={highlightConfig?.highlightColor}>
+            <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")})
-              {isCommitHighlight(highlightConfig?.key,r) &&
-            <Tooltip id="button-report" title={highlightConfig?.key}>
-              <InfoOutlinedIcon />
-            </Tooltip>}
+              {isCommitHighlight(highlightConfig?.key, r) && (
+                <Tooltip id="button-report" title={highlightConfig?.key}>
+                  <InfoOutlinedIcon />
+                </Tooltip>
+              )}
             </HighlightMenuItem>
           ))}
         </Select>

torchci/components/benchmark/compilers/HighlightMenu.tsx

@@ -1,41 +1,56 @@
-import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
-import { match } from "assert";
+import { MenuItem } from "@mui/material";
 
-interface HighlightMenuItemProps extends React.ComponentProps<typeof MenuItem>{
-    condition: boolean;
-    customColor?: string;
-  }
+interface HighlightMenuItemProps extends React.ComponentProps<typeof MenuItem> {
+  condition: boolean;
+  customColor?: string;
+}
 
-export const DEFAULT_HIGHLIGHT_MENU_ITEM_COLOR = 'yellow';
+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 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 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;
+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

@@ -79,6 +79,6 @@ export const DISPLAY_NAMES_TO_WORKFLOW_NAMES: { [k: string]: string } = {
 
 export const DEFAULT_FILTER_NAME = "unselected";
 export const DISPLAY_NAMES_TO_FILTER: { [k: string]: string } = {
-  "Unselected": DEFAULT_FILTER_NAME,
-  "Max_autotune": "max_autotune",
+  Unselected: DEFAULT_FILTER_NAME,
+  Max_autotune: "max_autotune",
 };

torchci/pages/benchmark/[suite]/[compiler]/[[...page]].tsx

@@ -393,7 +393,6 @@ export default function Page() {
         />
       </Stack>
 
-
       <Grid2 size={{ xs: 12 }}>
         <Report
           dashboard={dashboard}

torchci/pages/benchmark/compilers.tsx

@@ -8,12 +8,12 @@ import {
 } from "components/benchmark/common";
 import { BenchmarkLogs } from "components/benchmark/compilers/BenchmarkLogs";
 import {
-  DEFAULT_FILTER_NAME,
   DEFAULT_DEVICE_NAME,
+  DEFAULT_FILTER_NAME,
   DISPLAY_NAMES_TO_DEVICE_NAMES,
+  DISPLAY_NAMES_TO_FILTER,
   DISPLAY_NAMES_TO_WORKFLOW_NAMES,
   DTYPES,
-  DISPLAY_NAMES_TO_FILTER,
 } from "components/benchmark/compilers/common";
 import CompilerGraphGroup from "components/benchmark/compilers/CompilerGraphGroup";
 import { SUITES } from "components/benchmark/compilers/SuitePicker";
@@ -36,7 +36,6 @@ import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { COMPILER_SUITES_MAP } from "../../lib/benchmark/compliers/CompilerSuites";
 import { TimeRangePicker } from "../metrics";
-import { keyBy } from "lodash";
 
 function Report({
   queryParams,
@@ -320,12 +319,10 @@ export default function Page() {
           titlePrefix={"Base"}
           fallbackIndex={-1} // Default to the next to latest in the window
           timeRange={timeRange}
-          highlightConfig= {
-            {
-              key:filter,
-              highlightColor:"yellow"
-            }
-          }
+          highlightConfig={{
+            key: filter,
+            highlightColor: "yellow",
+          }}
         />
         <Divider orientation="vertical" flexItem>
           &mdash;Diff→
@@ -340,9 +337,9 @@ export default function Page() {
           titlePrefix={"New"}
           fallbackIndex={0} // Default to the latest commit
           timeRange={timeRange}
-          highlightConfig= {{
-            key:filter,
-            highlightColor:"yellow"
+          highlightConfig={{
+            key: filter,
+            highlightColor: "yellow",
           }}
         />
       </Stack>