@internetarchive/collection-browser 1.14.17-alpha.34 → 1.14.17-alpha.36

package/src/collection-browser.ts

@@ -171,8 +171,6 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) isLoansTab = false;
 
-  @property({ type: String }) queryErrorMessage?: string;
-
   /**
    * The results per page so we can paginate.
    *
@@ -450,7 +448,7 @@ export class CollectionBrowser
         !hasQuery && isCollection ? 'empty-collection' : 'no-results';
     }
 
-    if (this.queryErrorMessage) {
+    if (this.dataSource.queryErrorMessage) {
       this.placeholderType =
         !hasQuery && isCollection ? 'collection-error' : 'query-error';
     }
@@ -462,7 +460,7 @@ export class CollectionBrowser
         .placeholderType=${this.placeholderType}
         ?isMobileView=${this.mobileView}
         ?isCollection=${!!this.withinCollection}
-        .detailMessage=${this.queryErrorMessage ?? ''}
+        .detailMessage=${this.dataSource.queryErrorMessage ?? ''}
         .baseNavigationUrl=${this.baseNavigationUrl}
       ></empty-placeholder>
       ${this.infiniteScrollerTemplate}
@@ -1027,7 +1025,7 @@ export class CollectionBrowser
 
   updated(changed: PropertyValues) {
     console.log(
-      '* CB UPDATED',
+      '* CB UPDATED\n',
       [...changed.entries()]
         .map(([k, v]) => `${String(k)}: ${v} => ${this[k as keyof this]}`)
         .join('\n')
@@ -1410,7 +1408,7 @@ export class CollectionBrowser
       JSON.stringify(this.selectedFacets)
     );
     this.previousQueryKey = this.dataSource.pageFetchQueryKey;
-    this.emitQueryStateChanged();
+    // this.emitQueryStateChanged();
 
     this.tileModelOffset = 0;
     this.totalResults = undefined;
@@ -1418,7 +1416,6 @@ export class CollectionBrowser
       this.initialPageNumber === 1
         ? 2 // First two pages are batched into one request when starting from page 1
         : this.initialPageNumber;
-    this.queryErrorMessage = undefined;
 
     // Reset the infinite scroller's item count, so that it
     // shows tile placeholders until the new query's results load in

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

@@ -120,6 +120,11 @@ export interface CollectionBrowserDataSourceInterface
     Record<PrefixFilterType, PrefixFilterCounts>
   >;
 
+  /**
+   * Any error message from the most recent search results response.
+   */
+  readonly queryErrorMessage?: string;
+
   /**
    * An array of all the tile models whose management checkboxes are checked
    */

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

@@ -45,6 +45,10 @@ export class CollectionBrowserDataSource
    */
   private previousQueryKey: string = '';
 
+  private searchResultsLoading = false;
+
+  private facetsLoading = false;
+
   // TEMP for ease of debugging
   private id = Math.random();
 
@@ -104,6 +108,11 @@ export class CollectionBrowserDataSource
   prefixFilterCountMap: Partial<Record<PrefixFilterType, PrefixFilterCounts>> =
     {};
 
+  /**
+   * @inheritdoc
+   */
+  queryErrorMessage?: string;
+
   /**
    * Internal property to store the `resolve` function for the most recent
    * `initialSearchComplete` promise, allowing us to resolve it at the appropriate time.
@@ -124,7 +133,6 @@ export class CollectionBrowserDataSource
     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 &
@@ -132,7 +140,7 @@ export class CollectionBrowserDataSource
     /** Default size of result pages */
     private pageSize: number
   ) {
-    // No setup needed here, just defining properties
+    this.host.addController(this);
   }
 
   hostUpdate(): void {
@@ -146,7 +154,11 @@ export class CollectionBrowserDataSource
     // 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.host.dataSource !== this) return;
+    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;
@@ -163,10 +175,17 @@ export class CollectionBrowserDataSource
       this.host.clearResultsOnEmptyQuery && this.host.baseQuery === '';
     if (!(this.canPerformSearch || shouldShowEmptyQueryResults)) return;
 
-    this.host.emitQueryStateChanged();
+    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;
+  }
+
   /**
    * @inheritdoc
    */
