@internetarchive/collection-browser 1.14.17-alpha.4 → 1.14.17-alpha.41

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,
@@ -20,283 +20,120 @@ import {
   PrefixFilterCounts,
   RequestKind,
 } from '../models';
-import type {
-  CollectionBrowserSearchInterface,
-  CollectionTitles,
-  PageSpecifierParams,
-} from './models';
+import 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';
 
-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;
-
-  /**
-   * Whether the end of the set of results for the current query state has been
-   * encountered (i.e., the last page of results).
-   */
-  readonly endOfDataReached: 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;
-
-  /**
-   * A map from collection identifiers that appear on hits or aggregations for the
-   * current search, to their human-readable collection titles.
-   */
-  readonly collectionTitles: CollectionTitles;
-
-  /**
-   * The "extra info" package provided by the PPS for collection pages, including details
-   * used to populate the target collection header & About tab content.
-   */
-  readonly collectionExtraInfo?: CollectionExtraInfo;
-
-  /**
-   * The "extra info" package provided by the PPS for profile pages, including details
-   * used to populate the profile header.
-   */
-  readonly accountExtraInfo?: AccountExtraInfo;
-
-  /**
-   * The set of requested page elements for profile pages, if applicable. These represent
-   * any content specific to the current profile tab.
-   */
-  readonly pageElements?: PageElementMap;
-
-  /**
-   * An array of the current target collection's parent collections. Should include *all*
-   * ancestors in the collection hierarchy, not just the immediate parent.
-   */
-  readonly parentCollections?: 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.
-   */
-  readonly prefixFilterCountMap: Partial<
-    Record<PrefixFilterType, PrefixFilterCounts>
-  >;
-
-  /**
-   * An array of all the tile models whose management checkboxes are checked
-   */
-  readonly checkedTileModels: TileModel[];
-
-  /**
-   * An array of all the tile models whose management checkboxes are unchecked
-   */
-  readonly uncheckedTileModels: TileModel[];
-
-  /**
-   * Resets the data source to its empty state, with no result pages, aggregations, etc.
-   */
-  reset(): void;
-
-  /**
-   * 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
-   */
-  addPage(pageNum: number, pageTiles: TileModel[]): void;
-
-  /**
-   * Returns the given page of tile models from the data source.
-   * @param pageNum Which page number to get (indexed starting from 1)
-   */
-  getPage(pageNum: number): TileModel[];
-
-  /**
-   * Returns the full set of paged tile models stored in this data source.
-   */
-  getAllPages(): Record<string, TileModel[]>;
+export class CollectionBrowserDataSource
+  implements CollectionBrowserDataSourceInterface
+{
+  private pages: Record<string, TileModel[]> = {};
 
-  /**
-   * Whether the data source contains any tiles for the given page number.
-   * @param pageNum Which page number to query (indexed starting from 1)
-   */
-  hasPage(pageNum: number): boolean;
+  private offset = 0;
 
-  /**
-   * 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
-   */
-  getTileModelAt(index: number): TileModel | undefined;
+  private numTileModels = 0;
 
   /**
-   * 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
+   * A set of fetch IDs that are valid for the current query state
    */
-  indexOf(tile: TileModel): number;
+  private fetchesInProgress = new Set<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
+   * A record of the query key used for the last search.
+   * If this changes, we need to load new results.
    */
-  fetchPage(pageNum: number, numInitialPages?: number): Promise<void>;
+  private previousQueryKey: string = '';
 
-  /**
-   * 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)
-   */
-  updatePrefixFilterCounts(filterType: PrefixFilterType): Promise<void>;
+  private searchResultsLoading = false;
 
-  /**
-   * 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
-   */
-  setPageSize(pageSize: number): void;
+  private facetsLoading = false;
 
-  /**
-   * Notifies the data source that a query change has occurred, which may trigger a data
-   * reset & new fetches.
-   */
-  handleQueryChange(): void;
+  // TEMP for ease of debugging
+  private id = Math.random();
 
   /**
-   * 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;
+  totalResults = 0;
 
   /**
-   * Checks every tile's management checkbox
+   * @inheritdoc
    */
-  checkAllTiles(): void;
+  endOfDataReached = false;
 
   /**
-   * Unchecks every tile's management checkbox
+   * @inheritdoc
    */
-  uncheckAllTiles(): void;
+  queryInitialized = false;
 
   /**
-   * 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[]> = {};
-
-  private offset = 0;
-
-  private numTileModels = 0;
+  aggregations?: Record<string, Aggregation>;
 
   /**
-   * Maps the full query key to the pages being fetched for that query
+   * @inheritdoc
    */
-  private pageFetchesInProgress: Record<string, Set<number>> = {};
+  yearHistogramAggregation?: Aggregation;
 
   /**
    * @inheritdoc
    */
-  totalResults = 0;
+  collectionTitles = new Map<string, string>();
 
   /**
    * @inheritdoc
    */
-  endOfDataReached = false;
+  collectionExtraInfo?: CollectionExtraInfo;
 
   /**
    * @inheritdoc
    */
-  aggregations?: Record<string, Aggregation>;
+  accountExtraInfo?: AccountExtraInfo;
 
   /**
    * @inheritdoc
    */
-  yearHistogramAggregation?: Aggregation;
+  pageElements?: PageElementMap;
 
   /**
    * @inheritdoc
    */
-  collectionTitles = new Map<string, string>();
+  parentCollections?: string[] = [];
 
   /**
    * @inheritdoc
    */
-  collectionExtraInfo?: CollectionExtraInfo;
+  prefixFilterCountMap: Partial<Record<PrefixFilterType, PrefixFilterCounts>> =
+    {};
 
   /**
    * @inheritdoc
    */
-  accountExtraInfo?: AccountExtraInfo;
+  queryErrorMessage?: string;
 
   /**
-   * @inheritdoc
+   * Internal property to store the `resolve` function for the most recent
+   * `initialSearchComplete` promise, allowing us to resolve it at the appropriate time.
    */
-  pageElements?: PageElementMap;
+  private _initialSearchCompleteResolver!: (val: boolean) => void;
 
   /**
-   * @inheritdoc
+   * Internal property to store the private value backing the `initialSearchComplete` getter.
    */
-  parentCollections?: string[] = [];
+  private _initialSearchCompletePromise: Promise<boolean> = new Promise(res => {
+    this._initialSearchCompleteResolver = res;
+  });
 
   /**
    * @inheritdoc
    */
-  prefixFilterCountMap: Partial<Record<PrefixFilterType, PrefixFilterCounts>> =
-    {};
+  get initialSearchComplete(): Promise<boolean> {
+    return this._initialSearchCompletePromise;
+  }
 
+  // eslint-disable-next-line no-useless-constructor
   constructor(
     /** The host element to which this controller should attach listeners */
     private readonly host: ReactiveControllerHost &
@@ -304,7 +141,56 @@ export class CollectionBrowserDataSource
     /** Default size of result pages */
     private pageSize: number
   ) {
-    this.host.addController(this as CollectionBrowserDataSourceInterface);
+    // Just setting some property values
+  }
+
+  hostConnected(): void {
+    console.log('hostConnected', this.id);
+    this.setSearchResultsLoading(this.searchResultsLoading);
+    this.setFacetsLoading(this.facetsLoading);
+  }
+
+  hostUpdate(): void {
+    console.log(
+      'hostUpdate',
+      this.id,
+      this.previousQueryKey,
+      this.pageFetchQueryKey
+    );
+    // 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.
+
+    // Only the currently-installed data source should react to the update
+    if (!this.activeOnHost) return;
+
+    // Copy loading states onto the host
+    this.setSearchResultsLoading(this.searchResultsLoading);
+    this.setFacetsLoading(this.facetsLoading);
+
+    // Can't perform searches without a search service
+    if (!this.host.searchService) return;
+
+    // We should only reset if part of the full query state has changed
+    const queryKeyChanged = this.pageFetchQueryKey !== this.previousQueryKey;
+    console.log('query keys', this.pageFetchQueryKey, this.previousQueryKey);
+    if (!queryKeyChanged) return;
+
+    // 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;
+
+    if (this.activeOnHost) this.host.emitQueryStateChanged();
+    this.handleQueryChange();
+  }
+
+  /**
+   * Returns whether this data source is the one currently installed on the host component.
+   */
+  private get activeOnHost(): boolean {
+    return this.host.dataSource === this;
   }
 
   /**
@@ -318,20 +204,27 @@ export class CollectionBrowserDataSource
    * @inheritdoc
    */
   reset(): void {
+    console.log('resetting data source', this.id);
     this.pages = {};
     this.aggregations = {};
     this.yearHistogramAggregation = undefined;
-    this.pageFetchesInProgress = {};
     this.pageElements = undefined;
     this.parentCollections = [];
     this.prefixFilterCountMap = {};
+    this.queryErrorMessage = undefined;
 
     this.offset = 0;
     this.numTileModels = 0;
     this.totalResults = 0;
     this.endOfDataReached = false;
+    this.queryInitialized = false;
 
-    this.host.requestUpdate();
+    // Invalidate any fetches in progress
+    this.fetchesInProgress.clear();
+    console.log('fetches cleared - size =', this.fetchesInProgress.size);
+
+    if (this.activeOnHost) this.host.setTotalResultCount(0);
+    this.requestHostUpdate();
   }
 
   /**
@@ -340,7 +233,7 @@ export class CollectionBrowserDataSource
   addPage(pageNum: number, pageTiles: TileModel[]): void {
     this.pages[pageNum] = pageTiles;
     this.numTileModels += pageTiles.length;
-    this.host.requestUpdate();
+    this.requestHostUpdate();
   }
 
   /**
@@ -393,10 +286,21 @@ export class CollectionBrowserDataSource
    */
   async handleQueryChange(): Promise<void> {
     this.reset();
+
+    // Reset the `initialSearchComplete` promise with a new value for the imminent search
+    this._initialSearchCompletePromise = new Promise(res => {
+      this._initialSearchCompleteResolver = res;
+    });
+
+    // Fire the initial page & facet requests
+    this.queryInitialized = true;
     await Promise.all([
       this.doInitialPageFetch(),
       this.host.suppressFacets ? null : this.fetchFacets(),
     ]);
+
+    // Resolve the `initialSearchComplete` promise for this search
+    this._initialSearchCompleteResolver(true);
   }
 
   /**
@@ -413,8 +317,8 @@ export class CollectionBrowserDataSource
         ),
       ])
     );
-    this.host.requestUpdate();
-    this.host.refreshVisibleResults();
+    this.requestHostUpdate();
+    this.refreshVisibleResults();
   }
 
   /**
@@ -479,8 +383,8 @@ export class CollectionBrowserDataSource
     // Swap in the new pages
     this.pages = newPages;
     this.numTileModels -= numChecked;
-    this.host.requestUpdate();
-    this.host.refreshVisibleResults();
+    this.requestHostUpdate();
+    this.refreshVisibleResults();
   };
 
   /**
@@ -514,8 +418,6 @@ export class CollectionBrowserDataSource
       );
   }
 
-  // DATA FETCHES
-
   /**
    * @inheritdoc
    */
@@ -538,6 +440,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:
@@ -549,15 +492,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}`;
+    return `fq:${this.fullQuery}-pt:${pageTarget}-st:${this.host.searchType}-sf:${sortField}-sd:${sortDirection}`;
   }
 
   /**
@@ -833,10 +776,14 @@ export class CollectionBrowserDataSource
    * the current search state.
    */
   private async fetchFacets(): Promise<void> {
+    console.log('fetchFacets', this.id, this.host.profileElement);
     const trimmedQuery = this.host.baseQuery?.trim();
     if (!this.canPerformSearch) return;
+    console.log('will actually fetch facets');
 
     const { facetFetchQueryKey } = this;
+    if (this.fetchesInProgress.has(facetFetchQueryKey)) return;
+    this.fetchesInProgress.add(facetFetchQueryKey);
 
     const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
     const params: SearchParams = {
@@ -854,7 +801,7 @@ export class CollectionBrowserDataSource
       'aggregations'
     );
 
-    this.host.setFacetsLoading(true);
+    this.setFacetsLoading(true);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType
@@ -865,8 +812,16 @@ 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;
-    if (queryChangedSinceFetch) return;
+      !this.fetchesInProgress.has(facetFetchQueryKey);
+    this.fetchesInProgress.delete(facetFetchQueryKey);
+    if (queryChangedSinceFetch) {
+      console.log(
+        'facet query has changed since fetch, returning. new/old:',
+        this.facetFetchQueryKey,
+        facetFetchQueryKey
+      );
+      return;
+    }
 
     if (!success) {
       const errorMsg = searchResponse?.error?.message;
@@ -880,6 +835,7 @@ export class CollectionBrowserDataSource
         );
       }
 
+      this.setFacetsLoading(false);
       return;
     }
 
@@ -895,18 +851,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);
   }
 
   /**
@@ -918,14 +873,6 @@ export class CollectionBrowserDataSource
    *  if `pageNumber != 1`, defaulting to a single page.
    */
   async fetchPage(pageNumber: number, numInitialPages = 1): Promise<void> {
-    console.log(
-      `fetchPage(${pageNumber})`,
-      this.canPerformSearch,
-      this.hasPage(pageNumber),
-      this.endOfDataReached,
-      this.host.baseQuery,
-      JSON.stringify(this.host.selectedFacets)
-    );
     const trimmedQuery = this.host.baseQuery?.trim();
     if (!this.canPerformSearch) return;
 
@@ -941,18 +888,31 @@ export class CollectionBrowserDataSource
 
     // 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}`;
