Further autocomplete testing.

js/browser/autocomplete.ts

@@ -0,0 +1,75 @@
+import * as sparql from "../sparql";
+import * as fuse from "../fuse";
+import { activeState } from "./view";
+import { autocomplete } from "@algolia/autocomplete-js";
+import "@algolia/autocomplete-theme-classic";
+
+function debouncePromise(fn, time) {
+	let timerId = null;
+	let resolveFns = [];
+	let busy = false;
+
+	return function debounced(...args) {
+		//if (timerId !== null) console.log("clearing", timerId);
+		clearTimeout(timerId);
+
+		timerId = setTimeout(() => {
+			if (busy) return;
+			busy = true;
+			resolveFns.forEach((resolve) => resolve(fn(...args)));
+			resolveFns = [];
+			busy = false;
+		}, time);
+
+		return new Promise((resolve) => resolveFns.push(resolve));
+	};
+}
+
+const debounced = debouncePromise((items) => Promise.resolve(items), 300);
+
+function uriType(uri) {
+	const node = activeState().cy.getElementById(uri)[0];
+	if (!node) return 3;
+	if (node.hasClass("hidden") && !node.hasClass("filtered")) return 1;
+	if (node.hasClass("filtered")) return 2;
+	return 0;
+}
+
+function fuseSource(query) {
+	return {
+		sourceId: "fuse",
+		templates: {
+			item({ item, components }) {
+				const i = item.item;
+				const uri = i.uri;
+				const type = uriType(uri);
+				//console.log(i);
+				const graphLink = `<a class="search-class${type}" href="javascript:window.presentUri('${uri}');void(0)">${uri.replace(sparql.SNIK_PREFIX, "")}</a>`;
+				const lodViewLink = `<a class="search-class${type}" href="${uri}" target="_blank">Description</a>`;
+				return graphLink + " " + lodViewLink;
+				//return JSON.stringify(item.item);
+				//return item.name + " " + item.description + " " + item.foo;
+			},
+			noResults() {
+				return "No results.";
+			},
+		},
+		getItems() {
+			console.log("getting fuse results for query " + query);
+			return fuse.search(query); // async
+			//return items;
+			/*return [
+            { name: "john", description: "the john of johns", foo: "bar" },
+            { name: "jill", description: "the jill of jills", foo: "mak" },
+        ];*/
+		},
+	};
+}
+
+autocomplete({
+	container: "#autocomplete",
+	placeholder: "Search for products",
+	getSources({ query }) {
+		return debounced([fuseSource(query)]);
+	},
+});

js/browser/search.ts

@@ -9,14 +9,14 @@ import { activeState } from "./view";
 import MicroModal from "micromodal";
 import { debounce } from "throttle-debounce";
 import log from "loglevel";
-import { autocomplete } from "@algolia/autocomplete-js";
-import "@algolia/autocomplete-theme-classic";
+import "./autocomplete";
 
 // disable bif:contains search because it does not even accept all non-space strings and the performance hit is negliglible
 // BIF contains also breaks space insensitiveness, which we require and also check in the unit test
 // const USE_BIF_CONTAINS = false;
 export default class Search {
 	resultNodes = [];
+
 	/** Add search functionality to the form.
 	 *  @param {HTMLFormElement} form a form with a search field named "query"
 	 *  @return {void} */
@@ -33,36 +33,7 @@ export default class Search {
 				console.log(query);
 			})
 		);
-		console.log("setting up autocomplete");
-		autocomplete({
-			container: "#autocomplete",
-			placeholder: "Search for products",
-			getSources({ query }) {
-				console.log("getting sources for query " + query);
-				return [
-					{
-						sourceId: "fuse",
-						templates: {
-							item({ item, components }) {
-								const i = item.item;
-								console.log(i);
-								return i.l[0] + ": " + i.def;
-								//return JSON.stringify(item.item);
-								//return item.name + " " + item.description + " " + item.foo;
-							},
-						},
-						async getItems() {
-							const items = await fuse.search(query);
-							return items;
-							/*return [
-								{ name: "john", description: "the john of johns", foo: "bar" },
-								{ name: "jill", description: "the jill of jills", foo: "mak" },
-							];*/
-						},
-					},
-				];
-			},
-		});
+
 		log.debug("search initialized");
 	}
 	/**

js/fuse.ts

@@ -13,6 +13,7 @@ interface Item {
 	def?: string;
 }
 let index: Fuse<Item> = null;
+let indexPromise: Promise<Array<Item>> = null;
 
 const options = {
 	shouldSort: true,
@@ -37,7 +38,7 @@ export async function createIndex() {
 	console.groupCollapsed("Create Fuse.js index");
 	const indexTimer = timer("Create Fuse search index");
 
-	log.debug("Create Fuse Search Index with searchCloseMatch = " + config.searchCloseMatch);
+	log.info("Create Fuse Search Index with searchCloseMatch = " + config.searchCloseMatch + ". This may take a few seconds.");
 	const graphs = [...config.allSubOntologies, ...config.helperGraphs];
 	const sparqlQuery = `select
   ?c as ?uri
@@ -79,9 +80,10 @@ export async function createIndex() {
 @return {Promise<string[]>} the class URIs found.
 */
 export async function search(userQuery) {
-	if (!index) {
-		await createIndex();
+	if (!indexPromise) {
+		indexPromise = createIndex();
 	}
+	await indexPromise;
 	const result = index.search(userQuery);
 	return result;
 }