From 36e624287ccc4c035aef0022128a6871c60abcc3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 17 Oct 2025 14:53:00 +0000
Subject: [PATCH] feat: Add per-model filtering to Merbench page

This change introduces a new filter to the Merbench page, allowing users to select individual models in addition to the existing provider-level filter.

The implementation includes:
- A new "Model" checkbox group in the `CombinedFilters.astro` component.
- Updates to `merbench.astro` to pass the model list to the filter component.
- Modifications to `merbench-filters.ts` to handle the new filter's state and events.
- An update to the `getFilteredData` function in `merbench.ts` to apply the model selection to the dataset.
---
 npm_output.log                                |  3 ---
 src/components/merbench/CombinedFilters.astro | 18 ++++++++++++++-
 src/lib/merbench.ts                           |  7 ++++--
 src/pages/merbench.astro                      |  6 ++++-
 src/scripts/merbench-filters.ts               | 22 ++++++++++++++-----
 5 files changed, 44 insertions(+), 12 deletions(-)
 delete mode 100644 npm_output.log

diff --git a/npm_output.log b/npm_output.log
deleted file mode 100644
index 4e52ebb..0000000
--- a/npm_output.log
+++ /dev/null
@@ -1,3 +0,0 @@
-
-> andrewginns.github.io@1.0.0 dev
-> astro dev
diff --git a/src/components/merbench/CombinedFilters.astro b/src/components/merbench/CombinedFilters.astro
index ccb8a6f..8727e35 100644
--- a/src/components/merbench/CombinedFilters.astro
+++ b/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>
diff --git a/src/lib/merbench.ts b/src/lib/merbench.ts
index 327cc46..71ef421 100644
--- a/src/lib/merbench.ts
+++ b/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
diff --git a/src/pages/merbench.astro b/src/pages/merbench.astro
index c36ee8a..6f9b62a 100644
--- a/src/pages/merbench.astro
+++ b/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">
diff --git a/src/scripts/merbench-filters.ts b/src/scripts/merbench-filters.ts
index e20cd98..5bc4c54 100644
--- a/src/scripts/merbench-filters.ts
+++ b/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,6 +234,11 @@ 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
@@ -241,8 +246,13 @@ export class MerbenchFilters {
 
       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(),
     };
   }
 }