@internetarchive/collection-browser 2.7.3 → 2.7.4

package/src/collection-browser.ts

@@ -1424,6 +1424,8 @@ export class CollectionBrowser
       if (oldObserver) this.disconnectResizeObserver(oldObserver);
       this.setupResizeObserver();
     }
+
+    this.ensureAvailableTilesDisplayed();
   }
 
   connectedCallback(): void {
@@ -1461,6 +1463,24 @@ export class CollectionBrowser
     this.updateLeftColumnHeight();
   }
 
+  /**
+   * Ensures that if we have new results from the data source that are not yet
+   * displayed in the infinite scroller, that they are immediately reflected
+   * in the tile count.
+   */
+  private ensureAvailableTilesDisplayed(): void {
+    if (
+      this.infiniteScroller &&
+      this.infiniteScroller.itemCount < this.dataSource.size
+    ) {
+      this.setTileCount(
+        this.dataSource.endOfDataReached
+          ? this.dataSource.size
+          : this.estimatedTileCount
+      );
+    }
+  }
+
   /**
    * Updates the data source with the current state of facet readiness for loading,
    * so that they will begin to load in at the appropriate time according to the

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -24,6 +24,7 @@ import filterIcon from '../../assets/img/icons/filter';
 
 import './smart-facet-button';
 import './smart-facet-dropdown';
+import { log } from '../../utils/log';
 
 const fieldPrefixes: Partial<Record<FacetOption, string>> = {
   collection: 'Collection: ',
@@ -77,7 +78,7 @@ export class SmartFacetBar extends LitElement {
     let shouldUpdateSmartFacets = false;
 
     if (changed.has('query')) {
-      console.log('query change', changed.get('query'), this.query);
+      log('query change', changed.get('query'), this.query);
       this.lastAggregations = undefined;
       shouldUpdateSmartFacets = true;
     }
@@ -88,25 +89,25 @@ export class SmartFacetBar extends LitElement {
       this.aggregations &&
       Object.keys(this.aggregations).length > 0
     ) {
-      console.log('aggs change', changed.get('aggregations'), this.aggregations);
+      log('aggs change', changed.get('aggregations'), this.aggregations);
       this.lastAggregations = this.aggregations;
       shouldUpdateSmartFacets = true;
     }
 
     if (shouldUpdateSmartFacets) {
-      console.log('should update smart facets, doing so...');
+      log('should update smart facets, doing so...');
       this.updateSmartFacets();
     }
   }
 
   private async updateSmartFacets(): Promise<void> {
-    console.log('updating smart facets');
+    log('updating smart facets');
     if (this.query) {
       this.heuristicRecs =
         await new SmartQueryHeuristicGroup().getRecommendedFacets(this.query);
-      console.log('heuristic recs are', this.heuristicRecs);
+      log('heuristic recs are', this.heuristicRecs);
       this.smartFacets = dedupe(this.facetsToDisplay);
-      console.log('smart facets are', this.smartFacets);
+      log('smart facets are', this.smartFacets);
     }
   }
 
@@ -296,13 +297,15 @@ export class SmartFacetBar extends LitElement {
   }
 
   private onDropdownClick(e: CustomEvent<SmartFacetDropdown>): void {
-    console.log('smart bar: onDropdownClick', e.detail);
-    this.shadowRoot?.querySelectorAll('smart-facet-dropdown').forEach(dropdown => {
-      if (dropdown !== e.detail) {
-        console.log('closing', dropdown);
-        (dropdown as SmartFacetDropdown).close();
-      }
-    });
+    log('smart bar: onDropdownClick', e.detail);
+    this.shadowRoot
+      ?.querySelectorAll('smart-facet-dropdown')
+      .forEach(dropdown => {
+        if (dropdown !== e.detail) {
+          log('closing', dropdown);
+          (dropdown as SmartFacetDropdown).close();
+        }
+      });
   }
 
   private filterToggleClicked(): void {

package/src/collection-facets/smart-facets/smart-facet-dropdown.ts

@@ -2,6 +2,7 @@ import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import type { IaDropdown, optionInterface } from '@internetarchive/ia-dropdown';
 import type { FacetRef, SmartFacet, SmartFacetEvent } from './models';
+import { log } from '../../utils/log';
 
 @customElement('smart-facet-dropdown')
 export class SmartFacetDropdown extends LitElement {
@@ -36,7 +37,7 @@ export class SmartFacetDropdown extends LitElement {
           .options=${this.dropdownOptions}
           .selectedOption=${this.activeDropdownOption}
           @optionSelected=${this.optionSelected}
-          @click=${this.onDropdownClick.bind(this)}
+          @click=${this.onDropdownClick}
         >
           <span class="dropdown-label" slot="dropdown-label"
             >${this.labelPrefix ?? nothing} ${displayText}</span
@@ -107,11 +108,10 @@ export class SmartFacetDropdown extends LitElement {
   }
 
   private onDropdownClick(): void {
-    console.log('smart dropdown: onDropdownClick', this);
-    this.dispatchEvent(new CustomEvent<SmartFacetDropdown>(
-      'dropdownClick',
-      { detail: this }
-    ));
+    log('smart dropdown: onDropdownClick', this);
+    this.dispatchEvent(
+      new CustomEvent<SmartFacetDropdown>('dropdownClick', { detail: this })
+    );
   }
 
   close(): void {

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

@@ -1048,12 +1048,12 @@ export class CollectionBrowserDataSource
     };
     params.uid = await this.requestUID(params, 'hits');
 
-    log('=== FIRING PAGE REQUEST ===', params);
+    // log('=== FIRING PAGE REQUEST ===', params);
     const searchResponse = await this.host.searchService?.search(
       params,
       this.host.searchType
     );
-    log('=== RECEIVED PAGE RESPONSE IN CB ===', searchResponse);
+    // log('=== RECEIVED PAGE RESPONSE IN CB ===', searchResponse);
     const success = searchResponse?.success;
 
     // This is checking to see if the fetch has been invalidated since it was fired off.
@@ -1120,19 +1120,21 @@ export class CollectionBrowserDataSource
 
       // 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'
-      ) {
+      const isUnpagedElement = ['lending', 'web_archives'].includes(
+        this.host.profileElement!
+      );
+      if (isUnpagedElement) {
         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.addFetchedResultsToDataSource(
           pageNumber + i,
-          results.slice(pageStartIndex, pageStartIndex + this.pageSize)
+          results.slice(pageStartIndex, pageStartIndex + this.pageSize),
+          !isUnpagedElement || i === numPages - 1
         );
       }
     }
@@ -1157,16 +1159,17 @@ export class CollectionBrowserDataSource
    */
   private addFetchedResultsToDataSource(
     pageNumber: number,
-    results: SearchResult[]
+    results: SearchResult[],
+    needsReload = true
   ): void {
     const tiles: TileModel[] = [];
     results?.forEach(result => {
       if (!result.identifier) return;
       tiles.push(new TileModel(result));
     });
+
     this.addPage(pageNumber, tiles);
-    const visiblePages = this.host.currentVisiblePageNumbers;
-    const needsReload = visiblePages.includes(pageNumber);
+
     if (needsReload) {
       this.refreshVisibleResults();
     }