Add filter input

www/index.css

@@ -233,3 +233,7 @@ table td.esoteric::after    { content: '\2002\1f984\fe0f'; }
 		text-shadow: 0px 0px 3px var(--main-fg);
 	}
 }
+
+.filtered-out {
+	display: none;
+}

www/index.html

@@ -34,6 +34,7 @@ <h3>
 				<span class="invisible">[<a id="stderr-link" target="_blank" href="" title="Systrack analysis log">analysis&nbsp;log</a>]</span>
 				<span>[<a target="_blank" href="https://github.com/mebeim/linux-syscalls" title="Source code for this website on GitHub">website&nbsp;source</a>]</span>
 			</h3>
+			<input id="filter-name" placeholder="Filter name..." autocomplete="off">
 			<table>
 				<tr>
 					<th class="pad" colspan="6"></th>

www/index.js

@@ -10,6 +10,7 @@ const systrackVersEl     = document.getElementById('systrack-version')
 const configLinkEl       = document.getElementById('config-link')
 const stderrLinkEl       = document.getElementById('stderr-link')
 const jsonLinkEl         = document.getElementById('json-link')
+const filterNameEl       = document.getElementById("filter-name")
 
 let db = null
 let currentSyscallTable = null
@@ -148,6 +149,7 @@ function afterUpdate() {
 	archSelectEl.disabled = false
 	tagSelectEl.disabled = false
 	updateInProgress = false
+	filterTable(filterNameEl.value)
 }
 
 function clearOptions(selectEl) {
@@ -303,6 +305,31 @@ function sortTable(e) {
 	header.classList.add(desc ? 'descending' : 'ascending')
 }
 
+function filterTable(text) {
+	if (updateInProgress)
+		return
+
+	const rows       = Array.from(tableEl.querySelectorAll('tr')).slice(2)
+	let filteredIn   = 0
+
+	for (const el of rows) {
+		const value = el.children[2].textContent
+
+		if (value.includes(text)) {
+			el.classList.remove('filtered-out')
+			filteredIn += 1
+		} else {
+			el.classList.add('filtered-out')
+		}
+	}
+
+	sumamryEl.textContent = `${filteredIn} syscalls`
+}
+
+function handleFilterTableEvent(e) {
+	filterTable(e.target.value)
+}
+
 function toggleCollapseColumn(e) {
 	if (updateInProgress)
 		return
@@ -516,6 +543,7 @@ function toggleCompactSignature() {
 	localStorage.setItem('compactSignature', compactSignature)
 	// Could be optimized... but I could also not care less for now
 	fillTable(currentSyscallTable, realTag(arch, bits, abi, tag))
+	filterTable(filterNameEl.value)
 }
 
 async function update(pushHistoryState) {
@@ -677,6 +705,7 @@ async function setup() {
 	compactSigToggleEl.addEventListener('click', toggleCompactSignature)
 	tableEl.querySelectorAll('th.sortable').forEach(el => el.addEventListener('click', sortTable))
 	tableEl.querySelectorAll('th > .collapse-toggle').forEach(el => el.addEventListener('click', toggleCollapseColumn))
+	filterNameEl.addEventListener('input', handleFilterTableEvent)
 	window.addEventListener('popstate', historyPopStateHandler)
 }