Fix keyword search (#252)

Author: Cito

src/app/metadata/features/metadata-browser-filter/metadata-browser-filter.html

@@ -19,23 +19,23 @@
   <mat-card appearance="outlined" class="p-3">
     <form (submit)="submit($event)">
       <mat-form-field
-        [class.mb-3]="!activeKeyword()"
+        [class.mb-3]="!activeQuery()"
         class="w-full [&_.mat-mdc-form-field-subscript-wrapper]:h-2"
         ><input type="submit" class="cdk-visually-hidden" aria-hidden="true" />
         <input
           type="search"
           matInput
-          placeholder="Enter any keyword or ID"
-          aria-label="Enter any keyword or ID"
+          placeholder="Enter any search terms"
+          aria-label="Enter any search terms"
           [matAutocomplete]="options"
-          [field]="searchForm.searchTerm"
+          [field]="searchForm.query"
         />
         <mat-icon matSuffix fontIcon="search"></mat-icon>
       </mat-form-field>
-      @if (activeKeyword()) {
+      @if (activeQuery()) {
         <mat-chip-set class="chip-set-tertiary mb-3">
           <mat-chip (removed)="clearSearchQuery()">
-            Keyword: {{ activeKeyword() }}
+            Search for: {{ activeQuery() }}
             <button
               matChipRemove
               data-umami-event="Metadata Browser Search Query Clear Clicked"
@@ -88,9 +88,9 @@
   hideSingleSelectionIndicator="true"
   (optionSelected)="onOptionSelected($event)"
 >
-  @if (searchModel().searchTerm) {
+  @if (searchModel().query) {
     <mat-option disabled="true">
-      Press Enter to filter for the keyword '{{ searchModel().searchTerm }}'
+      Press Enter to search for: {{ searchModel().query }}
     </mat-option>
     @for (facet of filteredFacets(); track facet.key) {
       <mat-optgroup [label]="facet.name" class="larger-optgroup-label">

src/app/metadata/features/metadata-browser-filter/metadata-browser-filter.spec.ts

@@ -62,7 +62,7 @@ describe('MetadataBrowserFilterComponent', () => {
   });
 
   it('should correctly filter by query', async () => {
-    const searchInput = screen.getByPlaceholderText('Enter any keyword or ID');
+    const searchInput = screen.getByPlaceholderText('Enter any search terms');
     const routerSpy = vitest.spyOn(router, 'navigate');
     await userEvent.type(searchInput, 'test query');
     await userEvent.type(searchInput, '{Enter}');
@@ -78,7 +78,7 @@ describe('MetadataBrowserFilterComponent', () => {
 
   it('should show the autocomplete options correctly', async () => {
     const searchInput = screen.getByRole('combobox', {
-      name: 'Enter any keyword or ID',
+      name: 'Enter any search terms',
     });
     searchInput.focus();
     await userEvent.keyboard('opt');
@@ -87,7 +87,7 @@ describe('MetadataBrowserFilterComponent', () => {
     const autoCompleteOptions = screen.getAllByRole('option');
     expect(autoCompleteOptions.length).toBe(9);
     expect(autoCompleteOptions[0].textContent.trim()).toBe(
-      "Press Enter to filter for the keyword 'opt'",
+      'Press Enter to search for: opt',
     );
     expect(autoCompleteOptions[1].ariaLabel!).toBe('Option 1 (62 results)');
   });

src/app/metadata/features/metadata-browser-filter/metadata-browser-filter.ts

@@ -72,8 +72,8 @@ export class MetadataBrowserFilterComponent implements OnInit {
   protected expandedPanels: { [facetKey: string]: boolean } = {};
 
   protected facetData = signal<FacetFilterSetting>({});
-  protected activeKeyword = signal<string>('');
-  protected searchModel = signal({ searchTerm: '' });
+  protected activeQuery = signal<string>('');
+  protected searchModel = signal({ query: '' });
   protected searchForm = form(this.searchModel);
 
   readonly paginated = this.#metadataSearch.paginated;
@@ -88,7 +88,7 @@ export class MetadataBrowserFilterComponent implements OnInit {
   );
 
   protected filteredFacets = computed(() => {
-    const filter = this.searchModel().searchTerm.toLocaleLowerCase();
+    const filter = this.searchModel().query.toLocaleLowerCase();
     return this.facetWithExpanded()
       .map((f) => {
         const selectedFacets = new Set(this.facetData()[f.key] ?? []);
@@ -142,7 +142,7 @@ export class MetadataBrowserFilterComponent implements OnInit {
    * On init, define the default values of the search variables
    */
   ngOnInit(): void {
-    this.#loadSearchTermsFromRoute();
+    this.#loadQueryFromRoute();
   }
 
   /**
@@ -174,7 +174,7 @@ export class MetadataBrowserFilterComponent implements OnInit {
    * Syncs the data between this component and the search service and initiates a new search.
    */
   #performSearch(): void {
-    this.#updateMetadataServiceSearchTermsAndRoute();
+    this.#updateMetadataServiceQueryAndRoute();
   }
 
   /**
@@ -199,29 +199,29 @@ export class MetadataBrowserFilterComponent implements OnInit {
   /**
    * Pushes the local filters, search term and page setup to the search service.
    */
-  async #updateMetadataServiceSearchTermsAndRoute(): Promise<void> {
+  async #updateMetadataServiceQueryAndRoute(): Promise<void> {
     await this.#router.navigate([], {
       relativeTo: this.#route,
       queryParams: {
         s: this.#skip() !== DEFAULT_SKIP_VALUE ? this.#skip() : undefined,
-        q: this.activeKeyword() !== '' ? this.activeKeyword() : undefined,
+        q: this.activeQuery() !== '' ? this.activeQuery() : undefined,
         f:
           Object.keys(this.facetData()).length !== 0
             ? encodeURIComponent(this.#facetDataToString(this.facetData()))
             : undefined,
         p: this.pageSize() !== DEFAULT_PAGE_SIZE ? this.pageSize() : undefined,
       },
     });
-    this.#loadSearchTermsFromRoute();
+    this.#loadQueryFromRoute();
   }
 
   /**
    * This function takes the current URL, determines the query parameters and sets them accordingly in the metadata search service.
    */
-  #loadSearchTermsFromRoute(): void {
+  #loadQueryFromRoute(): void {
     const { s, q, f, p } = this.#router.routerState.snapshot.root.queryParams;
     const pageSize = parseInt(p) || DEFAULT_PAGE_SIZE;
-    this.activeKeyword.set(q || '');
+    this.activeQuery.set(q || '');
     if (f) {
       const paramVals = this.#facetDataFromString(decodeURIComponent(f));
       if (paramVals) {
@@ -233,7 +233,7 @@ export class MetadataBrowserFilterComponent implements OnInit {
       this.#className,
       pageSize,
       skip,
-      this.searchModel().searchTerm,
+      this.activeQuery(),
       this.facetData(),
     );
   }
@@ -254,13 +254,13 @@ export class MetadataBrowserFilterComponent implements OnInit {
    */
   protected submit(event: SubmitEvent | Event): void {
     event.preventDefault();
-    const searchTerm = this.searchModel().searchTerm;
-    if (searchTerm !== this.activeKeyword()) {
-      this.activeKeyword.set(searchTerm);
+    const query = this.searchModel().query;
+    if (query !== this.activeQuery()) {
+      this.activeQuery.set(query);
       this.#metadataSearch.resetSkip();
       this.facets.set([]);
       this.#currentFacet = undefined;
-      this.searchModel.set({ searchTerm: '' });
+      this.searchModel.set({ query: '' });
       this.#performSearch();
     }
   }
@@ -283,7 +283,7 @@ export class MetadataBrowserFilterComponent implements OnInit {
    * Resets the search query and triggers a reload of the results.
    */
   protected clearSearchQuery(): void {
-    this.activeKeyword.set('');
+    this.activeQuery.set('');
     this.#metadataSearch.resetSkip();
     this.facets.set([]);
     this.#currentFacet = undefined;
@@ -336,7 +336,7 @@ export class MetadataBrowserFilterComponent implements OnInit {
       facetData = input.option.value.split('#');
       checked = (facetData[2] ?? 'false') === 'true' ? true : false;
       facetData = facetData.slice(0, 2) ?? [];
-      this.searchModel.set({ searchTerm: '' });
+      this.searchModel.set({ query: '' });
     } else {
       facetData = input.source.name?.split('#') ?? [];
       checked = input.checked;