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%;
}
}

107
web/static/view.js
View File

@@ -1,31 +1,100 @@
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".table-filterable").forEach((container) => {
const select = container.querySelector(".table-severity-filter");
if (!select) {
return;
const table = container.querySelector(".data-table");
if (!table) return;
const thead = table.querySelector("thead");
const headerRow = thead.querySelector("tr");
const headerCells = Array.from(headerRow.querySelectorAll("th"));
const emptyNotice = container.querySelector(".table-filter-empty");
const rows = Array.from(table.querySelectorAll("tbody tr"));
const activeFilters = new Map();
function getCellValue(cell, colName) {
if (colName === "severity_icon" || colName === "status") {
return (cell.querySelector(".status-badge")?.title || "").toLowerCase();
}
return cell.textContent.trim().toLowerCase();
}
const rows = Array.from(container.querySelectorAll("tbody tr[data-severity-row='true']"));
const emptyNotice = container.querySelector(".table-filter-empty");
const applyFilter = () => {
const selected = select.value;
function applyFilters() {
let visibleCount = 0;
rows.forEach((row) => {
const matches = selected === "" || row.dataset.severity === selected;
row.hidden = !matches;
if (matches) {
visibleCount += 1;
}
const cells = row.querySelectorAll("td");
let visible = true;
activeFilters.forEach((filterValue, colIndex) => {
if (!filterValue) return;
const cell = cells[colIndex];
if (!cell) { visible = false; return; }
const colName = headerCells[colIndex]?.dataset.col || "";
if (!getCellValue(cell, colName).includes(filterValue)) visible = false;
});
row.hidden = !visible;
if (visible) visibleCount++;
});
if (emptyNotice) emptyNotice.hidden = visibleCount > 0;
}
if (emptyNotice) {
emptyNotice.hidden = visibleCount !== 0;
const filterRow = document.createElement("tr");
filterRow.className = "filter-row";
headerCells.forEach((th, colIndex) => {
const colName = th.dataset.col || "";
const filterTh = document.createElement("th");
if (th.className) filterTh.className = th.className;
const isIconCol = colName === "severity_icon" || colName === "status";
if (isIconCol) {
const select = document.createElement("select");
select.className = "col-filter col-filter-select";
select.setAttribute("aria-label", "filter " + (th.getAttribute("aria-label") || colName));
const allOpt = document.createElement("option");
allOpt.value = "";
allOpt.textContent = "All";
select.appendChild(allOpt);
const seen = new Set();
rows.forEach((row) => {
const cell = row.querySelectorAll("td")[colIndex];
if (!cell) return;
const val = cell.querySelector(".status-badge")?.title || "";
if (val && !seen.has(val)) {
seen.add(val);
const opt = document.createElement("option");
opt.value = val.toLowerCase();
opt.textContent = val;
select.appendChild(opt);
}
});
if (select.options.length > 1) {
select.addEventListener("change", () => {
activeFilters.set(colIndex, select.value);
applyFilters();
});
filterTh.appendChild(select);
}
} else if (colName) {
const input = document.createElement("input");
input.type = "text";
input.className = "col-filter col-filter-text";
input.setAttribute("aria-label", "filter " + colName);
let debounceTimer;
input.addEventListener("input", () => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
activeFilters.set(colIndex, input.value.trim().toLowerCase());
applyFilters();
}, 300);
});
filterTh.appendChild(input);
}
};
select.addEventListener("change", applyFilter);
applyFilter();
filterRow.appendChild(filterTh);
});
thead.appendChild(filterRow);
});
});

38
web/templates/view.html
View File

@@ -64,24 +64,13 @@
{{ if eq .Kind "table" }}
{{ $section := . }}
<div class="table-block {{ if .SeverityOptions }}table-filterable{{ end }}">
{{ if .SeverityOptions }}
<div class="table-toolbar">
<label class="table-toolbar-label" for="{{ .ID }}-severity-filter">Severity</label>
<select class="table-severity-filter" id="{{ .ID }}-severity-filter">
<option value="">All severities</option>
{{ range .SeverityOptions }}
<option value="{{ .Value }}">{{ .Label }}</option>
{{ end }}
</select>
</div>
{{ end }}
<div class="table-block table-filterable">
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
{{ range .Columns }}
<th{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
<th data-col="{{ . }}"{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
{{ end }}
</tr>
</thead>
@@ -108,9 +97,7 @@
</tbody>
</table>
</div>
{{ if .SeverityOptions }}
<p class="table-filter-empty" hidden>No rows match the selected severity.</p>
{{ end }}
<p class="table-filter-empty" hidden>No rows match the active filters.</p>
</div>
{{ end }}
@@ -119,24 +106,13 @@
<div class="table-group">
<h3>{{ .Title }}</h3>
{{ $group := . }}
<div class="table-block {{ if .SeverityOptions }}table-filterable{{ end }}">
{{ if .SeverityOptions }}
<div class="table-toolbar">
<label class="table-toolbar-label">Severity</label>
<select class="table-severity-filter">
<option value="">All severities</option>
{{ range .SeverityOptions }}
<option value="{{ .Value }}">{{ .Label }}</option>
{{ end }}
</select>
</div>
{{ end }}
<div class="table-block table-filterable">
<div class="table-wrap">
<table class="data-table">
<thead>
<tr>
{{ range .Columns }}
<th{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
<th data-col="{{ . }}"{{ if or (eq . "status") (eq . "severity_icon") }} class="status-column"{{ end }}{{ if eq . "status" }} aria-label="status"{{ end }}{{ if eq . "severity_icon" }} aria-label="severity"{{ end }}>{{ if and (ne . "status") (ne . "severity_icon") }}{{ . }}{{ end }}</th>
{{ end }}
</tr>
</thead>
@@ -163,9 +139,7 @@
</tbody>
</table>
</div>
{{ if .SeverityOptions }}
<p class="table-filter-empty" hidden>No rows match the selected severity.</p>
{{ end }}
<p class="table-filter-empty" hidden>No rows match the active filters.</p>
</div>
</div>
{{ end }}