+    console.log(
+      'page fetch key',
+      currentPageKey,
+      this.fetchesInProgress.has(currentPageKey)
+    );
+    if (this.fetchesInProgress.has(currentPageKey)) return;
+    // const pageFetches =
+    //   this.fetchesInProgress[pageFetchQueryKey] ?? new Set();
+    // if (pageFetches.has(pageNumber)) return;
+
     for (let i = 0; i < numPages; i += 1) {
-      pageFetches.add(pageNumber + i);
+      this.fetchesInProgress.add(`${pageFetchQueryKey}-p:${pageNumber + i}`);
     }
-    this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
+    console.log(
+      `fetchPage(${pageNumber})`,
+      this.id,
+      this.canPerformSearch,
+      this.hasPage(pageNumber),
+      this.endOfDataReached,
+      this.host.baseQuery,
+      JSON.stringify(this.host.selectedFacets),
+      this.pageFetchQueryKey
+    );
+    this.previousQueryKey = pageFetchQueryKey;
 
     const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
     const params: SearchParams = {
@@ -974,42 +934,45 @@ export class CollectionBrowserDataSource
     console.log('=== RECEIVED PAGE RESPONSE IN CB === ');
     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.
+    console.log(
+      'after page fetch key:',
+      currentPageKey,
+      this.fetchesInProgress.has(currentPageKey)
+    );
+    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) {
@@ -1071,14 +1034,11 @@ export class CollectionBrowserDataSource
     if (resultCountDiscrepancy > 0) {
       console.log('End of data reached');
       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();
   }
 
   /**
@@ -1091,10 +1051,6 @@ 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;
@@ -1104,7 +1060,7 @@ export class CollectionBrowserDataSource
     const visiblePages = this.host.currentVisiblePageNumbers;
     const needsReload = visiblePages.includes(pageNumber);
     if (needsReload) {
-      this.host.refreshVisibleResults();
+      this.refreshVisibleResults();
     }
   }
 
@@ -1168,6 +1124,6 @@ export class CollectionBrowserDataSource
       {}
     );
 
-    this.host.requestUpdate();
+    this.requestHostUpdate();
   }
 }