From cebd9cabb3ff83c5a5129d83766de661e408b438 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <aider@paulg.org>
Date: Sun, 24 Nov 2024 07:12:39 -0800
Subject: [PATCH] feat: Add real-time filtering to chart based on search input

---
 aider/website/_includes/quant-chart.js | 116 ++++++++++++++-----------
 1 file changed, 66 insertions(+), 50 deletions(-)

diff --git a/aider/website/_includes/quant-chart.js b/aider/website/_includes/quant-chart.js
index cee4bf5c4..7558dc738 100644
--- a/aider/website/_includes/quant-chart.js
+++ b/aider/website/_includes/quant-chart.js
@@ -1,16 +1,5 @@
 document.addEventListener('DOMContentLoaded', function () {
   var ctx = document.getElementById('quantChart').getContext('2d');
-  var chartData = {
-    labels: [],
-    datasets: [{
-      label: 'Percent completed correctly',
-      data: [],
-      backgroundColor: 'rgba(54, 162, 235, 0.2)',
-      borderColor: 'rgba(54, 162, 235, 1)',
-      borderWidth: 1
-    }]
-  };
-
   var allData = [];
   {% for row in site.data.quant %}
     allData.push({
@@ -22,51 +11,78 @@ document.addEventListener('DOMContentLoaded', function () {
   // Sort data by pass_rate_2 in descending order
   allData.sort((a, b) => b.pass_rate_2 - a.pass_rate_2);
 
-  allData.forEach(function(row) {
-    chartData.labels.push(row.model);
-    chartData.datasets[0].data.push(row.pass_rate_2);
-  });
+  var chart;
+  
+  function updateChart(filterText) {
+    var filteredData = allData.filter(row => 
+      row.model.toLowerCase().includes(filterText.toLowerCase())
+    );
+    
+    var chartData = {
+      labels: filteredData.map(row => row.model),
+      datasets: [{
+        label: 'Percent completed correctly',
+        data: filteredData.map(row => row.pass_rate_2),
+        backgroundColor: 'rgba(54, 162, 235, 0.2)',
+        borderColor: 'rgba(54, 162, 235, 1)',
+        borderWidth: 1
+      }]
+    };
 
-  new Chart(ctx, {
-    type: 'bar',
-    data: chartData,
-    options: {
-      plugins: {
-        legend: {
-          display: false
-        },
-        title: {
-          display: true,
-          text: 'Aider code editing benchmark',
-          font: {
-            size: 16
-          }
-        }
-      },
-      scales: {
-        y: {
-          beginAtZero: true,
-          title: {
-            display: true,
-            text: 'Percent completed correctly',
-            font: {
-              size: 14
+    if (chart) {
+      chart.data = chartData;
+      chart.update();
+    } else {
+      chart = new Chart(ctx, {
+        type: 'bar',
+        data: chartData,
+        options: {
+          plugins: {
+            legend: {
+              display: false
+            },
+            title: {
+              display: true,
+              text: 'Aider code editing benchmark',
+              font: {
+                size: 16
+              }
             }
           },
-          ticks: {
-            font: {
-              size: 16
-            }
-          }
-        },
-        x: {
-          ticks: {
-            font: {
-              size: 16
+          scales: {
+            y: {
+              beginAtZero: true,
+              title: {
+                display: true,
+                text: 'Percent completed correctly',
+                font: {
+                  size: 14
+                }
+              },
+              ticks: {
+                font: {
+                  size: 16
+                }
+              }
+            },
+            x: {
+              ticks: {
+                font: {
+                  size: 16
+                }
+              }
             }
           }
         }
-      }
+      });
     }
+  }
+
+  // Initial chart render
+  updateChart('');
+
+  // Connect search input to chart filtering
+  document.getElementById('quantSearchInput').addEventListener('keyup', function() {
+    updateChart(this.value);
   });
 });