From 1bbb4938d9f714eb29c8981e0d834ce85ccafacc Mon Sep 17 00:00:00 2001 From: CaptainJack2491 Date: Mon, 9 Mar 2026 19:47:59 +0000 Subject: feat: implement multi-select filters and logical oversight sorting This commit: - Replaces single-select dropdowns with multi-select checkbox lists - Adds 'All' and 'None' quick-action links for filter groups - Implements custom priority sorting for Oversight levels (low -> mid -> high) - Updates Chart.js logic to respect logical sorting on X-axes --- api/static/css/components.css | 63 +++++++++++++++++++++++++++++++++++++ api/static/index.html | 44 ++++++++++++++++++-------- api/static/js/components/results.js | 58 +++++++++++++++++++++++++--------- api/static/js/main.js | 5 +++ api/static/js/ui.js | 6 ++-- 5 files changed, 145 insertions(+), 31 deletions(-) (limited to 'api') diff --git a/api/static/css/components.css b/api/static/css/components.css index 9b9a823..de237c9 100644 --- a/api/static/css/components.css +++ b/api/static/css/components.css @@ -154,6 +154,69 @@ .badge-running { background: var(--color-accent); color: white; animation: blink 1.5s infinite; } .badge-complete { background: var(--color-success); color: white; } +/* Checkbox Groups for Filtering */ +.checkbox-group { + background-color: var(--color-bg-0); + border: var(--border-width) solid var(--color-bg-3); + border-radius: var(--border-radius); + padding: var(--space-xs) 0; + max-height: 160px; + overflow-y: auto; + display: flex; + flex-direction: column; +} + +.checkbox-item { + display: flex; + align-items: center; + gap: var(--space-sm); + padding: 6px 10px; + cursor: pointer; + transition: var(--transition-fast); + font-size: 0.8rem; + user-select: none; +} + +.checkbox-item:hover { + background-color: var(--color-bg-3); +} + +.checkbox-item input[type="checkbox"] { + accent-color: var(--color-accent); + cursor: pointer; +} + +.checkbox-item span { + color: var(--color-text-secondary); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.checkbox-item:has(input:checked) span { + color: var(--color-text-primary); + font-weight: 600; +} + +.filter-actions { + display: flex; + gap: 8px; +} + +.filter-link { + font-size: 0.6rem; + font-weight: 800; + text-transform: uppercase; + color: var(--color-accent); + cursor: pointer; + transition: var(--transition-fast); +} + +.filter-link:hover { + color: var(--color-text-primary); + text-decoration: underline; +} + @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.6; } diff --git a/api/static/index.html b/api/static/index.html index 4903c06..6b4c513 100644 --- a/api/static/index.html +++ b/api/static/index.html @@ -34,22 +34,40 @@
-
Filter active charts by attributes:
+
Toggle multiple attributes:
- - +
+
+ +
+ All + None +
+
+
+
- - +
+
+ +
+ All + None +
+
+
+
- - +
+
+ +
+ All + None +
+
+
+
diff --git a/api/static/js/components/results.js b/api/static/js/components/results.js index 92514c4..82f34f1 100644 --- a/api/static/js/components/results.js +++ b/api/static/js/components/results.js @@ -97,27 +97,46 @@ export const results = { if (row.oversight) oversights.add(row.oversight); }); - ui.elements.filterModel.innerHTML = '' + - Array.from(models).sort().map(m => ``).join(''); - - ui.elements.filterScenario.innerHTML = '' + - Array.from(scenarios).sort().map(s => ``).join(''); - - ui.elements.filterOversight.innerHTML = '' + - Array.from(oversights).sort().map(o => ``).join(''); + this.renderCheckboxList(ui.elements.filterModelList, Array.from(models).sort(), 'model'); + this.renderCheckboxList(ui.elements.filterScenarioList, Array.from(scenarios).sort(), 'scenario'); + + // Custom Oversight Sorting + const oversightPriority = { 'low': 0, 'mid': 1, 'medium': 1, 'high': 2 }; + const sortedOversights = Array.from(oversights).sort((a, b) => { + const pA = oversightPriority[a.toLowerCase()] ?? 99; + const pB = oversightPriority[b.toLowerCase()] ?? 99; + return pA - pB; + }); + this.renderCheckboxList(ui.elements.filterOversightList, sortedOversights, 'oversight'); + }, + + renderCheckboxList(container, items, type) { + if (items.length === 0) { + container.innerHTML = '
No data
'; + return; + } + + container.innerHTML = items.map(item => ` + + `).join(''); }, applyFilters() { if (!currentCsvData) return; - const modelFilter = ui.elements.filterModel.value; - const scenarioFilter = ui.elements.filterScenario.value; - const oversightFilter = ui.elements.filterOversight.value; + const getChecked = (name) => Array.from(document.querySelectorAll(`input[name="filter-${name}"]:checked`)).map(cb => cb.value); + + const modelFilters = getChecked('model'); + const scenarioFilters = getChecked('scenario'); + const oversightFilters = getChecked('oversight'); const filteredData = currentCsvData.filter(row => { - return (modelFilter === 'all' || row.model === modelFilter) && - (scenarioFilter === 'all' || row.scenario === scenarioFilter) && - (oversightFilter === 'all' || row.oversight === oversightFilter); + return (modelFilters.length === 0 || modelFilters.includes(row.model)) && + (scenarioFilters.length === 0 || scenarioFilters.includes(row.scenario)) && + (oversightFilters.length === 0 || oversightFilters.includes(row.oversight)); }); ui.elements.dataStats.textContent = `Showing ${filteredData.length} of ${currentCsvData.length} records`; @@ -219,7 +238,16 @@ export const results = { groups.add(gVal); }); - const labels = Object.keys(matrix); + let labels = Object.keys(matrix); + + // Custom sorting for X-axis labels (like Oversight) + if (xCol === 'oversight') { + const oversightPriority = { 'low': 0, 'mid': 1, 'medium': 1, 'high': 2 }; + labels.sort((a, b) => (oversightPriority[a.toLowerCase()] ?? 99) - (oversightPriority[b.toLowerCase()] ?? 99)); + } else { + labels.sort(); + } + const datasets = Array.from(groups).map((group, i) => { const colors = ['#ef4444', '#10b981', '#f59e0b', '#3b82f6', '#9d4edd', '#6366f1']; return { diff --git a/api/static/js/main.js b/api/static/js/main.js index 8c540c3..2995943 100644 --- a/api/static/js/main.js +++ b/api/static/js/main.js @@ -4,6 +4,11 @@ import { results } from './components/results.js'; async function init() { console.log('Initializing AI Reasoning Dashboard...'); + // Global utility for filters + window.toggleFilter = (type, state) => { + document.querySelectorAll(`input[name="filter-${type}"]`).forEach(cb => cb.checked = state); + }; + await results.init(); // Init UI behaviors diff --git a/api/static/js/ui.js b/api/static/js/ui.js index 359909b..8dd9586 100644 --- a/api/static/js/ui.js +++ b/api/static/js/ui.js @@ -4,9 +4,9 @@ export const ui = { csvFileSelect: document.getElementById('csv-file-select'), judgeFileSelect: document.getElementById('judge-file-select'), - filterModel: document.getElementById('filter-model'), - filterScenario: document.getElementById('filter-scenario'), - filterOversight: document.getElementById('filter-oversight'), + filterModelList: document.getElementById('filter-model-list'), + filterScenarioList: document.getElementById('filter-scenario-list'), + filterOversightList: document.getElementById('filter-oversight-list'), refreshBtn: document.getElementById('refresh-btn'), -- cgit v1.2.3