Skip to content

Commit b06d2c2

Browse files
klieretklieret
committed
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
1 parent f9dc504 commit b06d2c2

3 files changed

Lines changed: 97 additions & 21 deletions

File tree

‎css/components.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,27 @@ button:focus,
5151
border-color: var(--color-accent-dark);
5252
}
5353

54+
/* Disabled button */
55+
.button-disabled,
56+
.button:disabled,
57+
button:disabled {
58+
opacity: 0.5;
59+
cursor: not-allowed;
60+
pointer-events: none;
61+
}
62+
63+
.button-primary.button-disabled,
64+
.button-primary:disabled {
65+
background-color: var(--gray-400);
66+
border-color: var(--gray-400);
67+
}
68+
69+
.dark-mode .button-primary.button-disabled,
70+
.dark-mode .button-primary:disabled {
71+
background-color: var(--gray-600);
72+
border-color: var(--gray-600);
73+
}
74+
5475
/* Secondary button */
5576
.button-secondary {
5677
background-color: var(--gray-100);

‎js/analysis.js‎

Lines changed: 68 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -76,11 +76,16 @@
7676
}
7777

7878
function openModal() {
79+
// Always show the selection modal first
80+
openNoSelectionModal();
81+
}
82+
83+
function openCompareModal() {
7984
const selected = getSelectedModels();
80-
if (!selected.length) {
81-
openNoSelectionModal();
82-
return;
83-
}
85+
if (!selected.length) return;
86+
87+
closeNoSelectionModal();
88+
8489
const modal = document.getElementById('compare-modal');
8590
if (!modal) return;
8691

@@ -99,6 +104,31 @@
99104
if (!modal) return;
100105
modal.classList.add('show');
101106
modal.setAttribute('aria-hidden', 'false');
107+
updateCompareSelectedButton();
108+
109+
// Focus the compare button for Enter key support
110+
const compareBtn = document.getElementById('compare-selected-btn');
111+
if (compareBtn) {
112+
setTimeout(() => compareBtn.focus(), 50);
113+
}
114+
}
115+
116+
function updateCompareSelectedButton() {
117+
const selected = getSelectedModels();
118+
const btn = document.getElementById('compare-selected-btn');
119+
const msg = document.getElementById('no-selection-message');
120+
121+
if (!btn) return;
122+
123+
if (selected.length > 0) {
124+
btn.disabled = false;
125+
btn.classList.remove('button-disabled');
126+
if (msg) msg.style.display = 'none';
127+
} else {
128+
btn.disabled = true;
129+
btn.classList.add('button-disabled');
130+
if (msg) msg.style.display = '';
131+
}
102132
}
103133

104134
function closeNoSelectionModal() {
@@ -130,7 +160,7 @@
130160
});
131161

132162
closeNoSelectionModal();
133-
openModal();
163+
openCompareModal();
134164
}
135165

136166
function selectTopN(n, openWeightsOnly = false) {
@@ -161,10 +191,10 @@
161191
});
162192

163193
closeNoSelectionModal();
164-
openModal();
194+
openCompareModal();
165195
}
166196

167-
function closeModal() {
197+
function closeCompareModal() {
168198
const modal = document.getElementById('compare-modal');
169199
if (!modal) return;
170200
modal.classList.remove('show');
@@ -508,17 +538,14 @@
508538
}
509539
});
510540

511-
// Open the compare modal
512-
openModal();
513-
514-
// Set the chart type
541+
// Set the chart type before opening modal
515542
const chartTypeSelect = document.getElementById('compare-chart-type');
516543
if (chartTypeSelect) {
517544
chartTypeSelect.value = chartType;
518545
}
519546

520-
// Render the chart
521-
renderChart();
547+
// Open the compare modal directly (bypass selection modal since models are from URL)
548+
openCompareModal();
522549
}, 300);
523550
}
524551

