Feat: Add toggleable detail view to leaderboard table

aider/website/_includes/leaderboard.js

@@ -86,20 +86,25 @@ document.addEventListener('DOMContentLoaded', function () {
     }
   };
 
+  // Remove row ID assignment and click handler from here,
+  // as it's now handled in the main markdown file's script
+  // to accommodate the new details rows.
+
+  // Add click handler for chart selection (if needed separately from toggle)
   var tableBody = document.querySelector('table tbody');
-  allData.forEach(function(row, index) {
-    var tr = tableBody.children[index];
-    if (!tr) {
-      // If the row doesn't exist, create it
-      tr = document.createElement('tr');
-      tableBody.appendChild(tr);
-    }
-    tr.id = 'edit-row-' + index;
-    tr.style.cursor = 'pointer';
-    tr.onclick = function() {
-      this.classList.toggle('selected');
-      updateChart();
-    };
+  var mainRows = tableBody.querySelectorAll('tr[id^="main-row-"]');
+  mainRows.forEach(function(tr) {
+    // Find the cells to make clickable, excluding the toggle button cell (first child)
+    var clickableCells = tr.querySelectorAll('td:not(:first-child)');
+    clickableCells.forEach(function(cell) {
+      cell.style.cursor = 'pointer';
+      cell.onclick = function() {
+        // Prevent selection when clicking on links or code inside cells if needed
+        // if (event.target.tagName === 'A' || event.target.tagName === 'CODE') return;
+        tr.classList.toggle('selected');
+        updateChart();
+      };
+    });
   });
 
   var leaderboardChart = new Chart(ctx, {
@@ -207,26 +212,38 @@ document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('editSearchInput').addEventListener('keyup', function() {
     var searchWords = this.value.toLowerCase().split(' ').filter(word => word.length > 0);
     var tableBody = document.querySelector('table:first-of-type tbody');
-    var rows = tableBody.getElementsByTagName('tr');
-    
+    // Select only main data rows for filtering logic
+    var mainRows = tableBody.querySelectorAll('tr[id^="main-row-"]');
+
     displayedData = [];
     leaderboardData.labels = [];
     leaderboardData.datasets[0].data = [];
     leaderboardData.datasets[1].data = [];
-    
-    for (var i = 0; i < rows.length; i++) {
-      var rowText = rows[i].textContent;
+
+    // Iterate through main rows using their index relative to the allData array
+    mainRows.forEach(function(row, i) {
+      // The index `i` corresponds to the index in `allData` because `mainRows` only contains the primary data rows.
+      var detailsRow = document.getElementById('details-' + i); // Find corresponding details row
+      var rowText = row.textContent; // Search only within the main row's text content
+
       if (searchWords.every(word => rowText.toLowerCase().includes(word))) {
-        rows[i].style.display = '';
-        displayedData.push(allData[i]);
+        row.style.display = ''; // Show main row
+        displayedData.push(allData[i]); // Add data to chart source
         leaderboardData.labels.push(allData[i].model);
         leaderboardData.datasets[0].data.push(allData[i].pass_rate);
         // Only include cost if it's not zero (placeholder for unknown)
         leaderboardData.datasets[1].data.push(allData[i].total_cost > 0 ? allData[i].total_cost : null);
+
+        // Ensure details row is hidden and toggle is reset when filtering
+        if (detailsRow) detailsRow.style.display = 'none';
+        const toggleButton = row.querySelector('.toggle-details');
+        if (toggleButton) toggleButton.textContent = '+';
+
       } else {
-        rows[i].style.display = 'none';
+        row.style.display = 'none'; // Hide main row
+        if (detailsRow) detailsRow.style.display = 'none'; // Hide details row too
       }
-    }
+    });
     leaderboardChart.update();
   });
 });

aider/website/docs/leaderboards/index.md

@@ -23,6 +23,7 @@ Aider works best with high-scoring models, though it [can connect to almost any
 <table style="width: 100%; max-width: 800px; margin: auto; border-collapse: collapse; box-shadow: 0 2px 4px rgba(0,0,0,0.1); font-size: 14px;">
   <thead style="background-color: #f2f2f2;">
     <tr>
+      <th style="padding: 8px; width: 30px;"></th> <!-- Toggle column -->
       <th style="padding: 8px; text-align: left;">Model</th>
       <th style="padding: 8px; text-align: center;">Percent correct</th>
       <th style="padding: 8px; text-align: center;">Cost (log scale)</th>
@@ -38,8 +39,12 @@ Aider works best with high-scoring models, though it [can connect to almost any
     {% endfor %}
     {% if max_cost == 0 %}{% assign max_cost = 1 %}{% endif %}
     {% assign edit_sorted = site.data.polyglot_leaderboard | sort: 'pass_rate_2' | reverse %}
-    {% for row in edit_sorted %}
-      <tr style="border-bottom: 1px solid #ddd;">
+    {% for row in edit_sorted %} {% comment %} Add loop index for unique IDs {% endcomment %}
+      {% assign row_index = forloop.index0 %}
+      <tr style="border-bottom: 1px solid #ddd;" id="main-row-{{ row_index }}">
+        <td style="padding: 8px; text-align: center;">
+          <button class="toggle-details" data-target="details-{{ row_index }}" style="background: none; border: none; cursor: pointer; font-size: 16px; padding: 0;">+</button>
+        </td>
         <td style="padding: 8px;"><span>{{ row.model }}</span></td>
         <td class="bar-cell">
           <div class="bar-viz" style="width: {{ row.pass_rate_2 }}%; background-color: rgba(40, 167, 69, 0.3); border-right: 1px solid rgba(40, 167, 69, 0.5);"></div>
@@ -54,6 +59,19 @@ Aider works best with high-scoring models, though it [can connect to almost any
         </td>
         <td style="padding: 8px;"><span><code>{{ row.command }}</code></span></td>
       </tr>
+      <tr class="details-row" id="details-{{ row_index }}" style="display: none; background-color: #f9f9f9;">
+        <td colspan="5" style="padding: 15px; border-bottom: 1px solid #ddd;">
+          <ul style="margin: 0; padding-left: 20px; list-style: none;">
+            {% for pair in row %}
+              {% if pair[1] != "" and pair[1] != nil %}
+                <li><strong>{{ pair[0] | replace: '_', ' ' | capitalize }}:</strong>
+                  {% if pair[0] == 'command' %}<code>{{ pair[1] }}</code>{% else %}{{ pair[1] }}{% endif %}
+                </li>
+              {% endif %}
+            {% endfor %}
+          </ul>
+        </td>
+      </tr>
     {% endfor %}
   </tbody>
 </table>
@@ -224,6 +242,21 @@ document.addEventListener('DOMContentLoaded', function() {
       }
     }
   }
+
+  // Add toggle functionality for details
+  const toggleButtons = document.querySelectorAll('.toggle-details');
+  toggleButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      const targetId = this.getAttribute('data-target');
+      const targetRow = document.getElementById(targetId);
+      if (targetRow) {
+        const isVisible = targetRow.style.display !== 'none';
+        targetRow.style.display = isVisible ? 'none' : 'table-row';
+        this.textContent = isVisible ? '+' : '-';
+      }
+    });
+  });
+
 });
 </script>