lucos_search_component 1.0.51 → 1.0.53

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','data-no-lang'];
+		return ['data-api-key','data-types','data-exclude-types','data-no-lang','data-common'];
 	}
 	constructor() {
 		super();
@@ -5794,13 +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 } : {}),
+			...(component.isLanguageMode || component.getAttribute("data-common") ? { 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,
@@ -5811,15 +5818,25 @@ class LucosSearchComponent extends HTMLSpanElement {
 					queryParams.set("filter_by",`type:![${component.getAttribute("data-exclude_types")}]`);
 				}
 				try {
-					const results = await component.searchRequest(queryParams);
+					let 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'; });
 					}
+					// Remove common items from results to avoid duplication (they're always shown separately)
+					if (component._commonOptions) {
+						const commonIds = new Set(component._commonOptions.map(o => o.id));
+						results = results.filter(r => !commonIds.has(r.id));
+						component._commonOptions.forEach(opt => this.addOption(opt));
+					}
 					const noLang = component.noLangOption;
-					if (noLang) results.unshift(noLang);
+					// Don't add noLang as standalone if it's already covered by a common item
+					const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+					if (noLang && !noLangIsCommon) 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');
@@ -5837,15 +5854,35 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
+				// Re-add common items first so they own any shared IDs (e.g. zxx in both data-no-lang and data-common)
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
 				const noLang = component.noLangOption;
-				if (noLang) this.addOption(noLang);
+				// Skip noLang if its ID is already a common item (would be silently discarded as a duplicate)
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) 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);
+				// Fetch and register common items (x-common group goes first)
+				const commonIds = component.commonIds;
+				if (commonIds.length > 0) {
+					this.addOptionGroup('x-common', { label: 'Common' });
+					const commonParams = new URLSearchParams({
+						q: '*',
+						filter_by: `id:[${commonIds.join(",")}]`,
+						per_page: commonIds.length,
+					});
+					const commonResults = await component.searchRequest(commonParams);
+					component._commonOptions = commonResults.map(r => ({...r, lang_family: 'x-common'}));
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
+				// Add noLang option now (after common items) so we can check for overlap
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) this.addOption(noLang);
 				// In language mode, fetch families and register option groups
 				if (component.isLanguageMode) {
 					const families = await component.getLanguageFamilies();
@@ -5855,8 +5892,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 					});
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding the synthetic no-lang option
-				const idsToFetch = noLang ? ids.filter(id => id !== noLang.id) : ids;
+				// Fetch real options from Typesense, excluding the synthetic no-lang option and common items
+				const excludeIds = new Set([...(noLang ? [noLang.id] : []), ...commonIds]);
+				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
 						q: '*',
@@ -5873,6 +5911,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				if (noLang && ids.includes(noLang.id)) {
 					this.updateOption(noLang.id, noLang);
 				}
+				// Update any pre-selected common items with fresh data
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => {
+						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+					});
+				}
 			},
 			onItemSelect: function (item) {
 				// Tom-select prevents clicking on link in an item to work as normal, so force it here
@@ -5919,6 +5963,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!types) return false;
 		return types.split(",").map(t => t.trim()).includes("Language");
 	}
+	get commonIds() {
+		const common = this.getAttribute("data-common");
+		if (!common) return [];
+		return common.split(",").map(s => s.trim()).filter(Boolean);
+	}
 	async getLanguageFamilies() {
 		if (this._langFamilies) return this._langFamilies;
 		const key = this.getAttribute("data-api-key");
@@ -5952,7 +6001,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 		}
 		return this._langFamilies;
 	}
-	async searchRequest(searchParams) {
+	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");
@@ -5963,13 +6012,16 @@ class LucosSearchComponent extends HTMLSpanElement {
 		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

@@ -14,6 +14,7 @@
 			<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="search9">Languages with common pinned:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-no-lang="No Language" data-common="https://eolas.l42.eu/metadata/language/en/,https://eolas.l42.eu/metadata/language/ga/,https://eolas.l42.eu/metadata/language/zxx/"><select id="search9"></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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucos_search_component",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "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','data-no-lang'];
+		return ['data-api-key','data-types','data-exclude-types','data-no-lang','data-common'];
 	}
 	constructor() {
 		super();
@@ -151,13 +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 } : {}),
+			...(component.isLanguageMode || component.getAttribute("data-common") ? { 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,
@@ -168,15 +175,25 @@ class LucosSearchComponent extends HTMLSpanElement {
 					queryParams.set("filter_by",`type:![${component.getAttribute("data-exclude_types")}]`);
 				}
 				try {
-					const results = await component.searchRequest(queryParams);
+					let 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'; });
 					}
+					// Remove common items from results to avoid duplication (they're always shown separately)
+					if (component._commonOptions) {
+						const commonIds = new Set(component._commonOptions.map(o => o.id));
+						results = results.filter(r => !commonIds.has(r.id));
+						component._commonOptions.forEach(opt => this.addOption(opt));
+					}
 					const noLang = component.noLangOption;
-					if (noLang) results.unshift(noLang);
+					// Don't add noLang as standalone if it's already covered by a common item
+					const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+					if (noLang && !noLangIsCommon) 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');
@@ -194,15 +211,35 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
+				// Re-add common items first so they own any shared IDs (e.g. zxx in both data-no-lang and data-common)
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
 				const noLang = component.noLangOption;
-				if (noLang) this.addOption(noLang);
+				// Skip noLang if its ID is already a common item (would be silently discarded as a duplicate)
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) 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);
+				// Fetch and register common items (x-common group goes first)
+				const commonIds = component.commonIds;
+				if (commonIds.length > 0) {
+					this.addOptionGroup('x-common', { label: 'Common' });
+					const commonParams = new URLSearchParams({
+						q: '*',
+						filter_by: `id:[${commonIds.join(",")}]`,
+						per_page: commonIds.length,
+					});
+					const commonResults = await component.searchRequest(commonParams);
+					component._commonOptions = commonResults.map(r => ({...r, lang_family: 'x-common'}));
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
+				// Add noLang option now (after common items) so we can check for overlap
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) this.addOption(noLang);
 				// In language mode, fetch families and register option groups
 				if (component.isLanguageMode) {
 					const families = await component.getLanguageFamilies();
@@ -212,8 +249,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 					});
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding the synthetic no-lang option
-				const idsToFetch = noLang ? ids.filter(id => id !== noLang.id) : ids;
+				// Fetch real options from Typesense, excluding the synthetic no-lang option and common items
+				const excludeIds = new Set([...(noLang ? [noLang.id] : []), ...commonIds]);
+				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
 						q: '*',
@@ -230,6 +268,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				if (noLang && ids.includes(noLang.id)) {
 					this.updateOption(noLang.id, noLang);
 				}
+				// Update any pre-selected common items with fresh data
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => {
+						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+					});
+				}
 			},
 			onItemSelect: function (item) {
 				// Tom-select prevents clicking on link in an item to work as normal, so force it here
@@ -276,6 +320,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!types) return false;
 		return types.split(",").map(t => t.trim()).includes("Language");
 	}
+	get commonIds() {
+		const common = this.getAttribute("data-common");
+		if (!common) return [];
+		return common.split(",").map(s => s.trim()).filter(Boolean);
+	}
 	async getLanguageFamilies() {
 		if (this._langFamilies) return this._langFamilies;
 		const key = this.getAttribute("data-api-key");
@@ -309,7 +358,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 		}
 		return this._langFamilies;
 	}
-	async searchRequest(searchParams) {
+	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");
@@ -320,13 +369,16 @@ class LucosSearchComponent extends HTMLSpanElement {
 		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.';