lucos_search_component 0.0.13 → 0.0.15

package/dist/index.js

@@ -5683,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;
 			}
@@ -5693,6 +5709,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 			.ts-dropdown {
 				margin: 0;
 			}
+			.lozenge a {
+				color: inherit;
+				text-decoration: none;
+			}
 		`;
 		shadow.appendChild(mainStyle);
 
@@ -5704,6 +5724,8 @@ class LucosSearchComponent extends HTMLSpanElement {
 			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,
@@ -5744,12 +5766,27 @@ 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>`;
 				},
 			},
 		});
@@ -5764,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

@@ -85,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;
 			}
@@ -95,6 +111,10 @@ class LucosSearchComponent extends HTMLSpanElement {
 			.ts-dropdown {
 				margin: 0;
 			}
+			.lozenge a {
+				color: inherit;
+				text-decoration: none;
+			}
 		`;
 		shadow.appendChild(mainStyle);
 
@@ -106,6 +126,8 @@ class LucosSearchComponent extends HTMLSpanElement {
 			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,
@@ -146,12 +168,27 @@ 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>`;
 				},
 			},
 		});
@@ -166,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.13",
+  "version": "0.0.15",
   "description": "Web Component for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",