refactor: change code location and color gradiant of repair attempt graph

Author: amishne

report-app/src/app/pages/report-viewer/repair-attempt-graph-builder.ts

@@ -0,0 +1,108 @@
+import {RunInfoFromReportServer} from '../../../../../runner/shared-interfaces';
+import {BuildResultStatus} from '../../../../../runner/workers/builder/builder-types';
+import {ScoreCssVariable} from '../../shared/scoring';
+import {StackedBarChartData} from '../../shared/visualization/stacked-bar-chart/stacked-bar-chart';
+
+/**
+ * Calculates the average number of repair attempts performed in a run.
+ */
+export function calculateAverageRepairAttempts(report: RunInfoFromReportServer) {
+  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;
+}
+
+/**
+ * Creates graph data for the "repair attempt" graph, from a given run report.
+ */
+export function createRepairAttemptGraphData(report: RunInfoFromReportServer) {
+  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".
+
+  for (let repairCount = 1; repairCount <= maxRepairCount; repairCount++) {
+    const applicationCount = repairsToAppCount.get(repairCount);
+    if (!applicationCount) continue;
+
+    data.push({
+      label: labelByRepairCount(repairCount),
+      color: colorByRepairCount(repairCount),
+      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: ScoreCssVariable.poor,
+      value: failedCount,
+    });
+  }
+  return data;
+}
+
+function labelByRepairCount(repairCount: number): string {
+  switch (repairCount) {
+    case 1:
+      return '1 repair';
+    case 2:
+    case 3:
+    case 4:
+      return `${repairCount} repairs`;
+    default:
+      return '5+ repairs';
+  }
+}
+
+function colorByRepairCount(repairCount: number): string {
+  // We're using mediocre1-5 since these are essentially *all* bad so we don't want green in this
+  // graph.
+  switch (repairCount) {
+    case 1:
+      return ScoreCssVariable.mediocre1;
+    case 2:
+      return ScoreCssVariable.mediocre2;
+    case 3:
+      return ScoreCssVariable.mediocre3;
+    case 4:
+      return ScoreCssVariable.mediocre4;
+    default:
+      return ScoreCssVariable.mediocre5;
+  }
+}

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

@@ -1,17 +1,7 @@
 import {Clipboard} from '@angular/cdk/clipboard';
 import {DatePipe, DecimalPipe} from '@angular/common';
 import {HttpClient} from '@angular/common/http';
-import {
-  afterNextRender,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  input,
-  resource,
-  signal,
-  viewChild,
-} from '@angular/core';
+import {afterNextRender, Component, computed, inject, input, resource, signal} from '@angular/core';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 import {
   BuildErrorType,
@@ -49,6 +39,10 @@ import {AiAssistant} from '../../shared/ai-assistant/ai-assistant';
 import {LighthouseCategory} from './lighthouse-category';
 import {MultiSelect} from '../../shared/multi-select/multi-select';
 import {FileCodeViewer} from '../../shared/file-code-viewer/file-code-viewer';
+import {
+  calculateAverageRepairAttempts,
+  createRepairAttemptGraphData,
+} from './repair-attempt-graph-builder';
 
 const localReportRegex = /-l\d+$/;
 
@@ -307,21 +301,7 @@ export class ReportViewer {
       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;
+    return calculateAverageRepairAttempts(report);
   });
 
   protected repairAttemptsAsGraphData = computed<StackedBarChartData>(() => {
@@ -330,70 +310,7 @@ export class ReportViewer {
       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;
+    return createRepairAttemptGraphData(report);
   });
 
   protected testsAsGraphData(tests: RunSummaryTests): StackedBarChartData {

report-app/src/app/shared/scoring.ts

@@ -8,6 +8,12 @@ export enum ScoreCssVariable {
   good = 'var(--status-fill-good)',
   poor = 'var(--status-fill-poor)',
   neutral = 'var(--status-fill-neutral)',
+  // When we need more refined gradiant between "good" and "poor".
+  mediocre1 = 'var(--status-fill-mediocre-1)',
+  mediocre2 = 'var(--status-fill-mediocre-2)',
+  mediocre3 = 'var(--status-fill-mediocre-3)',
+  mediocre4 = 'var(--status-fill-mediocre-4)',
+  mediocre5 = 'var(--status-fill-mediocre-5)',
 }
 
 const CACHED_COLORS = {

report-app/src/styles.scss

@@ -32,23 +32,19 @@
   --status-fill-poor: #ef4444;
   --status-fill-neutral: #aaa;
 
+  /* When we need a more gradiant spread of "meh". */
+  --status-fill-mediocre-1: #fbbc04; /* Yellow 500 */
+  --status-fill-mediocre-2: #f9ab00; /* Yellow 600 */
+  --status-fill-mediocre-3: #f29900; /* Yellow 700 */
+  --status-fill-mediocre-4: #ea8600; /* Yellow 800 */
+  --status-fill-mediocre-5: #e37400; /* Yellow 900 */
+
   --status-text-excellent: #0c855d;
   --status-text-great: #0c855d; // TODO: do we want to differentiate from `excellent`?
   --status-text-good: #c57f08;
   --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);