lucos_search_component 2.0.35 → 3.0.0

package/README.md

@@ -32,7 +32,7 @@ The following attributes can be added to the lucos-search span:
 * **data-api-key** \[required\] — a valid API key for the production instance of [lucos_arachne](https://github.com/lucas42/lucos_arachne), as generated by [lucos_creds](https://github.com/lucas42/lucos_creds).
 * **data-types** — A comma separated list of item types to search for (defaults to all types).
 * **data-exclude-types** — A comma separated list of item types to exclude from the search (ignored if `data-types` is set).
-* **data-no-lang** — The name to give for a "no language" option. If set, a special entry with the URI `https://eolas.l42.eu/metadata/language/zxx/` is added to the top of the list. Only meaningful when `data-types="Language"`.
+* **data-label-override-zxx** — Override the displayed label for the `https://eolas.l42.eu/metadata/language/zxx/` entry in both the dropdown and selected lozenge. Has no effect on whether `zxx` appears in the list — that depends on whether `zxx` is present in the search index. Only meaningful when `data-types="Language"`.
 * **data-common** — A comma separated list of item URIs to pin in a "Common" group at the top of the list, above the normal results. Only meaningful when `data-types="Language"`.
 * **data-preload** — If present, all options are loaded upfront rather than fetched on search. Suitable for small, finite datasets such as languages.
 
@@ -44,7 +44,7 @@ To use `lucos-search` as a language selector (the replacement for the removed `l
 <span is="lucos-search"
     data-api-key="..."
     data-types="Language"
-    data-no-lang="Instrumental / No Language"
+    data-label-override-zxx="Instrumental / 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/"
     data-preload>
     <select multiple>
@@ -62,7 +62,7 @@ Selected options use the language's full URI as their value (e.g. `https://eolas
 Key differences:
 * **Values are URIs, not ISO codes.** `lucos-lang` stored ISO 639 codes (e.g. `en`, `ga`). `lucos-search` stores full URIs (e.g. `https://eolas.l42.eu/metadata/language/en/`). Update any stored values and form handling accordingly.
 * **`data-common` takes URIs, not codes.** Pass full language URIs instead of ISO codes.
-* **`data-no-lang` works the same way.** The "no language" entry is added with URI `https://eolas.l42.eu/metadata/language/zxx/`.
+* **Use `data-label-override-zxx` instead of `data-no-lang`.** To show a custom label for the `zxx` (No linguistic content) entry, set `data-label-override-zxx="My Label"`. The `data-no-lang` attribute has been removed in v2.0.0.
 
 ## Manual Testing
 

package/dist/index.js

@@ -5657,7 +5657,7 @@ var tomSelectStylesheet = "/**\n * tom-select.css (v2.6.0)\n * Copyright (c) con
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude-types','data-no-lang','data-common','data-preload'];
+		return ['data-api-key','data-types','data-exclude-types','data-label-override-zxx','data-common','data-preload'];
 	}
 	constructor() {
 		super();
@@ -5821,8 +5821,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 
 				errorMessage.setAttribute('hidden', '');
 				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
-				const noLang = component.noLangOption;
-				const noLangIsCommon = noLang && commonSet.has(noLang.id);
 				// When preloaded, filter locally instead of hitting Typesense
 				if (component._preloadedOptions) {
 					const q = query.toLowerCase();
@@ -5843,7 +5841,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 							: component._commonOptions;
 						filteredCommon.forEach(opt => this.addOption(opt));
 					}
-					if (noLang && !noLangIsCommon) results.unshift(noLang);
 					callback(results);
 					return;
 				}
@@ -5871,8 +5868,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 							: component._commonOptions;
 						filteredCommon.forEach(opt => this.addOption(opt));
 					}
