@internetarchive/collection-browser 2.1.10 → 2.1.11-alpha.1

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

@@ -72,6 +72,12 @@ export class CollectionBrowserDataSource
    */
   private facetsLoading = false;
 
+  /**
+   * Whether the facets are actually visible -- if not, then we can delay any facet
+   * fetches until they become visible.
+   */
+  private facetsVisible = false;
+
   /**
    * Whether further query changes should be ignored and not trigger fetches
    */
@@ -238,6 +244,7 @@ export class CollectionBrowserDataSource
     this.numTileModels = 0;
     this.endOfDataReached = false;
     this.queryInitialized = false;
+    this.facetsLoading = false;
 
     // Invalidate any fetches in progress
     this.fetchesInProgress.clear();
@@ -369,6 +376,7 @@ export class CollectionBrowserDataSource
    * @inheritdoc
    */
   async handleQueryChange(): Promise<void> {
+    console.log('in handleQueryChange');
     // Don't react to the change if fetches are suppressed for this data source
     if (this.suppressFetches) return;
 
@@ -379,21 +387,60 @@ export class CollectionBrowserDataSource
       this._initialSearchCompleteResolver = res;
     });
 
-    const shouldFetchFacets =
-      !this.host.suppressFacets &&
-      !FACETLESS_PAGE_ELEMENTS.includes(this.host.profileElement!);
-
     // Fire the initial page & facet requests
+    console.log('handling query change:', this.canFetchFacets);
     this.queryInitialized = true;
     await Promise.all([
       this.doInitialPageFetch(),
-      shouldFetchFacets ? this.fetchFacets() : null,
+      this.canFetchFacets ? this.fetchFacets() : null,
     ]);
 
     // Resolve the `initialSearchComplete` promise for this search
     this._initialSearchCompleteResolver(true);
   }
 
+  /**
+   * @inheritdoc
+   */
+  async handleFacetVisibilityChange(visible: boolean): Promise<void> {
+    console.log(
+      'handling facet visibility change:',
+      this.facetsVisible,
+      '->',
+      visible
+    );
+    const facetsBecameVisible = !this.facetsVisible && visible;
+    this.facetsVisible = visible;
+
+    const needsFetch =
+      this.host.lazyLoadFacets && facetsBecameVisible && this.canFetchFacets;
+    if (needsFetch) {
+      this.fetchFacets();
+    }
+  }
+
+  /**
+   * Whether the data source & its host are in a state where a facet request should be fired.
+   * (i.e., they aren't suppressed or already loading, etc.)
+   */
+  private get canFetchFacets(): boolean {
+    // Don't fetch facets if they are suppressed entirely or not required for the current profile page element
+    if (this.host.suppressFacets) return false;
+    if (FACETLESS_PAGE_ELEMENTS.includes(this.host.profileElement!))
+      return false;
+
+    // If facets are to be lazy-loaded, don't fetch them if they are not going to be visible anyway
+    // (wait until they become visible instead)
+    if (this.host.lazyLoadFacets && !this.facetsVisible) return false;
+
+    // Don't fetch facets again if they are already fetched or pending
+    const facetsAlreadyFetched =
+      Object.keys(this.aggregations ?? {}).length > 0;
+    if (this.facetsLoading || facetsAlreadyFetched) return false;
+
+    return true;
+  }
+
   /**
    * @inheritdoc
    */
@@ -868,6 +915,7 @@ export class CollectionBrowserDataSource
    * the current search state.
    */
   private async fetchFacets(): Promise<void> {
+    console.log('called fetchFacets');
     const trimmedQuery = this.host.baseQuery?.trim();
     if (!this.canPerformSearch) return;
 
@@ -875,6 +923,9 @@ export class CollectionBrowserDataSource
     if (this.fetchesInProgress.has(facetFetchQueryKey)) return;
     this.fetchesInProgress.add(facetFetchQueryKey);
 
+    console.log('setting facets loading');
+    this.setFacetsLoading(true);
+
     const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
     const params: SearchParams = {
       ...this.pageSpecifierParams,
@@ -891,7 +942,6 @@ export class CollectionBrowserDataSource
       'aggregations'
     );
 
-    this.setFacetsLoading(true);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType

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

@@ -37,6 +37,7 @@ export interface CollectionBrowserSearchInterface
   readonly sortParam: SortParam | null;
   readonly defaultSortParam: SortParam | null;
   readonly suppressFacets?: boolean;
+  readonly lazyLoadFacets?: boolean;
   readonly initialPageNumber: number;
   readonly currentVisiblePageNumbers: number[];
   readonly clearResultsOnEmptyQuery?: boolean;