feat: Add per-model filtering to Merbench page

src/components/merbench/CombinedFilters.astro

@@ -2,9 +2,10 @@
 export interface Props {
   difficulties: string[];
   providers: string[];
+  models: string[];
 }
 
-const { difficulties, providers } = Astro.props;
+const { difficulties, providers, models } = Astro.props;
 ---
 
 <div class="filter-container" id="filter-container">
@@ -65,6 +66,21 @@ const { difficulties, providers } = Astro.props;
           </div>
         </div>
 
+        <!-- Model Filter Group -->
+        <div class="filter-group">
+          <span class="filter-label">Model:</span>
+          <div class="filter-controls">
+            {
+              models.map((model) => (
+                <label class="filter-checkbox">
+                  <input type="checkbox" name="model" value={model} checked data-model={model} />
+                  <span class="checkbox-label">{model}</span>
+                </label>
+              ))
+            }
+          </div>
+        </div>
+
         <!-- Action Buttons -->
         <div class="filter-actions">
           <button class="filter-action" id="select-all">All</button>

src/lib/merbench.ts

@@ -40,7 +40,8 @@ export const getFilteredData = (
   selectedDifficulties: string[],
   originalRawData: RawData[],
   originalTestGroupsData: TestGroupData[],
-  selectedProviders?: string[]
+  selectedProviders?: string[],
+  selectedModels?: string[]
 ): FilteredData => {
   // Filter raw data with AND logic
   const filteredRawData = originalRawData.filter((d) => {
@@ -50,7 +51,9 @@ export const getFilteredData = (
       !selectedProviders ||
       selectedProviders.length === 0 ||
       selectedProviders.includes(d.provider);
-    return difficultyMatch && providerMatch;
+    const modelMatch =
+      !selectedModels || selectedModels.length === 0 || selectedModels.includes(d.Model);
+    return difficultyMatch && providerMatch && modelMatch;
   });
 
   // Get the list of models that remain after filtering raw data

src/pages/merbench.astro

@@ -57,7 +57,11 @@ const lastUpdated = fileCommitInfo ? formatDate(fileCommitInfo.date) : null;
       lastUpdated={lastUpdated || undefined}
     />
 
-    <CombinedFilters difficulties={['easy', 'medium', 'hard']} providers={stats.providers} />
+    <CombinedFilters
+      difficulties={['easy', 'medium', 'hard']}
+      providers={stats.providers}
+      models={stats.models}
+    />
 
     <section class="leaderboard-section">
       <details class="metrics-glossary">

src/scripts/merbench-filters.ts

@@ -212,7 +212,7 @@ export class MerbenchFilters {
 
   private setupEventListeners(): void {
     const checkboxes = document.querySelectorAll(
-      'input[name="difficulty"], input[name="provider"]'
+      'input[name="difficulty"], input[name="provider"], input[name="model"]'
     );
     checkboxes.forEach((checkbox) => {
       checkbox.addEventListener('change', () => {
@@ -234,15 +234,25 @@ export class MerbenchFilters {
     return Array.from(selectedCheckboxes).map((cb) => (cb as HTMLInputElement).value);
   }
 
+  private getSelectedModels(): string[] {
+    const selectedCheckboxes = document.querySelectorAll('input[name="model"]:checked');
+    return Array.from(selectedCheckboxes).map((cb) => (cb as HTMLInputElement).value);
+  }
+
   private async handleFilterChange(): Promise<void> {
     try {
       // Capture scroll state before any changes
       const scrollState = this.captureScrollState();
 
       const selectedDifficulties = this.getSelectedDifficulties();
       const selectedProviders = this.getSelectedProviders();
+      const selectedModels = this.getSelectedModels();
 
-      if (selectedDifficulties.length === 0 && selectedProviders.length === 0) {
+      if (
+        selectedDifficulties.length === 0 &&
+        selectedProviders.length === 0 &&
+        selectedModels.length === 0
+      ) {
         this.showNoDataMessage();
         this.charts.purgeCharts();
         return;
@@ -252,7 +262,8 @@ export class MerbenchFilters {
         selectedDifficulties,
         this.originalRawData,
         this.originalTestGroupsData,
-        selectedProviders
+        selectedProviders,
+        selectedModels
       );
 
       this.updateUI(filteredData);
@@ -342,7 +353,7 @@ export class MerbenchFilters {
   // Method to reset all filters
   public resetFilters(): void {
     const checkboxes = document.querySelectorAll(
-      'input[name="difficulty"], input[name="provider"]'
+      'input[name="difficulty"], input[name="provider"], input[name="model"]'
     ) as NodeListOf<HTMLInputElement>;
     checkboxes.forEach((checkbox) => {
       checkbox.checked = true;
@@ -351,10 +362,11 @@ export class MerbenchFilters {
   }
 
   // Method to get current filter state
-  public getCurrentFilters(): { difficulties: string[]; providers: string[] } {
+  public getCurrentFilters(): { difficulties: string[]; providers: string[]; models: string[] } {
     return {
       difficulties: this.getSelectedDifficulties(),
       providers: this.getSelectedProviders(),
+      models: this.getSelectedModels(),
     };
   }
 }