reanimator/chart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(viewer): replace severity dropdown with per-column header filters

Browse Source 
Removes the standalone toolbar severity <select> and instead builds a
second <thead> row in JS with a text input (debounced 300 ms) per
column and a <select> for icon-only columns (severity_icon, status).
All active column filters apply together (AND logic). Adds data-col
attributes to <th> elements so JS can identify columns by name.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mikhail Chusavitin
2026-05-21 14:26:30 +03:00
parent 2a15bc87f1
commit 8105c7ec08
4 changed files with 136 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
web/static/view.css
View File

@@ -330,41 +330,46 @@ body {
display: block;
}
.table-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
}
.table-toolbar-label {
color: var(--muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.table-severity-filter {
min-width: 180px;
border: 1px solid var(--border);
border-radius: 4px;
padding: 7px 10px;
background: var(--surface);
color: var(--ink);
font: inherit;
}
.table-severity-filter:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.table-filter-empty {
margin: 10px 0 0;
color: var(--muted);
}
.filter-row th {
background: var(--surface-2);
padding: 5px 8px;
border-top: 1px solid var(--border-lite);
}
.col-filter-text {
width: 100%;
min-width: 40px;
border: 1px solid var(--border);
border-radius: 3px;
padding: 4px 6px;
font: inherit;
font-size: 12px;
background: var(--surface);
color: var(--ink);
}
.col-filter-text:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.col-filter-select {
width: 100%;
min-width: 40px;
border: 1px solid var(--border);
border-radius: 3px;
padding: 3px 4px;
font: inherit;
font-size: 12px;
background: var(--surface);
color: var(--ink);
}
.data-table .status-column {
width: 1%;
white-space: nowrap;
@@ -425,13 +430,5 @@ body {
grid-column: auto;
}
.table-toolbar {
align-items: stretch;
flex-direction: column;
}
.table-severity-filter {
min-width: 0;
width: 100%;
}
}