@@ -185,6 +204,7 @@ export class CollectionBrowserDataSource
     this.pageElements = undefined;
     this.parentCollections = [];
     this.prefixFilterCountMap = {};
+    this.queryErrorMessage = undefined;
 
     this.offset = 0;
     this.numTileModels = 0;
@@ -192,9 +212,8 @@ export class CollectionBrowserDataSource
     this.endOfDataReached = false;
     this.queryInitialized = false;
 
-    this.host.setTotalResultCount(0);
-
-    this.host.requestUpdate();
+    if (this.activeOnHost) this.host.setTotalResultCount(0);
+    this.requestHostUpdate();
   }
 
   /**
@@ -203,7 +222,7 @@ export class CollectionBrowserDataSource
   addPage(pageNum: number, pageTiles: TileModel[]): void {
     this.pages[pageNum] = pageTiles;
     this.numTileModels += pageTiles.length;
-    this.host.requestUpdate();
+    this.requestHostUpdate();
   }
 
   /**
@@ -287,8 +306,8 @@ export class CollectionBrowserDataSource
         ),
       ])
     );
-    this.host.requestUpdate();
-    this.host.refreshVisibleResults();
+    this.requestHostUpdate();
+    this.refreshVisibleResults();
   }
 
   /**
@@ -353,8 +372,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();
   };
 
   /**
@@ -388,8 +407,6 @@ export class CollectionBrowserDataSource
       );
   }
 
-  // DATA FETCHES
-
   /**
    * @inheritdoc
    */
@@ -412,6 +429,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:
@@ -730,7 +788,7 @@ export class CollectionBrowserDataSource
       'aggregations'
     );
 
-    this.host.setFacetsLoading(true);
+    this.setFacetsLoading(true);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType
@@ -763,7 +821,7 @@ export class CollectionBrowserDataSource
         );
       }
 
-      this.host.setFacetsLoading(false);
+      this.setFacetsLoading(false);
       return;
     }
 
@@ -779,18 +837,18 @@ 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);
+    this.setSearchResultsLoading(false);
   }
 
   /**
@@ -867,13 +925,12 @@ export class CollectionBrowserDataSource
       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');
       }
@@ -882,17 +939,19 @@ export class CollectionBrowserDataSource
         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) {
@@ -954,14 +1013,14 @@ export class CollectionBrowserDataSource
     if (resultCountDiscrepancy > 0) {
       console.log('End of data reached');
       this.endOfDataReached = true;
-      this.host.setTileCount(this.totalResults);
+      if (this.activeOnHost) this.host.setTileCount(this.totalResults);
     }
 
     for (let i = 0; i < numPages; i += 1) {
       this.pageFetchesInProgress[pageFetchQueryKey]?.delete(pageNumber + i);
     }
 
-    this.host.requestUpdate();
+    this.requestHostUpdate();
   }
 
   /**
@@ -974,10 +1033,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;
@@ -987,7 +1042,7 @@ export class CollectionBrowserDataSource
     const visiblePages = this.host.currentVisiblePageNumbers;
     const needsReload = visiblePages.includes(pageNumber);
     if (needsReload) {
-      this.host.refreshVisibleResults();
+      this.refreshVisibleResults();
     }
   }
 
@@ -1051,6 +1106,6 @@ export class CollectionBrowserDataSource
       {}
     );
 
-    this.host.requestUpdate();
+    this.requestHostUpdate();
   }
 }

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

@@ -34,7 +34,6 @@ export interface CollectionBrowserQueryState {
 export interface CollectionBrowserSearchInterface
   extends CollectionBrowserQueryState {
   searchService?: SearchServiceInterface;
-  queryErrorMessage?: string;
   readonly sortParam: SortParam | null;
   readonly suppressFacets?: boolean;
   readonly initialPageNumber: number;

package/test/collection-browser.test.ts

@@ -32,7 +32,7 @@ import type { SortFilterBar } from '../src/sort-filter-bar/sort-filter-bar';
  */
 const nextTick = () => aTimeout(0);
 
-describe.skip('Collection Browser', () => {
+describe('Collection Browser', () => {
   beforeEach(async () => {
     // Apparently query params set by one test can bleed into other tests.
     // Since collection browser restores its state from certain query params, we need