fix(supersearch): Implement the invalid type (LWS-287) (#1196)

libris · Jan 8, 2025 · b1f87dc · b1f87dc
1 parent 1504e1a
commit b1f87dc
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 7 deletions.
diff --git a/lxl-web/src/lib/styles/lxlquery.css b/lxl-web/src/lib/styles/lxlquery.css
@@ -29,8 +29,9 @@
 }
 
 .invalid > .lxl-qualifier-key {
-	text-decoration: underline 2px solid;
-	text-decoration-color: rgba(255, 0, 0, 0.326);
+	text-decoration: underline 1px solid;
+	text-decoration-color: rgba(255, 0, 0, 0.75);
+	text-decoration-style: wavy;
 }
 
 .atomic {

diff --git a/lxl-web/src/lib/types/search.ts b/lxl-web/src/lib/types/search.ts
@@ -74,6 +74,7 @@ export interface DisplayMapping {
 	label?: string;
 	operator: keyof typeof SearchOperators;
 	property?: string;
+	invalid?: string;
 }
 
 export interface PartialCollectionView {

diff --git a/lxl-web/src/lib/utils/getLabelsFromMapping.svelte.ts b/lxl-web/src/lib/utils/getLabelsFromMapping.svelte.ts
@@ -13,6 +13,7 @@ function getLabelFromMappings(
 
 	const keyLabel = suggestLabels.keyLabel || pageLabels.keyLabel;
 	const valueLabel = suggestLabels.valueLabel || pageLabels.valueLabel;
+	const invalid = suggestLabels.invalid || pageLabels.invalid;
 	// only page data have 'up' links we can use
 	const removeLink = pageLabels.keyLabel ? pageLabels.removeLink : undefined;
 
@@ -22,7 +23,7 @@ function getLabelFromMappings(
 		prevSuggestMapping = suggestMapping;
 	}
 
-	return { keyLabel, valueLabel, removeLink };
+	return { keyLabel, valueLabel, removeLink, invalid };
 }
 
 function iterateMapping(
@@ -33,6 +34,7 @@ function iterateMapping(
 	let keyLabel: string | undefined;
 	let valueLabel: string | undefined;
 	let removeLink: string | undefined;
+	let invalid: boolean = false;
 
 	if (mapping && Array.isArray(mapping)) {
 		_iterate(mapping);
@@ -52,11 +54,13 @@ function iterateMapping(
 						// only show remove btn for pills that can't be edited
 						removeLink = el.up?.['@id'];
 					}
+				} else if (el.invalid === key) {
+					invalid = true;
 				}
 			});
 		}
 	}
-	return { keyLabel, valueLabel, removeLink };
+	return { keyLabel, valueLabel, removeLink, invalid };
 }
 
 export default getLabelFromMappings;
diff --git a/lxl-web/src/lib/utils/search.ts b/lxl-web/src/lib/utils/search.ts
@@ -117,6 +117,7 @@ export function displayMappings(
 						m.property?.['@id']?.replace('https://id.kb.se/vocab/', '') ||
 						'', //TODO replace with something better
 					operator,
+					...(m.property?.['@type'] === '_Invalid' && { invalid: m.property?.label }),
 					...('up' in m && { up: replacePath(m.up as Link, usePath) })
 				} as DisplayMapping;
 			} else if (operator && operator in m && Array.isArray(m[operator])) {

diff --git a/packages/supersearch/README.md b/packages/supersearch/README.md
@@ -35,7 +35,7 @@ To use `supersearch` in a non-Svelte project ...
 Supersearch also exports a `lxlQualifierPlugin` that can be used (passed to the extensions prop) if you want atomic, stylable, removable, labeled pills from some key-value pairs in your editor. This requires:
 
 - Your language exporting `Qualifier` nodes consisting of `QualifierKey`, `QualifierOperator` and `QualifierValue` (i.e `key:value`).
-- Your pass a function of type `GetLabelFunction`, returning labels to be displayed and an optional remove link.
+- Passing a function of type `GetLabelFunction`, returning labels to be displayed, an optional remove link and an optional `invalid` flag, which enables styling of invalid queries.
 
 ## Developing
 

diff --git a/packages/supersearch/src/lib/extensions/lxlQualifierPlugin/index.ts b/packages/supersearch/src/lib/extensions/lxlQualifierPlugin/index.ts
@@ -26,6 +26,7 @@ export type GetLabelFunction = (
 	keyLabel?: string;
 	valueLabel?: string;
 	removeLink?: string;
+	invalid?: boolean;
 };
 
 class QualifierWidget extends WidgetType {
@@ -93,7 +94,7 @@ function lxlQualifierPlugin(getLabelFn?: GetLabelFunction) {
 						const valueNode = node.node.getChild('QualifierValue');
 						const value = valueNode ? doc.slice(valueNode?.from, valueNode?.to) : undefined;
 
-						const { keyLabel, valueLabel, removeLink } = getLabelFn?.(key, value) || {};
+						const { keyLabel, valueLabel, removeLink, invalid } = getLabelFn?.(key, value) || {};
 
 						// Add qualifier widget
 						if (keyLabel) {
@@ -113,7 +114,7 @@ function lxlQualifierPlugin(getLabelFn?: GetLabelFunction) {
 							const decorationRangeFrom = node.from;
 							const decorationRangeTo = valueLabel ? node.to : operatorNode?.to;
 							widgets.push(qualifierDecoration.range(decorationRangeFrom, decorationRangeTo));
-						} else {
+						} else if (invalid) {
 							// Add invalid key mark decoration
 							const qualifierMark = Decoration.mark({
 								class: 'invalid',