lucos_search_component 0.0.12 → 0.0.14

package/dist/index.js

@@ -5608,6 +5608,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 		const component = this;
 		const shadow = component.attachShadow({mode: 'open'});
 
+		{
+			const tomStyle = document.createElement('style');
+			tomStyle.textContent = tomSelectStylesheet;
+			shadow.appendChild(tomStyle);
+		}
+
 		const mainStyle = document.createElement('style');
 		mainStyle.textContent = `
 			.lozenge {
@@ -5677,6 +5683,22 @@ class LucosSearchComponent extends HTMLSpanElement {
 				--lozenge-border: #674800;
 				--lozenge-text: #352005;
 			}
+			.lozenge[data-type="Historical Event"] {
+				--lozenge-background: #740909;
+				--lozenge-border: #470202;
+			}
+			.lozenge[data-type="Number"] {
+				--lozenge-background: #0000ff;
+				--lozenge-border: #000083;
+			}
+			/** Temporal Types **/
+			.lozenge[data-type="Calendar"], .lozenge[data-type="Festival"], .lozenge[data-type="Month of Year"], .lozenge[data-type="Day of Week"] {
+				--lozenge-background: #fffc33;
+				--lozenge-border: #7f7e00;
+				--lozenge-text: #0f0f00;
+			}
+
+
 			.lozenge.active {
 				--lozenge-border: #b00;
 			}
@@ -5684,25 +5706,26 @@ class LucosSearchComponent extends HTMLSpanElement {
 				margin: 0 3px;
 				padding: 2px 6px;
 			}
+			.ts-dropdown {
+				margin: 0;
+			}
+			.lozenge a {
+				color: inherit;
+				text-decoration: none;
+			}
 		`;
 		shadow.appendChild(mainStyle);
 
