@internetarchive/collection-browser 1.14.14-alpha.1 → 1.14.16-alpha.1

package/src/collection-browser.ts

@@ -17,14 +17,7 @@ import type {
   InfiniteScrollerCellProviderInterface,
 } from '@internetarchive/infinite-scroller';
 import {
-  Aggregation,
-  Bucket,
   CollectionExtraInfo,
-  FilterConstraint,
-  FilterMap,
-  FilterMapBuilder,
-  SearchParams,
-  SearchResult,
   SearchServiceInterface,
   SearchType,
   SortDirection,
@@ -35,7 +28,6 @@ import type {
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
 import '@internetarchive/infinite-scroller';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
 import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
@@ -52,10 +44,8 @@ import {
   getDefaultSelectedFacets,
   TileModel,
   CollectionDisplayMode,
-  FacetBucket,
   PrefixFilterType,
   PrefixFilterCounts,
-  prefixFilterAggregationKeys,
   FacetEventDetails,
   sortOptionFromAPIString,
   SORT_OPTIONS,
@@ -65,6 +55,11 @@ import {
   RestorationStateHandler,
   RestorationState,
 } from './restoration-state-handler';
+import {
+  CollectionBrowserDataSource,
+  CollectionBrowserDataSourceInterface,
+} from './data-source/collection-browser-data-source';
+import type { CollectionBrowserSearchState } from './data-source/models';
 import chevronIcon from './assets/img/icons/chevron';
 import type { PlaceholderType } from './empty-placeholder';
 import './empty-placeholder';
@@ -79,14 +74,13 @@ import type { CollectionFacets } from './collection-facets';
 import type { ManageableItem } from './manage/manage-bar';
 import { formatDate } from './utils/format-date';
 
-type RequestKind = 'full' | 'hits' | 'aggregations';
-
 @customElement('collection-browser')
 export class CollectionBrowser
   extends LitElement
   implements
     InfiniteScrollerCellProviderInterface,
-    SharedResizeObserverResizeHandlerInterface
+    SharedResizeObserverResizeHandlerInterface,
+    CollectionBrowserSearchState
 {
   @property({ type: String }) baseNavigationUrl?: string;
 
@@ -102,8 +96,6 @@ export class CollectionBrowser
 
   @property({ type: String }) displayMode?: CollectionDisplayMode;
 
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
   @property({ type: Object }) defaultSortParam: SortParam | null = null;
 
   @property({ type: String }) selectedSort: SortField = SortField.default;
@@ -116,8 +108,6 @@ export class CollectionBrowser
 
   @property({ type: Number }) pageSize = 50;
 
-  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
-
   @property({ type: Number }) currentPage?: number;
 
   @property({ type: String }) minSelectedDate?: string;
@@ -146,9 +136,6 @@ export class CollectionBrowser
   @property({ type: String, reflect: true }) searchContext: string =
     analyticsCategories.default;
 
-  @property({ type: Object })
-  collectionNameCache?: CollectionNameCacheInterface;
-
   @property({ type: String }) pageContext: CollectionBrowserContext = 'search';
 
   @property({ type: Object })
@@ -162,6 +149,8 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) loggedIn = false;
 
+  @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
+
   @property({ type: Object }) modalManager?: ModalManagerInterface = undefined;
 
   @property({ type: Object })
@@ -176,10 +165,22 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) isLoansTab = false;
 
+  @property({ type: String }) queryErrorMessage?: string;
+
+  /**
+   * The results per page so we can paginate.
+   *
+   * This allows us to start in the middle of the search results and
+   * fetch data before or after the current page. If we don't have a key
+   * for the previous/next page, we'll fetch the next/previous page to populate it
+   */
+  @property({ type: Object }) dataSource: CollectionBrowserDataSourceInterface =
+    new CollectionBrowserDataSource(this, this.pageSize);
+
   /**
    * The page that the consumer wants to load.
    */
-  private initialPageNumber = 1;
+  initialPageNumber = 1;
 
   /**
    * This the the number of pages that we want to show.
@@ -196,16 +197,8 @@ export class CollectionBrowser
 
   @state() private facetsLoading = false;
 
-  @state() private fullYearAggregationLoading = false;
-
-  @state() private aggregations?: Record<string, Aggregation>;
-
-  @state() private fullYearsHistogramAggregation: Aggregation | undefined;
-
   @state() private totalResults?: number;
 
-  @state() private queryErrorMessage?: string;
-
   @state() private mobileView = false;
 
   @state() private mobileFacetsVisible = false;
@@ -257,28 +250,22 @@ export class CollectionBrowser
 
   private tileModelAtCellIndex(index: number): TileModel | undefined {
     const offsetIndex = index + this.tileModelOffset;
-    const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
-    const itemIndex = offsetIndex % this.pageSize;
-    const model = this.dataSource[pageNumber]?.[itemIndex];
+    const model = this.dataSource.getTileModelAt(offsetIndex);
     /**
      * If we encounter a model we don't have yet and we're not in the middle of an
      * automated scroll, fetch the page and just return undefined.
      * The datasource will be updated once the page is loaded and the cell will be rendered.
      *
-     * We disable it during the automated scroll since we may fetch pages for cells the
+     * We disable it during the automated scroll since we don't want to fetch pages for intervening cells the
      * user may never see.
      */
     if (!model && !this.isScrollingToCell) {
-      this.fetchPage(pageNumber);
+      const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
+      this.dataSource.fetchPage(pageNumber);
     }
     return model;
   }
 
-  private get sortFilterQueries(): string {
-    const queries = [this.titleQuery, this.creatorQuery];
-    return queries.filter(q => q).join(' AND ');
-  }
-
   // this is the total number of tiles we expect if
   // the data returned is a full page worth
   // this is useful for putting in placeholders for the expected number of tiles
@@ -286,15 +273,6 @@ export class CollectionBrowser
     return this.pagesToRender * this.pageSize;
   }
 
