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

package/src/collection-browser.ts

@@ -56,14 +56,11 @@ import {
   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';
+} from './data-source/collection-browser-query-state';
 import chevronIcon from './assets/img/icons/chevron';
 import type { PlaceholderType } from './empty-placeholder';
 import './empty-placeholder';
@@ -77,6 +74,7 @@ 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 type { CollectionBrowserDataSourceInterface } from './data-source/collection-browser-data-source-interface';
 
 @customElement('collection-browser')
 export class CollectionBrowser
@@ -134,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/';
@@ -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.
    *
@@ -249,9 +247,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.
@@ -260,8 +262,8 @@ 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.
      */
-    if (!model && !this.isScrollingToCell) {
-      const pageNumber = Math.floor(offsetIndex / this.pageSize) + 1;
+    if (!model && !this.isScrollingToCell && this.dataSource.queryInitialized) {
+      const pageNumber = Math.floor(index / this.pageSize) + 1;
       this.dataSource.fetchPage(pageNumber);
     }
     return model;
@@ -328,6 +330,7 @@ export class CollectionBrowser
    * Sets the state for whether the initial set of search results is loading in.
    */
   setSearchResultsLoading(loading: boolean): void {
+    console.log('setting search results loading to', loading);
     this.searchResultsLoading = loading;
   }
 
@@ -335,6 +338,7 @@ export class CollectionBrowser
    * Sets the state for whether facet data is loading in
    */
   setFacetsLoading(loading: boolean): void {
+    console.log('setting facets loading to', loading);
     this.facetsLoading = loading;
   }
 
@@ -449,7 +453,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';
     }
@@ -461,7 +465,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}
@@ -604,7 +608,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}
@@ -987,12 +993,49 @@ export class CollectionBrowser
     );
   }
 
+  async installDataSourceAndQueryState(
+    dataSource: CollectionBrowserDataSourceInterface,
+    queryState: CollectionBrowserQueryState
+  ): Promise<void> {
+    console.log('installing 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;
+    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();
   }
 
   updated(changed: PropertyValues) {
+    console.log(
+      '* CB UPDATED\n',
+      [...changed.entries()]
+        .map(([k, v]) => `${String(k)}: ${v} => ${this[k as keyof this]}`)
+        .join('\n')
+    );
+
     if (changed.has('placeholderType') && this.placeholderType === null) {
       if (!this.leftColIntersectionObserver) {
         this.setupLeftColumnScrollListeners();
@@ -1252,7 +1295,8 @@ export class CollectionBrowser
     );
   }
 
-  private emitQueryStateChanged() {
+  emitQueryStateChanged() {
+    console.log('emitting query state changed event');
     this.dispatchEvent(
       new CustomEvent<CollectionBrowserQueryState>('queryStateChanged', {
         detail: {
@@ -1331,19 +1375,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.
@@ -1352,16 +1383,16 @@ 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',
-      this.previousQueryKey,
-      this.dataSource.pageFetchQueryKey,
-      this.dataSource.canPerformSearch
-    );
+    // console.log(
+    //   'CB: handling query change',
+    //   this.previousQueryKey,
+    //   this.dataSource.pageFetchQueryKey,
+    //   this.dataSource.canPerformSearch
+    // );
     // only reset if the query has actually changed
     if (
       !this.searchService ||
@@ -1382,7 +1413,7 @@ export class CollectionBrowser
       JSON.stringify(this.selectedFacets)
     );
     this.previousQueryKey = this.dataSource.pageFetchQueryKey;
-    this.emitQueryStateChanged();
+    // this.emitQueryStateChanged();
 
     this.tileModelOffset = 0;
     this.totalResults = undefined;
@@ -1390,7 +1421,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
@@ -1416,16 +1446,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() {
@@ -1665,8 +1687,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({
@@ -1713,7 +1734,7 @@ export class CollectionBrowser
    * increase the number of pages to render and start fetching data for the new page
    */
   private scrollThresholdReached() {
-    if (!this.dataSource.endOfDataReached) {
+    if (!this.dataSource.endOfDataReached && this.dataSource.queryInitialized) {
       this.pagesToRender += 1;
       this.dataSource.fetchPage(this.pagesToRender);
     }

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

@@ -0,0 +1,245 @@
+import type {
+  FilterMap,
+  Aggregation,
+  CollectionExtraInfo,
+  AccountExtraInfo,
+  PageElementMap,
+} from '@internetarchive/search-service';
+import type { ReactiveController } from 'lit';
+import type {
+  PrefixFilterType,
+  PrefixFilterCounts,
+  TileModel,
+} from '../models';
+import type { PageSpecifierParams, CollectionTitles } from './models';
+
+export interface CollectionBrowserDataSourceInterface
+  extends ReactiveController {
+  /**
+   * How many tile models are present in this data source
+   */
+  readonly size: number;
+
+  /**
+   * How many results there are in the full result set for the current query
+   * (not necessarily all loaded yet).
+   */
+  readonly totalResults: 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;
+
+  /**
+   * True if the initial work for a new query state has been completed (i.e., firing initial
+   * page/facet requests). False otherwise.
+   */
+  readonly queryInitialized: 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>
+  >;
+
+  /**
+   * 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
+   */
+  readonly checkedTileModels: TileModel[];
+
+  /**
+   * An array of all the tile models whose management checkboxes are unchecked
+   */
+  readonly uncheckedTileModels: TileModel[];
+
+  /**
+   * 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.
+   *
+   * Ensure you await this component's `updateComplete` promise before awaiting this
+   * one, to ensure you do not await an obsolete promise from the previous update.
+   */
+  readonly initialSearchComplete: Promise<boolean>;
+
+  /**
+   * 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[]>;
+
+  /**
+   * 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;
+
+  /**
+   * 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;
+
+  /**
+   * 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
+   */
+  indexOf(tile: TileModel): number;
+
+  /**
+   * 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
+   */
+  fetchPage(pageNum: number, numInitialPages?: number): Promise<void>;
+
+  /**
+   * 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>;
+
+  /**
+   * 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;
+
+  /**
+   * Notifies the data source that a query change has occurred, which may trigger a data
+   * reset & new fetches.
+   */
+  handleQueryChange(): void;
+
+  /**
+   * 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
+   */
+  map(
+    callback: (model: TileModel, index: number, array: TileModel[]) => TileModel
+  ): void;
+
+  /**
+   * Checks every tile's management checkbox
+   */
+  checkAllTiles(): void;
+
+  /**
+   * Unchecks every tile's management checkbox
+   */
+  uncheckAllTiles(): void;
+
+  /**
+   * Removes all tile models that are currently checked & adjusts the paging
+   * of the data source to account for any new gaps in the data.
+   */
+  removeCheckedTiles(): void;
+}