From 13d3b7c9b35d946d9515259f7d8b5f199e979326 Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <aider@paulg.org>
Date: Thu, 12 Sep 2024 13:01:55 -0700
Subject: [PATCH] refactor: Refactor the edit leaderboard graph into a reusable
 component

---
 .../website/_includes/leaderboard_graph.html  |  76 ++++++++
 aider/website/docs/leaderboards/index.md      | 164 ++----------------
 2 files changed, 88 insertions(+), 152 deletions(-)

diff --git a/aider/website/_includes/leaderboard_graph.html b/aider/website/_includes/leaderboard_graph.html
index e69de29bb..07729a104 100644
--- a/aider/website/_includes/leaderboard_graph.html
+++ b/aider/website/_includes/leaderboard_graph.html
@@ -0,0 +1,76 @@
+<canvas id="{{ include.chart_id }}" width="800" height="450" style="margin-top: 20px"></canvas>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    var ctx = document.getElementById('{{ include.chart_id }}').getContext('2d');
+    var leaderboardData = {
+      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 include.data %}
+      allData.push({
+        model: '{{ row.model }}',
+        pass_rate: {{ row[include.pass_rate_key] }},
+        percent_cases_well_formed: {{ row.percent_cases_well_formed }}
+      });
+    {% endfor %}
+
+    function updateChart() {
+      var selectedRows = document.querySelectorAll('tr.selected');
+      var showAll = selectedRows.length === 0;
+
+      leaderboardData.labels = [];
+      leaderboardData.datasets[0].data = [];
+
+      allData.forEach(function(row, index) {
+        var rowElement = document.getElementById('{{ include.row_prefix }}-' + index);
+        if (showAll) {
+          rowElement.classList.remove('selected');
+        }
+        if (showAll || rowElement.classList.contains('selected')) {
+          leaderboardData.labels.push(row.model);
+          leaderboardData.datasets[0].data.push(row.pass_rate);
+        }
+      });
+
+      leaderboardChart.update();
+    }
+
+    var tableBody = document.querySelector('table tbody');
+    allData.forEach(function(row, index) {
+      var tr = tableBody.children[index];
+      tr.id = '{{ include.row_prefix }}-' + index;
+      tr.style.cursor = 'pointer';
+      tr.onclick = function() {
+        this.classList.toggle('selected');
+        updateChart();
+      };
+    });
+
+    var leaderboardChart = new Chart(ctx, {
+      type: 'bar',
+      data: leaderboardData,
+      options: {
+        scales: {
+          yAxes: [{
+            scaleLabel: {
+              display: true,
+            },
+            ticks: {
+              beginAtZero: true
+            }
+          }]
+        }
+      }
+    });
+
+    updateChart();
+  });
+</script>
diff --git a/aider/website/docs/leaderboards/index.md b/aider/website/docs/leaderboards/index.md
index 77b726560..8b5f7d2ed 100644
--- a/aider/website/docs/leaderboards/index.md
+++ b/aider/website/docs/leaderboards/index.md
@@ -55,83 +55,14 @@ The model also has to successfully apply all its changes to the source file with
   </tbody>
 </table>
 
-<canvas id="editChart" width="800" height="450" style="margin-top: 20px"></canvas>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    var ctx = document.getElementById('editChart').getContext('2d');
-    var leaderboardData = {
-      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 edit_sorted %}
-      allData.push({
-        model: '{{ row.model }}',
-        pass_rate_2: {{ row.pass_rate_2 }},
-        percent_cases_well_formed: {{ row.percent_cases_well_formed }}
-      });
-    {% endfor %}
-
-    function updateChart() {
-      var selectedRows = document.querySelectorAll('tr.selected');
-      var showAll = selectedRows.length === 0;
-
-      leaderboardData.labels = [];
-      leaderboardData.datasets[0].data = [];
-
-      allData.forEach(function(row, index) {
-        var rowElement = document.getElementById('edit-row-' + index);
-        if (showAll) {
-          rowElement.classList.remove('selected');
-        }
-        if (showAll || rowElement.classList.contains('selected')) {
-          leaderboardData.labels.push(row.model);
-          leaderboardData.datasets[0].data.push(row.pass_rate_2);
-        }
-      });
-
-      leaderboardChart.update();
-    }
-
-    var tableBody = document.querySelector('table tbody');
-    allData.forEach(function(row, index) {
-      var tr = tableBody.children[index];
-      tr.id = 'edit-row-' + index;
-      tr.style.cursor = 'pointer';
-      tr.onclick = function() {
-        this.classList.toggle('selected');
-        updateChart();
-      };
-    });
-
-    var leaderboardChart = new Chart(ctx, {
-      type: 'bar',
-      data: leaderboardData,
-      options: {
-        scales: {
-          yAxes: [{
-            scaleLabel: {
-              display: true,
-            },
-            ticks: {
-              beginAtZero: true
-            }
-          }]
-        }
-      }
-    });
-
-    updateChart();
-  });
-</script>
+{% include leaderboard_graph.html 
+  chart_id="editChart" 
+  data=edit_sorted 
+  row_prefix="edit-row" 
+  pass_rate_key="pass_rate_2"
+%}
 <style>
   tr.selected {
     color: #0056b3;
@@ -180,83 +111,12 @@ Therefore, results are available for fewer models.
   </tbody>
 </table>
 
-<canvas id="refacChart" width="800" height="450" style="margin-top: 20px"></canvas>
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    var ctx = document.getElementById('refacChart').getContext('2d');
-    var leaderboardData = {
-      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 refac_sorted %}
-      allData.push({
-        model: '{{ row.model }}',
-        pass_rate_1: {{ row.pass_rate_1 }},
-        percent_cases_well_formed: {{ row.percent_cases_well_formed }}
-      });
-    {% endfor %}
-
-    function updateChart() {
-      var selectedRows = document.querySelectorAll('tr.selected');
-      var showAll = selectedRows.length === 0;
-
-      leaderboardData.labels = [];
-      leaderboardData.datasets[0].data = [];
-
-      allData.forEach(function(row, index) {
-        var rowElement = document.getElementById('refac-row-' + index);
-        if (showAll) {
-          rowElement.classList.remove('selected');
-        }
-        if (showAll || rowElement.classList.contains('selected')) {
-          leaderboardData.labels.push(row.model);
-          leaderboardData.datasets[0].data.push(row.pass_rate_1);
-        }
-      });
-
-      leaderboardChart.update();
-    }
-
-    var tableBody = document.querySelectorAll('table tbody')[1];
-    allData.forEach(function(row, index) {
-      var tr = tableBody.children[index];
-      tr.id = 'refac-row-' + index;
-      tr.style.cursor = 'pointer';
-      tr.onclick = function() {
-        this.classList.toggle('selected');
-        updateChart();
-      };
-    });
-
-    var leaderboardChart = new Chart(ctx, {
-      type: 'bar',
-      data: leaderboardData,
-      options: {
-        scales: {
-          yAxes: [{
-            scaleLabel: {
-              display: true,
-            },
-            ticks: {
-              beginAtZero: true
-            }
-          }]
-        }
-      }
-    });
-
-    updateChart();
-  });
-</script>
+{% include leaderboard_graph.html 
+  chart_id="refacChart" 
+  data=refac_sorted 
+  row_prefix="refac-row" 
+  pass_rate_key="pass_rate_1"
+%}
 
 
 ## LLM code editing skill by model release date