@internetarchive/collection-browser 1.14.17-beta.5 → 1.14.18-alpha.0

package/src/collection-browser.ts

@@ -18,6 +18,7 @@ import type {
 } from '@internetarchive/infinite-scroller';
 import {
   CollectionExtraInfo,
+  PageElementName,
   SearchServiceInterface,
   SearchType,
   SortDirection,
@@ -31,12 +32,6 @@ import '@internetarchive/infinite-scroller';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
 import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
-import './tiles/tile-dispatcher';
-import './tiles/collection-browser-loading-tile';
-import './sort-filter-bar/sort-filter-bar';
-import './manage/manage-bar';
-import './collection-facets';
-import './circular-activity-indicator';
 import {
   SelectedFacets,
   SortField,
@@ -44,38 +39,42 @@ import {
   getDefaultSelectedFacets,
   TileModel,
   CollectionDisplayMode,
-  PrefixFilterType,
-  PrefixFilterCounts,
   FacetEventDetails,
   sortOptionFromAPIString,
   SORT_OPTIONS,
+  defaultProfileElementSorts,
 } from './models';
 import {
   RestorationStateHandlerInterface,
   RestorationStateHandler,
   RestorationState,
 } from './restoration-state-handler';
-import {
-  CollectionBrowserDataSource,
-  CollectionBrowserDataSourceInterface,
-} from './data-source/collection-browser-data-source';
+import { CollectionBrowserDataSource } from './data-source/collection-browser-data-source';
 import type {
   CollectionBrowserQueryState,
   CollectionBrowserSearchInterface,
-} from './data-source/models';
-import chevronIcon from './assets/img/icons/chevron';
-import type { PlaceholderType } from './empty-placeholder';
-import './empty-placeholder';
-
+} from './data-source/collection-browser-query-state';
+import type { CollectionFacets } from './collection-facets';
+import type { ManageableItem } from './manage/manage-bar';
+import type { CollectionBrowserDataSourceInterface } from './data-source/collection-browser-data-source-interface';
 import {
   analyticsActions,
   analyticsCategories,
 } from './utils/analytics-events';
+import chevronIcon from './assets/img/icons/chevron';
 import { srOnlyStyle } from './styles/sr-only';
 import { sha1 } from './utils/sha1';
-import type { CollectionFacets } from './collection-facets';
-import type { ManageableItem } from './manage/manage-bar';
 import { formatDate } from './utils/format-date';
+import { log } from './utils/log';
+import type { PlaceholderType } from './empty-placeholder';
+
+import './empty-placeholder';
+import './tiles/tile-dispatcher';
+import './tiles/collection-browser-loading-tile';
+import './sort-filter-bar/sort-filter-bar';
+import './manage/manage-bar';
+import './collection-facets';
+import './circular-activity-indicator';
 
 @customElement('collection-browser')
 export class CollectionBrowser
@@ -97,7 +96,7 @@ export class CollectionBrowser
 
   @property({ type: String }) withinProfile?: string;
 
-  @property({ type: String }) profileElement?: string;
+  @property({ type: String }) profileElement?: PageElementName;
 
   @property({ type: String }) baseQuery?: string;
 
@@ -133,6 +132,8 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) suppressFacets = false;
 
+  @property({ type: Boolean }) suppressSortBar = false;
+
   @property({ type: Boolean }) clearResultsOnEmptyQuery = false;
 
   @property({ type: String }) collectionPagePath: string = '/details/';
@@ -170,8 +171,6 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) isLoansTab = false;
 
-  @property({ type: String }) queryErrorMessage?: string;
-
   /**
    * The results per page so we can paginate.
    *
@@ -217,10 +216,6 @@ export class CollectionBrowser
 
   @state() private placeholderType: PlaceholderType = null;
 
-  @state() private prefixFilterCountMap: Partial<
-    Record<PrefixFilterType, PrefixFilterCounts>
-  > = {};
-
   @query('#content-container') private contentContainer!: HTMLDivElement;
 
   @query('#left-column') private leftColumn?: HTMLDivElement;
@@ -236,11 +231,6 @@ export class CollectionBrowser
    */
   private isScrollingToCell = false;
 
