feat: add repair attempt graph

Author: amishne

report-app/src/app/pages/report-viewer/report-viewer.html

@@ -73,6 +73,32 @@ <h3 class="chart-title">
             <stacked-bar-chart [data]="buildsAsGraphData(overview.stats.builds)" [compact]="true" />
           </div>
         </div>
+        @if (hasSuccessfulResultWithMoreThanOneBuildAttempt()) {
+          <div class="chart-container repair-attempts">
+            <h3>
+              <span class="material-symbols-outlined">build_circle</span>
+              <span>Repair attempts</span>
+              <span
+                class="material-symbols-outlined has-tooltip multiline-tooltip chart-title-tooltip-icon"
+                data-tooltip="For applications that required repairs to be built, this displays the distribution of how many repair attempts were required."
+                >info</span
+              >
+              @if (averageRepairAttempts() !== null) {
+                <span class="chart-title-extra"
+                  >Avg: {{ averageRepairAttempts() | number: '1.2-2' }}</span
+                >
+                <span
+                  class="material-symbols-outlined has-tooltip multiline-tooltip chart-title-tooltip-icon"
+                  data-tooltip="Average repair count among applications that were successfully built after repairs."
+                  >info</span
+                >
+              }
+            </h3>
+            <div class="summary-card-item">
+              <stacked-bar-chart [data]="repairAttemptsAsGraphData()" [compact]="true" />
+            </div>
+          </div>
+        }
         @if (overview.stats.tests) {
           <div class="chart-container test-results-details">
             <h3 class="chart-title">

report-app/src/app/pages/report-viewer/report-viewer.scss

@@ -190,6 +190,17 @@ lighthouse-category + lighthouse-category {
   align-items: center;
 }
 
+.chart-title-tooltip-icon {
+  font-size: 18px;
+  cursor: help;
+}
+
+.chart-title-extra {
+  margin-left: auto;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
 .axe-violations ul {
   padding: 0px 20px;
 }

report-app/src/app/pages/report-viewer/report-viewer.ts

@@ -13,7 +13,10 @@ import {
   viewChild,
 } from '@angular/core';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
-import {BuildErrorType} from '../../../../../runner/workers/builder/builder-types';
+import {
+  BuildErrorType,
+  BuildResultStatus,
+} from '../../../../../runner/workers/builder/builder-types';
 import {
   AssessmentResult,
   AssessmentResultFromReportServer,
@@ -281,6 +284,116 @@ export class ReportViewer {
     ];
   }
 
+  protected hasSuccessfulResultWithMoreThanOneBuildAttempt = computed(() => {
+    if (!this.selectedReport.hasValue()) {
+      return false;
+    }
+    for (const result of this.selectedReport.value().results) {
+      if (
+        result.finalAttempt.buildResult.status === BuildResultStatus.SUCCESS &&
+        result.repairAttempts > 1
+      ) {
+        return true;
+      }
+    }
+    return false;
+  });
+
+  protected averageRepairAttempts = computed<number | null>(() => {
+    const report = this.selectedReportWithSortedResults();
+    if (!report) {
+      return null;
+    }
+
+    let totalRepairs = 0;
+    let count = 0;
+
+    for (const result of report.results) {
+      // Only consider successful builds that required repairs.
+      if (
+        result.finalAttempt.buildResult.status === BuildResultStatus.SUCCESS &&
+        result.repairAttempts > 0
+      ) {
+        totalRepairs += result.repairAttempts;
+        count++;
+      }
+    }
+
+    return count > 0 ? totalRepairs / count : null;
+  });
+
+  protected repairAttemptsAsGraphData = computed<StackedBarChartData>(() => {
+    const report = this.selectedReportWithSortedResults();
+    if (!report) {
+      return [];
+    }
+
+    const repairsToAppCount = new Map<number | 'failed', number>();
+
+    // Map repair count to how many applications shared that count.
+    let maxRepairCount = 0;
+    for (const result of report.results) {
+      if (result.finalAttempt.buildResult.status === BuildResultStatus.ERROR) {
+        repairsToAppCount.set('failed', (repairsToAppCount.get('failed') || 0) + 1);
+      } else {
+        const repairs = result.repairAttempts;
+        // For this graph, we ignore applications that required no repair.
+        if (repairs > 0) {
+          repairsToAppCount.set(repairs, (repairsToAppCount.get(repairs) || 0) + 1);
+          maxRepairCount = Math.max(maxRepairCount, repairs);
+        }
+      }
+    }
+
+    const data: StackedBarChartData = [];
+
+    // All the numeric keys, sorted by value.
+    const intermediateRepairKeys = Array.from(repairsToAppCount.keys())
+      .filter((k): k is number => typeof k === 'number')
+      .sort((a, b) => a - b);
+
+    // This graph might involve a bunch of sections. We want to scale them among all the possible color "grades".
+
+    const minGrade = 1;
+    const maxGrade = 8;
+    const failureGrade = 9;
+
+    for (let repairCount = 1; repairCount <= maxRepairCount; repairCount++) {
+      const applicationCount = repairsToAppCount.get(repairCount);
+      if (!applicationCount) continue;
+      const label = `${repairCount} repair${repairCount > 1 ? 's' : ''}`;
+
+      // Normalize the repair count to the range [0, 1].
+      const normalizedRepairCount = (repairCount - 1) / (maxRepairCount - 1);
+
+      let gradeIndex: number;
+      if (intermediateRepairKeys.length === 1) {
+        // If there's only one intermediate repair count, map it to a middle grade (e.g., --chart-grade-5)
+        gradeIndex = Math.floor(maxGrade / 2) + minGrade;
+      } else {
+        // Distribute multiple intermediate repair counts evenly across available grades
+        gradeIndex = minGrade + Math.round(normalizedRepairCount * (maxGrade - minGrade));
+      }
+
+      data.push({
+        label,
+        color: `var(--chart-grade-${gradeIndex})`,
+        value: applicationCount,
+      });
+    }
+
+    // Handle 'Build failed even after all retries' - always maps to the "failure" grade.
+    const failedCount = repairsToAppCount.get('failed') || 0;
+    if (failedCount > 0) {
+      data.push({
+        label: 'Build failed even after all retries',
+        color: `var(--chart-grade-${failureGrade})`,
+        value: failedCount,
+      });
+    }
+    return data;
+  });
+
   protected testsAsGraphData(tests: RunSummaryTests): StackedBarChartData {
     return [
       {

report-app/src/app/shared/styles/tooltip.scss

@@ -28,6 +28,7 @@
 
     &.multiline-tooltip::before {
       white-space: normal;
+      width: max-content;
       max-width: 400px;
     }
 

report-app/src/app/shared/visualization/stacked-bar-chart/stacked-bar-chart.scss

@@ -56,8 +56,9 @@
 
 .legend {
   display: flex;
-  justify-content: center;
-  gap: 1.5rem;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  column-gap: 1.5rem;
 }
 
 .legend-item {
@@ -66,6 +67,7 @@
   font-size: 14px;
   color: var(--text-secondary);
   white-space: nowrap;
+  margin-top: 0.5rem;
 }
 
 .legend-color {

report-app/src/styles.scss

@@ -38,36 +38,45 @@
   --status-text-poor: #eb1515;
   --status-text-neutral: #64748b;
 
+  /* 10-step Green-to-Red Quality Gradient */
+  --chart-grade-1: #10b981; /* Emerald 500 (Excellent) */
+  --chart-grade-2: #22c55e; /* Green 500 */
+  --chart-grade-3: #4ade80; /* Green 400 */
+  --chart-grade-4: #84cc16; /* Lime 500 (Great) */
+  --chart-grade-5: #a3e635; /* Lime 400 */
+  --chart-grade-6: #facc15; /* Yellow 400 */
+  --chart-grade-7: #f59e0b; /* Amber 500 (Good) */
+  --chart-grade-8: #f97316; /* Orange 500 */
+  --chart-grade-9: #ef4444; /* Red 500 (Poor) */
+
   --tooltip-background-color: light-dark(#111827, #f1f4f9);
   --tooltip-text-color: light-dark(#f9fafb, #1e293b);
 
   --border-radius: 0.75rem;
-  --shadow: light-dark(
-    0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05),
-    0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2)
-  );
-  --overlay-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
-  --transition-speed: 0.2s;
-  --main-container-width: 1200px;
-  --control-height: 36px;
-  --control-border-radius: 0.625rem;
-}
-
-html, body {
-  padding: 0;
-  margin: 0;
-  background-color: var(--background-color);
-  color: var(--text-primary);
-  font-family: var(--font-family);
-}
-
-html.dark-mode {
-  color-scheme: dark;
-}
-
-*, *::before, *::after {
-  box-sizing: border-box;
-}
+    --shadow: light-dark(0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05),
+      0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2));
+    --overlay-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+    --transition-speed: 0.2s;
+    --main-container-width: 1200px;
+    --control-height: 36px;
+    --control-border-radius: 0.625rem;
+  }
+  
+  html, body {
+    padding: 0;
+    margin: 0;
+    background-color: var(--background-color);
+    color: var(--text-primary);
+    font-family: var(--font-family);
+  }
+  
+  html.dark-mode {
+    color-scheme: dark;
+  }
+  
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
 
 // These can show up in generated markdown.
 hr {