Merge pull request 'Add fuzzy search using WFA' (#2) from wfa-fuzzy-search into main

Reviewed-on: #2

css/form.css

@@ -52,4 +52,4 @@ input[type="radio"] {
 
 div[draggable="true"] {
 	cursor: grab;
-}
+}

css/style.css

@@ -111,4 +111,16 @@ hr, * {
 
 .spacer {
 	min-height: 1em;
+}
+
+.w3-select, select {
+	padding: 8px;
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+	appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E:root%7Bcolor:%23fff%7D@media (prefers-color-scheme:light)%7B:root%7Bcolor:%23000%7D%7D%3C/style%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.707 14.707a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 12.586l4.293-4.293a1 1 0 111.414 1.414l-5 5z' fill='currentColor'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 8px top 50%;
+	background-size: 1em auto;
 }

index.html

@@ -12,6 +12,7 @@
 		<link rel="stylesheet" href="css/form.css">
 		<script src="scripts/index.js" type="module"></script>
 		<script src="scripts/instance.js" type="module"></script>
+		<script src="modules/wfa.js" type="module"></script>
 		<style>
 			#instance-container > div {
 				border-bottom: 1px solid white;

modules/wfa.js

@@ -0,0 +1,328 @@
+class WavefrontComponent {
+	constructor () {
+		this.lo = [0]; // lo for each wavefront
+		this.hi = [0]; // hi for each wavefront
+		this.W = []; // wavefront diag distance for each wavefront
+		this.A = []; // compact CIGAR for backtrace
+	}
+
+	// get value for wavefront=score, diag=k
+	get_val (score, k) {
+		if (this.W[score] !== undefined && this.W[score][k] !== undefined) {
+			return this.W[score][k];
+		}
+		else {
+			return NaN;
+		}
+	}
+
+	// set value for wavefront=score, diag=k
+	set_val (score, k, val) {
+		if (this.W[score]) {
+			this.W[score][k] = val;
+		}
+		else {
+			this.W[score] = [];
+			this.W[score][k] = val;
+		}
+	}
+
+	// get alignment traceback
+	get_traceback (score, k) {
+		if (this.A[score] !== undefined && this.A[score][k] !== undefined) {
+			return this.A[score][k];
+		}
+		else {
+			return undefined;
+		}
+	}
+
+	// set alignment traceback
+	set_traceback (score, k, traceback) {
+		if (this.A[score]) {
+			this.A[score][k] = traceback;
+		}
+		else {
+			this.A[score] = [];
+			this.A[score][k] = traceback;
+		}
+	}
+
+	// get hi for wavefront=score
+	get_hi (score) {
+		const hi = this.hi[score];
+		return isNaN(hi) ? 0 : hi;
+	}
+
+	// set hi for wavefront=score
+	set_hi (score, hi) {
+		this.hi[score] = hi;
+	}
+
+	// get lo for wavefront=score
+	get_lo (score) {
+		const lo = this.lo[score];
+		return isNaN(lo) ? 0 : lo;
+	}
+
+	// set lo for wavefront=score
+	set_lo (score, lo) {
+		this.lo[score] = lo;
+	}
+
+	// string representation of all wavefronts
+	toString () {
+		const traceback_str = ["OI", "EI", "OD", "ED", "SB", "IN", "DL", "EN"];
+		let s = "<";
+		let min_lo = Infinity;
+		let max_hi = -Infinity;
+		// get the min lo and max hi values across all wavefronts
+		for (let i = 0; i < this.W.length; i++) {
+			const lo = this.lo[i];
+			const hi = this.hi[i];
+			if (lo < min_lo) {
+				min_lo = lo;
+			}
+			if (hi > max_hi) {
+				max_hi = hi;
+			}
+		}
+		// print out two headers, one for wavefront and one for traceback
+		for (let k = min_lo; k <= max_hi; k++) {
+			s += FormatNumberLength(k, 2);
+			if (k < max_hi) {
+				s += "|";
+			}
+		}
+		s += ">\t<";
+		for (let k = min_lo; k <= max_hi; k++) {
+			s += FormatNumberLength(k, 2);
+			if (k < max_hi) {
+				s += "|";
+			}
+		}
+		s += ">\n";
+		// for each wavefront
+		for (let i = 0; i < this.W.length; i++) {
+			s += "[";
+			const lo = this.lo[i];
+			const hi = this.hi[i];
+			// print out the wavefront matrix
+			for (let k = min_lo; k <= max_hi; k++) {
+				if (this.W[i] !== undefined && this.W[i][k] !== undefined && !isNaN(this.W[i][k])) {
+					s += FormatNumberLength(this.W[i][k], 2);
+				}
+				else if (k < lo || k > hi) {
+					s += "--";
+				}
+				else {
+					s += "  ";
+				}
+				if (k < max_hi) {
+					s += "|";
+				}
+			}
+			s += "]\t[";
+			// print out the traceback matrix
+			for (let k = min_lo; k <= max_hi; k++) {
+				if (this.A[i] !== undefined && this.A[i][k] !== undefined) {
+					s += traceback_str[this.A[i][k].toString()];
+				}
+				else if (k < lo || k > hi) {
+					s += "--";
+				}
+				else {
+					s += "  ";
+				}
+				if (k < max_hi) {
+					s += "|";
+				}
+			}
+			s += "]\n";
+		}
+		return s;
+	}
+}
+
+const traceback = {
+	OpenIns: 0,
+	ExtdIns: 1,
+	OpenDel: 2,
+	ExtdDel: 3,
+	Sub: 4,
+	Ins: 5,
+	Del: 6,
+	End: 7
+};
+
+function FormatNumberLength (num, length) {
+	let r = "" + num;
+	while (r.length < length) {
+		r = " " + r;
+	}
+	return r;
+}
+
+function min (args) {
+	args.forEach((el, idx, arr) => {
+		arr[idx] = isNaN(el) ? Infinity : el;
+	});
+	const min = Math.min.apply(Math, args);
+	return min === Infinity ? NaN : min;
+}
+
+function max (args) {
+	args.forEach((el, idx, arr) => {
+		arr[idx] = isNaN(el) ? -Infinity : el;
+	});
+	const max = Math.max.apply(Math, args);
+	return max === -Infinity ? NaN : max;
+}
+
+function argmax (args) {
+	const val = max(args);
+	return args.indexOf(val);
+}
+
+export default function wf_align (s1, s2, penalties) {
+	const n = s1.length;
+	const m = s2.length;
+	const A_k = m - n;
+	const A_offset = m;
+	let score = 0;
+	const M = new WavefrontComponent();
+	M.set_val(0, 0, 0);
+	M.set_hi(0, 0);
+	M.set_lo(0, 0);
+	M.set_traceback(0, 0, traceback.End);
+	const I = new WavefrontComponent();
+	const D = new WavefrontComponent();
+	while (true) {
+		wf_extend(M, s1, n, s2, m, score);
+		if (M.get_val(score, A_k) >= A_offset) {
+			break;
+		}
+		score++;
+		wf_next(M, I, D, score, penalties);
+	}
+	return wf_backtrace(M, I, D, score, penalties, A_k, A_offset);
+}
+
+function wf_extend (M, s1, n, s2, m, score) {
+	const lo = M.get_lo(score);
+	const hi = M.get_hi(score);
+	for (let k = lo; k <= hi; k++) {
+		let v = M.get_val(score, k) - k;
+		let h = M.get_val(score, k);
+		if (isNaN(v) || isNaN(h)) {
+			continue;
+		}
+		while (s1[v] === s2[h]) {
+			M.set_val(score, k, M.get_val(score, k) + 1);
+			v++;
+			h++;
+			if (v > n || h > m) {
+				break;
+			}
+		}
+	}
+}
+
+function wf_next (M, I, D, score, penalties) {
+	const x = penalties.x;
+	const o = penalties.o;
+	const e = penalties.e;
+	const lo = min([M.get_lo(score - x), M.get_lo(score - o - e), I.get_lo(score - e), D.get_lo(score - e)]) - 1;
+	const hi = max([M.get_hi(score - x), M.get_hi(score - o - e), I.get_hi(score - e), D.get_hi(score - e)]) + 1;
+	M.set_hi(score, hi);
+	I.set_hi(score, hi);
+	D.set_hi(score, hi);
+	M.set_lo(score, lo);
+	I.set_lo(score, lo);
+	D.set_lo(score, lo);
+	for (let k = lo; k <= hi; k++) {
+		I.set_val(score, k, max([
+			M.get_val(score - o - e, k - 1),
+			I.get_val(score - e, k - 1)
+		]) + 1);
+		I.set_traceback(score, k, [traceback.OpenIns, traceback.ExtdIns][argmax([
+			M.get_val(score - o - e, k - 1),
+			I.get_val(score - e, k - 1)
+		])]);
+		D.set_val(score, k, max([
+			M.get_val(score - o - e, k + 1),
+			D.get_val(score - e, k + 1)
+		]));
+		D.set_traceback(score, k, [traceback.OpenDel, traceback.ExtdDel][argmax([
+			M.get_val(score - o - e, k + 1),
+			D.get_val(score - e, k + 1)
+		])]);
+		M.set_val(score, k, max([
+			M.get_val(score - x, k) + 1,
+			I.get_val(score, k),
+			D.get_val(score, k)
+		]));
+		M.set_traceback(score, k, [traceback.Sub, traceback.Ins, traceback.Del][argmax([
+			M.get_val(score - x, k) + 1,
+			I.get_val(score, k),
+			D.get_val(score, k)
+		])]);
+	}
+}
+
+function wf_backtrace (M, I, D, score, penalties, A_k) {
+	const traceback_CIGAR = ["I", "I", "D", "D", "X", "", "", ""];
+	const x = penalties.x;
+	const o = penalties.o;
+	const e = penalties.e;
+	let CIGAR_rev = ""; // reversed CIGAR
+	let tb_s = score; // traceback score
+	let tb_k = A_k; // traceback diag k
+	let current_traceback = M.get_traceback(tb_s, tb_k);
+	let done = false;
+	while (!done) {
+		CIGAR_rev += traceback_CIGAR[current_traceback];
+		switch (current_traceback) {
+		case traceback.OpenIns:
+			tb_s = tb_s - o - e;
+			tb_k = tb_k - 1;
+			current_traceback = M.get_traceback(tb_s, tb_k);
+			break;
+		case traceback.ExtdIns:
+			tb_s = tb_s - e;
+			tb_k = tb_k - 1;
+			current_traceback = I.get_traceback(tb_s, tb_k);
+			break;
+		case traceback.OpenDel:
+			tb_s = tb_s - o - e;
+			tb_k = tb_k + 1;
+			current_traceback = M.get_traceback(tb_s, tb_k);
+			break;
+		case traceback.ExtdDel:
+			tb_s = tb_s - e;
+			tb_k = tb_k + 1;
+			current_traceback = D.get_traceback(tb_s, tb_k);
+			break;
+		case traceback.Sub:
+			tb_s = tb_s - x;
+			// tb_k = tb_k;
+			current_traceback = M.get_traceback(tb_s, tb_k);
+			break;
+		case traceback.Ins:
+			// tb_s = tb_s;
+			// tb_k = tb_k;
+			current_traceback = I.get_traceback(tb_s, tb_k);
+			break;
+		case traceback.Del:
+			// tb_s = tb_s;
+			// tb_k = tb_k;
+			current_traceback = D.get_traceback(tb_s, tb_k);
+			break;
+		case traceback.End:
+			done = true;
+			break;
+		}
+	}
+	const CIGAR = Array.from(CIGAR_rev).reverse().join("");
+	return { CIGAR, score };
+}

package.json

@@ -4,7 +4,7 @@
 	"description": "Front-end for ProxmoxAAS",
 	"type": "module",
 	"scripts": {
-		"lint": "html-validator --continue; stylelint --formatter verbose --fix **/*.css; DEBUG=eslint:cli-engine eslint --fix ."
+		"lint": "html-validator --continue; stylelint --formatter verbose --fix **/*.css; DEBUG=eslint:cli-engine eslint --fix scripts/"
 	},
 	"devDependencies": {
 		"eslint": "^8.43.0",

scripts/index.js

@@ -1,6 +1,7 @@
 import { requestPVE, requestAPI, goToPage, setTitleAndHeader } from "./utils.js";
 import { alert, dialog } from "./dialog.js";
 import { setupClientSync } from "./clientsync.js";
+import wf_align from "../modules/wfa.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
@@ -38,6 +39,11 @@ async function getInstances () {
 }
 
 async function populateInstances () {
+	let searchCriteria = localStorage.getItem("search-criteria");
+	if (!searchCriteria) {
+		searchCriteria = "fuzzy";
+		localStorage.setItem("search-criteria", "fuzzy");
+	}
 	const searchQuery = document.querySelector("#search").value || null;
 	let criteria;
 	if (!searchQuery) {
@@ -45,7 +51,7 @@ async function populateInstances () {
 			return (a.vmid > b.vmid) ? 1 : -1;
 		};
 	}
-	else {
+	else if (searchCriteria === "exact") {
 		criteria = (a, b) => {
 			const aInc = a.name.toLowerCase().includes(searchQuery.toLowerCase());
 			const bInc = b.name.toLowerCase().includes(searchQuery.toLowerCase());
@@ -63,6 +69,27 @@ async function populateInstances () {
 			}
 		};
 	}
+	else if (searchCriteria === "fuzzy") {
+		const penalties = {
+			m: 0,
+			x: 1,
+			o: 1,
+			e: 1
+		};
+		criteria = (a, b) => {
+			// lower is better
+			const aAlign = wf_align(a.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
+			const aScore = aAlign.score / a.name.length;
+			const bAlign = wf_align(b.name.toLowerCase(), searchQuery.toLowerCase(), penalties);
+			const bScore = bAlign.score / b.name.length;
+			if (aScore === bScore) {
+				return a.vmid > b.vmid ? 1 : -1;
+			}
+			else {
+				return aScore - bScore;
+			}
+		};
+	}
 	instances.sort(criteria);
 	const instanceContainer = document.querySelector("#instance-container");
 	instanceContainer.innerHTML = "";

scripts/settings.js

@@ -12,6 +12,10 @@ function init () {
 	if (rate) {
 		document.querySelector("#sync-rate").value = rate;
 	}
+	const search = localStorage.getItem("search-criteria");
+	if (search) {
+		document.querySelector(`#search-${search}`).checked = true;
+	}
 	document.querySelector("#settings").addEventListener("submit", handleSaveSettings, false);
 }
 
@@ -20,5 +24,6 @@ function handleSaveSettings (event) {
 	const form = new FormData(document.querySelector("#settings"));
 	localStorage.setItem("sync-scheme", form.get("sync-scheme"));
 	localStorage.setItem("sync-rate", form.get("sync-rate"));
+	localStorage.setItem("search-criteria", form.get("search-criteria"));
 	window.location.reload();
 }

settings.html

@@ -51,10 +51,10 @@
 						<h3>Synchronization Settings</h3>
 						<fieldset>
 							<legend>App Sync Method</legend>
-							<label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required><span>Always Sync</span></label>
+							<label><input class="w3-radio" type="radio" id="sync-always" name="sync-scheme" value="always" required>Always Sync</label>
 							<p>App will always periodically synchronize with Proxmox. High resource usage.</p>
 							<label><input class="w3-radio" type="radio" id="sync-hash" name="sync-scheme" value="hash" required>Check For Sync</label>
-							<p>App will periodically synchronize only if there have been change. Medium resource usage.</p>
+							<p>App will periodically check for updates and synchronize only if needed. Medium resource usage.</p>
 							<label><input class="w3-radio" type="radio" id="sync-interrupt" name="sync-scheme" value="interrupt" required>Sync When Needed</label>
 							<p>App will react to changes and synchronize when changes are made. Low resource usage.</p>
 						</fieldset>
@@ -65,6 +65,16 @@
 							</div>
 						</fieldset>
 					</div>
+					<div class="w3-card w3-padding">
+						<h3>Search Settings</h3>
+						<fieldset>
+							<legend>Instance Search Criteria</legend>
+							<label><input class="w3-radio" type="radio" id="search-exact" name="search-criteria" value="exact" required>Exact Match</label>
+							<p>Sorts by exact query match in instance name.</p>
+							<label><input class="w3-radio" type="radio" id="search-fuzzy" name="search-criteria" value="fuzzy" required>Fuzzy Match</label>
+							<p>Sorts by best matching to worst matching.</p>
+						</fieldset>
+					</div>
 					<div class="w3-container w3-center" id="form-actions">
 						<button class="w3-button w3-margin" id="save" type="submit">SAVE</button>
 					</div>