@internetarchive/collection-browser 1.5.3-alpha.1 → 1.6.0

package/src/collection-browser.ts

@@ -57,8 +57,6 @@ import {
   PrefixFilterCounts,
   prefixFilterAggregationKeys,
   FacetEventDetails,
-  MetadataFieldToSortField,
-  MetadataSortField,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -102,7 +100,7 @@ export class CollectionBrowser
 
   @property({ type: Object }) sortParam: SortParam | null = null;
 
-  @property({ type: String }) selectedSort: SortField = SortField.default;
+  @property({ type: String }) selectedSort: SortField = SortField.relevance;
 
   @property({ type: String }) selectedTitleFilter: string | null = null;
 
@@ -126,6 +124,8 @@ export class CollectionBrowser
 
   @property({ type: String }) collectionPagePath: string = '/details/';
 
+  @property({ type: Object }) collectionInfo?: CollectionExtraInfo;
+
   /** describes where this component is being used */
   @property({ type: String, reflect: true }) searchContext: string =
     analyticsCategories.default;
@@ -194,11 +194,6 @@ export class CollectionBrowser
 
   @state() private contentWidth?: number;
 
-  @state() private defaultSortField: Exclude<SortField, SortField.default> =
-    SortField.relevance;
-
-  @state() private defaultSortDirection: SortDirection | null = null;
-
   @state() private placeholderType: PlaceholderType = null;
 
   @state() private prefixFilterCountMap: Partial<
@@ -356,7 +351,7 @@ export class CollectionBrowser
     if (sort) {
       this.sortParam = null;
       this.sortDirection = null;
-      this.selectedSort = SortField.default;
+      this.selectedSort = SortField.relevance;
     }
   }
 
