Enh: Improve model comparison modal workflow

- Refactor modal logic to separate selection and comparison flows
- Add disabled button styling for CSS
- Rename selection modal for clarity and improve UX
- Add direct "Compare selected models" button with validation
- Improve keyboard navigation with Enter key support
- Update button state based on model selection

Author: klieret

css/components.css

@@ -51,6 +51,27 @@ button:focus,
   border-color: var(--color-accent-dark);
 }
 
+/* Disabled button */
+.button-disabled,
+.button:disabled,
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.button-primary.button-disabled,
+.button-primary:disabled {
+  background-color: var(--gray-400);
+  border-color: var(--gray-400);
+}
+
+.dark-mode .button-primary.button-disabled,
+.dark-mode .button-primary:disabled {
+  background-color: var(--gray-600);
+  border-color: var(--gray-600);
+}
+
 /* Secondary button */
 .button-secondary {
   background-color: var(--gray-100);

js/analysis.js

@@ -76,11 +76,16 @@
     }
 
     function openModal() {
+        // Always show the selection modal first
+        openNoSelectionModal();
+    }
+
+    function openCompareModal() {
         const selected = getSelectedModels();
-        if (!selected.length) {
-            openNoSelectionModal();
-            return;
-        }
+        if (!selected.length) return;
+        
+        closeNoSelectionModal();
+        
         const modal = document.getElementById('compare-modal');
         if (!modal) return;
 
@@ -99,6 +104,31 @@
         if (!modal) return;
         modal.classList.add('show');
         modal.setAttribute('aria-hidden', 'false');
+        updateCompareSelectedButton();
+        
+        // Focus the compare button for Enter key support
+        const compareBtn = document.getElementById('compare-selected-btn');
+        if (compareBtn) {
+            setTimeout(() => compareBtn.focus(), 50);
+        }
+    }
+
+    function updateCompareSelectedButton() {
+        const selected = getSelectedModels();
+        const btn = document.getElementById('compare-selected-btn');
+        const msg = document.getElementById('no-selection-message');
+        
+        if (!btn) return;
+        
+        if (selected.length > 0) {
+            btn.disabled = false;
+            btn.classList.remove('button-disabled');
+            if (msg) msg.style.display = 'none';
+        } else {
+            btn.disabled = true;
+            btn.classList.add('button-disabled');
+            if (msg) msg.style.display = '';
+        }
     }
 
     function closeNoSelectionModal() {
@@ -130,7 +160,7 @@
         });
 
         closeNoSelectionModal();
-        openModal();
+        openCompareModal();
     }
 
     function selectTopN(n, openWeightsOnly = false) {
@@ -161,10 +191,10 @@
         });
 
         closeNoSelectionModal();
-        openModal();
+        openCompareModal();
     }
 
-    function closeModal() {
+    function closeCompareModal() {
         const modal = document.getElementById('compare-modal');
         if (!modal) return;
         modal.classList.remove('show');
@@ -508,17 +538,14 @@
                 }
             });
 
-            // Open the compare modal
-            openModal();
-            
-            // Set the chart type
+            // Set the chart type before opening modal
             const chartTypeSelect = document.getElementById('compare-chart-type');
             if (chartTypeSelect) {
                 chartTypeSelect.value = chartType;
             }
 
-            // Render the chart
-            renderChart();
+            // Open the compare modal directly (bypass selection modal since models are from URL)
+            openCompareModal();
         }, 300);
     }
 
@@ -558,7 +585,7 @@
                 const closeEl = e.target && typeof e.target.closest === 'function' ? e.target.closest('[data-close="true"]') : null;
                 if (closeEl) {
                     e.preventDefault();
-                    closeModal();
+                    closeCompareModal();
                 }
             });
         }
@@ -594,12 +621,12 @@
             });
         }
 
-        // Quickselect button handler
+        // Quickselect button handler (in compare modal, opens selection modal)
         const quickselectBtn = document.getElementById('quickselect-btn');
         if (quickselectBtn) {
             quickselectBtn.addEventListener('click', (e) => {
                 e.preventDefault();
-                closeModal();
+                closeCompareModal();
                 openNoSelectionModal();
             });
         }
@@ -641,6 +668,26 @@
                     closeNoSelectionModal();
                 }
             });
+            
+            // Handle Enter key to trigger compare button
+            noSelectionModal.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    const btn = document.getElementById('compare-selected-btn');
+                    if (btn && !btn.disabled) {
+                        e.preventDefault();
+                        openCompareModal();
+                    }
+                }
+            });
+        }
+
+        // Compare selected models button
+        const compareSelectedBtn = document.getElementById('compare-selected-btn');
+        if (compareSelectedBtn) {
+            compareSelectedBtn.addEventListener('click', (e) => {
+                e.preventDefault();
+                openCompareModal();
+            });
         }
 
         // Quick select buttons
@@ -666,9 +713,14 @@
 
         document.addEventListener('change', (e) => {
             if (e.target && e.target.classList.contains('row-select')) {
+                // Update chart if compare modal is open
                 if (document.getElementById('compare-modal')?.classList.contains('show')) {
                     renderChart();
                 }
+                // Update button state if selection modal is open
+                if (document.getElementById('no-selection-modal')?.classList.contains('show')) {
+                    updateCompareSelectedButton();
+                }
             }
         });
 

templates/_leaderboard_table.html

@@ -135,19 +135,22 @@ <h3 id="compare-modal-title" class="m-0">Compare results</h3>
 
 </div>
 
-<!-- No Selection Modal -->
+<!-- Model Selection Modal -->
 <div id="no-selection-modal" class="modal" aria-hidden="true">
     <div class="modal-backdrop" data-close="true"></div>
     <div class="modal-dialog modal-dialog-small" role="dialog" aria-modal="true" aria-labelledby="no-selection-modal-title">
         <div class="modal-header">
-            <h3 id="no-selection-modal-title" class="m-0">No models selected</h3>
+            <h3 id="no-selection-modal-title" class="m-0">Compare models</h3>
             <button class="modal-close" aria-label="Close" data-close="true"><i class="fa fa-times"></i></button>
         </div>
         <div class="modal-body">
-            <p class="mb-3">Select at least one model using the checkboxes in the first columns, or click one of the following buttons for a pre-defined selection.</p>
-            <p class="mb-2 fw-medium">Quick select:</p>
+            <button id="compare-selected-btn" class="button button-primary w-100 mb-2" type="button">
+                <i class="fa-solid fa-chart-column"></i>&nbsp;Compare selected models
+            </button>
+            <p id="no-selection-message" class="text-muted mb-3" style="display: none;">No models selected. Use quick select or go back to select models in the first column.</p>
+            <p class="mb-2 fw-medium">Alternatively, use the quick select:</p>
             <div class="d-flex gap-2 flex-wrap">
-                <button id="select-top-10" class="button button-primary" type="button">Select top 10</button>
+                <button id="select-top-10" class="button button-secondary" type="button">Select top 10</button>
                 <button id="select-top-20" class="button button-secondary" type="button">Select top 20</button>
                 <button id="select-all" class="button button-secondary" type="button">Select all</button>
                 <button id="select-all-ow" class="button button-secondary" type="button">Select all (open weights)</button>