[HUD] Add "Hide green columns" checkbox (#6441)

This PR adds a "Hide green columns" checkbox to the PyTorch HUD
interface that filters out columns without any failures. When enabled,
only jobs or job groups with at least one failure across all displayed
commits will be shown, reducing visual noise and helping users focus on
problematic areas.

Implementation Details:

- Added a new local storage preference using the existing preference
system
- Preprocessed failure data for efficient filtering and better
performance
  - Added checkbox next to existing view options in the HUD UI
  - Works seamlessly with both grouped and ungrouped views

This feature helps developers spot issues more quickly by eliminating
the visual noise of successful builds.


---

generated with claude code in three iterations:

Total cost:            $2.69

Author: izaitsevfb

torchci/lib/JobClassifierUtil.ts

@@ -330,13 +330,45 @@ export function getGroupingData(
 ) {
   // Construct Job Groupping Mapping
   const groupNameMapping = new Map<string, Array<string>>(); // group -> [job names]
+
+  // Track which jobs have failures
+  const jobsWithFailures = new Set<string>();
+
+  // First pass: check failures for each job across all commits
+  for (const name of jobNames) {
+    // Check if this job has failures in any commit
+    const hasFailure = shaGrid.some((row) => {
+      const job = row.nameToJobs.get(name);
+      return job && isFailure(job.conclusion);
+    });
+
+    if (hasFailure) {
+      jobsWithFailures.add(name);
+    }
+  }
+
+  // Second pass: group jobs
   for (const name of jobNames) {
     const groupName = classifyGroup(name, showUnstableGroup, unstableIssues);
     const jobsInGroup = groupNameMapping.get(groupName) ?? [];
     jobsInGroup.push(name);
     groupNameMapping.set(groupName, jobsInGroup);
   }
-  return { shaGrid, groupNameMapping };
+
+  // Calculate which groups have failures
+  const groupsWithFailures = new Set<string>();
+  for (const [groupName, jobs] of groupNameMapping.entries()) {
+    if (jobs.some((jobName) => jobsWithFailures.has(jobName))) {
+      groupsWithFailures.add(groupName);
+    }
+  }
+
+  return {
+    shaGrid,
+    groupNameMapping,
+    jobsWithFailures,
+    groupsWithFailures,
+  };
 }
 
 export function isPersistentGroup(name: string) {

torchci/lib/useGroupingPreference.tsx

@@ -65,3 +65,15 @@ export function useMonsterFailuresPreference(): [
   );
   return [state, setState];
 }
+
+export function useHideGreenColumnsPreference(): [
+  boolean,
+  (_hideGreenColumnsValue: boolean) => void
+] {
+  const [state, setState] = usePreference(
+    "hideGreenColumns",
+    /*override*/ undefined,
+    /*default*/ false
+  );
+  return [state, setState];
+}

torchci/pages/hud/[repoOwner]/[repoName]/[branch]/[[...page]].tsx

@@ -39,6 +39,7 @@ import {
 } from "lib/types";
 import {
   useGroupingPreference,
+  useHideGreenColumnsPreference,
   useMonsterFailuresPreference,
   usePreference,
 } from "lib/useGroupingPreference";
@@ -289,6 +290,8 @@ function GroupFilterableHudTable({
   setUseGrouping,
   hideUnstable,
   setHideUnstable,
+  hideGreenColumns,
+  setHideGreenColumns,
 }: {
   params: HudParams;
   children: React.ReactNode;
@@ -297,6 +300,8 @@ function GroupFilterableHudTable({
   setUseGrouping: any;
   hideUnstable: boolean;
   setHideUnstable: any;
+  hideGreenColumns: boolean;
+  setHideGreenColumns: any;
 }) {
   const { jobFilter, handleSubmit } = useTableFilter(params);
   const headerNames = groupNames;
@@ -321,6 +326,12 @@ function GroupFilterableHudTable({
             checkBoxName="hideUnstable"
             labelText={"Hide unstable jobs"}
           />
+          <CheckBoxSelector
+            value={hideGreenColumns}
+            setValue={(value) => setHideGreenColumns(value)}
+            checkBoxName="hideGreenColumns"
+            labelText={"Hide green columns"}
+          />
           <CheckBoxSelector
             value={mergeLF}
             setValue={setMergeLF}
@@ -557,16 +568,19 @@ function GroupedHudTable({
   );
 
   const [hideUnstable, setHideUnstable] = usePreference("hideUnstable");
+  const [hideGreenColumns, setHideGreenColumns] =
+    useHideGreenColumnsPreference();
   const [useGrouping, setUseGrouping] = useGroupingPreference(
     params.nameFilter
   );
 
-  const { shaGrid, groupNameMapping } = getGroupingData(
-    data,
-    jobNames,
-    (!useGrouping && hideUnstable) || (useGrouping && !hideUnstable),
-    unstableIssuesData ?? []
-  );
+  const { shaGrid, groupNameMapping, jobsWithFailures, groupsWithFailures } =
+    getGroupingData(
+      data,
+      jobNames,
+      (!useGrouping && hideUnstable) || (useGrouping && !hideUnstable),
+      unstableIssuesData ?? []
+    );
 
   const [expandedGroups, setExpandedGroups] = useState(new Set<string>());
 
@@ -617,9 +631,27 @@ function GroupedHudTable({
       }
     });
   }
-  names = names.filter((name) =>
-    passesGroupFilter(jobFilter, name, groupNameMapping)
-  );
+
+  names = names.filter((name) => {
+    // Filter by job filter text first
+    if (!passesGroupFilter(jobFilter, name, groupNameMapping)) {
+      return false;
+    }
+
+    // If hiding green columns, filter out names that don't have any failed jobs
+    if (hideGreenColumns) {
+      // For group names, check if any job in the group has failures
+      if (groupNameMapping.has(name)) {
+        return groupsWithFailures.has(name);
+      }
+      // For individual job names, check if this job has failures
+      else {
+        return jobsWithFailures.has(name);
+      }
+    }
+
+    return true;
+  });
 
   return (
     <GroupingContext.Provider
@@ -632,6 +664,8 @@ function GroupedHudTable({
         setUseGrouping={setUseGrouping}
         hideUnstable={hideUnstable}
         setHideUnstable={setHideUnstable}
+        hideGreenColumns={hideGreenColumns}
+        setHideGreenColumns={setHideGreenColumns}
       >
         <HudTableBody
           shaGrid={shaGrid}