test

torchci/components/benchmark/BranchAndCommitPicker.tsx

@@ -12,9 +12,9 @@ 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 { set } from "lodash";
 import { useEffect } from "react";
 import useSWR from "swr";
+import { 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
@@ -24,53 +24,6 @@ import useSWR from "swr";
 export const COMMIT_TO_WORKFLOW_ID: { [k: string]: number } = {};
 export const WORKFLOW_ID_TO_COMMIT: { [k: number]: string } = {};
 
-interface Commit {
-  head_sha: string;
-  event_time: number;
-  display_priority: number;
-  filenames: string[];
-  id: number;
-}
-
-interface HighlightMenuItemProps extends React.ComponentProps<typeof MenuItem>{
-  condition: boolean;
-}
-
-function isCommitHighlightItem(commit:string,commits: any[],filenameFilter:string|undefined){
-  const matchedCommits =  commits.filter((c:Commit) => c.head_sha === commit);
-  if (matchedCommits.length === 0) {
-    return false;
-  }
-  return isHighlight(filenameFilter,matchedCommits[0]);
-}
-
-const HighlightMenuItem = ({ condition, children, ...props }: HighlightMenuItemProps) => {
-  const highlightStyle = {
-    backgroundColor: 'yellow',
-  };
-  return (
-    <MenuItem
-     {...props}
-      sx={{
-        ...(condition && highlightStyle),
-      }}
-    >
-      {children}
-    </MenuItem>
-  );
-};
-
-function isHighlight(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;
-
-}
-
 function filterCommitsByFilename(commits: any[], filenameFilter: string|undefined) {
   if (filenameFilter === undefined || filenameFilter == "all") {
     return commits;
@@ -84,7 +37,6 @@ function filterCommitsByFilename(commits: any[], filenameFilter: string|undefine
 }
 
 function groupCommitByBranch(data: any) {
-
   const dedups: { [k: string]: Set<string> } = {};
   const branches: { [k: string]: any[] } = {};
 
@@ -96,7 +48,7 @@ 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;
     }
 
@@ -242,13 +194,13 @@ export function BranchAndCommitPicker({
           labelId={`commit-picker-select-label-${commit}`}
           onChange={handleCommitChange}
           id={`commit-picker-select-${commit}`}
-          sx={{...(isCommitHighlightItem(commit,branches[branch],filenameFilter) && { backgroundColor: 'yellow' })}}
+          sx={{...(isCommitStringHighlight(commit,branches[branch],filenameFilter) && { backgroundColor: 'yellow' })}}
         >
           {branches[branch].map((r: any) => (
-            <HighlightMenuItem key={r.head_sha} value={r.head_sha} condition={isHighlight(filenameFilter,r)}>
+            <HighlightMenuItem key={r.head_sha} value={r.head_sha} condition={isCommitHighlight(filenameFilter,r)}>
               {r.head_sha.substring(0, SHA_DISPLAY_LENGTH)} (
               {dayjs(r.event_time).format("YYYY/MM/DD")})
-              {isHighlight(filenameFilter,r) &&
+              {isCommitHighlight(filenameFilter,r) &&
             <Tooltip id="button-report" title={filenameFilter}>
               <InfoOutlinedIcon />
             </Tooltip>}

torchci/components/benchmark/CommitPanel.tsx

@@ -16,9 +16,6 @@ export function CommitPanel({
   workflowName: string;
   children: ReactNode;
 }) {
-  if (!lBranchAndCommit.commit || !rBranchAndCommit.commit) {
-    return <> No commits are selected </>;
-  }
   return (
     <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
       <Typography fontSize={"1rem"} fontStyle={"italic"}>

torchci/components/benchmark/compilers/HighlightMenu.tsx

@@ -0,0 +1,39 @@
+import { MenuItem } from "@mui/material";
+import { match } from "assert";
+
+interface HighlightMenuItemProps extends React.ComponentProps<typeof MenuItem>{
+    condition: boolean;
+    customColor?: string;
+  }
+
+export const HighlightMenuItem = ({ condition, children, customColor = 'yellow', ...props }: HighlightMenuItemProps) => {
+    const highlightStyle = {
+      backgroundColor: customColor,
+    };
+    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/SummaryPanel.tsx

@@ -251,7 +251,6 @@ export function SummaryPanel({
                     const l = extractPercentage(v.l);
                     const r = extractPercentage(v.r);
 
-
                     if (l === undefined) {
                       return "";
                     }

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

@@ -117,8 +117,6 @@ function Report({
     return <Skeleton variant={"rectangular"} height={"100%"} />;
   }
 
-  console.log(lBranchAndCommit, rBranchAndCommit)
-
   return (
     <div>
       <CommitPanel
@@ -310,8 +308,7 @@ export default function Page() {
           suites: [],
           workflowId: 0,
         };
-  console.log("testing",lCommit, rCommit)
-
+
   return (
     <div>
       <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
@@ -398,7 +395,7 @@ export default function Page() {
 
 
       <Grid2 size={{ xs: 12 }}>
-        {lCommit && rCommit && <Report
+        <Report
           dashboard={dashboard}
           queryName={queryName}
           queryParams={queryParams}
@@ -413,8 +410,7 @@ export default function Page() {
           model={model}
           lBranchAndCommit={{ branch: lBranch, commit: lCommit }}
           rBranchAndCommit={{ branch: rBranch, commit: rCommit }}
-        />}
-        {lCommit.length==0 || rCommit.length === 0 && <div> cannot detect commits to compare </div>}
+        />
       </Grid2>
     </div>
   );

torchci/pages/benchmark/compilers.tsx

@@ -58,10 +58,6 @@ function Report({
   lBranchAndCommit: BranchAndCommit;
   rBranchAndCommit: BranchAndCommit;
 }) {
-  if (!lBranchAndCommit.commit || !rBranchAndCommit.commit) {
-    return <Skeleton variant={"rectangular"} height={"100%"} />;
-  }
-
   const queryName = "compilers_benchmark_performance";
   const queryParamsWithL: { [key: string]: any } = {
     ...queryParams,
@@ -122,7 +118,6 @@ function Report({
       >
         <BenchmarkLogs workflowId={lData[0].workflow_id} />
       </CommitPanel>
-      <div> I'm here </div>
       <SummaryPanel
         dashboard={"torchinductor"}
         startTime={startTime}