lucos_search_component 1.0.50 → 1.0.52

package/dist/index.js

@@ -5646,7 +5646,7 @@ var tomSelectStylesheet = "/**\n * tom-select.css (v2.5.2)\n * Copyright (c) con
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude-types'];
+		return ['data-api-key','data-types','data-exclude-types','data-no-lang'];
 	}
 	constructor() {
 		super();
@@ -5794,12 +5794,20 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!selector) throw new Error("Can't find select element in lucos-search");
 		selector.setAttribute("multiple", "multiple");
 		new TomSelect(selector, {
+			...(component.isLanguageMode ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
 			valueField: 'id',
 			labelField: 'pref_label',
 			searchField: [],
 			closeAfterSelect: true,
 			highlight: false, // Will use typesense's hightlight (as it can consider other fields)
 			load: async function(query, callback) {
+				// Cancel any in-flight search so stale responses don't overwrite newer results
+				if (component._searchAbortController) {
+					component._searchAbortController.abort();
+				}
+				const abortController = new AbortController();
+				component._searchAbortController = abortController;
+
 				errorMessage.setAttribute('hidden', '');
 				const queryParams = new URLSearchParams({
 					q: query,
@@ -5810,10 +5818,17 @@ class LucosSearchComponent extends HTMLSpanElement {
 					queryParams.set("filter_by",`type:![${component.getAttribute("data-exclude_types")}]`);
 				}
 				try {
-					const results = await component.searchRequest(queryParams);
+					const results = await component.searchRequest(queryParams, abortController.signal);
+					if (abortController.signal.aborted) return;
 					this.clearOptions();
+					if (component.isLanguageMode) {
+						results.forEach(r => { if (!r.lang_family) r.lang_family = 'qli'; });
+					}
+					const noLang = component.noLangOption;
+					if (noLang) results.unshift(noLang);
 					callback(results);
 				} catch(err) {
+					if (err.name === 'AbortError') return;
 					callback([]);
 					errorMessage.textContent = err.userMessage || 'Search is currently unavailable — please try again later.';
 					errorMessage.removeAttribute('hidden');
@@ -5831,20 +5846,42 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
+				const noLang = component.noLangOption;
+				if (noLang) this.addOption(noLang);
 			},
 			// On startup, update any existing options with latest data from search
 			onInitialize: async function() {
 				const ids = Object.keys(this.options);
+				const noLang = component.noLangOption;
+				// Always make the no-lang option available for new selections
+				if (noLang) this.addOption(noLang);
+				// In language mode, fetch families and register option groups
+				if (component.isLanguageMode) {
+					const families = await component.getLanguageFamilies();
+					this.addOptionGroup('qli', { label: 'Language Isolate' });
+					families.forEach(family => {
+						this.addOptionGroup(family.code, { label: family.label });
+					});
+				}
 				if (ids.length < 1) return;
-				const searchParams = new URLSearchParams({
-					q: '*',
-					filter_by: `id:[${ids.join(",")}]`,
-					per_page: ids.length,
-				});
-				const results = await component.searchRequest(searchParams);
-				results.forEach(result => {
-					this.updateOption(result.id, result);
-				});
+				// Fetch real options from Typesense, excluding the synthetic no-lang option
+				const idsToFetch = noLang ? ids.filter(id => id !== noLang.id) : ids;
+				if (idsToFetch.length > 0) {
+					const searchParams = new URLSearchParams({
+						q: '*',
+						filter_by: `id:[${idsToFetch.join(",")}]`,
+						per_page: idsToFetch.length,
+					});
+					const results = await component.searchRequest(searchParams);
+					results.forEach(result => {
+						if (component.isLanguageMode && !result.lang_family) result.lang_family = 'qli';
+						this.updateOption(result.id, result);
+					});
+				}
+				// Update any pre-selected no-lang option with the synthetic data
+				if (noLang && ids.includes(noLang.id)) {
+					this.updateOption(noLang.id, noLang);
+				}
 			},
 			onItemSelect: function (item) {
 				// Tom-select prevents clicking on link in an item to work as normal, so force it here
@@ -5874,24 +5911,77 @@ class LucosSearchComponent extends HTMLSpanElement {
 			shadow.append(selector.nextElementSibling);
 		}
 	}
-	async searchRequest(searchParams) {
+	get noLangOption() {
+		const label = this.getAttribute("data-no-lang");
+		if (!label) return null;
+		return {
+			id: 'https://eolas.l42.eu/metadata/language/zxx/',
+			pref_label: label,
+			type: 'Language',
+			category: 'Anthropological',
+			labels: [],
+			highlight: {},
+		};
+	}
+	get isLanguageMode() {
+		const types = this.getAttribute("data-types");
+		if (!types) return false;
+		return types.split(",").map(t => t.trim()).includes("Language");
+	}
+	async getLanguageFamilies() {
+		if (this._langFamilies) return this._langFamilies;
+		const key = this.getAttribute("data-api-key");
+		if (!key) { this._langFamilies = []; return []; }
+		const searchParams = new URLSearchParams({
+			q: '*',
+			filter_by: 'type:=Language Family',
+			query_by: 'pref_label',
+			include_fields: 'id,pref_label',
+			sort_by: 'pref_label:asc',
+			enable_highlight_v1: false,
+			per_page: 250,
+		});
+		try {
+			const response = await fetch("https://arachne.l42.eu/search?" + searchParams.toString(), {
+				headers: { 'X-TYPESENSE-API-KEY': key },
+				signal: AbortSignal.timeout(8000),
+			});
+			if (!response.ok) { this._langFamilies = []; return []; }
+			const data = await response.json();
+			this._langFamilies = data.hits.map(hit => ({
+				// The lang_family field on Language documents in Typesense stores the last
+				// path segment of the Language Family URI (e.g. "gmw" for West Germanic at
+				// http://id.loc.gov/vocabulary/iso639-5/gmw). filter(Boolean) strips any
+				// trailing slash. This is consistent with lucos-lang's family code extraction.
+				code: hit.document.id.split("/").filter(Boolean).pop(),
+				label: hit.document.pref_label,
+			}));
+		} catch (_) {
+			this._langFamilies = [];
+		}
+		return this._langFamilies;
+	}
+	async searchRequest(searchParams, abortSignal = null) {
 		const key = this.getAttribute("data-api-key");
 		if (!key) throw new Error("No `data-api-key` attribute set on `lucos-search` component");
 		searchParams.set('query_by', "pref_label,labels,description,lyrics");
 		searchParams.set('query_by_weights', "10,8,3,1");
 		searchParams.set('sort_by', "_text_match:desc,pref_label:asc");
 		searchParams.set('prioritize_num_matching_fields', false);
-		searchParams.set('include_fields', "id,pref_label,type,category,labels");
+		searchParams.set('include_fields', "id,pref_label,type,category,labels,lang_family");
 		searchParams.set('enable_highlight_v1', false);
 		searchParams.set('highlight_start_tag', '<span class="highlight">');
 		searchParams.set('highlight_end_tag', '</span>');
+		const timeoutSignal = AbortSignal.timeout(8000);
+		const signal = abortSignal ? AbortSignal.any([timeoutSignal, abortSignal]) : timeoutSignal;
 		let response;
 		try {
 			response = await fetch("https://arachne.l42.eu/search?"+searchParams.toString(), {
 				headers: { 'X-TYPESENSE-API-KEY': key },
-				signal: AbortSignal.timeout(8000),
+				signal,
 			});
 		} catch(err) {
+			if (err.name === 'AbortError') throw err; // Pass through so caller can detect cancellation
 			const userMessage = err.name === 'TimeoutError'
 				? 'Search timed out — please try again later.'
 				: 'Search is currently unavailable — please try again later.';

package/example/index.html

@@ -13,6 +13,9 @@
 			<option selected>https://media-metadata.l42.eu/tracks/13713</option>
 			<option selected>https://eolas.l42.eu/metadata/language/ain/</option>
 		</select></span>
+		<label for="search8">Languages grouped by family:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language"><select id="search8"></select></span>
+		<label for="search6">Languages with no-lang option:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-no-lang="No Language"><select id="search6"></select></span>
+		<label for="search7">Languages with no-lang pre-selected:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-no-lang="No Language"><select id="search7" multiple><option selected>https://eolas.l42.eu/metadata/language/zxx/</option></select></span>
 		<label for="search5">More than 10:</label>
 		<span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-exclude_types="Track"><select id="search5" multiple>
 			<option selected>https://eolas.l42.eu/metadata/place/125/</option>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucos_search_component",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",

package/web-components/lucos-search.js

@@ -3,7 +3,7 @@ import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude-types'];
+		return ['data-api-key','data-types','data-exclude-types','data-no-lang'];
 	}
 	constructor() {
 		super();
@@ -151,12 +151,20 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!selector) throw new Error("Can't find select element in lucos-search");
 		selector.setAttribute("multiple", "multiple");
 		new TomSelect(selector, {
+			...(component.isLanguageMode ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
 			valueField: 'id',
 			labelField: 'pref_label',
 			searchField: [],
 			closeAfterSelect: true,
 			highlight: false, // Will use typesense's hightlight (as it can consider other fields)
 			load: async function(query, callback) {
+				// Cancel any in-flight search so stale responses don't overwrite newer results
+				if (component._searchAbortController) {
+					component._searchAbortController.abort();
+				}
+				const abortController = new AbortController();
+				component._searchAbortController = abortController;
+
 				errorMessage.setAttribute('hidden', '');
 				const queryParams = new URLSearchParams({
 					q: query,
@@ -167,10 +175,17 @@ class LucosSearchComponent extends HTMLSpanElement {
 					queryParams.set("filter_by",`type:![${component.getAttribute("data-exclude_types")}]`);
 				}
 				try {
-					const results = await component.searchRequest(queryParams);
+					const results = await component.searchRequest(queryParams, abortController.signal);
+					if (abortController.signal.aborted) return;
 					this.clearOptions();
+					if (component.isLanguageMode) {
+						results.forEach(r => { if (!r.lang_family) r.lang_family = 'qli'; });
+					}
+					const noLang = component.noLangOption;
+					if (noLang) results.unshift(noLang);
 					callback(results);
 				} catch(err) {
+					if (err.name === 'AbortError') return;
 					callback([]);
 					errorMessage.textContent = err.userMessage || 'Search is currently unavailable — please try again later.';
 					errorMessage.removeAttribute('hidden');
@@ -188,20 +203,42 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
+				const noLang = component.noLangOption;
+				if (noLang) this.addOption(noLang);
 			},
 			// On startup, update any existing options with latest data from search
 			onInitialize: async function() {
 				const ids = Object.keys(this.options);
+				const noLang = component.noLangOption;
+				// Always make the no-lang option available for new selections
+				if (noLang) this.addOption(noLang);
+				// In language mode, fetch families and register option groups
+				if (component.isLanguageMode) {
+					const families = await component.getLanguageFamilies();
+					this.addOptionGroup('qli', { label: 'Language Isolate' });
+					families.forEach(family => {
+						this.addOptionGroup(family.code, { label: family.label });
+					});
+				}
 				if (ids.length < 1) return;
-				const searchParams = new URLSearchParams({
-					q: '*',
-					filter_by: `id:[${ids.join(",")}]`,
-					per_page: ids.length,
-				});
-				const results = await component.searchRequest(searchParams);
-				results.forEach(result => {
-					this.updateOption(result.id, result);
-				});
+				// Fetch real options from Typesense, excluding the synthetic no-lang option
+				const idsToFetch = noLang ? ids.filter(id => id !== noLang.id) : ids;
+				if (idsToFetch.length > 0) {
+					const searchParams = new URLSearchParams({
+						q: '*',
+						filter_by: `id:[${idsToFetch.join(",")}]`,
+						per_page: idsToFetch.length,
+					});
+					const results = await component.searchRequest(searchParams);
+					results.forEach(result => {
+						if (component.isLanguageMode && !result.lang_family) result.lang_family = 'qli';
+						this.updateOption(result.id, result);
+					});
+				}
+				// Update any pre-selected no-lang option with the synthetic data
+				if (noLang && ids.includes(noLang.id)) {
+					this.updateOption(noLang.id, noLang);
+				}
 			},
 			onItemSelect: function (item) {
 				// Tom-select prevents clicking on link in an item to work as normal, so force it here
@@ -231,24 +268,77 @@ class LucosSearchComponent extends HTMLSpanElement {
 			shadow.append(selector.nextElementSibling);
 		}
 	}
-	async searchRequest(searchParams) {
+	get noLangOption() {
+		const label = this.getAttribute("data-no-lang");
+		if (!label) return null;
+		return {
+			id: 'https://eolas.l42.eu/metadata/language/zxx/',
+			pref_label: label,
+			type: 'Language',
+			category: 'Anthropological',
+			labels: [],
+			highlight: {},
+		};
+	}
+	get isLanguageMode() {
+		const types = this.getAttribute("data-types");
+		if (!types) return false;
+		return types.split(",").map(t => t.trim()).includes("Language");
+	}
+	async getLanguageFamilies() {
+		if (this._langFamilies) return this._langFamilies;
+		const key = this.getAttribute("data-api-key");
+		if (!key) { this._langFamilies = []; return []; }
+		const searchParams = new URLSearchParams({
+			q: '*',
+			filter_by: 'type:=Language Family',
+			query_by: 'pref_label',
+			include_fields: 'id,pref_label',
+			sort_by: 'pref_label:asc',
+			enable_highlight_v1: false,
+			per_page: 250,
+		});
+		try {
+			const response = await fetch("https://arachne.l42.eu/search?" + searchParams.toString(), {
+				headers: { 'X-TYPESENSE-API-KEY': key },
+				signal: AbortSignal.timeout(8000),
+			});
+			if (!response.ok) { this._langFamilies = []; return []; }
+			const data = await response.json();
+			this._langFamilies = data.hits.map(hit => ({
+				// The lang_family field on Language documents in Typesense stores the last
+				// path segment of the Language Family URI (e.g. "gmw" for West Germanic at
+				// http://id.loc.gov/vocabulary/iso639-5/gmw). filter(Boolean) strips any
+				// trailing slash. This is consistent with lucos-lang's family code extraction.
+				code: hit.document.id.split("/").filter(Boolean).pop(),
+				label: hit.document.pref_label,
+			}));
+		} catch (_) {
+			this._langFamilies = [];
+		}
+		return this._langFamilies;
+	}
+	async searchRequest(searchParams, abortSignal = null) {
 		const key = this.getAttribute("data-api-key");
 		if (!key) throw new Error("No `data-api-key` attribute set on `lucos-search` component");
 		searchParams.set('query_by', "pref_label,labels,description,lyrics");
 		searchParams.set('query_by_weights', "10,8,3,1");
 		searchParams.set('sort_by', "_text_match:desc,pref_label:asc");
 		searchParams.set('prioritize_num_matching_fields', false);
-		searchParams.set('include_fields', "id,pref_label,type,category,labels");
+		searchParams.set('include_fields', "id,pref_label,type,category,labels,lang_family");
 		searchParams.set('enable_highlight_v1', false);
 		searchParams.set('highlight_start_tag', '<span class="highlight">')
 		searchParams.set('highlight_end_tag', '</span>');
+		const timeoutSignal = AbortSignal.timeout(8000);
+		const signal = abortSignal ? AbortSignal.any([timeoutSignal, abortSignal]) : timeoutSignal;
 		let response;
 		try {
 			response = await fetch("https://arachne.l42.eu/search?"+searchParams.toString(), {
 				headers: { 'X-TYPESENSE-API-KEY': key },
-				signal: AbortSignal.timeout(8000),
+				signal,
 			});
 		} catch(err) {
+			if (err.name === 'AbortError') throw err; // Pass through so caller can detect cancellation
 			const userMessage = err.name === 'TimeoutError'
 				? 'Search timed out — please try again later.'
 				: 'Search is currently unavailable — please try again later.';