LWS-218: Display spelling suggestions (#1098)

* LWS-218: Display spelling suggestion
libris · Sep 9, 2024 · a698c5c · a698c5c
1 parent 2e626d9
commit a698c5c
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 36 deletions.
diff --git a/lxl-web/src/lib/components/find/SearchRelated.svelte b/lxl-web/src/lib/components/find/SearchRelated.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import BiSearch from '~icons/bi/search';
+	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
-	import type { Link } from '$lib/utils/xl';
+	import type { Link } from '$lib/types/xl';
+	import BiSearch from '~icons/bi/search';
 
 	export let view: Link;
 
@@ -16,9 +17,15 @@
 			_i = '*';
 		}
 	}
+
+	afterNavigate(({ to }) => {
+		if (to?.url) {
+			_i = new URL(to.url).searchParams.get('_i')?.trim() || '';
+		}
+	});
 </script>
 
-<form action="" on:submit={handleSubmit} class="flex w-full gap-2 lg:max-w-xl">
+<form action="" on:submit={handleSubmit} class="flex w-full gap-2 md:max-w-2xl">
 	<label for="search-related" class="sr-only">{$page.data.t('search.relatedSearchLabel')}</label>
 	<input
 		class="flex-1"

diff --git a/lxl-web/src/lib/components/find/SearchResult.svelte b/lxl-web/src/lib/components/find/SearchResult.svelte
@@ -125,28 +125,39 @@
 				</a>
 				<span class="hits pt-4 text-secondary md:pt-0" role="status" data-testid="result-info">
 					{#if numHits && numHits > 0}
-						{#if numHits > searchResult.itemsPerPage}
+						<span class="hits-count">
+							{#if numHits > searchResult.itemsPerPage}
+								<span class="text-3-cond-bold">
+									{(searchResult.itemOffset + 1).toLocaleString($page.data.locale)}
+									-
+									{Math.min(
+										numHits,
+										searchResult.itemOffset + searchResult.itemsPerPage
+									).toLocaleString($page.data.locale)}
+								</span>
+								{$page.data.t('search.hitsOf')}
+							{/if}
 							<span class="text-3-cond-bold">
-								{(searchResult.itemOffset + 1).toLocaleString($page.data.locale)}
-								-
-								{Math.min(
-									numHits,
-									searchResult.itemOffset + searchResult.itemsPerPage
-								).toLocaleString($page.data.locale)}
+								{numHits.toLocaleString($page.data.locale)}
 							</span>
-							{$page.data.t('search.hitsOf')}
-						{/if}
-						<span class="text-3-cond-bold">
-							{numHits.toLocaleString($page.data.locale)}
+							{#if $page.data.instances}
+								{numHits == 1 ? $page.data.t('search.relatedOne') : $page.data.t('search.related')}
+							{/if}
+							{numHits == 1 ? $page.data.t('search.hitsOne') : $page.data.t('search.hits')}
 						</span>
-						{#if $page.data.instances}
-							{numHits == 1
-								? $page.data.t('search.relatedOne')
-								: $page.data.t('search.related')}
-						{/if}
-						{numHits == 1 ? $page.data.t('search.hitsOne') : $page.data.t('search.hits')}
 					{:else}
-						{$page.data.t('search.noResults')}
+						<span class="hits-count">{$page.data.t('search.noResults')}</span>
+					{/if}
+					{#if searchResult._spell.length > 0}
+						<span class="suggest">
+							{#each searchResult._spell as suggestion (suggestion.label)}
+								{$page.data.t('search.didYouMean')}
+								<a href={suggestion.view['@id'].replace('_spell=true', '_spell=false')}>
+									<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+									{@html suggestion.labelHtml}</a
+								>?
+							{/each}
+						</span>
 					{/if}
 				</span>
 				<div class="search-related flex justify-start">
@@ -190,7 +201,6 @@
 	</div>
 {/if}
 
-
 <style lang="postcss">
 	.toolbar {
 		@apply grid;
@@ -204,6 +214,12 @@
 		@apply gap-4;
 	}
 
+	.toolbar:has(.suggest) {
+		& .hits-count::after {
+			content: '.';
+		}
+	}
+
 	.find-layout {
 		grid-template-areas: 'filters results';
 	}
@@ -276,11 +292,4 @@
 		@apply border-primary pb-3.5;
 		border-bottom-width: 0.125rem;
 	}
-
-	@media screen and (min-width: theme('screens.lg')) {
-		.toolbar {
-			grid-template-areas: 'hits search-related sort-select';
-			grid-template-columns: auto minmax(auto, theme('screens.sm')) auto;
-		}
-	}
 </style>
diff --git a/lxl-web/src/lib/i18n/locales/en.js b/lxl-web/src/lib/i18n/locales/en.js
@@ -92,7 +92,8 @@ export default {
 		showDetails: 'Show more',
 		hideDetails: 'Show less',
 		occursAs: 'as',
-		relatedSearchLabel: 'Search the results'
+		relatedSearchLabel: 'Search the results',
+		didYouMean: 'Did you mean'
 	},
 	sort: {
 		sort: 'Sort',

diff --git a/lxl-web/src/lib/i18n/locales/sv.js b/lxl-web/src/lib/i18n/locales/sv.js
@@ -91,7 +91,8 @@ export default {
 		showDetails: 'Visa mer',
 		hideDetails: 'Visa mindre',
 		occursAs: 'förekommer som',
-		relatedSearchLabel: 'Sök i resultaten'
+		relatedSearchLabel: 'Sök i resultaten',
+		didYouMean: 'Menade du'
 	},
 	sort: {
 		sort: 'Sortera',

diff --git a/lxl-web/src/lib/types/search.ts b/lxl-web/src/lib/types/search.ts
@@ -15,6 +15,7 @@ export interface SearchResult {
 	items: SearchResultItem[];
 	facetGroups: FacetGroup[];
 	predicates: MultiSelectFacet[];
+	_spell: SpellingSuggestion[] | [];
 }
 
 export interface SearchResultItem {
@@ -57,6 +58,12 @@ export interface MultiSelectFacet extends Facet {
 	selected: boolean;
 }
 
+interface SpellingSuggestion {
+	label: string;
+	labelHtml: string;
+	view: Link;
+}
+
 export interface DisplayMapping {
 	'@id'?: string;
 	display?: DisplayDecorated;
@@ -87,6 +94,7 @@ export interface PartialCollectionView {
 		_predicates: Observation[];
 		_boolFilters?: Observation[];
 	};
+	_spell: SpellingSuggestion[] | [];
 }
 
 interface Slice {

diff --git a/lxl-web/src/lib/utils/addDefaultSearchParams.test.ts b/lxl-web/src/lib/utils/addDefaultSearchParams.test.ts
@@ -8,7 +8,8 @@ describe('addDefaultSearchParams', () => {
 				['_q', '*'],
 				['_limit', '20'],
 				['_offset', '0'],
-				['_sort', '']
+				['_sort', ''],
+				['_spell', 'true']
 			])
 		);
 	});
@@ -18,7 +19,8 @@ describe('addDefaultSearchParams', () => {
 				['_q', 'test'],
 				['_limit', '20'],
 				['_offset', '0'],
-				['_sort', '']
+				['_sort', ''],
+				['_spell', 'true']
 			])
 		);
 	});
@@ -28,7 +30,8 @@ describe('addDefaultSearchParams', () => {
 				['_offset', '30'],
 				['_q', '*'],
 				['_limit', '20'],
-				['_sort', '']
+				['_sort', ''],
+				['_spell', 'true']
 			])
 		);
 	});

diff --git a/lxl-web/src/lib/utils/addDefaultSearchParams.ts b/lxl-web/src/lib/utils/addDefaultSearchParams.ts
@@ -16,6 +16,9 @@ function addDefaultSearchParams(searchParams: URLSearchParams): URLSearchParams
 	if (!params.has('_sort')) {
 		params.set('_sort', '');
 	}
+	if (!params.has('_spell')) {
+		params.set('_spell', 'true');
+	}
 
 	return params;
 }

