@internetarchive/collection-browser 1.7.1-alpha.0 → 1.9.0

package/src/restoration-state-handler.ts

@@ -1,11 +1,6 @@
-import {
-  SearchType,
-  SortDirection,
-  SortParam,
-} from '@internetarchive/search-service';
+import { SearchType, SortDirection } from '@internetarchive/search-service';
 import { getCookie, setCookie } from 'typescript-cookie';
 import {
-  MetadataSortField,
   FacetOption,
   CollectionBrowserContext,
   CollectionDisplayMode,
@@ -13,17 +8,15 @@ import {
   SortField,
   FacetBucket,
   FacetState,
-  URLFieldToSortField,
-  URLSortField,
   getDefaultSelectedFacets,
-  MetadataFieldToURLField,
+  sortOptionFromAPIString,
+  SORT_OPTIONS,
 } from './models';
 import { arrayEquals } from './utils/array-equals';
 
 export interface RestorationState {
   displayMode?: CollectionDisplayMode;
   searchType?: SearchType;
-  sortParam?: SortParam;
   selectedSort?: SortField;
   sortDirection?: SortDirection;
   selectedFacets: SelectedFacets;
@@ -120,11 +113,29 @@ export class RestorationStateHandler
       }
     }
 
-    if (state.sortParam) {
-      const prefix = state.sortParam.direction === 'desc' ? '-' : '';
-      const readableSortField =
-        MetadataFieldToURLField[state.sortParam.field as MetadataSortField];
-      newParams.set('sort', `${prefix}${readableSortField}`);
+    if (state.selectedSort) {
+      const sortOption = SORT_OPTIONS[state.selectedSort];
+      let prefix = this.sortDirectionPrefix(state.sortDirection);
+
+      if (sortOption.field === SortField.unrecognized) {
+        // For unrecognized sorts, use the existing param, possibly updating its direction
+        const oldSortParam = oldParams.get('sort') ?? '';
+        const { field, direction } =
+          this.getSortFieldAndDirection(oldSortParam);
+
+        // Use the state-specified direction if available, or extract one from the param if not
+        if (!state.sortDirection) prefix = this.sortDirectionPrefix(direction);
+
+        if (field) {
+          newParams.set('sort', `${prefix}${field}`);
+        } else {
+          newParams.set('sort', oldSortParam);
+        }
+      } else if (sortOption.shownInURL) {
+        // Otherwise, use the canonical API form of the sort option
+        const canonicalApiSort = sortOption.urlNames[0];
+        newParams.set('sort', `${prefix}${canonicalApiSort}`);
+      }
     }
 
     if (state.selectedFacets) {
@@ -197,7 +208,7 @@ export class RestorationStateHandler
         query: state.baseQuery,
         searchType: state.searchType,
         page: state.currentPage,
-        sort: state.sortParam,
+        sort: { field: state.selectedSort, direction: state.sortDirection },
         minDate: state.minSelectedDate,
         maxDate: state.maxSelectedDate,
         facets: state.selectedFacets,
@@ -261,29 +272,13 @@ export class RestorationStateHandler
     }
 
     if (sortQuery) {
-      // check for two different sort formats: `date desc` and `-date`
-      const hasSpace = sortQuery.indexOf(' ') > -1;
-      if (hasSpace) {
-        const [field, direction] = sortQuery.split(' ');
-        const metadataField = URLFieldToSortField[field as URLSortField];
-
-        if (metadataField) {
-          restorationState.selectedSort = metadataField;
-        }
-        if (direction === 'desc' || direction === 'asc') {
-          restorationState.sortDirection = direction as SortDirection;
-        }
-      } else {
-        const direction = sortQuery.startsWith('-') ? 'desc' : 'asc';
-        const field = sortQuery.startsWith('-')
-          ? sortQuery.slice(1)
-          : sortQuery;
-
-        const metadataField = URLFieldToSortField[field as URLSortField];
-        if (metadataField) {
-          restorationState.selectedSort = metadataField;
-          restorationState.sortDirection = direction as SortDirection;
-        }
+      const { field, direction } = this.getSortFieldAndDirection(sortQuery);
+
+      const sortOption = sortOptionFromAPIString(field);
+      restorationState.selectedSort = sortOption.field;
+
+      if (['asc', 'desc'].includes(direction)) {
+        restorationState.sortDirection = direction as SortDirection;
       }
     }
 
@@ -296,6 +291,13 @@ export class RestorationStateHandler
         // which we want to normalize to 'creator', 'language', etc. if redirected here.
         field = field.replace(/Sorter$/, '');
 
+        // Legacy search also allowed a form of negative faceting like `and[]=-collection:foo`
+        // which we want to normalize to a not[] param instead
+        if (field.startsWith('-')) {
+          facetNots.push(and.slice(1));
+          return;
+        }
+
         switch (field) {
           case 'year': {
             const [minDate, maxDate] = value.split(' TO ');
@@ -354,7 +356,31 @@ export class RestorationStateHandler
     return restorationState;
   }
 
-  // remove optional opening and closing quotes from a string
+  /**
+   * Converts a URL sort param into a field/direction pair, if possible.
+   * Either or both may be undefined if the param is not in a recognized format.
+   */
+  private getSortFieldAndDirection(sortParam: string) {
+    // check for two different sort formats: `date desc` and `-date`
+    const hasSpace = sortParam.indexOf(' ') > -1;
+    let field;
+    let direction;
+    if (hasSpace) {
+      [field, direction] = sortParam.split(' ');
+    } else {
+      field = sortParam.startsWith('-') ? sortParam.slice(1) : sortParam;
+      direction = sortParam.startsWith('-') ? 'desc' : 'asc';
+    }
+
+    return { field, direction };
+  }
+
+  /** Returns the `-` prefix for `desc` sort, or the empty string otherwise. */
+  private sortDirectionPrefix(sortDirection?: string) {
+    return sortDirection === 'desc' ? '-' : '';
+  }
+
+  /** Remove optional opening and closing quotes from a string */
   private stripQuotes(value: string): string {
     if (value.startsWith('"') && value.endsWith('"')) {
       return value.substring(1, value.length - 1);

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -16,11 +16,10 @@ import type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';
 import type { SortDirection } from '@internetarchive/search-service';
 import {
   CollectionDisplayMode,
-  DefaultSortDirection,
   PrefixFilterCounts,
   PrefixFilterType,
+  SORT_OPTIONS,
   SortField,
-  SortFieldDisplayName,
 } from '../models';
 import './alpha-bar';
 
@@ -153,7 +152,8 @@ export class SortFilterBar
     }
 
     if (changed.has('selectedSort') && this.sortDirection === null) {
-      this.sortDirection = DefaultSortDirection[this.finalizedSortField];
+      const sortOption = SORT_OPTIONS[this.finalizedSortField];
+      this.sortDirection = sortOption.defaultSortDirection;
     }
 
     if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
@@ -274,7 +274,7 @@ export class SortFilterBar
     return html`
       <button
         class="sort-direction-selector"
-        ?disabled=${this.finalizedSortField === SortField.relevance}
+        ?disabled=${!this.canChangeSortDirection}
         @click=${this.handleSortDirectionClicked}
       >
         <span class="sr-only">${srLabel}</span>
@@ -285,8 +285,8 @@ export class SortFilterBar
 
   /** Template to render the sort direction button's icon in the correct current state */
   private get sortDirectionIcon(): TemplateResult {
-    // For relevance sort, show a fully disabled icon
-    if (this.finalizedSortField === SortField.relevance) {
+    // Show a fully disabled icon for sort options without direction support
+    if (!this.canChangeSortDirection) {
       return html`<div class="sort-direction-icon">${sortDisabledIcon}</div>`;
     }
 
@@ -354,9 +354,9 @@ export class SortFilterBar
 
   /** The template to render all the sort options in mobile view */
   private get mobileSortSelectorTemplate() {
-    const isDisplayableField = (field: string) =>
-      field !== SortField.default &&
-      (field !== SortField.relevance || this.showRelevance);
+    const displayedOptions = Object.values(SORT_OPTIONS)
+      .filter(opt => opt.shownInSortBar)
+      .filter(opt => this.showRelevance || opt.field !== SortField.relevance);
 
     return html`
       <div
@@ -364,13 +364,13 @@ export class SortFilterBar
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-          displayName: html`${SortFieldDisplayName[this.finalizedSortField] ??
-          'Relevance'}`,
+          displayName: html`${SORT_OPTIONS[this.finalizedSortField]
+            .displayName}`,
           id: 'mobile-dropdown',
           selected: true,
-          dropdownOptions: Object.keys(SortField)
-            .filter(field => isDisplayableField(field))
-            .map(field => this.getDropdownOption(field as SortField)),
+          dropdownOptions: displayedOptions.map(opt =>
+            this.getDropdownOption(opt.field)
+          ),
           selectedOption: this.finalizedSortField,
           onOptionSelected: this.mobileSortChanged,
           onDropdownClick: () => {
@@ -408,7 +408,8 @@ export class SortFilterBar
   ): TemplateResult {
     const isSelected =
       options?.selected ?? this.finalizedSortField === sortField;
-    const displayName = options?.displayName ?? SortFieldDisplayName[sortField];
+    const displayName =
+      options?.displayName ?? SORT_OPTIONS[sortField].displayName;
     return html`
       <button
         class=${isSelected ? 'selected' : nothing}
@@ -488,7 +489,7 @@ export class SortFilterBar
       },
       label: html`
         <span class="dropdown-option-label">
-          ${SortFieldDisplayName[sortField]}
+          ${SORT_OPTIONS[sortField].displayName}
         </span>
       `,
     };
@@ -692,7 +693,8 @@ export class SortFilterBar
   private setSelectedSort(sort: SortField) {
     this.selectedSort = sort;
     // Apply this field's default sort direction
-    this.sortDirection = DefaultSortDirection[this.selectedSort];
+    const sortOption = SORT_OPTIONS[sort];
+    this.sortDirection = sortOption.defaultSortDirection;
     this.emitSortChangedEvent();
   }
 
@@ -710,6 +712,11 @@ export class SortFilterBar
       : this.sortDirection;
   }
 
+  /** Whether the sort direction button should be enabled for the current sort */
+  private get canChangeSortDirection(): boolean {
+    return SORT_OPTIONS[this.finalizedSortField].canSetDirection;
+  }
+
   /**
    * There are four date sort options.
    *
@@ -757,11 +764,11 @@ export class SortFilterBar
    * @memberof SortFilterBar
    */
   private get dateSortField(): string {
-    const defaultSort = SortFieldDisplayName[SortField.date];
-    const name = this.dateOptionSelected
-      ? SortFieldDisplayName[this.finalizedSortField] ?? defaultSort
-      : defaultSort;
-    return name;
+    const defaultDateSort = SORT_OPTIONS[SortField.date];
+    const currentDateSort = this.dateOptionSelected
+      ? SORT_OPTIONS[this.finalizedSortField] ?? defaultDateSort
+      : defaultDateSort;
+    return currentDateSort.displayName;
   }
 
   /**
@@ -773,11 +780,11 @@ export class SortFilterBar
    * @memberof SortFilterBar
    */
   private get viewSortField(): string {
-    const defaultSort = SortFieldDisplayName[SortField.weeklyview];
-    const name = this.viewOptionSelected
-      ? SortFieldDisplayName[this.finalizedSortField] ?? defaultSort
-      : defaultSort;
-    return name;
+    const defaultViewSort = SORT_OPTIONS[SortField.weeklyview];
+    const currentViewSort = this.viewOptionSelected
+      ? SORT_OPTIONS[this.finalizedSortField] ?? defaultViewSort
+      : defaultViewSort;
+    return currentViewSort.displayName;
   }
 
   private get titleSelectorBar() {

package/test/collection-facets/more-facets-content.test.ts

@@ -86,6 +86,41 @@ describe('More facets content', () => {
     expect(searchService.searchParams?.query).to.equal('title:hello');
   });
 
+  it('queries for more facets using search service within a collection (no query)', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .withinCollection=${'foobar'}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'subject';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.be.empty;
+    expect(searchService.searchParams?.pageTarget).to.equal('foobar');
+  });
+
+  it('queries for more facets using search service within a collection (with query)', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .withinCollection=${'foobar'}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'subject';
+    el.query = 'title:hello';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('title:hello');
+    expect(searchService.searchParams?.pageTarget).to.equal('foobar');
+  });
+
   it('filter raw selectedFacets object', async () => {
     const searchService = new MockSearchService();
 

package/test/restoration-state-handler.test.ts

@@ -1,6 +1,6 @@
 import { SearchType } from '@internetarchive/search-service';
 import { expect } from '@open-wc/testing';
-import { getDefaultSelectedFacets } from '../src/models';
+import { SortField, getDefaultSelectedFacets } from '../src/models';
 import { RestorationStateHandler } from '../src/restoration-state-handler';
 
 describe('Restoration state handler', () => {
@@ -245,6 +245,73 @@ describe('Restoration state handler', () => {
     expect(restorationState.sortDirection).to.equal('asc');
   });
 
+  it('should restore sort from URL (space format)', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+
+    const url = new URL(window.location.href);
+    url.search = '?sort=foo+desc';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const restorationState = handler.getRestorationState();
+    expect(restorationState.selectedSort).to.equal('unrecognized');
+    expect(restorationState.sortDirection).to.equal('desc');
+  });
+
+  it('should restore unrecognized sort from URL (prefix format)', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+
+    const url = new URL(window.location.href);
+    url.search = '?sort=-foo';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const restorationState = handler.getRestorationState();
+    expect(restorationState.selectedSort).to.equal('unrecognized');
+    expect(restorationState.sortDirection).to.equal('desc');
+  });
+
+  it('should save direction to URL even for unrecognized sort fields', async () => {
+    const url = new URL(window.location.href);
+    url.search = '?sort=foo';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const handler = new RestorationStateHandler({ context: 'search' });
+    handler.persistState({
+      selectedSort: SortField.unrecognized,
+      sortDirection: 'desc',
+      selectedFacets: getDefaultSelectedFacets(),
+    });
+
+    expect(window.location.search).to.equal('?sort=-foo');
+  });
+
+  it('should keep existing direction for unrecognized sort fields when unspecified in state', async () => {
+    const url = new URL(window.location.href);
+    url.search = '?sort=foo+desc';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const handler = new RestorationStateHandler({ context: 'search' });
+    handler.persistState({
+      selectedSort: SortField.unrecognized,
+      selectedFacets: getDefaultSelectedFacets(),
+    });
+
+    expect(window.location.search).to.equal('?sort=-foo');
+  });
+
+  it('should just ignore unrecognized sort fields w/ unknown formats', async () => {
+    const url = new URL(window.location.href);
+    url.search = '?sort=+foo';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const handler = new RestorationStateHandler({ context: 'search' });
+    handler.persistState({
+      selectedSort: SortField.unrecognized,
+      selectedFacets: getDefaultSelectedFacets(),
+    });
+
+    expect(window.location.search).to.equal('?sort=+foo');
+  });
+
   it('should not save current page state to the URL for page 1', async () => {
     const url = new URL(window.location.href);
     url.search = '';