-  /**
-   * When we've reached the end of the data, stop trying to fetch more
-   */
-  private endOfDataReached = false;
-
   /**
    * When page width resizes from desktop to mobile, set true to
    * disable expand/collapse transition when loading.
@@ -253,9 +243,13 @@ export class CollectionBrowser
 
   private placeholderCellTemplate = html`<collection-browser-loading-tile></collection-browser-loading-tile>`;
 
+  constructor() {
+    super();
+    this.addController(this.dataSource);
+  }
+
   private tileModelAtCellIndex(index: number): TileModel | undefined {
-    const offsetIndex = index + this.tileModelOffset;
-    const model = this.dataSource.getTileModelAt(offsetIndex);
+    const model = this.dataSource.getTileModelAt(index);
     /**
      * 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.
@@ -263,16 +257,9 @@ export class CollectionBrowser
      *
      * We disable it during the automated scroll since we don't want to fetch pages for intervening cells the
      * user may never see.
-     *
-     * No need to fetch if placeholder is being displayed
      */
-    if (!this.placeholderType && !model && !this.isScrollingToCell) {
-      const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
-      console.warn('****** FETCH PAGE tileModelAtCellIndex', {
-        pageNumber,
-        offsetIndex,
-        pageSize: this.pageSize,
-      });
+    if (!model && !this.isScrollingToCell && this.dataSource.queryInitialized) {
+      const pageNumber = Math.floor(index / this.pageSize) + 1;
       this.dataSource.fetchPage(pageNumber);
     }
     return model;
@@ -427,6 +414,7 @@ export class CollectionBrowser
   }
 
   render() {
+    this.setPlaceholderType();
     return html`
       <div
         id="content-container"
@@ -459,7 +447,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';
     }
@@ -471,7 +459,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}
@@ -593,7 +581,6 @@ export class CollectionBrowser
   }
 
   private get infiniteScrollerTemplate() {
-    console.warn('infiniteScrollerTemplate', this.placeholderType);
     return html`<infinite-scroller
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
@@ -615,7 +602,9 @@ export class CollectionBrowser
     });
   }
 
