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

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