-		// If webpack is configured with `css-loader` but not `style-loader`, include the tom-select stylesheet here
-		// (If `style-loader` is being used, the tom-select stylesheet will be handled by that)
-		{
-			const tomStyle = document.createElement('style');
-			tomStyle.textContent = tomSelectStylesheet;
-			shadow.appendChild(tomStyle);
-		}
 
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");
-		shadow.append(selector);
 		selector.setAttribute("multiple", "multiple");
 		new TomSelect(selector, {
 			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) {
 				const queryParams = new URLSearchParams({
 					q: query,
@@ -5743,15 +5766,33 @@ class LucosSearchComponent extends HTMLSpanElement {
 					this.updateOption(result.id, result);
 				});
 			},
+			onItemSelect: function (item) {
+				// Tom-select prevents clicking on link in an item to work as normal, so force it here
+				window.open(item.dataset.value, '_blank').focus();
+			},
 			render:{
 				option: function(data, escape) {
-					return `<div>${escape(data.pref_label)}<span class="type lozenge" data-type="${escape(data.type)}">${escape(data.type)}</span></div>`;
+					let label = escape(data.pref_label);
+					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>`;
+						}
+					}
+					label = label.replace(` (${data.type})`,""); // No need to include any type disambiguation in label, as types are always shown
+					return `<div>${label}${alt_label}<span class="type lozenge" data-type="${escape(data.type)}">${escape(data.type)}</span></div>`;
 				},
 				item: function(data, escape) {
-					return `<div class="lozenge" data-type="${escape(data.type)}">${escape(data.pref_label)}</div>`;
+					return `<div class="lozenge" data-type="${escape(data.type)}"><a href="${data.id}" target="_blank">${escape(data.pref_label)}</a></div>`;
 				},
 			},
 		});
+		if (selector.nextElementSibling) {
+			shadow.append(selector.nextElementSibling);
+		}
 	}
 	async searchRequest(searchParams) {
 		const key = this.getAttribute("data-api-key");
@@ -5760,7 +5801,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 		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");
+		searchParams.set('include_fields', "id,pref_label,type,labels");
+		searchParams.set('enable_highlight_v1', false);
+		searchParams.set('highlight_start_tag', '<span class="highlight">');
+		searchParams.set('highlight_end_tag', '</span>');
 		const response = await fetch("https://arachne.l42.eu/search?"+searchParams.toString(), {
 			headers: { 'X-TYPESENSE-API-KEY': key },
 			signal: AbortSignal.timeout(900),

package/index.js

@@ -10,6 +10,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 		const component = this;
 		const shadow = component.attachShadow({mode: 'open'});
 
+		if (tomSelectStylesheet) {
+			const tomStyle = document.createElement('style');
+			tomStyle.textContent = tomSelectStylesheet;
+			shadow.appendChild(tomStyle);
+		}
+
 		const mainStyle = document.createElement('style');
 		mainStyle.textContent = `
 			.lozenge {
@@ -79,6 +85,22 @@ class LucosSearchComponent extends HTMLSpanElement {
 				--lozenge-border: #674800;
 				--lozenge-text: #352005;
 			}
+			.lozenge[data-type="Historical Event"] {
+				--lozenge-background: #740909;
+				--lozenge-border: #470202;
+			}
+			.lozenge[data-type="Number"] {
+				--lozenge-background: #0000ff;
+				--lozenge-border: #000083;
+			}
+			/** Temporal Types **/
+			.lozenge[data-type="Calendar"], .lozenge[data-type="Festival"], .lozenge[data-type="Month of Year"], .lozenge[data-type="Day of Week"] {
+				--lozenge-background: #fffc33;
+				--lozenge-border: #7f7e00;
+				--lozenge-text: #0f0f00;
+			}
+
+
 			.lozenge.active {
 				--lozenge-border: #b00;
 			}
@@ -86,25 +108,26 @@ class LucosSearchComponent extends HTMLSpanElement {
 				margin: 0 3px;
 				padding: 2px 6px;
 			}
+			.ts-dropdown {
+				margin: 0;
+			}
+			.lozenge a {
+				color: inherit;
+				text-decoration: none;
+			}
 		`;
 		shadow.appendChild(mainStyle);
 
-		// If webpack is configured with `css-loader` but not `style-loader`, include the tom-select stylesheet here
-		// (If `style-loader` is being used, the tom-select stylesheet will be handled by that)
-		if (tomSelectStylesheet) {
-			const tomStyle = document.createElement('style');
-			tomStyle.textContent = tomSelectStylesheet;
-			shadow.appendChild(tomStyle);
-		}
 
 		const selector = component.querySelector("select");
 		if (!selector) throw new Error("Can't find select element in lucos-search");
-		shadow.append(selector);
 		selector.setAttribute("multiple", "multiple");
 		new TomSelect(selector, {
 			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) {
 				const queryParams = new URLSearchParams({
 					q: query,
@@ -145,15 +168,33 @@ class LucosSearchComponent extends HTMLSpanElement {
 					this.updateOption(result.id, result);
 				});
 			},
+			onItemSelect: function (item) {
+				// Tom-select prevents clicking on link in an item to work as normal, so force it here
+				window.open(item.dataset.value, '_blank').focus();
+			},
 			render:{
 				option: function(data, escape) {
-					return `<div>${escape(data.pref_label)}<span class="type lozenge" data-type="${escape(data.type)}">${escape(data.type)}</span></div>`;
+					let label = escape(data.pref_label);
+					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>`;
+						}
+					}
+					label = label.replace(` (${data.type})`,""); // No need to include any type disambiguation in label, as types are always shown
+					return `<div>${label}${alt_label}<span class="type lozenge" data-type="${escape(data.type)}">${escape(data.type)}</span></div>`;
 				},
 				item: function(data, escape) {
-					return `<div class="lozenge" data-type="${escape(data.type)}">${escape(data.pref_label)}</div>`;
+					return `<div class="lozenge" data-type="${escape(data.type)}"><a href="${data.id}" target="_blank">${escape(data.pref_label)}</a></div>`;
 				},
 			},
 		});
+		if (selector.nextElementSibling) {
+			shadow.append(selector.nextElementSibling);
+		}
 	}
 	async searchRequest(searchParams) {
 		const key = this.getAttribute("data-api-key");
@@ -162,7 +203,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 		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");
+		searchParams.set('include_fields', "id,pref_label,type,labels");
+		searchParams.set('enable_highlight_v1', false);
+		searchParams.set('highlight_start_tag', '<span class="highlight">')
+		searchParams.set('highlight_end_tag', '</span>');
 		const response = await fetch("https://arachne.l42.eu/search?"+searchParams.toString(), {
 			headers: { 'X-TYPESENSE-API-KEY': key },
 			signal: AbortSignal.timeout(900),

package/package.json

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