-  private get sortFilterBarTemplate() {
+  private get sortFilterBarTemplate(): TemplateResult | typeof nothing {
+    if (this.suppressSortBar) return nothing;
+
     return html`
       <sort-filter-bar
         .defaultSortField=${this.defaultSortField}
@@ -670,10 +659,11 @@ export class CollectionBrowser
     this.dispatchEvent(
       new CustomEvent<{ items: ManageableItem[] }>('itemRemovalRequested', {
         detail: {
-          items: this.dataSource.checkedTileModels.map(model => ({
-            ...model,
-            date: formatDate(model.datePublished, 'long'),
-          })),
+          items: this.dataSource.checkedTileModels.map(model => {
+            const cloned = model.clone();
+            cloned.dateStr = formatDate(model.datePublished, 'long');
+            return cloned as ManageableItem;
+          }),
         },
       })
     );
@@ -717,7 +707,7 @@ export class CollectionBrowser
 
   private selectedSortChanged(): void {
     // Lazy-load the alphabet counts for title/creator sort bar as needed
-    this.updatePrefixFiltersForCurrentSort();
+    this.dataSource.updatePrefixFiltersForCurrentSort();
   }
 
   get sortParam(): SortParam | null {
@@ -876,7 +866,7 @@ export class CollectionBrowser
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
         .collectionPagePath=${this.collectionPagePath}
-        .parentCollections=${this.dataSource.parentCollections ?? []}
+        .parentCollections=${this.dataSource.parentCollections}
         .withinCollection=${this.withinCollection}
         .searchService=${this.searchService}
         .featureFeedbackService=${this.featureFeedbackService}
@@ -997,20 +987,44 @@ export class CollectionBrowser
     );
   }
 
+  async installDataSourceAndQueryState(
+    dataSource: CollectionBrowserDataSourceInterface,
+    queryState: CollectionBrowserQueryState
+  ): Promise<void> {
+    log('Installing data source & query state in CB:', dataSource, queryState);
+    if (this.dataSource) this.removeController(this.dataSource);
+    this.dataSource = dataSource;
+    this.addController(this.dataSource);
+
+    this.baseQuery = queryState.baseQuery;
+    this.profileElement = queryState.profileElement;
+    this.searchType = queryState.searchType;
+    this.selectedFacets =
+      queryState.selectedFacets ?? getDefaultSelectedFacets();
+    this.minSelectedDate = queryState.minSelectedDate;
+    this.maxSelectedDate = queryState.maxSelectedDate;
+    this.selectedSort = queryState.selectedSort ?? SortField.default;
+    this.sortDirection = queryState.sortDirection;
+    this.selectedTitleFilter = queryState.selectedTitleFilter;
+    this.selectedCreatorFilter = queryState.selectedCreatorFilter;
+
+    this.requestUpdate();
+    await this.updateComplete;
+
+    if (!this.searchResultsLoading) {
+      this.setTotalResultCount(this.dataSource.totalResults);
+      this.setTileCount(this.dataSource.size);
+    }
+
+    this.refreshVisibleResults();
+  }
+
   firstUpdated(): void {
     this.setupStateRestorationObserver();
     this.restoreState();
   }
 
-  willUpdate() {
-    this.setPlaceholderType();
-    console.warn('willUpdate *** ', this.placeholderType);
-  }
-
   updated(changed: PropertyValues) {
-    console.warn('updated *** ', {
-      changed,
-    });
     if (changed.has('placeholderType') && this.placeholderType === null) {
       if (!this.leftColIntersectionObserver) {
         this.setupLeftColumnScrollListeners();
@@ -1025,8 +1039,7 @@ export class CollectionBrowser
       changed.has('displayMode') ||
       changed.has('baseNavigationUrl') ||
       changed.has('baseImageUrl') ||
-      changed.has('loggedIn') ||
-      (changed.has('baseQuery') && !this.baseQuery)
+      changed.has('loggedIn')
     ) {
       this.infiniteScroller?.reload();
     }
@@ -1064,6 +1077,10 @@ export class CollectionBrowser
       }
     }
 
+    if (changed.has('profileElement')) {
+      this.applyDefaultProfileSort();
+    }
+
     if (changed.has('baseQuery')) {
       this.emitBaseQueryChanged();
     }
@@ -1081,9 +1098,11 @@ export class CollectionBrowser
       changed.has('maxSelectedDate') ||
       changed.has('selectedFacets') ||
       changed.has('searchService') ||
-      changed.has('withinCollection')
+      changed.has('withinCollection') ||
+      changed.has('withinProfile') ||
+      changed.has('profileElement')
     ) {
-      this.refreshLetterCounts();
+      this.dataSource.refreshLetterCounts();
     }
 
     if (changed.has('selectedSort') || changed.has('sortDirection')) {
@@ -1135,7 +1154,7 @@ export class CollectionBrowser
     }
 
     if (changed.has('pagesToRender')) {
-      if (!this.endOfDataReached && this.infiniteScroller) {
+      if (!this.dataSource.endOfDataReached && this.infiniteScroller) {
         this.infiniteScroller.itemCount = this.estimatedTileCount;
       }
     }
@@ -1271,7 +1290,7 @@ export class CollectionBrowser
     );
   }
 
-  private emitQueryStateChanged() {
+  emitQueryStateChanged() {
     this.dispatchEvent(
       new CustomEvent<CollectionBrowserQueryState>('queryStateChanged', {
         detail: {
@@ -1350,19 +1369,6 @@ export class CollectionBrowser
   // this lets us store the query key so we know if it's actually changed or not
   private previousQueryKey?: string;
 
-  /**
-   * Internal property to store the `resolve` function for the most recent
-   * `initialSearchComplete` promise, allowing us to resolve it at the appropriate time.
-   */
-  private _initialSearchCompleteResolver!: (val: boolean) => void;
-
-  /**
-   * Internal property to store the private value backing the `initialSearchComplete` getter.
-   */
-  private _initialSearchCompletePromise: Promise<boolean> = new Promise(res => {
-    this._initialSearchCompleteResolver = res;
-  });
-
   /**
    * A Promise which, after each query change, resolves once the fetches for the initial
    * search have completed. Waits for *both* the hits and aggregations fetches to finish.
@@ -1371,15 +1377,10 @@ export class CollectionBrowser
    * one, to ensure you do not await an obsolete promise from the previous update.
    */
   get initialSearchComplete(): Promise<boolean> {
-    return this._initialSearchCompletePromise;
+    return this.dataSource.initialSearchComplete;
   }
 
   private async handleQueryChange() {
-    console.log('CB: handling query change', {
-      previousQueryKey: this.previousQueryKey,
-      ds_pageFetchQueryKey: this.dataSource.pageFetchQueryKey,
-      ds_canPerformSearch: this.dataSource.canPerformSearch,
-    });
     // only reset if the query has actually changed
     if (
       !this.searchService ||
@@ -1394,21 +1395,15 @@ export class CollectionBrowser
     )
       return;
 
-    console.log('CB will reset', {
-      baseQuery: this.baseQuery,
-      selectedFacets: JSON.stringify(this.selectedFacets),
-    });
     this.previousQueryKey = this.dataSource.pageFetchQueryKey;
-    this.emitQueryStateChanged();
+    // this.emitQueryStateChanged();
 
     this.tileModelOffset = 0;
     this.totalResults = undefined;
-    this.endOfDataReached = false;
     this.pagesToRender =
       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
@@ -1434,16 +1429,8 @@ export class CollectionBrowser
     }
     this.historyPopOccurred = false;
 
-    // Reset the `initialSearchComplete` promise with a new value for the imminent search
-    this._initialSearchCompletePromise = new Promise(res => {
-      this._initialSearchCompleteResolver = res;
-    });
-
     // Fire the initial page and facets requests
-    await this.dataSource.handleQueryChange();
-
-    // Resolve the `initialSearchComplete` promise for this search
-    this._initialSearchCompleteResolver(true);
+    // await this.dataSource.handleQueryChange();
   }
 
   private setupStateRestorationObserver() {
@@ -1580,7 +1567,7 @@ export class CollectionBrowser
    *  - Date Favorited for fav-* collections
    *  - Weekly views for all other collections
    */
-  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo) {
+  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo): void {
     if (this.baseQuery) {
       // If there's a query set, then we default to relevance sorting regardless of
       // the collection metadata-specified sort.
@@ -1624,6 +1611,24 @@ export class CollectionBrowser
     }
   }
 
+  /**
+   * Applies the default sort option for the current profile element
+   */
+  applyDefaultProfileSort(): void {
+    if (this.profileElement) {
+      const defaultSortField = defaultProfileElementSorts[this.profileElement];
+      this.defaultSortField = defaultSortField ?? SortField.weeklyview;
+    } else {
+      this.defaultSortField = SortField.weeklyview;
+    }
+
+    this.defaultSortDirection = 'desc';
+    this.defaultSortParam = {
+      field: this.defaultSortField,
+      direction: this.defaultSortDirection,
+    };
+  }
+
   /**
    * This is useful for determining whether we need to reload the scroller.
    *
@@ -1647,33 +1652,6 @@ export class CollectionBrowser
     this.infiniteScroller?.refreshAllVisibleCells();
   }
 
-  /**
-   * Fetches and caches the prefix filter counts for the current sort type,
-   * provided it is one that permits prefix filtering. (If not, this does nothing).
-   */
-  private async updatePrefixFiltersForCurrentSort(): Promise<void> {
-    if (['title', 'creator'].includes(this.selectedSort)) {
-      const filterType = this.selectedSort as PrefixFilterType;
-      if (!this.prefixFilterCountMap[filterType]) {
-        this.dataSource.updatePrefixFilterCounts(filterType);
-      }
-    }
-  }
-
-  /**
-   * Clears the cached letter counts for both title and creator, and
-   * fetches a new set of counts for whichever of them is the currently
-   * selected sort option (which may be neither).
-   *
-   * Call this whenever the counts are invalidated (e.g., by a query change).
-   */
-  private refreshLetterCounts(): void {
-    if (Object.keys(this.prefixFilterCountMap).length > 0) {
-      this.prefixFilterCountMap = {};
-    }
-    this.updatePrefixFiltersForCurrentSort();
-  }
-
   /**
    * Callback when a result is selected
    */
@@ -1682,8 +1660,7 @@ export class CollectionBrowser
       // Checked/unchecked state change -- rerender to ensure it propagates
       // this.mapDataSource(model => ({ ...model }));
       const cellIndex = this.dataSource.indexOf(event.detail);
-      if (cellIndex >= 0)
-        this.infiniteScroller?.refreshCell(cellIndex - this.tileModelOffset);
+      if (cellIndex >= 0) this.infiniteScroller?.refreshCell(cellIndex);
     }
 
     this.analyticsHandler?.sendEvent({
@@ -1714,7 +1691,7 @@ export class CollectionBrowser
         .collectionTitles=${this.dataSource.collectionTitles}
         .sortParam=${this.sortParam}
         .defaultSortParam=${this.defaultSortParam}
-        .creatorFilter=${this.selectedCreatorFilter ?? undefined}
+        .creatorFilter=${this.selectedCreatorFilter}
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
         .isManageView=${this.isManageView}
@@ -1730,12 +1707,8 @@ export class CollectionBrowser
    * increase the number of pages to render and start fetching data for the new page
    */
   private scrollThresholdReached() {
-    if (!this.endOfDataReached) {
+    if (!this.dataSource.endOfDataReached && this.dataSource.queryInitialized) {
       this.pagesToRender += 1;
-      console.warn(
-        '****** FETCH PAGE scrollThresholdReached',
-        this.pagesToRender
-      );
       this.dataSource.fetchPage(this.pagesToRender);
     }
   }
@@ -2058,9 +2031,9 @@ export class CollectionBrowser
             --collectionBrowserCellMinWidth,
             100%
           );
-          --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
           --infiniteScrollerCellMaxHeight: 56px;
-          --infiniteScrollerRowGap: 0px;
+          --infiniteScrollerRowGap: 10px;
         }
 
         infinite-scroller.list-detail {

package/src/collection-facets/more-facets-content.ts

@@ -135,12 +135,6 @@ export class MoreFacetsContent extends LitElement {
    */
   async updateSpecificFacets(): Promise<void> {
     const trimmedQuery = this.query?.trim();
-
-    console.log('updateSpecificFacets', {
-      trimmedQuery,
-      withinCollection: this.withinCollection,
-    });
-
     if (!trimmedQuery && !this.withinCollection) return;
 
     const aggregations = {
@@ -164,25 +158,12 @@ export class MoreFacetsContent extends LitElement {
       rows: 0, // todo - do we want server-side pagination with offset/page/limit flag?
     };
 
-    console.log('updateSpecificFacets', {
-      params,
-      searchType: this.searchType,
-    });
-    console.log(' *** firing facet call *** ');
-
     const results = await this.searchService?.search(params, this.searchType);
     this.aggregations = results?.success?.response.aggregations;
 
     this.facetGroup = this.aggregationFacetGroups;
     this.facetsLoading = false;
 
-    console.log(' *** Returned facet call *** ', {
-      results,
-      aggregations: this.aggregations,
-      facetGroup: this.facetGroup,
-      facetsLoading: this.facetsLoading,
-    });
-
     const collectionTitles = results?.success?.response?.collectionTitles;
     if (collectionTitles) {
       for (const [id, title] of Object.entries(collectionTitles)) {

package/src/collection-facets.ts

@@ -302,14 +302,16 @@ export class CollectionFacets extends LitElement {
 
   private get histogramTemplate() {
     const { fullYearsHistogramAggregation } = this;
+    const minDate = fullYearsHistogramAggregation?.first_bucket_key;
+    const maxDate = fullYearsHistogramAggregation?.last_bucket_key;
     return this.fullYearAggregationLoading
       ? html`<div class="histogram-loading-indicator">&hellip;</div>` // Ellipsis block
       : html`
           <histogram-date-range
-            .minDate=${fullYearsHistogramAggregation?.first_bucket_key}
-            .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}
-            .minSelectedDate=${this.minSelectedDate}
-            .maxSelectedDate=${this.maxSelectedDate}
+            .minDate=${minDate}
+            .maxDate=${maxDate}
+            .minSelectedDate=${this.minSelectedDate ?? minDate}
+            .maxSelectedDate=${this.maxSelectedDate ?? maxDate}
             .updateDelay=${100}
             missingDataMessage="..."
             .width=${this.collapsableFacets && this.contentWidth