@@ -558,7 +585,7 @@
558585
const closeEl = e.target && typeof e.target.closest === 'function' ? e.target.closest('[data-close="true"]') : null;
559586
if (closeEl) {
560587
e.preventDefault();
561-
closeModal();
588+
closeCompareModal();
562589
}
563590
});
564591
}
@@ -594,12 +621,12 @@
594621
});
595622
}
596623

597-
// Quickselect button handler
624+
// Quickselect button handler (in compare modal, opens selection modal)
598625
const quickselectBtn = document.getElementById('quickselect-btn');
599626
if (quickselectBtn) {
600627
quickselectBtn.addEventListener('click', (e) => {
601628
e.preventDefault();
602-
closeModal();
629+
closeCompareModal();
603630
openNoSelectionModal();
604631
});
605632
}
@@ -641,6 +668,26 @@
641668
closeNoSelectionModal();
642669
}
643670
});
671+
672+
// Handle Enter key to trigger compare button
673+
noSelectionModal.addEventListener('keydown', (e) => {
674+
if (e.key === 'Enter') {
675+
const btn = document.getElementById('compare-selected-btn');
676+
if (btn && !btn.disabled) {
677+
e.preventDefault();
678+
openCompareModal();
679+
}
680+
}
681+
});
682+
}
683+
684+
// Compare selected models button
685+
const compareSelectedBtn = document.getElementById('compare-selected-btn');
686+
if (compareSelectedBtn) {
687+
compareSelectedBtn.addEventListener('click', (e) => {
688+
e.preventDefault();
689+
openCompareModal();
690+
});
644691
}
645692

646693
// Quick select buttons
@@ -666,9 +713,14 @@
666713

667714
document.addEventListener('change', (e) => {
668715
if (e.target && e.target.classList.contains('row-select')) {
716+
// Update chart if compare modal is open
669717
if (document.getElementById('compare-modal')?.classList.contains('show')) {
670718
renderChart();
671719
}
720+
// Update button state if selection modal is open
721+
if (document.getElementById('no-selection-modal')?.classList.contains('show')) {
722+
updateCompareSelectedButton();
723+
}
672724
}
673725
});
674726

‎templates/_leaderboard_table.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -135,19 +135,22 @@ <h3 id="compare-modal-title" class="m-0">Compare results</h3>
135135

136136
</div>
137137

138-
<!-- No Selection Modal -->
138+
<!-- Model Selection Modal -->
139139
<div id="no-selection-modal" class="modal" aria-hidden="true">
140140
<div class="modal-backdrop" data-close="true"></div>
141141
<div class="modal-dialog modal-dialog-small" role="dialog" aria-modal="true" aria-labelledby="no-selection-modal-title">
142142
<div class="modal-header">
143-
<h3 id="no-selection-modal-title" class="m-0">No models selected</h3>
143+
<h3 id="no-selection-modal-title" class="m-0">Compare models</h3>
144144
<button class="modal-close" aria-label="Close" data-close="true"><i class="fa fa-times"></i></button>
145145
</div>
146146
<div class="modal-body">
147-
<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>
148-
<p class="mb-2 fw-medium">Quick select:</p>
147+
<button id="compare-selected-btn" class="button button-primary w-100 mb-2" type="button">
148+
<i class="fa-solid fa-chart-column"></i>&nbsp;Compare selected models
149+
</button>
150+
<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>
151+
<p class="mb-2 fw-medium">Alternatively, use the quick select:</p>
149152
<div class="d-flex gap-2 flex-wrap">
150-
<button id="select-top-10" class="button button-primary" type="button">Select top 10</button>
153+
<button id="select-top-10" class="button button-secondary" type="button">Select top 10</button>
151154
<button id="select-top-20" class="button button-secondary" type="button">Select top 20</button>
152155
<button id="select-all" class="button button-secondary" type="button">Select all</button>
153156
<button id="select-all-ow" class="button button-secondary" type="button">Select all (open weights)</button>

0 commit comments

Comments
 (0)