add fuzzy search using wfa

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();
 }