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,14 +1,18 @@
 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 { set } from "lodash";
 import { useEffect } from "react";
 import useSWR from "swr";
 
@@ -20,16 +24,79 @@ 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;
+  }
+
+  const filteredCommits =  commits.filter((r:any)=>{
+    const found =  r.filenames.filter((f: string) => f.includes(filenameFilter));
+    return found.length > 0;
+  })
+  return filteredCommits;
+}
+
 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)) {
+      branches[b].find((c: any) => c.head_sha === r.head_sha).filenames.push(r.filename);
       return;
     }
 
@@ -38,6 +105,9 @@ 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 filter out tags
+      filenames: [r.filename],
+      id: r.id,
     });
     dedups[b].add(r.head_sha);
   });
@@ -55,6 +125,7 @@ export function BranchAndCommitPicker({
   titlePrefix,
   fallbackIndex,
   timeRange,
+  filenameFilter,
 }: {
   queryName: string;
   queryParams: { [k: string]: any };
@@ -65,6 +136,7 @@ export function BranchAndCommitPicker({
   titlePrefix: string;
   fallbackIndex: number;
   timeRange: any;
+  filenameFilter?: string;
 }) {
   const url = `/api/clickhouse/${queryName}?parameters=${encodeURIComponent(
     JSON.stringify(queryParams)
@@ -160,7 +232,6 @@ export function BranchAndCommitPicker({
           ))}
         </Select>
       </FormControl>
-
       <FormControl>
         <InputLabel id={`commit-picker-input-label-${commit}`}>
           {titlePrefix} Commit
@@ -171,12 +242,17 @@ export function BranchAndCommitPicker({
           labelId={`commit-picker-select-label-${commit}`}
           onChange={handleCommitChange}
           id={`commit-picker-select-${commit}`}
+          sx={{...(isCommitHighlightItem(commit,branches[branch],filenameFilter) && { backgroundColor: 'yellow' })}}
         >
           {branches[branch].map((r: any) => (
-            <MenuItem key={r.head_sha} value={r.head_sha}>
+            <HighlightMenuItem key={r.head_sha} value={r.head_sha} condition={isHighlight(filenameFilter,r)}>
               {r.head_sha.substring(0, SHA_DISPLAY_LENGTH)} (
               {dayjs(r.event_time).format("YYYY/MM/DD")})
-            </MenuItem>
+              {isHighlight(filenameFilter,r) &&
+            <Tooltip id="button-report" title={filenameFilter}>
+              <InfoOutlinedIcon />
+            </Tooltip>}
+            </HighlightMenuItem>
           ))}
         </Select>
       </FormControl>

torchci/components/benchmark/CommitPanel.tsx

@@ -16,6 +16,9 @@ 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/SummaryPanel.tsx

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

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_FILTER_NAME = "unselected";
+export const DISPLAY_NAMES_TO_FILTER: { [k: string]: string } = {
+  "Unselected": DEFAULT_FILTER_NAME,
+  "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/[suite]/[compiler]/[[...page]].tsx

@@ -117,6 +117,8 @@
     return <Skeleton variant={"rectangular"} height={"100%"} />;
   }
 
+  console.log(lBranchAndCommit, rBranchAndCommit)
+
   return (
     <div>
       <CommitPanel
@@ -308,7 +310,8 @@
           suites: [],
           workflowId: 0,
         };
-
+  console.log("testing",lCommit, rCommit)
+
   return (
     <div>
       <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
@@ -393,8 +396,9 @@
         />
       </Stack>
 
+
       <Grid2 size={{ xs: 12 }}>
-        <Report
+        {lCommit && rCommit && <Report
           dashboard={dashboard}
           queryName={queryName}
           queryParams={queryParams}
@@ -409,7 +413,8 @@
           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

@@ -8,10 +8,12 @@ import {
 } from "components/benchmark/common";
 import { BenchmarkLogs } from "components/benchmark/compilers/BenchmarkLogs";
 import {
+  DEFAULT_FILTER_NAME,
   DEFAULT_DEVICE_NAME,
   DISPLAY_NAMES_TO_DEVICE_NAMES,
   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";
@@ -56,6 +58,10 @@ 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,
@@ -116,6 +122,7 @@ function Report({
       >
         <BenchmarkLogs workflowId={lData[0].workflow_id} />
       </CommitPanel>
+      <div> I'm here </div>
       <SummaryPanel
         dashboard={"torchinductor"}
         startTime={startTime}
@@ -172,6 +179,7 @@ export default function Page() {
   const [rCommit, setRCommit] = useState<string>("");
   const [baseUrl, setBaseUrl] = useState<string>("");
   const [deviceName, setDeviceName] = useState<string>(DEFAULT_DEVICE_NAME);
+  const [filter, setFilter] = useState<string>(DEFAULT_FILTER_NAME);
 
   // Set the dropdown value what is in the param
   useEffect(() => {
@@ -300,6 +308,12 @@ export default function Page() {
           dtypes={Object.keys(DISPLAY_NAMES_TO_DEVICE_NAMES)}
           label={"Device"}
         />
+        <DTypePicker
+          dtype={filter}
+          setDType={setFilter}
+          dtypes={Object.values(DISPLAY_NAMES_TO_FILTER)}
+          label={"Highlight"}
+        />
         <BranchAndCommitPicker
           queryName={"compilers_benchmark_performance_branches"}
           queryParams={queryParams}
@@ -310,6 +324,7 @@ export default function Page() {
           titlePrefix={"Base"}
           fallbackIndex={-1} // Default to the next to latest in the window
           timeRange={timeRange}
+          filenameFilter= {filter}
         />
         <Divider orientation="vertical" flexItem>
           &mdash;Diff→
@@ -324,6 +339,7 @@ export default function Page() {
           titlePrefix={"New"}
           fallbackIndex={0} // Default to the latest commit
           timeRange={timeRange}
+          filenameFilter= {filter}
         />
       </Stack>
       <Report