@internetarchive/collection-browser 1.14.17-beta.5 → 1.14.18-alpha.0

package/src/data-source/collection-browser-data-source.ts

@@ -1,4 +1,4 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { ReactiveControllerHost } from 'lit';
 import {
   AccountExtraInfo,
   Aggregation,
@@ -12,296 +12,233 @@ import {
   SearchResult,
   SearchType,
 } from '@internetarchive/search-service';
-import type { MediaType } from '@internetarchive/field-parsers';
 import {
   prefixFilterAggregationKeys,
   type FacetBucket,
   type PrefixFilterType,
-  type TileModel,
+  TileModel,
   PrefixFilterCounts,
+  RequestKind,
+  SortField,
+  SORT_OPTIONS,
 } from '../models';
-import type {
-  CollectionBrowserSearchInterface,
-  CollectionTitles,
-  PageSpecifierParams,
-} from './models';
+import { FACETLESS_PAGE_ELEMENTS, type PageSpecifierParams } from './models';
+import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
+import type { CollectionBrowserSearchInterface } from './collection-browser-query-state';
 import { sha1 } from '../utils/sha1';
+import { log } from '../utils/log';
 
-type RequestKind = 'full' | 'hits' | 'aggregations';
-
-export interface CollectionBrowserDataSourceInterface
-  extends ReactiveController {
-  /**
-   * How many tile models are present in this data source
-   */
-  readonly size: number;
-
-  /**
-   * Whether the host has a valid set of properties for performing a search.
-   * For instance, on the search page this requires a valid search service and a
-   * non-empty query, while collection pages allow searching with an empty query
-   * for MDS but not FTS.
-   */
-  readonly canPerformSearch: boolean;
-
-  /**
-   * A string key compactly representing the current full search state, which can
-   * be used to determine, e.g., when a new search is required or whether an arriving
-   * response is outdated.
-   */
-  readonly pageFetchQueryKey: string;
-
-  /**
-   * Similar to `pageFetchQueryKey`, but excluding properties that do not affect
-   * the validity of a set of facets (e.g., sort).
-   */
-  readonly facetFetchQueryKey: string;
-
-  /**
-   * An object representing any collection- or profile-specific properties to be passed along
-   * to the search service, specifying the exact page/tab to fetch results for.
-   */
-  readonly pageSpecifierParams: PageSpecifierParams | null;
-
-  /**
-   * A FilterMap object representing all filters applied to the current search,
-   * including any facets, letter filters, and date ranges.
-   */
-  readonly filterMap: FilterMap;
-
-  /**
-   * The full set of aggregations retrieved for the current search.
-   */
-  readonly aggregations?: Record<string, Aggregation>;
-
-  /**
-   * The `year_histogram` aggregation retrieved for the current search.
-   */
-  readonly yearHistogramAggregation?: Aggregation;
-
+export class CollectionBrowserDataSource
+  implements CollectionBrowserDataSourceInterface
+{
   /**
-   * A map from collection identifiers that appear on hits or aggregations for the
-   * current search, to their human-readable collection titles.
+   * All pages of tile models that have been fetched so far, indexed by their page
+   * number (with the first being page 1).
    */
-  readonly collectionTitles: CollectionTitles;
+  private pages: Record<string, TileModel[]> = {};
 
   /**
-   * The "extra info" package provided by the PPS for collection pages, including details
-   * used to populate the target collection header & About tab content.
+   * Tile offset to apply when looking up tiles in the pages, in order to maintain
+   * page alignment after tiles are removed.
    */
-  readonly collectionExtraInfo?: CollectionExtraInfo;
+  private offset = 0;
 
   /**
-   * The "extra info" package provided by the PPS for profile pages, including details
-   * used to populate the profile header.
+   * Total number of tile models stored in this data source's pages
    */
-  readonly accountExtraInfo?: AccountExtraInfo;
+  private numTileModels = 0;
 
   /**
-   * The set of requested page elements for profile pages, if applicable. These represent
-   * any content specific to the current profile tab.
+   * A set of fetch IDs that are valid for the current query state
    */
-  readonly pageElements?: PageElementMap;
+  private fetchesInProgress = new Set<string>();
 
   /**
-   * An array of the current target collection's parent collections. Should include *all*
-   * ancestors in the collection hierarchy, not just the immediate parent.
+   * A record of the query key used for the last search.
+   * If this changes, we need to load new results.
    */
-  readonly parentCollections?: string[];
+  private previousQueryKey: string = '';
 
   /**
-   * An object storing result counts for the current search bucketed by letter prefix.
-   * Keys are the result field on which the prefixes are considered (e.g., title/creator)
-   * and values are a Record mapping letters to their counts.
+   * Whether the initial page of search results for the current query state
+   * is presently being fetched.
    */
-  readonly prefixFilterCountMap: Partial<
-    Record<PrefixFilterType, PrefixFilterCounts>
-  >;
+  private searchResultsLoading = false;
 
   /**
-   * An array of all the tile models whose management checkboxes are checked
+   * Whether the facets (aggregations) for the current query state are
+   * presently being fetched.
    */
-  readonly checkedTileModels: TileModel[];
+  private facetsLoading = false;
 
   /**
-   * An array of all the tile models whose management checkboxes are unchecked
+   * Whether further query changes should be ignored and not trigger fetches
    */
-  readonly uncheckedTileModels: TileModel[];
+  private suppressFetches = false;
 
   /**
-   * Adds the given page of tile models to the data source.
-   * If the given page number already exists, that page will be overwritten.
-   * @param pageNum Which page number to add (indexed starting from 1)
-   * @param pageTiles The array of tile models for the new page
+   * @inheritdoc
    */
-  addPage(pageNum: number, pageTiles: TileModel[]): void;
+  totalResults = 0;
 
   /**
-   * Returns the given page of tile models from the data source.
-   * @param pageNum Which page number to get (indexed starting from 1)
+   * @inheritdoc
    */
-  getPage(pageNum: number): TileModel[];
+  endOfDataReached = false;
 
   /**
-   * Returns the full set of paged tile models stored in this data source.
+   * @inheritdoc
    */
-  getAllPages(): Record<string, TileModel[]>;
+  queryInitialized = false;
 
   /**
-   * Whether the data source contains any tiles for the given page number.
-   * @param pageNum Which page number to query (indexed starting from 1)
+   * @inheritdoc
    */
-  hasPage(pageNum: number): boolean;
+  aggregations?: Record<string, Aggregation>;
 
   /**
-   * Returns the single tile model appearing at the given index in the
-   * data source, with respect to the current page size. Returns `undefined` if
-   * the corresponding page is not present on the data source or if it does not
-   * contain a tile model at the corresponding index.
-   * @param index The 0-based index (within the full data source) of the tile to get
+   * @inheritdoc
    */
-  getTileModelAt(index: number): TileModel | undefined;
+  yearHistogramAggregation?: Aggregation;
 
   /**
-   * Returns the first numeric tile index corresponding to the given tile model object,
-   * or -1 if the given tile model is not present.
-   * @param tile The tile model to search for in the data source
+   * @inheritdoc
    */
-  indexOf(tile: TileModel): number;
+  collectionTitles = new Map<string, string>();
 
   /**
-   * Requests that the data source fire a backend request for the given page of results.
-   * @param pageNum Which page number to fetch results for
-   * @param numInitialPages How many pages should be batched together on an initial fetch
+   * @inheritdoc
    */
-  fetchPage(pageNum: number, numInitialPages?: number): Promise<void>;
+  collectionExtraInfo?: CollectionExtraInfo;
 
   /**
-   * Requests that the data source update its prefix bucket result counts for the given
-   * type of prefix filter.
-   * @param filterType Which prefixable field to update the buckets for (e.g., title/creator)
+   * @inheritdoc
    */
-  updatePrefixFilterCounts(filterType: PrefixFilterType): Promise<void>;
+  accountExtraInfo?: AccountExtraInfo;
 
   /**
-   * Changes the page size used by the data source, discarding any previously-fetched pages.
-   *
-   * **Note: this operation will reset any data stored in the data source!**
-   * @param pageSize
+   * @inheritdoc
    */
-  setPageSize(pageSize: number): void;
+  pageElements?: PageElementMap;
 
   /**
-   * Resets the data source to its empty state, with no result pages, aggregations, etc.
+   * @inheritdoc
    */
-  reset(): void;
+  parentCollections?: string[] = [];
 
   /**
-   * Notifies the data source that a query change has occurred, which may trigger a data
-   * reset & new fetches.
+   * @inheritdoc
    */
-  handleQueryChange(): void;
+  prefixFilterCountMap: Partial<Record<PrefixFilterType, PrefixFilterCounts>> =
+    {};
 
   /**
-   * Applies the given map function to all of the tile models in every page of the data
-   * source.
-   * @param callback A callback function to apply on each tile model, as with Array.map
+   * @inheritdoc
    */
-  map(
-    callback: (model: TileModel, index: number, array: TileModel[]) => TileModel
-  ): void;
+  queryErrorMessage?: string;
 
   /**
-   * Checks every tile's management checkbox
+   * Internal property to store the `resolve` function for the most recent
+   * `initialSearchComplete` promise, allowing us to resolve it at the appropriate time.
    */
-  checkAllTiles(): void;
+  private _initialSearchCompleteResolver!: (val: boolean) => void;
 
   /**
-   * Unchecks every tile's management checkbox
+   * Internal property to store the private value backing the `initialSearchComplete` getter.
    */
-  uncheckAllTiles(): void;
+  private _initialSearchCompletePromise: Promise<boolean> = new Promise(res => {
+    this._initialSearchCompleteResolver = res;
+  });
 
   /**
-   * Removes all tile models that are currently checked & adjusts the paging
-   * of the data source to account for any new gaps in the data.
+   * @inheritdoc
    */
-  removeCheckedTiles(): void;
-}
-
-export class CollectionBrowserDataSource
-  implements CollectionBrowserDataSourceInterface
-{
-  private pages: Record<string, TileModel[]> = {};
+  get initialSearchComplete(): Promise<boolean> {
+    return this._initialSearchCompletePromise;
+  }
 
-  private offset = 0;
+  // eslint-disable-next-line no-useless-constructor
+  constructor(
+    /** The host element to which this controller should attach listeners */
+    private readonly host: ReactiveControllerHost &
+      CollectionBrowserSearchInterface,
+    /** Default size of result pages */
+    private pageSize: number = 50
+  ) {
+    // Just setting some property values
+  }
 
-  private numTileModels = 0;
+  hostConnected(): void {
+    this.setSearchResultsLoading(this.searchResultsLoading);
+    this.setFacetsLoading(this.facetsLoading);
+  }
 
-  /**
-   * Maps the full query key to the pages being fetched for that query
-   */
-  private pageFetchesInProgress: Record<string, Set<number>> = {};
+  hostUpdate(): void {
+    // This reactive controller hook is run whenever the host component (collection-browser) performs an update.
+    // We check whether the host's state has changed in a way which should trigger a reset & new results fetch.
 
-  totalResults = 0;
+    // Only the currently-installed data source should react to the update
+    if (!this.activeOnHost) return;
 
-  endOfDataReached = false;
+    // Copy loading states onto the host
+    this.setSearchResultsLoading(this.searchResultsLoading);
+    this.setFacetsLoading(this.facetsLoading);
 
-  /**
-   * @inheritdoc
-   */
-  aggregations?: Record<string, Aggregation>;
+    // Can't perform searches without a search service
+    if (!this.host.searchService) return;
 
-  /**
-   * @inheritdoc
-   */
-  yearHistogramAggregation?: Aggregation;
+    // We should only reset if part of the full query state has changed
+    const queryKeyChanged = this.pageFetchQueryKey !== this.previousQueryKey;
+    if (!queryKeyChanged) return;
 
-  /**
-   * @inheritdoc
-   */
-  collectionTitles = new Map<string, string>();
+    // We should only reset if either:
+    //  (a) our state permits a valid search, or
+    //  (b) we have a blank query that we want to show empty results for
+    const shouldShowEmptyQueryResults =
+      this.host.clearResultsOnEmptyQuery && this.host.baseQuery === '';
+    if (!(this.canPerformSearch || shouldShowEmptyQueryResults)) return;
 
-  /**
-   * @inheritdoc
-   */
-  collectionExtraInfo?: CollectionExtraInfo;
+    if (this.activeOnHost) this.host.emitQueryStateChanged();
+    this.handleQueryChange();
+  }
 
   /**
-   * @inheritdoc
+   * Returns whether this data source is the one currently installed on the host component.
    */
-  accountExtraInfo?: AccountExtraInfo;
+  private get activeOnHost(): boolean {
+    return this.host.dataSource === this;
+  }
 
   /**
    * @inheritdoc
    */
-  pageElements?: PageElementMap;
+  get size(): number {
+    return this.numTileModels;
+  }
 
   /**
    * @inheritdoc
    */
-  parentCollections?: string[] = [];
+  reset(): void {
+    log('Resetting CB data source');
+    this.pages = {};
+    this.aggregations = {};
+    this.yearHistogramAggregation = undefined;
+    this.pageElements = undefined;
+    this.parentCollections = [];
+    this.queryErrorMessage = undefined;
 
-  /**
-   * @inheritdoc
-   */
-  prefixFilterCountMap: Partial<Record<PrefixFilterType, PrefixFilterCounts>> =
-    {};
+    this.offset = 0;
+    this.numTileModels = 0;
+    this.totalResults = 0;
+    this.endOfDataReached = false;
+    this.queryInitialized = false;
 
-  constructor(
-    /** The host element to which this controller should attach listeners */
-    private readonly host: ReactiveControllerHost &
-      CollectionBrowserSearchInterface,
-    /** Default size of result pages */
-    private pageSize: number
-  ) {
-    this.host.addController(this as CollectionBrowserDataSourceInterface);
-  }
+    // Invalidate any fetches in progress
+    this.fetchesInProgress.clear();
 
-  /**
-   * @inheritdoc
-   */
-  get size(): number {
-    return this.numTileModels;
+    if (this.activeOnHost) this.host.setTotalResultCount(0);
+    this.requestHostUpdate();
   }
 
   /**
@@ -310,7 +247,7 @@ export class CollectionBrowserDataSource
   addPage(pageNum: number, pageTiles: TileModel[]): void {
     this.pages[pageNum] = pageTiles;
     this.numTileModels += pageTiles.length;
-    this.host.requestUpdate();
+    this.requestHostUpdate();
   }
 
   /**
@@ -350,6 +287,13 @@ export class CollectionBrowserDataSource
     return Object.values(this.pages).flat().indexOf(tile);
   }
 
+  /**
+   * @inheritdoc
+   */
+  getPageSize(): number {
+    return this.pageSize;
+  }
+
   /**
    * @inheritdoc
    */
@@ -361,32 +305,37 @@ export class CollectionBrowserDataSource
   /**
    * @inheritdoc
    */
-  reset(): void {
-    this.pages = {};
-    this.aggregations = {};
-    this.yearHistogramAggregation = undefined;
-    this.pageFetchesInProgress = {};
-    this.pageElements = undefined;
-    this.parentCollections = [];
-    this.prefixFilterCountMap = {};
-
-    this.offset = 0;
-    this.numTileModels = 0;
-    this.totalResults = 0;
-    this.endOfDataReached = false;
-
-    this.host.requestUpdate();
+  setFetchesSuppressed(suppressed: boolean): void {
+    this.suppressFetches = suppressed;
   }
 
   /**
    * @inheritdoc
    */
   async handleQueryChange(): Promise<void> {
+    // Don't react to the change if fetches are suppressed for this data source
+    if (this.suppressFetches) return;
+
     this.reset();
+
+    // Reset the `initialSearchComplete` promise with a new value for the imminent search
+    this._initialSearchCompletePromise = new Promise(res => {
+      this._initialSearchCompleteResolver = res;
+    });
+
+    const shouldFetchFacets =
+      !this.host.suppressFacets &&
+      !FACETLESS_PAGE_ELEMENTS.includes(this.host.profileElement!);
+
+    // Fire the initial page & facet requests
+    this.queryInitialized = true;
     await Promise.all([
       this.doInitialPageFetch(),
-      this.host.suppressFacets ? null : this.fetchFacets(),
+      shouldFetchFacets ? this.fetchFacets() : null,
     ]);
+
+    // Resolve the `initialSearchComplete` promise for this search
+    this._initialSearchCompleteResolver(true);
   }
 
   /**
@@ -403,22 +352,30 @@ export class CollectionBrowserDataSource
         ),
       ])
     );
-    this.host.requestUpdate();
-    this.host.refreshVisibleResults();
+    this.requestHostUpdate();
+    this.refreshVisibleResults();
   }
 
   /**
    * @inheritdoc
    */
   checkAllTiles = (): void => {
-    this.map(model => ({ ...model, checked: true }));
+    this.map(model => {
+      const cloned = model.clone();
+      cloned.checked = true;
+      return cloned;
+    });
   };
 
   /**
    * @inheritdoc
    */
   uncheckAllTiles = (): void => {
-    this.map(model => ({ ...model, checked: false }));
+    this.map(model => {
+      const cloned = model.clone();
+      cloned.checked = false;
+      return cloned;
+    });
   };
 
   /**
@@ -461,7 +418,8 @@ export class CollectionBrowserDataSource
     // Swap in the new pages
     this.pages = newPages;
     this.numTileModels -= numChecked;
-    this.host.requestUpdate();
+    this.requestHostUpdate();
+    this.refreshVisibleResults();
   };
 
   /**
@@ -495,8 +453,6 @@ export class CollectionBrowserDataSource
       );
   }
 
-  // DATA FETCHES
-
   /**
    * @inheritdoc
    */
@@ -519,6 +475,47 @@ export class CollectionBrowserDataSource
     );
   }
 
+  /**
+   * Sets the state for whether the initial set of search results for the
+   * current query is loading
+   */
+  private setSearchResultsLoading(loading: boolean): void {
+    this.searchResultsLoading = loading;
+    if (this.activeOnHost) {
+      this.host.setSearchResultsLoading(loading);
+    }
+  }
+
+  /**
+   * Sets the state for whether the facets for a query is loading
+   */
+  private setFacetsLoading(loading: boolean): void {
+    this.facetsLoading = loading;
+    if (this.activeOnHost) {
+      this.host.setFacetsLoading(loading);
+    }
+  }
+
+  /**
+   * Requests that the host perform an update, provided this data
+   * source is actively installed on it.
+   */
+  private requestHostUpdate(): void {
+    if (this.activeOnHost) {
+      this.host.requestUpdate();
+    }
+  }
+
+  /**
+   * Requests that the host refresh its visible tiles, provided this
+   * data source is actively installed on it.
+   */
+  private refreshVisibleResults(): void {
+    if (this.activeOnHost) {
+      this.host.refreshVisibleResults();
+    }
+  }
+
   /**
    * The query key is a string that uniquely identifies the current search.
    * It consists of:
@@ -530,15 +527,15 @@ export class CollectionBrowserDataSource
    *  - Any currently-applied prefix filters
    *  - The current sort options
    *
-   * This lets us keep track of queries so we don't persist data that's
-   * no longer relevant.
+   * This lets us internally keep track of queries so we don't persist data that's
+   * no longer relevant. Not meant to be human-readable.
    */
   get pageFetchQueryKey(): string {
-    const profileKey = `${this.host.withinProfile}--${this.host.profileElement}`;
+    const profileKey = `pf;${this.host.withinProfile}--pe;${this.host.profileElement}`;
     const pageTarget = this.host.withinCollection ?? profileKey;
-    const sortField = this.host.sortParam?.field ?? 'none';
-    const sortDirection = this.host.sortParam?.direction ?? 'none';
-    return `${this.fullQuery}-${pageTarget}-${this.host.searchType}-${sortField}-${sortDirection}`;
+    const sortField = this.host.selectedSort ?? 'none';
+    const sortDirection = this.host.sortDirection ?? 'none';
+    return `fq:${this.fullQuery}-pt:${pageTarget}-st:${this.host.searchType}-sf:${sortField}-sd:${sortDirection}`;
   }
 
   /**
@@ -546,9 +543,9 @@ export class CollectionBrowserDataSource
    * are not relevant in determining aggregation queries.
    */
   get facetFetchQueryKey(): string {
-    const profileKey = `${this.host.withinProfile}--${this.host.profileElement}`;
+    const profileKey = `pf;${this.host.withinProfile}--pe;${this.host.profileElement}`;
     const pageTarget = this.host.withinCollection ?? profileKey;
-    return `${this.fullQuery}-${pageTarget}-${this.host.searchType}`;
+    return `fq:${this.fullQuery}-pt:${pageTarget}-st:${this.host.searchType}`;
   }
 
   /**
@@ -818,6 +815,8 @@ export class CollectionBrowserDataSource
     if (!this.canPerformSearch) return;
 
     const { facetFetchQueryKey } = this;
+    if (this.fetchesInProgress.has(facetFetchQueryKey)) return;
+    this.fetchesInProgress.add(facetFetchQueryKey);
 
     const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
     const params: SearchParams = {
@@ -835,7 +834,7 @@ export class CollectionBrowserDataSource
       'aggregations'
     );
 
-    this.host.setFacetsLoading(true);
+    this.setFacetsLoading(true);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType
@@ -846,7 +845,8 @@ export class CollectionBrowserDataSource
     // If so, we just want to discard this set of aggregations because they are
     // likely no longer valid for the newer query.
     const queryChangedSinceFetch =
-      facetFetchQueryKey !== this.facetFetchQueryKey;
+      !this.fetchesInProgress.has(facetFetchQueryKey);
+    this.fetchesInProgress.delete(facetFetchQueryKey);
     if (queryChangedSinceFetch) return;
 
     if (!success) {
@@ -861,6 +861,7 @@ export class CollectionBrowserDataSource
         );
       }
 
+      this.setFacetsLoading(false);
       return;
     }
 
@@ -876,18 +877,17 @@ export class CollectionBrowserDataSource
     this.yearHistogramAggregation =
       success?.response?.aggregations?.year_histogram;
 
-    this.host.setFacetsLoading(false);
-    this.host.requestUpdate();
+    this.setFacetsLoading(false);
+    this.requestHostUpdate();
   }
 
   /**
    * Performs the initial page fetch(es) for the current search state.
    */
   private async doInitialPageFetch(): Promise<void> {
-    this.host.setSearchResultsLoading(true);
+    this.setSearchResultsLoading(true);
     // Try to batch 2 initial page requests when possible
     await this.fetchPage(this.host.initialPageNumber, 2);
-    this.host.setSearchResultsLoading(false);
   }
 
   /**
@@ -899,19 +899,9 @@ export class CollectionBrowserDataSource
    *  if `pageNumber != 1`, defaulting to a single page.
    */
   async fetchPage(pageNumber: number, numInitialPages = 1): Promise<void> {
-    console.log(`fetchPage(${pageNumber})`, {
-      canPerformSearch: this.canPerformSearch,
-      baseQuery: this.host.baseQuery,
-    });
     const trimmedQuery = this.host.baseQuery?.trim();
     if (!this.canPerformSearch) return;
 
-    console.log(`fetchPage - canPerformSearch`, {
-      hasPage: this.hasPage(pageNumber),
-      endOfDataReached: this.endOfDataReached,
-      pageFetchesInProgress: this.pageFetchesInProgress,
-      selectedFacets: JSON.stringify(this.host.selectedFacets),
-    });
     // if we already have data, don't fetch again
     if (this.hasPage(pageNumber)) return;
 
@@ -919,25 +909,36 @@ export class CollectionBrowserDataSource
 
     // Batch multiple initial page requests together if needed (e.g., can request
     // pages 1 and 2 together in a single request).
-    const numPages = pageNumber === 1 ? numInitialPages : 1;
+    let numPages = pageNumber === 1 ? numInitialPages : 1;
     const numRows = this.pageSize * numPages;
 
     // if a fetch is already in progress for this query and page, don't fetch again
     const { pageFetchQueryKey } = this;
-    const pageFetches =
-      this.pageFetchesInProgress[pageFetchQueryKey] ?? new Set();
-    if (pageFetches.has(pageNumber)) {
-      console.log(
-        `Skipping fetch for page ${pageNumber} because one is already in progress`
-      );
-      return;
-    }
+    const currentPageKey = `${pageFetchQueryKey}-p:${pageNumber}`;
+    if (this.fetchesInProgress.has(currentPageKey)) return;
+
     for (let i = 0; i < numPages; i += 1) {
-      pageFetches.add(pageNumber + i);
+      this.fetchesInProgress.add(`${pageFetchQueryKey}-p:${pageNumber + i}`);
+    }
+    this.previousQueryKey = pageFetchQueryKey;
+
+    let sortParams = this.host.sortParam ? [this.host.sortParam] : [];
+    // TODO eventually the PPS should handle these defaults natively
+    const isDefaultProfileSort =
+      this.host.withinProfile && this.host.selectedSort === SortField.default;
+    if (isDefaultProfileSort && this.host.defaultSortParam) {
+      const sortOption =
+        SORT_OPTIONS[this.host.defaultSortParam.field as SortField];
+      if (sortOption.searchServiceKey) {
+        sortParams = [
+          {
+            field: sortOption.searchServiceKey,
+            direction: 'desc',
+          },
+        ];
+      }
     }
-    this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
 
-    const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
     const params: SearchParams = {
       ...this.pageSpecifierParams,
       query: trimmedQuery || '',
@@ -949,50 +950,48 @@ export class CollectionBrowserDataSource
     };
     params.uid = await this.requestUID(params, 'hits');
 
-    console.log('=== FIRING PAGE REQUEST ===');
+    log('=== FIRING PAGE REQUEST ===', params);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType
     );
-    console.log('=== RECEIVED PAGE RESPONSE IN CB === ');
+    log('=== RECEIVED PAGE RESPONSE IN CB ===', searchResponse);
     const success = searchResponse?.success;
 
-    // This is checking to see if the query has changed since the data was fetched.
-    // If so, we just want to discard the data since there should be a new query
-    // right behind it.
-    const queryChangedSinceFetch = pageFetchQueryKey !== this.pageFetchQueryKey;
-    if (queryChangedSinceFetch) return;
+    // This is checking to see if the fetch has been invalidated since it was fired off.
+    // If so, we just want to discard the response since it is for an obsolete query state.
+    if (!this.fetchesInProgress.has(currentPageKey)) return;
+    for (let i = 0; i < numPages; i += 1) {
+      this.fetchesInProgress.delete(`${pageFetchQueryKey}-p:${pageNumber + i}`);
+    }
 
     if (!success) {
       const errorMsg = searchResponse?.error?.message;
       const detailMsg = searchResponse?.error?.details?.message;
 
-      this.host.queryErrorMessage = `${errorMsg ?? ''}${
+      this.queryErrorMessage = `${errorMsg ?? ''}${
         detailMsg ? `; ${detailMsg}` : ''
       }`;
 
-      if (!this.host.queryErrorMessage) {
-        this.host.queryErrorMessage =
-          'Missing or malformed response from backend';
+      if (!this.queryErrorMessage) {
+        this.queryErrorMessage = 'Missing or malformed response from backend';
         // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
         window?.Sentry?.captureMessage?.(this.queryErrorMessage, 'error');
       }
 
-      for (let i = 0; i < numPages; i += 1) {
-        this.pageFetchesInProgress[pageFetchQueryKey]?.delete(pageNumber + i);
-      }
-
-      this.host.setSearchResultsLoading(false);
-      this.host.requestUpdate();
+      this.setSearchResultsLoading(false);
+      this.requestHostUpdate();
       return;
     }
 
     this.totalResults = success.response.totalResults - this.offset;
-    this.host.setTotalResultCount(this.totalResults);
+    if (this.activeOnHost) {
+      this.host.setTotalResultCount(this.totalResults);
 
-    // display event to offshoot when result count is zero.
-    if (this.totalResults === 0) {
-      this.host.emitEmptyResults();
+      // display event to offshoot when result count is zero.
+      if (this.totalResults === 0) {
+        this.host.emitEmptyResults();
+      }
     }
 
     if (this.host.withinCollection) {
@@ -1000,7 +999,9 @@ export class CollectionBrowserDataSource
 
       // 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.host.applyDefaultCollectionSort(this.collectionExtraInfo);
+      if (this.activeOnHost) {
+        this.host.applyDefaultCollectionSort(this.collectionExtraInfo);
+      }
 
       if (this.collectionExtraInfo) {
         this.parentCollections = [].concat(
@@ -1008,10 +1009,6 @@ export class CollectionBrowserDataSource
         );
       }
     } else if (this.host.withinProfile) {
-      console.log(
-        'host is within profile, setting acct info:',
-        success.response.accountExtraInfo
-      );
       this.accountExtraInfo = success.response.accountExtraInfo;
       this.pageElements = success.response.pageElements;
     }
@@ -1026,7 +1023,16 @@ export class CollectionBrowserDataSource
         }
       }
 
-      // Update the data source for each returned page
+      // Update the data source for each returned page.
+      // For loans and web archives, we must account for receiving more pages than we asked for.
+      if (
+        this.host.profileElement === 'lending' ||
+        this.host.profileElement === 'web_archives'
+      ) {
+        numPages = Math.ceil(results.length / this.pageSize);
+        this.endOfDataReached = true;
+        if (this.activeOnHost) this.host.setTileCount(this.totalResults);
+      }
       for (let i = 0; i < numPages; i += 1) {
         const pageStartIndex = this.pageSize * i;
         this.addTilesToDataSource(
@@ -1042,14 +1048,11 @@ export class CollectionBrowserDataSource
     const resultCountDiscrepancy = numRows - results.length;
     if (resultCountDiscrepancy > 0) {
       this.endOfDataReached = true;
-      this.host.setTileCount(this.totalResults);
-    }
-
-    for (let i = 0; i < numPages; i += 1) {
-      this.pageFetchesInProgress[pageFetchQueryKey]?.delete(pageNumber + i);
+      if (this.activeOnHost) this.host.setTileCount(this.totalResults);
     }
 
-    this.host.requestUpdate();
+    this.setSearchResultsLoading(false);
+    this.requestHostUpdate();
   }
 
   /**
@@ -1062,110 +1065,19 @@ export class CollectionBrowserDataSource
     pageNumber: number,
     results: SearchResult[]
   ): void {
-    // copy our existing datasource so when we set it below, it gets set
-    // instead of modifying the existing dataSource since object changes
-    // don't trigger a re-render
-    // const datasource = { ...this.dataSource };
     const tiles: TileModel[] = [];
     results?.forEach(result => {
       if (!result.identifier) return;
-
-      let loginRequired = false;
-      let contentWarning = false;
-      // Check if item and item in "modifying" collection, setting above flags
-      if (
-        result.collection?.values.length &&
-        result.mediatype?.value !== 'collection'
-      ) {
-        for (const collection of result.collection?.values ?? []) {
-          if (collection === 'loggedin') {
-            loginRequired = true;
-            if (contentWarning) break;
-          }
-          if (collection === 'no-preview') {
-            contentWarning = true;
-            if (loginRequired) break;
-          }
-        }
-      }
-
-      tiles.push({
-        averageRating: result.avg_rating?.value,
-        checked: false,
-        collections: result.collection?.values ?? [],
-        collectionFilesCount: result.collection_files_count?.value ?? 0,
-        collectionSize: result.collection_size?.value ?? 0,
-        commentCount: result.num_reviews?.value ?? 0,
-        creator: result.creator?.value,
-        creators: result.creator?.values ?? [],
-        dateAdded: result.addeddate?.value,
-        dateArchived: result.publicdate?.value,
-        datePublished: result.date?.value,
-        dateReviewed: result.reviewdate?.value,
-        description: result.description?.values.join('\n'),
-        favCount: result.num_favorites?.value ?? 0,
-        href: this.collapseRepeatedQuotes(result.__href__?.value),
-        identifier: result.identifier,
-        issue: result.issue?.value,
-        itemCount: result.item_count?.value ?? 0,
-        mediatype: this.getMediatype(result),
-        snippets: result.highlight?.values ?? [],
-        source: result.source?.value,
-        subjects: result.subject?.values ?? [],
-        title: result.title?.value ?? '',
-        volume: result.volume?.value,
-        viewCount: result.downloads?.value ?? 0,
-        weeklyViewCount: result.week?.value,
-        loginRequired,
-        contentWarning,
-      });
+      tiles.push(new TileModel(result));
     });
     this.addPage(pageNumber, tiles);
     const visiblePages = this.host.currentVisiblePageNumbers;
     const needsReload = visiblePages.includes(pageNumber);
     if (needsReload) {
-      this.host.refreshVisibleResults();
+      this.refreshVisibleResults();
     }
   }
 
-  /**
-   * Returns the mediatype string for the given search result, taking into account
-   * the special `favorited_search` hit type.
-   * @param result The search result to extract a mediatype from
-   */
-  private getMediatype(result: SearchResult): MediaType {
-    /**
-     * hit_type == 'favorited_search' is basically a new hit_type
-     * - we are getting from PPS.
-     * - which gives response for fav- collection
-     * - having favorited items like account/collection/item etc..
-     * - as user can also favorite a search result (a search page)
-     * - so we need to have response (having fav- items and fav- search results)
-     *
-     * if backend hit_type == 'favorited_search'
-     * - let's assume a "search" as new mediatype
-     */
-    if (result?.rawMetadata?.hit_type === 'favorited_search') {
-      return 'search';
-    }
-
-    return result.mediatype?.value ?? 'data';
-  }
-
-  /**
-   * Returns the input string, but removing one set of quotes from all instances of
-   * ""clauses wrapped in two sets of quotes"". This assumes the quotes are already
-   * URL-encoded.
-   *
-   * This should be a temporary measure to address the fact that the __href__ field
-   * sometimes acquires extra quotation marks during query rewriting. Once there is a
-   * full Lucene parser in place that handles quoted queries correctly, this can likely
-   * be removed.
-   */
-  private collapseRepeatedQuotes(str?: string): string | undefined {
-    return str?.replace(/%22%22(?!%22%22)(.+?)%22%22/g, '%22$1%22');
-  }
-
   /**
    * Fetches the aggregation buckets for the given prefix filter type.
    */
@@ -1226,6 +1138,29 @@ export class CollectionBrowserDataSource
       {}
     );
 
-    this.host.requestUpdate();
+    this.requestHostUpdate();
+  }
+
+  /**
+   * @inheritdoc
+   */
+  async updatePrefixFiltersForCurrentSort(): Promise<void> {
+    if (['title', 'creator'].includes(this.host.selectedSort as SortField)) {
+      const filterType = this.host.selectedSort as PrefixFilterType;
+      if (!this.prefixFilterCountMap[filterType]) {
+        this.updatePrefixFilterCounts(filterType);
+      }
+    }
+  }
+
+  /**
+   * @inheritdoc
+   */
+  refreshLetterCounts(): void {
+    if (Object.keys(this.prefixFilterCountMap).length > 0) {
+      this.prefixFilterCountMap = {};
+    }
+    this.updatePrefixFiltersForCurrentSort();
+    this.requestHostUpdate();
   }
 }