feat: add support for filtering by labels

Adds a multi-select dropdown that allows users to filter reports by specific labels.

Author: crisbeto

report-app/src/app/app.scss

@@ -54,10 +54,10 @@
 .report-body {
   display: flex;
   flex-grow: 1;
-  overflow: hidden;
   max-width: var(--main-container-width);
   margin: auto;
-  padding: 0 1rem 2rem;
+  // Add some padding on the bottom so there's some space for dropdowns to open.
+  padding: 0 1rem 10rem;
 }
 
 .reports-link.active {

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

@@ -28,6 +28,12 @@
             }
           </select>
         }
+        @if (allLabels().length > 0) {
+          <multi-select
+            [options]="allLabels()"
+            [(selected)]="selectedLabels"
+            [label]="selectedLabels().length === 0 ? 'Filter by labels' : `Showing reports with ${selectedLabels().length} label(s)`"/>
+        }
       </div>
       <div class="button-group">
         @if (isCompareMode()) {

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

@@ -11,10 +11,19 @@ import {MessageSpinner} from '../../shared/message-spinner';
 import {Score} from '../../shared/score/score';
 import {ProviderLabel} from '../../shared/provider-label';
 import {bucketToScoreVariable} from '../../shared/scoring';
+import {MultiSelect} from '../../shared/multi-select/multi-select';
 
 @Component({
   selector: 'app-report-list',
-  imports: [RouterLink, DatePipe, StackedBarChart, MessageSpinner, Score, ProviderLabel],
+  imports: [
+    RouterLink,
+    DatePipe,
+    StackedBarChart,
+    MessageSpinner,
+    Score,
+    ProviderLabel,
+    MultiSelect,
+  ],
   templateUrl: './report-list.html',
   styleUrls: ['./report-list.scss'],
 })
@@ -30,6 +39,7 @@ export class ReportListComponent {
   protected selectedFramework = signal<string | null>(null);
   protected selectedModel = signal<string | null>(null);
   protected selectedRunner = signal<string | null>(null);
+  protected selectedLabels = signal<string[]>([]);
 
   protected allFrameworks = computed(() => {
     const frameworks = new Map<string, string>();
@@ -67,17 +77,40 @@ export class ReportListComponent {
     }));
   });
 
+  protected allLabels = computed(() => {
+    const labels = new Set<string>();
+
+    for (const group of this.allGroups()) {
+      for (const label of group.labels) {
+        const trimmed = label.trim();
+
+        if (trimmed) {
+          labels.add(trimmed);
+        }
+      }
+    }
+
+    return Array.from(labels)
+      .sort()
+      .map(label => ({
+        label,
+        value: label,
+      }));
+  });
+
   protected reportGroups = computed(() => {
     const framework = this.selectedFramework();
     const model = this.selectedModel();
     const runner = this.selectedRunner();
+    const labels = this.selectedLabels();
     const groups = this.allGroups();
 
     return groups.filter(group => {
       const frameworkMatch = !framework || group.framework.fullStackFramework.id === framework;
       const modelMatch = !model || group.model === model;
       const runnerMatch = !runner || group.runner?.id === runner;
-      return frameworkMatch && modelMatch && runnerMatch;
+      const labelsMatch = labels.length === 0 || group.labels.some(l => labels.includes(l.trim()));
+      return frameworkMatch && modelMatch && runnerMatch && labelsMatch;
     });
   });