render/base.css

@@ -165,6 +165,7 @@ table, tr, td, th {
 	display: grid;
 	grid-gap: 2px;
 	align-items: stretch;
+	align-content: baseline;
 }
 .sidebar h2 {
 	font-size: 17px;
@@ -422,10 +423,29 @@ th.table-sticky {
 	top: 0;
 }
 #options.sticky + #table th.table-sticky {
-	top: calc(var(--options-height) + 0.07em); /* FIXME */
+	top: calc(var(--options-height) + 2.74em); /* FIXME */
 }
 .mini .sidebar #options.sticky + #table th.table-sticky {
-	top: calc(var(--options-height-min) + 0.07em); /* FIXME */
+	top: calc(var(--options-height-min) + 3.50em); /* FIXME */
+}
+.filter {
+	display: block;
+	padding: 10px 4px;
+	font-weight: bold;
+	font-size: 16px;
+}
+.mini .filter {
+	font-size: 12px;
+}
+
+.filter.sticky {
+	top: calc(var(--options-height) + 0.0em); /* FIXME */
+}
+.mini .sidebar #options.sticky + #table .filter.sticky {
+	top: calc(var(--options-height-min) + 0.0em); /* FIXME */
+}
+.filter input {
+	margin-left: 10px;
 }
 
 input[type=range] { vertical-align: middle; }

render/index.js

@@ -207,10 +207,19 @@ function buildTestResultImages(data) {
 
 
 
-function buildData(table, images, data, sort) {
+function buildData(table, images, data, sort, filter) {
 	if (sort) {
 		data = filterData(data);
 	}
+	if (filter) {
+		data = data.filter((d) => {
+			const test = d.test.includes(filter);
+			const channel = d.channel.includes(filter);
+			return test || channel;
+		})
+	}
+
+
 	table.replaceChildren(...buildTestResultsTable(data));
 	images.replaceChildren(...buildTestResultImages(data));
 
@@ -231,6 +240,10 @@ function buildData(table, images, data, sort) {
 
 	saveToLocalStorage("rendertest_tablesort", sort);
 }
+const buildDataSlowMode = debounce((table, images, data, sort, filter) => {
+	buildData(table, images, data, sort, filter);
+}, ()=>{}, 250);
+
 
 const saveToLocalStorage = debounce((key, value) => {
 	localStorage.setItem(key, value);
@@ -531,6 +544,11 @@ window.onload = () => {
 			]),
 			Tag("div", {"class": "panel", "id": "table"}, null, [
 				Tag("h2", null, "List of things that are not perfect"),
+				Tag("label", {"class": "filter sticky"}, "Filter", [
+					Tag("input", {"type": "input", "name": "filter", "value": ""}, null, null, "input", (e) => {
+						buildDataSlowMode(table, images, data, tableSort, e.target.value);
+					}),
+				]),
 				table = Tag("div", {"id": "fail_table"})
 			])
 		]),
@@ -587,6 +605,9 @@ window.onload = () => {
 			}
 		}
 	}
+
+	// TODO: auto subs&unsubs
+
 	const observer = new IntersectionObserver(handleIntersection, {
 		root: null,
 		threshold: 0.1
@@ -595,7 +616,6 @@ window.onload = () => {
 		observer.observe(element);
 	}
 
-	// TODO: subs&unsubs
 	function getPointerPositionPercentage(container, event) {
 		const rect = container.getBoundingClientRect();
 		let x;

render/theme-dark.css

@@ -42,4 +42,8 @@ a, a:visited {
 
 .content {
 	scrollbar-color: gold #222; /* #e100ca */
+}
+
+.filter {
+	background: #222;
 }

render/theme-light.css

@@ -33,3 +33,6 @@ a, a:visited {
 :root {
 	/*--font-gradient: linear-gradient(90deg,#7209d4,#2832d4 33%,#00a5b2);*/
 }
+.filter {
+	background: #FFF;
+}