diff --git a/lxl-web/src/lib/utils/search.ts b/lxl-web/src/lib/utils/search.ts
@@ -63,7 +63,15 @@ export async function asResult(
 			)
 		})),
 		facetGroups: displayFacetGroups(view, displayUtil, locale, translate, usePath),
-		predicates: displayPredicates(view, displayUtil, locale, usePath)
+		predicates: displayPredicates(view, displayUtil, locale, usePath),
+		_spell: view._spell
+			? view._spell.map((el) => {
+					return {
+						...el,
+						...{ view: replacePath(el.view, usePath) }
+					};
+				})
+			: []
 	};
 }
 

diff --git a/lxl-web/tests/index.spec.ts b/lxl-web/tests/index.spec.ts
@@ -34,5 +34,7 @@ test('url is populated with correct searchparams', async ({ page }) => {
 	await page.getByTestId('main-search').click();
 	await page.getByTestId('main-search').fill('somephrase');
 	await page.getByTestId('main-search').press('Enter');
-	await expect(page).toHaveURL(/_q=somephrase&_limit=20&_offset=0&_sort=&_i=somephrase/);
+	await expect(page).toHaveURL(
+		/_q=somephrase&_limit=20&_offset=0&_sort=&_spell=true&_i=somephrase/
+	);
 });