From cc1a984c7e7a768e00dd21b68ec8814b9669356c Mon Sep 17 00:00:00 2001 From: "Paul Gauthier (aider)" Date: Sun, 13 Apr 2025 08:35:37 -0700 Subject: [PATCH] feat: Replace clear selection button with select all checkbox --- aider/website/docs/leaderboards/index.md | 107 ++++++++++++++++------- 1 file changed, 76 insertions(+), 31 deletions(-) diff --git a/aider/website/docs/leaderboards/index.md b/aider/website/docs/leaderboards/index.md index 86264821b..c2c3e65bf 100644 --- a/aider/website/docs/leaderboards/index.md +++ b/aider/website/docs/leaderboards/index.md @@ -24,13 +24,14 @@ Aider works best with high-scoring models, though it [can connect to almost any - - + @@ -177,13 +178,6 @@ Aider works best with high-scoring models, though it [can connect to almost any #view-mode-toggle .mode-button:not(:first-child):not(.active) { border-left: none; /* Avoid double borders */ } - #clear-selection-button { - padding: 5px 10px; - border: 1px solid #ccc; - background-color: #f8f9fa; - cursor: pointer; - border-radius: 4px; - } /* Style for selected rows */ @@ -213,10 +207,10 @@ document.addEventListener('DOMContentLoaded', function() { const modeToggleButtonContainer = document.getElementById('view-mode-toggle'); const modeButtons = modeToggleButtonContainer.querySelectorAll('.mode-button'); - const clearSelectionButton = document.getElementById('clear-selection-button'); const allMainRows = document.querySelectorAll('tr[id^="main-row-"]'); const allDetailsRows = document.querySelectorAll('tr[id^="details-"]'); const searchInput = document.getElementById('editSearchInput'); + const selectAllCheckbox = document.getElementById('select-all-checkbox'); function applySearchFilter() { const searchTerm = searchInput.value.toLowerCase(); @@ -233,8 +227,41 @@ document.addEventListener('DOMContentLoaded', function() { if (detailsRow) detailsRow.classList.add('hidden-by-search'); } }); - // After applying search filter, re-apply view mode filter + // After applying search filter, re-apply view mode filter and update select-all state updateTableView(currentMode); + if (currentMode === 'select') { + updateSelectAllCheckboxState(); + } + } + + function getVisibleMainRows() { + // Helper to get rows currently visible (not hidden by search or mode) + return Array.from(allMainRows).filter(row => + !row.classList.contains('hidden-by-search') && !row.classList.contains('hidden-by-mode') + ); + } + + function updateSelectAllCheckboxState() { + // Update the header checkbox based on the selection state of *visible* rows + if (currentMode !== 'select') return; // Only relevant in select mode + + const visibleRows = getVisibleMainRows(); + const visibleRowCount = visibleRows.length; + const selectedVisibleRowCount = visibleRows.filter(row => selectedRows.has(row.querySelector('.row-selector')?.dataset.rowIndex)).length; + + if (visibleRowCount === 0) { + selectAllCheckbox.checked = false; + selectAllCheckbox.indeterminate = false; + } else if (selectedVisibleRowCount === visibleRowCount) { + selectAllCheckbox.checked = true; + selectAllCheckbox.indeterminate = false; + } else if (selectedVisibleRowCount > 0) { + selectAllCheckbox.checked = false; + selectAllCheckbox.indeterminate = true; + } else { + selectAllCheckbox.checked = false; + selectAllCheckbox.indeterminate = false; + } } @@ -250,8 +277,8 @@ document.addEventListener('DOMContentLoaded', function() { } }); - // Show/hide clear selection button - clearSelectionButton.style.display = (mode === 'select' || mode === 'selected') && selectedRows.size > 0 ? 'inline-block' : 'none'; + // Show/hide header checkbox based on mode + selectAllCheckbox.style.display = mode === 'select' ? 'inline-block' : 'none'; allMainRows.forEach(row => { const rowIndex = row.querySelector('.row-selector')?.dataset.rowIndex; @@ -269,6 +296,7 @@ document.addEventListener('DOMContentLoaded', function() { case 'all': toggleButton.style.display = 'inline-block'; selectorCheckbox.style.display = 'none'; + // selectAllCheckbox.style.display = 'none'; // Already handled above loop row.classList.toggle('row-selected', isSelected); // Keep visual selection indication // Hide details row unless it was explicitly opened (handled by toggle listener) if (detailsRow && toggleButton.textContent === '▶') { @@ -278,6 +306,7 @@ document.addEventListener('DOMContentLoaded', function() { case 'select': toggleButton.style.display = 'none'; selectorCheckbox.style.display = 'inline-block'; + // selectAllCheckbox.style.display = 'inline-block'; // Already handled above loop selectorCheckbox.checked = isSelected; row.classList.toggle('row-selected', isSelected); // Always hide details row in select mode @@ -286,6 +315,7 @@ document.addEventListener('DOMContentLoaded', function() { case 'selected': toggleButton.style.display = 'inline-block'; selectorCheckbox.style.display = 'none'; + // selectAllCheckbox.style.display = 'none'; // Already handled above loop if (isSelected) { row.classList.add('row-selected'); // Ensure selected class is present // Hide details row unless it was explicitly opened @@ -315,6 +345,9 @@ document.addEventListener('DOMContentLoaded', function() { }); + + // Update the select-all checkbox state after updating the view + updateSelectAllCheckboxState(); } @@ -440,29 +473,41 @@ document.addEventListener('DOMContentLoaded', function() { selectedRows.delete(rowIndex); mainRow.classList.remove('row-selected'); } - // Update clear button visibility - clearSelectionButton.style.display = selectedRows.size > 0 ? 'inline-block' : 'none'; + // Update select-all checkbox state + updateSelectAllCheckboxState(); } - }); + }); // End of tableBody listener - // Listener for Clear Selection button - clearSelectionButton.addEventListener('click', function() { - selectedRows.clear(); - allMainRows.forEach(row => { - row.classList.remove('row-selected'); - const checkbox = row.querySelector('.row-selector'); - if (checkbox) checkbox.checked = false; - }); - clearSelectionButton.style.display = 'none'; - // If in 'selected' mode after clearing, switch back to 'all' or 'select'? Let's stay in 'selected' but show nothing. - // Re-apply view to potentially hide all rows if in 'selected' mode or update visual state otherwise. - updateTableView(currentMode); - // Also re-apply search filter in case it affects visibility logic - applySearchFilter(); + // Listener for Select All checkbox + selectAllCheckbox.addEventListener('change', function() { + if (currentMode !== 'select') return; + + const isChecked = selectAllCheckbox.checked; + // Select/deselect only the rows that are currently visible + const visibleRows = getVisibleMainRows(); + + visibleRows.forEach(row => { + const checkbox = row.querySelector('.row-selector'); + const rowIndex = checkbox?.dataset.rowIndex; + if (!checkbox || !rowIndex) return; // Skip if no checkbox/index found + + // Only change state if it differs from target state + if (checkbox.checked !== isChecked) { + checkbox.checked = isChecked; + row.classList.toggle('row-selected', isChecked); + if (isChecked) { + selectedRows.add(rowIndex); + } else { + selectedRows.delete(rowIndex); + } + } + }); + // After bulk change, ensure the selectAll checkbox state is correct (not indeterminate) + updateSelectAllCheckboxState(); }); // Listener for search input - searchInput.addEventListener('input', applySearchFilter); + searchInput.addEventListener('input', applySearchFilter); // Add toggle functionality for details (Modified to respect modes) const toggleButtons = document.querySelectorAll('.toggle-details');
+ + Model Percent correct Cost (log scale)