-					// Don't add noLang as standalone if it's already covered by a common item
-					if (noLang && !noLangIsCommon) results.unshift(noLang);
 					callback(results);
 				} catch(err) {
 					if (err.name === 'AbortError') return;
@@ -5894,13 +5889,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 			onFocus: function() {
 				this.clearOptions();
 				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
-				// 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;
-				// Skip noLang if its ID is already a common item (would be silently discarded as a duplicate)
-				if (noLang && !commonSet.has(noLang.id)) this.addOption(noLang);
 				// Re-add preloaded options (excluding common items which are shown separately)
 				if (component._preloadedOptions) {
 					component._preloadedOptions
@@ -5911,7 +5902,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 			// On startup, update any existing options with latest data from search
 			onInitialize: async function() {
 				const ids = Object.keys(this.options);
-				const noLang = component.noLangOption;
 				// Fetch and register common items (x-common group goes first)
 				const commonIds = component.commonIds;
 				if (commonIds.length > 0) {
@@ -5923,15 +5913,8 @@ class LucosSearchComponent extends HTMLSpanElement {
 					});
 					const commonResults = await component.searchRequest(commonParams);
 					component._commonOptions = commonResults.map(r => ({...r, lang_family: 'x-common'}));
-					// noLang (zxx) doesn't exist in Typesense, so add it synthetically if it's listed in data-common
-					if (noLang && component.commonIds.includes(noLang.id)) {
-						component._commonOptions.push({...noLang, 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();
@@ -5955,9 +5938,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 					preloaded.filter(r => !commonSet.has(r.id)).forEach(r => this.addOption(r));
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding synthetic/preloaded items
+				// Fetch real options from Typesense, excluding common/preloaded items
 				const preloadedIds = component._preloadedOptions ? new Set(component._preloadedOptions.map(r => r.id)) : new Set();
-				const excludeIds = new Set([...(noLang ? [noLang.id] : []), ...commonIds, ...preloadedIds]);
+				const excludeIds = new Set([...commonIds, ...preloadedIds]);
 				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
@@ -5970,10 +5953,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 						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);
-				}
 				// Update any pre-selected common items with fresh data
 				if (component._commonOptions) {
 					component._commonOptions.forEach(opt => {
@@ -5993,14 +5972,20 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			render:{
 				option: function(data, escape) {
-					let label = escape(data.pref_label);
+					const zxxOverride = component.getAttribute("data-label-override-zxx");
+					const displayLabel = (zxxOverride && data.id === 'https://eolas.l42.eu/metadata/language/zxx/')
+						? zxxOverride
+						: data.pref_label;
+					let label = escape(displayLabel);
 					let alt_label = "";
-					if (data.highlight.pref_label) {
-						label = data.highlight.pref_label.snippet;
-					} else if (data.highlight.labels) {
-						const matched_label = data.highlight.labels.find(l => l.matched_tokens.length > 0);
-						if (matched_label) {
-							alt_label = ` <span class="alt-label">(${matched_label.snippet})</span>`;
+					if (!zxxOverride || data.id !== 'https://eolas.l42.eu/metadata/language/zxx/') {
+						if (data.highlight.pref_label) {
+							label = data.highlight.pref_label.snippet;
+						} else if (data.highlight.labels) {
+							const matched_label = data.highlight.labels.find(l => l.matched_tokens.length > 0);
+							if (matched_label) {
+								alt_label = ` <span class="alt-label">(${matched_label.snippet})</span>`;
+							}
 						}
 					}
 					label = label.replace(` (${data.type})`,""); // No need to include any type disambiguation in label, as the type lozenge is shown when multiple types are configured
@@ -6010,7 +5995,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 					return `<div>${label}${alt_label}${typeLozenge}</div>`;
 				},
 				item: function(data, escape) {
-					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(data.pref_label)}</a></div>`;
+					const zxxOverride = component.getAttribute("data-label-override-zxx");
+					const displayLabel = (zxxOverride && data.id === 'https://eolas.l42.eu/metadata/language/zxx/')
+						? zxxOverride
+						: data.pref_label;
+					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(displayLabel)}</a></div>`;
 				},
 			},
 		});
@@ -6049,18 +6038,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 			this._formdataHandler = null;
 		}
 	}
-	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;

package/example/index.html

@@ -15,10 +15,10 @@
 		</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="search10">Languages preloaded:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-preload><select id="search10"></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="search11">Languages with no-lang, common and preload:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-no-lang="Instrumental / 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/" data-preload><select id="search11" multiple ></select></span>
+		<label for="search9">Languages with common pinned:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="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 label override for zxx:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="No Language"><select id="search6"></select></span>
+		<label for="search7">Languages with zxx pre-selected:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="No Language"><select id="search7" multiple><option selected>https://eolas.l42.eu/metadata/language/zxx/</option></select></span>
+		<label for="search11">Languages with label override, common and preload:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-label-override-zxx="Instrumental / 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/" data-preload><select id="search11" multiple ></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": "2.0.35",
+  "version": "3.0.0",
   "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','data-common','data-preload'];
+		return ['data-api-key','data-types','data-exclude-types','data-label-override-zxx','data-common','data-preload'];
 	}
 	constructor() {
 		super();
@@ -167,8 +167,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 
 				errorMessage.setAttribute('hidden', '');
 				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
-				const noLang = component.noLangOption;
-				const noLangIsCommon = noLang && commonSet.has(noLang.id);
 				// When preloaded, filter locally instead of hitting Typesense
 				if (component._preloadedOptions) {
 					const q = query.toLowerCase();
@@ -189,7 +187,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 							: component._commonOptions;
 						filteredCommon.forEach(opt => this.addOption(opt));
 					}
-					if (noLang && !noLangIsCommon) results.unshift(noLang);
 					callback(results);
 					return;
 				}
@@ -217,8 +214,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 							: component._commonOptions;
 						filteredCommon.forEach(opt => this.addOption(opt));
 					}
-					// Don't add noLang as standalone if it's already covered by a common item
-					if (noLang && !noLangIsCommon) results.unshift(noLang);
 					callback(results);
 				} catch(err) {
 					if (err.name === 'AbortError') return;
@@ -240,13 +235,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 			onFocus: function() {
 				this.clearOptions();
 				const commonSet = new Set((component._commonOptions || []).map(o => o.id));
-				// 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;
-				// Skip noLang if its ID is already a common item (would be silently discarded as a duplicate)
-				if (noLang && !commonSet.has(noLang.id)) this.addOption(noLang);
 				// Re-add preloaded options (excluding common items which are shown separately)
 				if (component._preloadedOptions) {
 					component._preloadedOptions
@@ -257,7 +248,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 			// On startup, update any existing options with latest data from search
 			onInitialize: async function() {
 				const ids = Object.keys(this.options);
-				const noLang = component.noLangOption;
 				// Fetch and register common items (x-common group goes first)
 				const commonIds = component.commonIds;
 				if (commonIds.length > 0) {
@@ -269,15 +259,8 @@ class LucosSearchComponent extends HTMLSpanElement {
 					});
 					const commonResults = await component.searchRequest(commonParams);
 					component._commonOptions = commonResults.map(r => ({...r, lang_family: 'x-common'}));
-					// noLang (zxx) doesn't exist in Typesense, so add it synthetically if it's listed in data-common
-					if (noLang && component.commonIds.includes(noLang.id)) {
-						component._commonOptions.push({...noLang, 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();
@@ -301,9 +284,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 					preloaded.filter(r => !commonSet.has(r.id)).forEach(r => this.addOption(r));
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding synthetic/preloaded items
+				// Fetch real options from Typesense, excluding common/preloaded items
 				const preloadedIds = component._preloadedOptions ? new Set(component._preloadedOptions.map(r => r.id)) : new Set();
-				const excludeIds = new Set([...(noLang ? [noLang.id] : []), ...commonIds, ...preloadedIds]);
+				const excludeIds = new Set([...commonIds, ...preloadedIds]);
 				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
@@ -316,10 +299,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 						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);
-				}
 				// Update any pre-selected common items with fresh data
 				if (component._commonOptions) {
 					component._commonOptions.forEach(opt => {
@@ -339,14 +318,20 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			render:{
 				option: function(data, escape) {
-					let label = escape(data.pref_label);
+					const zxxOverride = component.getAttribute("data-label-override-zxx");
+					const displayLabel = (zxxOverride && data.id === 'https://eolas.l42.eu/metadata/language/zxx/')
+						? zxxOverride
+						: data.pref_label;
+					let label = escape(displayLabel);
 					let alt_label = "";
-					if (data.highlight.pref_label) {
-						label = data.highlight.pref_label.snippet;
-					} else if (data.highlight.labels) {
-						const matched_label = data.highlight.labels.find(l => l.matched_tokens.length > 0);
-						if (matched_label) {
-							alt_label = ` <span class="alt-label">(${matched_label.snippet})</span>`;
+					if (!zxxOverride || data.id !== 'https://eolas.l42.eu/metadata/language/zxx/') {
+						if (data.highlight.pref_label) {
+							label = data.highlight.pref_label.snippet;
+						} else if (data.highlight.labels) {
+							const matched_label = data.highlight.labels.find(l => l.matched_tokens.length > 0);
+							if (matched_label) {
+								alt_label = ` <span class="alt-label">(${matched_label.snippet})</span>`;
+							}
 						}
 					}
 					label = label.replace(` (${data.type})`,""); // No need to include any type disambiguation in label, as the type lozenge is shown when multiple types are configured
@@ -356,7 +341,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 					return `<div>${label}${alt_label}${typeLozenge}</div>`;
 				},
 				item: function(data, escape) {
-					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(data.pref_label)}</a></div>`;
+					const zxxOverride = component.getAttribute("data-label-override-zxx");
+					const displayLabel = (zxxOverride && data.id === 'https://eolas.l42.eu/metadata/language/zxx/')
+						? zxxOverride
+						: data.pref_label;
+					return `<div class="lozenge" data-type="${escape(data.type)}" data-category="${escape(data.category)}"><a href="${data.id}" target="_blank">${escape(displayLabel)}</a></div>`;
 				},
 			},
 		});
@@ -395,18 +384,6 @@ class LucosSearchComponent extends HTMLSpanElement {
 			this._formdataHandler = null;
 		}
 	}
-	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;