diff options
| author | CaptainJack2491 <jayrupnakawala@gmail.com> | 2026-03-09 19:47:59 +0000 |
|---|---|---|
| committer | CaptainJack2491 <jayrupnakawala@gmail.com> | 2026-03-09 19:47:59 +0000 |
| commit | 1bbb4938d9f714eb29c8981e0d834ce85ccafacc (patch) | |
| tree | 034a293a30a3c730bbdbe8aab2340a5eab9627d4 /api/static/index.html | |
| parent | d3d0e0825ea4b4ed3ab338603b824af0178e5264 (diff) | |
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
Diffstat (limited to 'api/static/index.html')
| -rw-r--r-- | api/static/index.html | 44 |
1 files changed, 31 insertions, 13 deletions
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 @@ <div class="form-group" style="margin-top: var(--space-lg);"> <label class="form-label">Global Filters</label> - <div style="font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: var(--space-sm);">Filter active charts by attributes:</div> + <div style="font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: var(--space-md);">Toggle multiple attributes:</div> - <label class="form-label" style="font-size: 0.65rem;">Model</label> - <select id="filter-model" class="input-field"> - <option value="all">All Models</option> - </select> + <div class="filter-section"> + <div style="display: flex; justify-content: space-between; align-items: center;"> + <label class="form-label" style="font-size: 0.65rem;">Models</label> + <div class="filter-actions"> + <span class="filter-link" onclick="window.toggleFilter('model', true)">All</span> + <span class="filter-link" onclick="window.toggleFilter('model', false)">None</span> + </div> + </div> + <div id="filter-model-list" class="checkbox-group"></div> + </div> - <label class="form-label" style="font-size: 0.65rem; margin-top: 8px;">Scenario</label> - <select id="filter-scenario" class="input-field"> - <option value="all">All Scenarios</option> - </select> + <div class="filter-section" style="margin-top: 12px;"> + <div style="display: flex; justify-content: space-between; align-items: center;"> + <label class="form-label" style="font-size: 0.65rem;">Scenarios</label> + <div class="filter-actions"> + <span class="filter-link" onclick="window.toggleFilter('scenario', true)">All</span> + <span class="filter-link" onclick="window.toggleFilter('scenario', false)">None</span> + </div> + </div> + <div id="filter-scenario-list" class="checkbox-group"></div> + </div> - <label class="form-label" style="font-size: 0.65rem; margin-top: 8px;">Oversight</label> - <select id="filter-oversight" class="input-field"> - <option value="all">All Levels</option> - </select> + <div class="filter-section" style="margin-top: 12px;"> + <div style="display: flex; justify-content: space-between; align-items: center;"> + <label class="form-label" style="font-size: 0.65rem;">Oversight</label> + <div class="filter-actions"> + <span class="filter-link" onclick="window.toggleFilter('oversight', true)">All</span> + <span class="filter-link" onclick="window.toggleFilter('oversight', false)">None</span> + </div> + </div> + <div id="filter-oversight-list" class="checkbox-group"></div> + </div> </div> <div class="sidebar-actions" style="margin-top: auto;"> |