@@ -558,11 +553,8 @@ export class CollectionBrowser
   private get sortFilterBarTemplate() {
     return html`
       <sort-filter-bar
-        .defaultSortField=${this.defaultSortField}
-        .defaultSortDirection=${this.defaultSortDirection}
         .selectedSort=${this.selectedSort}
         .sortDirection=${this.sortDirection}
-        .showRelevance=${this.isRelevanceSortAvailable}
         .displayMode=${this.displayMode}
         .selectedTitleFilter=${this.selectedTitleFilter}
         .selectedCreatorFilter=${this.selectedCreatorFilter}
@@ -606,7 +598,7 @@ export class CollectionBrowser
   }
 
   private selectedSortChanged(): void {
-    if ([SortField.default, SortField.relevance].includes(this.selectedSort)) {
+    if (this.selectedSort === 'relevance') {
       this.sortParam = null;
       return;
     }
@@ -1203,11 +1195,6 @@ export class CollectionBrowser
       this.infiniteScroller.reload();
     }
 
-    if (this.withinCollection && this.baseQuery?.trim()) {
-      this.defaultSortField = SortField.relevance;
-      this.defaultSortDirection = null;
-    }
-
     if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {
       this.scrollToPage(this.initialPageNumber);
     }
@@ -1251,7 +1238,7 @@ export class CollectionBrowser
     this.displayMode = restorationState.displayMode;
     if (restorationState.searchType != null)
       this.searchType = restorationState.searchType;
-    this.selectedSort = restorationState.selectedSort ?? SortField.default;
+    this.selectedSort = restorationState.selectedSort ?? SortField.relevance;
     this.sortDirection = restorationState.sortDirection ?? null;
     this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
     this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
@@ -1625,14 +1612,6 @@ export class CollectionBrowser
     });
   }
 
-  /**
-   * Whether sorting by relevance makes sense for the current state.
-   * Currently equivalent to having a non-empty query.
-   */
-  private get isRelevanceSortAvailable(): boolean {
-    return !!this.baseQuery?.trim();
-  }
-
   /**
    * Whether a search may be performed in the current state of the component.
    * This is only true if the search service is defined, and either
@@ -1777,9 +1756,7 @@ export class CollectionBrowser
     this.totalResults = success.response.totalResults;
 
     if (this.withinCollection) {
-      // For collections, we want the UI to respect the default sort option
-      // which can be specified in metadata, or otherwise assumed to be week:desc
-      this.applyDefaultCollectionSort(success.response.collectionExtraInfo);
+      this.collectionInfo = success.response.collectionExtraInfo;
     }
 
     const { results, collectionTitles } = success.response;
@@ -1827,39 +1804,6 @@ export class CollectionBrowser
     this.collectionNameCache?.preloadIdentifiers(collectionIdsArray);
   }
 
-  /**
-   * Applies any default sort option for the current collection, by checking
-   * for one in the collection's metadata. If none is found, defaults to sorting
-   * descending by weekly views.
-   */
-  private applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo) {
-    if (this.baseQuery) {
-      // If there's a query set, then we default to relevance sorting regardless of
-      // the collection metadata-specified sort.
-      this.defaultSortField = SortField.relevance;
-      this.defaultSortDirection = null;
-      return;
-    }
-
-    const defaultSort: string =
-      collectionInfo?.public_metadata?.['sort-by'] ?? '-week';
-
-    // Account for both -field and field:dir formats
-    let [field, dir] = defaultSort.split(':');
-    if (field.startsWith('-')) {
-      field = field.slice(1);
-      dir = 'desc';
-    } else if (!['asc', 'desc'].includes(dir)) {
-      dir = 'asc';
-    }
-
-    const sortField = MetadataFieldToSortField[field as MetadataSortField];
-    if (sortField && sortField !== SortField.default) {
-      this.defaultSortField = sortField;
-      this.defaultSortDirection = dir as SortDirection;
-    }
-  }
-
   /**
    * This is useful for determining whether we need to reload the scroller.
    *

package/src/models.ts

@@ -55,7 +55,6 @@ export type CollectionBrowserContext = 'collection' | 'search';
  * The sort fields shown in the sort filter bar
  */
 export enum SortField {
-  'default' = 'default',
   'relevance' = 'relevance',
   'alltimeview' = 'alltimeview',
   'weeklyview' = 'weeklyview',
@@ -88,7 +87,6 @@ export type URLSortField = MetadataSortField | 'title' | 'creator';
 export const SortFieldDisplayName: {
   [key in SortField]: string;
 } = {
-  default: '', // Use the default sorting option for the current page context, if none has been selected
   relevance: 'Relevance',
   alltimeview: 'All-time views',
   weeklyview: 'Weekly views',
@@ -101,10 +99,9 @@ export const SortFieldDisplayName: {
 };
 
 export const DefaultSortDirection: {
-  [key in SortField]: SortDirection | null;
+  [key in SortField]: SortDirection;
 } = {
-  default: null,
-  relevance: null, // Can't actually change the sort direction for relevance
+  relevance: 'desc', // Can't actually change the sort direction for relevance
   alltimeview: 'desc',
   weeklyview: 'desc',
   title: 'asc',
@@ -121,7 +118,6 @@ export const DefaultSortDirection: {
 export const SortFieldToMetadataField: {
   [key in SortField]: MetadataSortField | null;
 } = {
-  default: null,
   relevance: null,
   alltimeview: 'downloads',
   weeklyview: 'week',

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

@@ -42,20 +42,11 @@ export class SortFilterBar
   /** Which display mode the tiles are being rendered with (grid/list-detail/list-compact) */
   @property({ type: String }) displayMode?: CollectionDisplayMode;
 
-  /** The default sort direction to use if none is set */
-  @property({ type: String }) defaultSortDirection: SortDirection | null = null;
-
-  /** The default sort field to use if none is set */
-  @property({ type: String }) defaultSortField: Exclude<
-    SortField,
-    SortField.default
-  > = SortField.relevance;
-
   /** The current sort direction (asc/desc), or null if none is set */
   @property({ type: String }) sortDirection: SortDirection | null = null;
 
   /** The field currently being sorted on (e.g., 'title'). Defaults to relevance. */
-  @property({ type: String }) selectedSort: SortField = SortField.default;
+  @property({ type: String }) selectedSort: SortField = SortField.relevance;
 
   /** The currently selected title letter filter, or null if none is set */
   @property({ type: String }) selectedTitleFilter: string | null = null;
@@ -153,7 +144,7 @@ export class SortFilterBar
     }
 
     if (changed.has('selectedSort') && this.sortDirection === null) {
-      this.sortDirection = DefaultSortDirection[this.finalizedSortField];
+      this.sortDirection = DefaultSortDirection[this.selectedSort];
     }
 
     if (changed.has('selectedTitleFilter') && this.selectedTitleFilter) {
@@ -274,8 +265,8 @@ export class SortFilterBar
     return html`
       <button
         class="sort-direction-selector"
-        ?disabled=${this.finalizedSortField === SortField.relevance}
-        @click=${this.handleSortDirectionClicked}
+        ?disabled=${this.selectedSort === 'relevance'}
+        @click=${this.toggleSortDirection}
       >
         <span class="sr-only">${srLabel}</span>
         ${this.sortDirectionIcon}
@@ -286,14 +277,14 @@ 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) {
+    if (this.selectedSort === 'relevance') {
       return html`<div class="sort-direction-icon">${sortDisabledIcon}</div>`;
     }
 
     // For all other sorts, show the ascending/descending direction
     return html`
       <div class="sort-direction-icon">
-        ${this.finalizedSortDirection === 'asc' ? sortUpIcon : sortDownIcon}
+        ${this.sortDirection === 'asc' ? sortUpIcon : sortDownIcon}
       </div>
     `;
   }