-  /**
-   * The results per page so we can paginate.
-   *
-   * This allows us to start in the middle of the search results and
-   * fetch data before or after the current page. If we don't have a key
-   * for the previous/next page, we'll fetch the next/previous page to populate it
-   */
-  private dataSource: Record<string, TileModel[]> = {};
-
   /**
    * How many tiles to offset the data source by, to account for any removed tiles.
    */
@@ -310,7 +288,7 @@ export class CollectionBrowser
    * Used in generating unique IDs for search requests, so that multiple requests coming from the
    * same browser session can be identified.
    */
-  private async getSessionId(): Promise<string> {
+  async getSessionId(): Promise<string> {
     try {
       const storedSessionId = sessionStorage?.getItem('cb-session');
       if (storedSessionId) {
@@ -345,6 +323,14 @@ export class CollectionBrowser
     return this.scrollToPage(pageNumber);
   }
 
+  setSearchResultsLoading(loading: boolean) {
+    this.searchResultsLoading = loading;
+  }
+
+  setFacetsLoading(loading: boolean) {
+    this.facetsLoading = loading;
+  }
+
   /**
    * Clears all selected/negated facets, date ranges, and letter filters.
    *
@@ -378,7 +364,6 @@ export class CollectionBrowser
     }
 
     if (sort) {
-      this.sortParam = null;
       this.sortDirection = null;
       this.selectedSort = SortField.default;
     }
@@ -616,7 +601,7 @@ export class CollectionBrowser
         .displayMode=${this.displayMode}
         .selectedTitleFilter=${this.selectedTitleFilter}
         .selectedCreatorFilter=${this.selectedCreatorFilter}
-        .prefixFilterCountMap=${this.prefixFilterCountMap}
+        .prefixFilterCountMap=${this.dataSource.prefixFilterCountMap}
         .resizeObserver=${this.resizeObserver}
         @sortChanged=${this.userChangedSort}
         @displayModeChanged=${this.displayModeChanged}
@@ -641,11 +626,11 @@ export class CollectionBrowser
         showSelectAll
         showUnselectAll
         @removeItems=${this.handleRemoveItems}
-        @selectAll=${this.checkAllTiles}
-        @unselectAll=${this.uncheckAllTiles}
+        @selectAll=${this.dataSource.checkAllTiles}
+        @unselectAll=${this.dataSource.uncheckAllTiles}
         @cancel=${() => {
           this.isManageView = false;
-          this.uncheckAllTiles();
+          this.dataSource.uncheckAllTiles();
         }}
       ></manage-bar>
     `;
@@ -659,7 +644,7 @@ export class CollectionBrowser
     this.dispatchEvent(
       new CustomEvent<{ items: ManageableItem[] }>('itemRemovalRequested', {
         detail: {
-          items: this.checkedTileModels.map(model => ({
+          items: this.dataSource.checkedTileModels.map(model => ({
             ...model,
             date: formatDate(model.datePublished, 'long'),
           })),
@@ -673,113 +658,7 @@ export class CollectionBrowser
    * of the data source to account for any new gaps in the data.
    */
   removeCheckedTiles(): void {
-    // To make sure our data source remains page-aligned, we will offset our data source by
-    // the number of removed tiles, so that we can just add the offset when the infinite
-    // scroller queries for cell contents.
-    // This only matters while we're still viewing the same set of results. If the user changes
-    // their query/filters/sort, then the data source is overwritten and the offset cleared.
-    const { checkedTileModels, uncheckedTileModels } = this;
-    const numChecked = checkedTileModels.length;
-    if (numChecked === 0) return;
-    this.tileModelOffset += numChecked;
-
-    const newDataSource: typeof this.dataSource = {};
-
-    // Which page the remaining tile models start on, post-offset
-    let offsetPageNumber = Math.floor(this.tileModelOffset / this.pageSize) + 1;
-    let indexOnPage = this.tileModelOffset % this.pageSize;
-
-    // Fill the pages up to that point with empty models
-    for (let page = 1; page <= offsetPageNumber; page += 1) {
-      const remainingHidden = this.tileModelOffset - this.pageSize * (page - 1);
-      const offsetCellsOnPage = Math.min(this.pageSize, remainingHidden);
-      newDataSource[page] = Array(offsetCellsOnPage).fill(undefined);
-    }
-
-    // Shift all the remaining tiles into their new positions in the data source
-    for (const model of uncheckedTileModels) {
-      if (!newDataSource[offsetPageNumber])
-        newDataSource[offsetPageNumber] = [];
-      newDataSource[offsetPageNumber].push(model);
-      indexOnPage += 1;
-      if (indexOnPage >= this.pageSize) {
-        offsetPageNumber += 1;
-        indexOnPage = 0;
-      }
-    }
-
-    // Swap in the new data source and update the infinite scroller
-    this.dataSource = newDataSource;
-    if (this.totalResults) this.totalResults -= numChecked;
-    if (this.infiniteScroller) {
-      this.infiniteScroller.itemCount -= numChecked;
-      this.infiniteScroller.refreshAllVisibleCells();
-    }
-  }
-
-  /**
-   * Checks every tile's management checkbox
-   */
-  checkAllTiles(): void {
-    this.mapDataSource(model => ({ ...model, checked: true }));
-  }
-
-  /**
-   * Unchecks every tile's management checkbox
-   */
-  uncheckAllTiles(): void {
-    this.mapDataSource(model => ({ ...model, checked: false }));
-  }
-
-  /**
-   * Applies the given map function to all of the tile models in every page of the data
-   * source. This method updates the data source object in immutable fashion.
-   *
-   * @param mapFn A callback function to apply on each tile model, as with Array.map
-   */
-  private mapDataSource(
-    mapFn: (model: TileModel, index: number, array: TileModel[]) => TileModel
-  ): void {
-    this.dataSource = Object.fromEntries(
-      Object.entries(this.dataSource).map(([page, tileModels]) => [
-        page,
-        tileModels.map((model, index, array) =>
-          model ? mapFn(model, index, array) : model
-        ),
-      ])
-    );
-    this.infiniteScroller?.refreshAllVisibleCells();
-  }
-
-  /**
-   * An array of all the tile models whose management checkboxes are checked
-   */
-  get checkedTileModels(): TileModel[] {
-    return this.getFilteredTileModels(model => model.checked);
-  }
-
-  /**
-   * An array of all the tile models whose management checkboxes are unchecked
-   */
-  get uncheckedTileModels(): TileModel[] {
-    return this.getFilteredTileModels(model => !model.checked);
-  }
-
-  /**
-   * Returns a flattened, filtered array of all the tile models in the data source
-   * for which the given predicate returns a truthy value.
-   *
-   * @param predicate A callback function to apply on each tile model, as with Array.filter
-   * @returns A filtered array of tile models satisfying the predicate
-   */
-  private getFilteredTileModels(
-    predicate: (model: TileModel, index: number, array: TileModel[]) => unknown
-  ): TileModel[] {
-    return Object.values(this.dataSource)
-      .flat()
-      .filter((model, index, array) =>
-        model ? predicate(model, index, array) : false
-      );
+    this.dataSource.removeCheckedTiles();
   }
 
   private userChangedSort(
@@ -811,10 +690,14 @@ export class CollectionBrowser
   }
 
   private selectedSortChanged(): void {
+    // Lazy-load the alphabet counts for title/creator sort bar as needed
+    this.updatePrefixFiltersForCurrentSort();
+  }
+
+  get sortParam(): SortParam | null {
     const sortOption = SORT_OPTIONS[this.selectedSort];
-    if (!sortOption.handledBySearchService) {
-      this.sortParam = null;
-      return;
+    if (!sortOption?.handledBySearchService) {
+      return null;
     }
 
     // If the sort option specified in the URL is unrecognized, we just use it as-is
@@ -826,11 +709,8 @@ export class CollectionBrowser
     // (i.e., it was unrecognized and had no directional flag)
     if (!this.sortDirection) this.sortDirection = 'asc';
 
-    if (!sortField) return;
-    this.sortParam = { field: sortField, direction: this.sortDirection };
-
-    // Lazy-load the alphabet counts for title/creator sort bar as needed
-    this.updatePrefixFiltersForCurrentSort();
+    if (!sortField) return null;
+    return { field: sortField, direction: this.sortDirection };
   }
 
   private displayModeChanged(
@@ -957,12 +837,13 @@ export class CollectionBrowser
    * The template for the facets component alone, without any surrounding wrappers.
    */
   private get facetsTemplate() {
-    if (this.suppressFacets)
+    if (this.suppressFacets) {
       return html`
         <p class="facets-message">
           ${msg('Facets are temporarily unavailable.')}
         </p>
       `;
+    }
 
     return html`
       <collection-facets
@@ -976,18 +857,19 @@ export class CollectionBrowser
         .recaptchaManager=${this.recaptchaManager}
         .resizeObserver=${this.resizeObserver}
         .searchType=${this.searchType}
-        .aggregations=${this.aggregations}
-        .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
+        .aggregations=${this.dataSource.aggregations}
+        .fullYearsHistogramAggregation=${this.dataSource
+          .yearHistogramAggregation}
         .minSelectedDate=${this.minSelectedDate}
         .maxSelectedDate=${this.maxSelectedDate}
         .selectedFacets=${this.selectedFacets}
         .baseNavigationUrl=${this.baseNavigationUrl}
-        .collectionNameCache=${this.collectionNameCache}
+        .collectionTitles=${this.dataSource.collectionTitles}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
         .allowExpandingDatePicker=${!this.mobileView}
         .contentWidth=${this.contentWidth}
         .query=${this.baseQuery}
-        .filterMap=${this.filterMap}
+        .filterMap=${this.dataSource.filterMap}
         .isManageView=${this.isManageView}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
@@ -1193,7 +1075,8 @@ export class CollectionBrowser
       changed.has('selectedCreatorFilter') ||
       changed.has('minSelectedDate') ||
       changed.has('maxSelectedDate') ||
-      changed.has('sortParam') ||
+      changed.has('selectedSort') ||
+      changed.has('sortDirection') ||
       changed.has('selectedFacets') ||
       changed.has('searchService') ||
       changed.has('withinCollection')
@@ -1351,7 +1234,7 @@ export class CollectionBrowser
     );
   }
 
-  private emitEmptyResults() {
+  emitEmptyResults() {
     this.dispatchEvent(new Event('emptyResults'));
   }
 
@@ -1435,24 +1318,23 @@ export class CollectionBrowser
 
   private async handleQueryChange() {
     // only reset if the query has actually changed
-    if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
+    if (
+      !this.searchService ||
+      this.dataSource.pageFetchQueryKey === this.previousQueryKey
+    )
       return;
 
     // If the new state prevents us from updating the search results, don't reset
     if (
-      !this.canPerformSearch &&
+      !this.dataSource.canPerformSearch &&
       !(this.clearResultsOnEmptyQuery && this.baseQuery === '')
     )
       return;
 
-    this.previousQueryKey = this.pageFetchQueryKey;
+    this.previousQueryKey = this.dataSource.pageFetchQueryKey;
 
-    this.dataSource = {};
     this.tileModelOffset = 0;
     this.totalResults = undefined;
-    this.aggregations = undefined;
-    this.fullYearsHistogramAggregation = undefined;
-    this.pageFetchesInProgress = {};
     this.endOfDataReached = false;
     this.pagesToRender =
       this.initialPageNumber === 1
@@ -1490,10 +1372,7 @@ export class CollectionBrowser
     });
 
     // Fire the initial page and facets requests
-    await Promise.all([
-      this.doInitialPageFetch(),
-      this.suppressFacets ? null : this.fetchFacets(),
-    ]);
+    await this.dataSource.handleQueryChange();
 
     // Resolve the `initialSearchComplete` promise for this search
     this._initialSearchCompleteResolver(true);
@@ -1551,13 +1430,6 @@ export class CollectionBrowser
     this.restorationStateHandler.persistState(restorationState);
   }
 
-  private async doInitialPageFetch(): Promise<void> {
-    this.searchResultsLoading = true;
-    // Try to batch 2 initial page requests when possible
-    await this.fetchPage(this.initialPageNumber, 2);
-    this.searchResultsLoading = false;
-  }
-
   private emitSearchResultsLoadingChanged(): void {
     this.dispatchEvent(
       new CustomEvent<{ loading: boolean }>('searchResultsLoadingChanged', {
@@ -1568,210 +1440,6 @@ export class CollectionBrowser
     );
   }
 
-  /**
-   * Produces a compact unique ID for a search request that can help with debugging
-   * on the backend by making related requests easier to trace through different services.
-   * (e.g., tying the hits/aggregations requests for the same page back to a single hash).
-   *
-   * @param params The search service parameters for the request
-   * @param kind The kind of request (hits-only, aggregations-only, or both)
-   * @returns A Promise resolving to the uid to apply to the request
-   */
-  private async requestUID(
-    params: SearchParams,
-    kind: RequestKind
-  ): Promise<string> {
-    const paramsToHash = JSON.stringify({
-      pageType: params.pageType,
-      pageTarget: params.pageTarget,
-      query: params.query,
-      fields: params.fields,
-      filters: params.filters,
-      sort: params.sort,
-      searchType: this.searchType,
-    });
-
-    const fullQueryHash = (await sha1(paramsToHash)).slice(0, 20); // First 80 bits of SHA-1 are plenty for this
-    const sessionId = (await this.getSessionId()).slice(0, 20); // Likewise
-    const page = params.page ?? 0;
-    const kindPrefix = kind.charAt(0); // f = full, h = hits, a = aggregations
-    const currentTime = Date.now();
-
-    return `R:${fullQueryHash}-S:${sessionId}-P:${page}-K:${kindPrefix}-T:${currentTime}`;
-  }
-
-  /**
-   * Constructs a search service FilterMap object from the combination of
-   * all the currently-applied filters. This includes any facets, letter
-   * filters, and date range.
-   */
-  private get filterMap(): FilterMap {
-    const builder = new FilterMapBuilder();
-
-    // Add the date range, if applicable
-    if (this.minSelectedDate) {
-      builder.addFilter(
-        'year',
-        this.minSelectedDate,
-        FilterConstraint.GREATER_OR_EQUAL
-      );
-    }
-    if (this.maxSelectedDate) {
-      builder.addFilter(
-        'year',
-        this.maxSelectedDate,
-        FilterConstraint.LESS_OR_EQUAL
-      );
-    }
-
-    // Add any selected facets
-    if (this.selectedFacets) {
-      for (const [facetName, facetValues] of Object.entries(
-        this.selectedFacets
-      )) {
-        const { name, values } = this.prepareFacetForFetch(
-          facetName,
-          facetValues
-        );
-        for (const [value, bucket] of Object.entries(values)) {
-          let constraint;
-          if (bucket.state === 'selected') {
-            constraint = FilterConstraint.INCLUDE;
-          } else if (bucket.state === 'hidden') {
-            constraint = FilterConstraint.EXCLUDE;
-          }
-
-          if (constraint) {
-            builder.addFilter(name, value, constraint);
-          }
-        }
-      }
-    }
-
-    // Add any letter filters
-    if (this.selectedTitleFilter) {
-      builder.addFilter(
-        'firstTitle',
-        this.selectedTitleFilter,
-        FilterConstraint.INCLUDE
-      );
-    }
-    if (this.selectedCreatorFilter) {
-      builder.addFilter(
-        'firstCreator',
-        this.selectedCreatorFilter,
-        FilterConstraint.INCLUDE
-      );
-    }
-
-    const filterMap = builder.build();
-    return filterMap;
-  }
-
-  /** The full query, including year facets and date range clauses */
-  private get fullQuery(): string | undefined {
-    let fullQuery = this.baseQuery?.trim() ?? '';
-
-    const { facetQuery, dateRangeQueryClause, sortFilterQueries } = this;
-
-    if (facetQuery) {
-      fullQuery += ` AND ${facetQuery}`;
-    }
-    if (dateRangeQueryClause) {
-      fullQuery += ` AND ${dateRangeQueryClause}`;
-    }
-    if (sortFilterQueries) {
-      fullQuery += ` AND ${sortFilterQueries}`;
-    }
-    return fullQuery.trim();
-  }
-
-  /**
-   * Generates a query string for the given facets
-   *
-   * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
-   */
-  private get facetQuery(): string | undefined {
-    if (!this.selectedFacets) return undefined;
-    const facetClauses = [];
-    for (const [facetName, facetValues] of Object.entries(
-      this.selectedFacets
-    )) {
-      facetClauses.push(this.buildFacetClause(facetName, facetValues));
-    }
-    return this.joinFacetClauses(facetClauses)?.trim();
-  }
-
-  /**
-   * Builds an OR-joined facet clause for the given facet name and values.
-   *
-   * E.g., for name `subject` and values
-   * `{ foo: { state: 'selected' }, bar: { state: 'hidden' } }`
-   * this will produce the clause
-   * `subject:("foo" OR -"bar")`.
-   *
-   * @param facetName The facet type (e.g., 'collection')
-   * @param facetValues The facet buckets, mapped by their keys
-   */
-  private buildFacetClause(
-    facetName: string,
-    facetValues: Record<string, FacetBucket>
-  ): string {
-    const { name: facetQueryName, values } = this.prepareFacetForFetch(
-      facetName,
-      facetValues
-    );
-    const facetEntries = Object.entries(values);
-    if (facetEntries.length === 0) return '';
-
-    const facetValuesArray: string[] = [];
-    for (const [key, facetData] of facetEntries) {
-      const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
-      facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
-    }
-
-    const valueQuery = facetValuesArray.join(` OR `);
-    return `${facetQueryName}:(${valueQuery})`;
-  }
-
-  /**
-   * Handles some special pre-request normalization steps for certain facet types
-   * that require them.
-   *
-   * @param facetName The name of the facet type (e.g., 'language')
-   * @param facetValues An array of values for that facet type
-   */
-  private prepareFacetForFetch(
-    facetName: string,
-    facetValues: Record<string, FacetBucket>
-  ): { name: string; values: Record<string, FacetBucket> } {
-    // eslint-disable-next-line prefer-const
-    let [normalizedName, normalizedValues] = [facetName, facetValues];
-
-    // The full "search engine" name of the lending field is "lending___status"
-    if (facetName === 'lending') {
-      normalizedName = 'lending___status';
-    }
-
-    return {
-      name: normalizedName,
-      values: normalizedValues,
-    };
-  }
-
-  /**
-   * Takes an array of facet clauses, and combines them into a
-   * full AND-joined facet query string. Empty clauses are ignored.
-   */
-  private joinFacetClauses(facetClauses: string[]): string | undefined {
-    const nonEmptyFacetClauses = facetClauses.filter(
-      clause => clause.length > 0
-    );
-    return nonEmptyFacetClauses.length > 0
-      ? `(${nonEmptyFacetClauses.join(' AND ')})`
-      : undefined;
-  }
-
   facetsChanged(e: CustomEvent<SelectedFacets>) {
     this.selectedFacets = e.detail;
   }
@@ -1799,76 +1467,6 @@ export class CollectionBrowser
     });
   }
 
-  private async fetchFacets() {
-    const trimmedQuery = this.baseQuery?.trim();
-    if (!this.canPerformSearch) return;
-
-    const { facetFetchQueryKey } = this;
-
-    const sortParams = this.sortParam ? [this.sortParam] : [];
-    const params: SearchParams = {
-      ...this.collectionParams,
-      query: trimmedQuery || '',
-      rows: 0,
-      filters: this.filterMap,
-      // Fetch a few extra buckets beyond the 6 we show, in case some get suppressed
-      aggregationsSize: 10,
-      // Note: we don't need an aggregations param to fetch the default aggregations from the PPS.
-      // The default aggregations for the search_results page type should be what we need here.
-    };
-    params.uid = await this.requestUID(
-      { ...params, sort: sortParams },
-      'aggregations'
-    );
-
-    this.facetsLoading = true;
-    const searchResponse = await this.searchService?.search(
-      params,
-      this.searchType
-    );
-    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 this set of aggregations because they are
-    // likely no longer valid for the newer query.
-    const queryChangedSinceFetch =
-      facetFetchQueryKey !== this.facetFetchQueryKey;
-    if (queryChangedSinceFetch) return;
-
-    if (!success) {
-      const errorMsg = searchResponse?.error?.message;
-      const detailMsg = searchResponse?.error?.details?.message;
-
-      if (!errorMsg && !detailMsg) {
-        // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
-        window?.Sentry?.captureMessage?.(
-          'Missing or malformed facet response from backend',
-          'error'
-        );
-      }
-
-      return;
-    }
-
-    const { aggregations, collectionTitles } = success.response;
-    this.aggregations = aggregations;
-
-    if (collectionTitles) {
-      this.collectionNameCache?.addKnownTitles(collectionTitles);
-    } else if (this.aggregations?.collection) {
-      this.collectionNameCache?.preloadIdentifiers(
-        (this.aggregations.collection.buckets as Bucket[]).map(bucket =>
-          bucket.key?.toString()
-        )
-      );
-    }
-
-    this.fullYearsHistogramAggregation =
-      success?.response?.aggregations?.year_histogram;
-
-    this.facetsLoading = false;
-  }
-
   private scrollToPage(pageNumber: number): Promise<void> {
     return new Promise(resolve => {
       const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
@@ -1898,212 +1496,12 @@ export class CollectionBrowser
     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
-   *   (a) a non-empty query is set, or
-   *   (b) we are on a collection page in metadata search mode.
-   */
-  private get canPerformSearch(): boolean {
-    if (!this.searchService) return false;
-
-    const trimmedQuery = this.baseQuery?.trim();
-    const hasNonEmptyQuery = !!trimmedQuery;
-    const isCollectionSearch = !!this.withinCollection;
-    const isMetadataSearch = this.searchType === SearchType.METADATA;
-
-    // Metadata searches within a collection are allowed to have no query.
-    // Otherwise, a non-empty query must be set.
-    return hasNonEmptyQuery || (isCollectionSearch && isMetadataSearch);
-  }
-
-  /**
-   * Additional params to pass to the search service if targeting a collection page,
-   * or null otherwise.
-   */
-  private get collectionParams(): {
-    pageType: string;
-    pageTarget: string;
-  } | null {
-    return this.withinCollection
-      ? { pageType: 'collection_details', pageTarget: this.withinCollection }
-      : null;
-  }
-
-  /**
-   * The query key is a string that uniquely identifies the current search.
-   * It consists of:
-   *  - The current base query
-   *  - The current collection
-   *  - The current search type
-   *  - Any currently-applied facets
-   *  - Any currently-applied date range
-   *  - 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.
-   */
-  private get pageFetchQueryKey(): string {
-    const sortField = this.sortParam?.field ?? 'none';
-    const sortDirection = this.sortParam?.direction ?? 'none';
-    return `${this.fullQuery}-${this.withinCollection}-${this.searchType}-${sortField}-${sortDirection}`;
-  }
-
-  /**
-   * Similar to `pageFetchQueryKey` above, but excludes sort fields since they
-   * are not relevant in determining aggregation queries.
-   */
-  private get facetFetchQueryKey(): string {
-    return `${this.fullQuery}-${this.withinCollection}-${this.searchType}`;
-  }
-
-  // this maps the query to the pages being fetched for that query
-  private pageFetchesInProgress: Record<string, Set<number>> = {};
-
-  /**
-   * Fetches one or more pages of results and updates the data source.
-   *
-   * @param pageNumber The page number to fetch
-   * @param numInitialPages If this is an initial page fetch (`pageNumber = 1`),
-   *  specifies how many pages to batch together in one request. Ignored
-   *  if `pageNumber != 1`, defaulting to a single page.
-   */
-  async fetchPage(pageNumber: number, numInitialPages = 1) {
-    const trimmedQuery = this.baseQuery?.trim();
-    if (!this.canPerformSearch) return;
-
-    // if we already have data, don't fetch again
-    if (this.dataSource[pageNumber]) return;
-
-    if (this.endOfDataReached) return;
-
-    // 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;
-    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)) return;
-    for (let i = 0; i < numPages; i += 1) {
-      pageFetches.add(pageNumber + i);
-    }
-    this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
-
-    const sortParams = this.sortParam ? [this.sortParam] : [];
-    const params: SearchParams = {
-      ...this.collectionParams,
-      query: trimmedQuery || '',
-      page: pageNumber,
-      rows: numRows,
-      sort: sortParams,
-      filters: this.filterMap,
-      aggregations: { omit: true },
-    };
-    params.uid = await this.requestUID(params, 'hits');
-
-    const searchResponse = await this.searchService?.search(
-      params,
-      this.searchType
-    );
-    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;
-
-    if (!success) {
-      const errorMsg = searchResponse?.error?.message;
-      const detailMsg = searchResponse?.error?.details?.message;
-
-      this.queryErrorMessage = `${errorMsg ?? ''}${
-        detailMsg ? `; ${detailMsg}` : ''
-      }`;
-
-      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.searchResultsLoading = false;
-      return;
-    }
-
-    this.totalResults = success.response.totalResults - this.tileModelOffset;
-
-    // display event to offshoot when result count is zero.
-    if (this.totalResults === 0) {
-      this.emitEmptyResults();
-    }
-
-    if (this.withinCollection) {
-      this.collectionInfo = success.response.collectionExtraInfo;
-
-      // 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(this.collectionInfo);
-
-      if (this.collectionInfo) {
-        this.parentCollections = [].concat(
-          this.collectionInfo.public_metadata?.collection ?? []
-        );
-      }
-    }
-
-    const { results, collectionTitles } = success.response;
-    if (results && results.length > 0) {
-      // Load any collection titles present on the response into the cache,
-      // or queue up preload fetches for them if none were present.
-      if (collectionTitles) {
-        this.collectionNameCache?.addKnownTitles(collectionTitles);
-      } else {
-        this.preloadCollectionNames(results);
-      }
-
-      // Update the data source for each returned page
-      for (let i = 0; i < numPages; i += 1) {
-        const pageStartIndex = this.pageSize * i;
-        this.updateDataSource(
-          pageNumber + i,
-          results.slice(pageStartIndex, pageStartIndex + this.pageSize)
-        );
-      }
-    }
-
-    // When we reach the end of the data, we can set the infinite scroller's
-    // item count to the real total number of results (rather than the
-    // temporary estimates based on pages rendered so far).
-    const resultCountDiscrepancy = numRows - results.length;
-    if (resultCountDiscrepancy > 0) {
-      this.endOfDataReached = true;
-      if (this.infiniteScroller) {
-        this.infiniteScroller.itemCount = this.totalResults;
-      }
-    }
-
-    for (let i = 0; i < numPages; i += 1) {
-      this.pageFetchesInProgress[pageFetchQueryKey]?.delete(pageNumber + i);
+  setTotalResultCount(count: number): void {
+    if (this.infiniteScroller) {
+      this.infiniteScroller.itemCount = count;
     }
   }
 
-  private preloadCollectionNames(results: SearchResult[]) {
-    const collectionIds = results
-      .map(result => result.collection?.values)
-      .flat();
-    const collectionIdsArray = Array.from(new Set(collectionIds)) as string[];
-    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
@@ -2111,7 +1509,7 @@ export class CollectionBrowser
    *  - Date Favorited for fav-* collections
    *  - Weekly views for all other collections
    */
-  private applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo) {
+  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.
@@ -2161,7 +1559,7 @@ export class CollectionBrowser
    * When the fetch completes, we need to reload the scroller if the cells for that
    * page are visible, but if the page is not currenlty visible, we don't need to reload
    */
-  private get currentVisiblePageNumbers(): number[] {
+  get currentVisiblePageNumbers(): number[] {
     const visibleCells = this.infiniteScroller?.getVisibleCellIndices() ?? [];
     const visiblePages = new Set<number>();
     visibleCells.forEach(cellIndex => {
@@ -2172,169 +1570,10 @@ export class CollectionBrowser
   }
 
   /**
-   * Update the datasource from the fetch response
-   *
-   * @param pageNumber
-   * @param results
-   */
-  private updateDataSource(pageNumber: number, results: SearchResult[]) {
-    // 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,
-      });
-    });
-    datasource[pageNumber] = tiles;
-    this.dataSource = datasource;
-    const visiblePages = this.currentVisiblePageNumbers;
-    const needsReload = visiblePages.includes(pageNumber);
-    if (needsReload) {
-      this.infiniteScroller?.refreshAllVisibleCells();
-    }
-  }
-
-  private getMediatype(result: SearchResult) {
-    /**
-     * 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.
+   * Refreshes all visible result cells in the infinite scroller.
    */
-  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. */
-  private async fetchPrefixFilterBuckets(
-    filterType: PrefixFilterType
-  ): Promise<Bucket[]> {
-    const trimmedQuery = this.baseQuery?.trim();
-    if (!this.canPerformSearch) return [];
-
-    const filterAggregationKey = prefixFilterAggregationKeys[filterType];
-    const sortParams = this.sortParam ? [this.sortParam] : [];
-
-    const params: SearchParams = {
-      ...this.collectionParams,
-      query: trimmedQuery || '',
-      rows: 0,
-      filters: this.filterMap,
-      // Only fetch the firstTitle or firstCreator aggregation
-      aggregations: { simpleParams: [filterAggregationKey] },
-      // Fetch all 26 letter buckets
-      aggregationsSize: 26,
-    };
-    params.uid = await this.requestUID(
-      { ...params, sort: sortParams },
-      'aggregations'
-    );
-
-    const searchResponse = await this.searchService?.search(
-      params,
-      this.searchType
-    );
-
-    return (searchResponse?.success?.response?.aggregations?.[
-      filterAggregationKey
-    ]?.buckets ?? []) as Bucket[];
-  }
-
-  /** Fetches and caches the prefix filter counts for the given filter type. */
-  private async updatePrefixFilterCounts(
-    filterType: PrefixFilterType
-  ): Promise<void> {
-    const { facetFetchQueryKey } = this;
-    const buckets = await this.fetchPrefixFilterBuckets(filterType);
-
-    // Don't update the filter counts for an outdated query (if it has been changed
-    // since we sent the request)
-    const queryChangedSinceFetch =
-      facetFetchQueryKey !== this.facetFetchQueryKey;
-    if (queryChangedSinceFetch) return;
-
-    // Unpack the aggregation buckets into a simple map like { 'A': 50, 'B': 25, ... }
-    this.prefixFilterCountMap = { ...this.prefixFilterCountMap }; // Clone the object to trigger an update
-    this.prefixFilterCountMap[filterType] = buckets.reduce(
-      (acc: Record<string, number>, bucket: Bucket) => {
-        acc[(bucket.key as string).toUpperCase()] = bucket.doc_count;
-        return acc;
-      },
-      {}
-    );
+  refreshVisibleResults(): void {
+    this.infiniteScroller?.refreshAllVisibleCells();
   }
 
   /**
@@ -2345,7 +1584,7 @@ export class CollectionBrowser
     if (['title', 'creator'].includes(this.selectedSort)) {
       const filterType = this.selectedSort as PrefixFilterType;
       if (!this.prefixFilterCountMap[filterType]) {
-        this.updatePrefixFilterCounts(filterType);
+        this.dataSource.updatePrefixFilterCounts(filterType);
       }
     }
   }
@@ -2403,7 +1642,7 @@ export class CollectionBrowser
         .model=${model}
         .tileDisplayMode=${this.displayMode}
         .resizeObserver=${this.resizeObserver}
-        .collectionNameCache=${this.collectionNameCache}
+        .collectionTitles=${this.dataSource.collectionTitles}
         .sortParam=${this.sortParam}
         .defaultSortParam=${this.defaultSortParam}
         .creatorFilter=${this.selectedCreatorFilter}
@@ -2424,7 +1663,7 @@ export class CollectionBrowser
   private scrollThresholdReached() {
     if (!this.endOfDataReached) {
       this.pagesToRender += 1;
-      this.fetchPage(this.pagesToRender);
+      this.dataSource.fetchPage(this.pagesToRender);
     }
   }
 
@@ -2596,8 +1835,7 @@ export class CollectionBrowser
         }
 
         .facets-message {
-          text-align: center;
-          font-size: 1.2rem;
+          font-size: 1.4rem;
         }
 
         .desktop #left-column-scroll-sentinel {