@@ -306,25 +297,25 @@ export class SortFilterBar
         class=${this.mobileSelectorVisible ? 'hidden' : 'visible'}
       >
         <ul id="desktop-sort-selector">
-          ${this.showRelevance
-            ? html`<li>
-                ${this.getSortDisplayOption(SortField.relevance, {
+          <li>
+            ${this.showRelevance
+              ? this.getSortDisplayOption(SortField.relevance, {
                   onClick: () => {
                     this.dropdownBackdropVisible = false;
-                    if (this.finalizedSortField !== SortField.relevance) {
+                    if (this.selectedSort !== SortField.relevance) {
                       this.clearAlphaBarFilters();
                       this.setSelectedSort(SortField.relevance);
                     }
                   },
-                })}
-              </li>`
-            : nothing}
+                })
+              : nothing}
+          </li>
           <li>${this.viewsDropdownTemplate}</li>
           <li>
             ${this.getSortDisplayOption(SortField.title, {
               onClick: () => {
                 this.dropdownBackdropVisible = false;
-                if (this.finalizedSortField !== SortField.title) {
+                if (this.selectedSort !== SortField.title) {
                   this.alphaSelectorVisible = 'title';
                   this.selectedCreatorFilter = null;
                   this.setSelectedSort(SortField.title);
@@ -338,7 +329,7 @@ export class SortFilterBar
             ${this.getSortDisplayOption(SortField.creator, {
               onClick: () => {
                 this.dropdownBackdropVisible = false;
-                if (this.finalizedSortField !== SortField.creator) {
+                if (this.selectedSort !== SortField.creator) {
                   this.alphaSelectorVisible = 'creator';
                   this.selectedTitleFilter = null;
                   this.setSelectedSort(SortField.creator);
@@ -354,24 +345,19 @@ 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);
-
     return html`
       <div
         id="mobile-sort-container"
         class=${this.mobileSelectorVisible ? 'visible' : 'hidden'}
       >
         ${this.getSortDropdown({
-          displayName: html`${SortFieldDisplayName[this.finalizedSortField] ??
-          'Relevance'}`,
+          displayName: html`${SortFieldDisplayName[this.selectedSort] ?? ''}`,
           id: 'mobile-dropdown',
           selected: true,
-          dropdownOptions: Object.keys(SortField)
-            .filter(field => isDisplayableField(field))
-            .map(field => this.getDropdownOption(field as SortField)),
-          selectedOption: this.finalizedSortField,
+          dropdownOptions: Object.keys(SortField).map(field =>
+            this.getDropdownOption(field as SortField)
+          ),
+          selectedOption: this.selectedSort ?? SortField.relevance,
           onOptionSelected: this.mobileSortChanged,
           onDropdownClick: () => {
             this.dropdownBackdropVisible = this.mobileDropdown.open;
@@ -406,8 +392,7 @@ export class SortFilterBar
       onClick?: (e: Event) => void;
     }
   ): TemplateResult {
-    const isSelected =
-      options?.selected ?? this.finalizedSortField === sortField;
+    const isSelected = options?.selected ?? this.selectedSort === sortField;
     const displayName = options?.displayName ?? SortFieldDisplayName[sortField];
     return html`
       <button
@@ -668,25 +653,7 @@ export class SortFilterBar
 
   /** Toggles the current sort direction between 'asc' and 'desc' */
   private toggleSortDirection() {
-    this.setSortDirection(
-      this.finalizedSortDirection === 'desc' ? 'asc' : 'desc'
-    );
-  }
-
-  private handleSortDirectionClicked(): void {
-    if (
-      !this.sortDirection &&
-      this.defaultSortField &&
-      this.defaultSortDirection
-    ) {
-      // When the sort direction is merely defaulted (not set by the user), clicking
-      // the toggled button should "promote" the default sort to an explicitly-set one
-      // and then toggle it as usual.
-      this.selectedSort = this.defaultSortField;
-      this.sortDirection = this.defaultSortDirection;
-    }
-
-    this.toggleSortDirection();
+    this.setSortDirection(this.sortDirection === 'desc' ? 'asc' : 'desc');
   }
 
   private setSelectedSort(sort: SortField) {
@@ -696,20 +663,6 @@ export class SortFilterBar
     this.emitSortChangedEvent();
   }
 
-  /** The current sort field, or the default one if no explicit sort is set */
-  private get finalizedSortField(): SortField {
-    return this.selectedSort === SortField.default
-      ? this.defaultSortField
-      : this.selectedSort;
-  }
-
-  /** The current sort direction, or the default one if no explicit direction is set */
-  private get finalizedSortDirection(): SortDirection | null {
-    return this.sortDirection === null
-      ? this.defaultSortDirection
-      : this.sortDirection;
-  }
-
   /**
    * There are four date sort options.
    *
@@ -727,7 +680,7 @@ export class SortFilterBar
       SortField.datereviewed,
       SortField.dateadded,
     ];
-    return dateSortFields.includes(this.finalizedSortField);
+    return dateSortFields.includes(this.selectedSort);
   }
 
   /**
@@ -745,7 +698,7 @@ export class SortFilterBar
       SortField.alltimeview,
       SortField.weeklyview,
     ];
-    return viewSortFields.includes(this.finalizedSortField);
+    return viewSortFields.includes(this.selectedSort);
   }
 
   /**
@@ -759,7 +712,7 @@ export class SortFilterBar
   private get dateSortField(): string {
     const defaultSort = SortFieldDisplayName[SortField.date];
     const name = this.dateOptionSelected
-      ? SortFieldDisplayName[this.finalizedSortField] ?? defaultSort
+      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
       : defaultSort;
     return name;
   }
@@ -775,7 +728,7 @@ export class SortFilterBar
   private get viewSortField(): string {
     const defaultSort = SortFieldDisplayName[SortField.weeklyview];
     const name = this.viewOptionSelected
-      ? SortFieldDisplayName[this.finalizedSortField] ?? defaultSort
+      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
       : defaultSort;
     return name;
   }

package/test/collection-browser.test.ts

@@ -20,7 +20,6 @@ import { analyticsCategories } from '../src/utils/analytics-events';
 import type { TileDispatcher } from '../src/tiles/tile-dispatcher';
 import type { CollectionFacets } from '../src/collection-facets';
 import type { EmptyPlaceholder } from '../src/empty-placeholder';
-import type { SortFilterBar } from '../src/sort-filter-bar/sort-filter-bar';
 
 /**
  * Wait for the next tick of the event loop.
@@ -94,7 +93,7 @@ describe('Collection Browser', () => {
     el.clearFilters({ sort: true }); // Sort is reset too due to the option
 
     expect(el.selectedFacets).to.deep.equal(getDefaultSelectedFacets());
-    expect(el.selectedSort).to.equal(SortField.default);
+    expect(el.selectedSort).to.equal('relevance');
     expect(el.sortDirection).to.be.null;
     expect(el.sortParam).to.be.null;
     expect(el.selectedCreatorFilter).to.be.null;
@@ -764,7 +763,7 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    expect(el.selectedSort).to.equal(SortField.default);
+    expect(el.selectedSort).to.equal(SortField.relevance);
 
     el.baseQuery = 'foo';
     await el.updateComplete;
@@ -989,82 +988,6 @@ describe('Collection Browser', () => {
     ).to.equal('/details/foo?q=%22quoted+query%22');
   });
 
-  it('sets default sort from collection metadata', async () => {
-    const searchService = new MockSearchService();
-    const el = await fixture<CollectionBrowser>(
-      html`<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-      ></collection-browser>`
-    );
-
-    el.withinCollection = 'default-sort';
-    await el.updateComplete;
-    await el.initialSearchComplete;
-    await el.updateComplete;
-    await aTimeout(50);
-
-    const sortBar = el.shadowRoot?.querySelector(
-      'sort-filter-bar'
-    ) as SortFilterBar;
-    expect(sortBar).to.exist;
-    expect(sortBar.defaultSortField).to.equal(SortField.title);
-    expect(sortBar.defaultSortDirection).to.equal('asc');
-    expect(sortBar.selectedSort).to.equal(SortField.default);
-    expect(sortBar.sortDirection).to.be.null;
-  });
-
-  it('sets default sort from collection metadata in "-field" format', async () => {
-    const searchService = new MockSearchService();
-    const el = await fixture<CollectionBrowser>(
-      html`<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-      ></collection-browser>`
-    );
-
-    el.withinCollection = 'default-sort-concise';
-    await el.updateComplete;
-    await el.initialSearchComplete;
-    await el.updateComplete;
-    await aTimeout(50);
-
-    const sortBar = el.shadowRoot?.querySelector(
-      'sort-filter-bar'
-    ) as SortFilterBar;
-    expect(sortBar).to.exist;
-    expect(sortBar.defaultSortField).to.equal(SortField.dateadded);
-    expect(sortBar.defaultSortDirection).to.equal('desc');
-    expect(sortBar.selectedSort).to.equal(SortField.default);
-    expect(sortBar.sortDirection).to.be.null;
-  });
-
-  it('uses relevance sort as default when a query is set', async () => {
-    const searchService = new MockSearchService();
-    const el = await fixture<CollectionBrowser>(
-      html`<collection-browser
-        .searchService=${searchService}
-        .baseNavigationUrl=${''}
-      ></collection-browser>`
-    );
-
-    el.withinCollection = 'default-sort';
-    el.baseQuery = 'default-sort';
-    await el.updateComplete;
-    await el.initialSearchComplete;
-    await el.updateComplete;
-    await aTimeout(50);
-
-    const sortBar = el.shadowRoot?.querySelector(
-      'sort-filter-bar'
-    ) as SortFilterBar;
-    expect(sortBar).to.exist;
-    expect(sortBar.defaultSortField).to.equal(SortField.relevance);
-    expect(sortBar.defaultSortDirection).to.be.null;
-    expect(sortBar.selectedSort).to.equal(SortField.default);
-    expect(sortBar.sortDirection).to.be.null;
-  });
-
   it('scrolls to page', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(