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

package/dist/src/data-source/collection-browser-data-source.js

@@ -2,6 +2,7 @@ import { FilterConstraint, FilterMapBuilder, SearchType, } from '@internetarchiv
 import { prefixFilterAggregationKeys, TileModel, } from '../models';
 import { sha1 } from '../utils/sha1';
 export class CollectionBrowserDataSource {
+    // eslint-disable-next-line no-useless-constructor
     constructor(
     /** The host element to which this controller should attach listeners */
     host, 
@@ -13,9 +14,18 @@ export class CollectionBrowserDataSource {
         this.offset = 0;
         this.numTileModels = 0;
         /**
-         * Maps the full query key to the pages being fetched for that query
+         * A set of fetch IDs that are valid for the current query state
          */
-        this.pageFetchesInProgress = {};
+        this.fetchesInProgress = new Set();
+        /**
+         * A record of the query key used for the last search.
+         * If this changes, we need to load new results.
+         */
+        this.previousQueryKey = '';
+        this.searchResultsLoading = false;
+        this.facetsLoading = false;
+        // TEMP for ease of debugging
+        this.id = Math.random();
         /**
          * @inheritdoc
          */
@@ -24,6 +34,10 @@ export class CollectionBrowserDataSource {
          * @inheritdoc
          */
         this.endOfDataReached = false;
+        /**
+         * @inheritdoc
+         */
+        this.queryInitialized = false;
         /**
          * @inheritdoc
          */
@@ -36,6 +50,12 @@ export class CollectionBrowserDataSource {
          * @inheritdoc
          */
         this.prefixFilterCountMap = {};
+        /**
+         * Internal property to store the private value backing the `initialSearchComplete` getter.
+         */
+        this._initialSearchCompletePromise = new Promise(res => {
+            this._initialSearchCompleteResolver = res;
+        });
         /**
          * @inheritdoc
          */
@@ -94,10 +114,55 @@ export class CollectionBrowserDataSource {
             // Swap in the new pages
             this.pages = newPages;
             this.numTileModels -= numChecked;
-            this.host.requestUpdate();
-            this.host.refreshVisibleResults();
+            this.requestHostUpdate();
+            this.refreshVisibleResults();
         };
-        this.host.addController(this);
+        // Just setting some property values
+    }
+    /**
+     * @inheritdoc
+     */
+    get initialSearchComplete() {
+        return this._initialSearchCompletePromise;
+    }
+    hostConnected() {
+        console.log('hostConnected', this.id);
+        this.setSearchResultsLoading(this.searchResultsLoading);
+        this.setFacetsLoading(this.facetsLoading);
+    }
+    hostUpdate() {
+        console.log('hostUpdate', this.id, this.previousQueryKey, this.pageFetchQueryKey);
+        // This reactive controller hook is run whenever the host component (collection-browser) performs an update.
+        // 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.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;
+        // We should only reset if part of the full query state has changed
+        const queryKeyChanged = this.pageFetchQueryKey !== this.previousQueryKey;
+        console.log('query keys', this.pageFetchQueryKey, this.previousQueryKey);
+        if (!queryKeyChanged)
+            return;
+        // We should only reset if either:
+        //  (a) our state permits a valid search, or
+        //  (b) we have a blank query that we want to show empty results for
+        const shouldShowEmptyQueryResults = this.host.clearResultsOnEmptyQuery && this.host.baseQuery === '';
+        if (!(this.canPerformSearch || shouldShowEmptyQueryResults))
+            return;
+        if (this.activeOnHost)
+            this.host.emitQueryStateChanged();
+        this.handleQueryChange();
+    }
+    /**
+     * Returns whether this data source is the one currently installed on the host component.
+     */
+    get activeOnHost() {
+        return this.host.dataSource === this;
     }
     /**
      * @inheritdoc
@@ -109,18 +174,25 @@ export class CollectionBrowserDataSource {
      * @inheritdoc
      */
     reset() {
+        console.log('resetting data source', this.id);
         this.pages = {};
         this.aggregations = {};
         this.yearHistogramAggregation = undefined;
-        this.pageFetchesInProgress = {};
         this.pageElements = undefined;
         this.parentCollections = [];
         this.prefixFilterCountMap = {};
+        this.queryErrorMessage = undefined;
         this.offset = 0;
         this.numTileModels = 0;
         this.totalResults = 0;
         this.endOfDataReached = false;
-        this.host.requestUpdate();
+        this.queryInitialized = false;
+        // Invalidate any fetches in progress
+        this.fetchesInProgress.clear();
+        console.log('fetches cleared - size =', this.fetchesInProgress.size);
+        if (this.activeOnHost)
+            this.host.setTotalResultCount(0);
+        this.requestHostUpdate();
     }
     /**
      * @inheritdoc
@@ -128,7 +200,7 @@ export class CollectionBrowserDataSource {
     addPage(pageNum, pageTiles) {
         this.pages[pageNum] = pageTiles;
         this.numTileModels += pageTiles.length;
-        this.host.requestUpdate();
+        this.requestHostUpdate();
     }
     /**
      * @inheritdoc
@@ -175,10 +247,18 @@ export class CollectionBrowserDataSource {
      */
     async handleQueryChange() {
         this.reset();
+        // Reset the `initialSearchComplete` promise with a new value for the imminent search
+        this._initialSearchCompletePromise = new Promise(res => {
+            this._initialSearchCompleteResolver = res;
+        });
+        // Fire the initial page & facet requests
+        this.queryInitialized = true;
         await Promise.all([
             this.doInitialPageFetch(),
             this.host.suppressFacets ? null : this.fetchFacets(),
         ]);
+        // Resolve the `initialSearchComplete` promise for this search
+        this._initialSearchCompleteResolver(true);
     }
     /**
      * @inheritdoc
@@ -188,8 +268,8 @@ export class CollectionBrowserDataSource {
             page,
             tileModels.map((model, index, array) => model ? callback(model, index, array) : model),
         ]));
-        this.host.requestUpdate();
-        this.host.refreshVisibleResults();
+        this.requestHostUpdate();
+        this.refreshVisibleResults();
     }
     /**
      * @inheritdoc
@@ -215,7 +295,6 @@ export class CollectionBrowserDataSource {
             .flat()
             .filter((model, index, array) => model ? predicate(model, index, array) : false);
     }
-    // DATA FETCHES
     /**
      * @inheritdoc
      */
@@ -235,6 +314,43 @@ export class CollectionBrowserDataSource {
             (isCollectionSearch && isMetadataSearch) ||
             (isProfileSearch && hasProfileElement && isMetadataSearch));
     }
+    /**
+     * Sets the state for whether the initial set of search results for the
+     * current query is loading
+     */
+    setSearchResultsLoading(loading) {
+        this.searchResultsLoading = loading;
+        if (this.activeOnHost) {
+            this.host.setSearchResultsLoading(loading);
+        }
+    }
+    /**
+     * Sets the state for whether the facets for a query is loading
+     */
+    setFacetsLoading(loading) {
+        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.
+     */
+    requestHostUpdate() {
+        if (this.activeOnHost) {
+            this.host.requestUpdate();
+        }
+    }
+    /**
+     * Requests that the host refresh its visible tiles, provided this
+     * data source is actively installed on it.
+     */
+    refreshVisibleResults() {
+        if (this.activeOnHost) {
+            this.host.refreshVisibleResults();
+        }
+    }
     /**
      * The query key is a string that uniquely identifies the current search.
      * It consists of:
@@ -246,16 +362,16 @@ export class CollectionBrowserDataSource {
      *  - Any currently-applied prefix filters
      *  - The current sort options
      *
-     * This lets us keep track of queries so we don't persist data that's
-     * no longer relevant.
+     * This lets us internally keep track of queries so we don't persist data that's
+     * no longer relevant. Not meant to be human-readable.
      */
     get pageFetchQueryKey() {
         var _a, _b, _c, _d, _e;
-        const profileKey = `${this.host.withinProfile}--${this.host.profileElement}`;
+        const profileKey = `pf;${this.host.withinProfile}--pe;${this.host.profileElement}`;
         const pageTarget = (_a = this.host.withinCollection) !== null && _a !== void 0 ? _a : profileKey;
         const sortField = (_c = (_b = this.host.sortParam) === null || _b === void 0 ? void 0 : _b.field) !== null && _c !== void 0 ? _c : 'none';
         const sortDirection = (_e = (_d = this.host.sortParam) === null || _d === void 0 ? void 0 : _d.direction) !== null && _e !== void 0 ? _e : 'none';
-        return `${this.fullQuery}-${pageTarget}-${this.host.searchType}-${sortField}-${sortDirection}`;
+        return `fq:${this.fullQuery}-pt:${pageTarget}-st:${this.host.searchType}-sf:${sortField}-sd:${sortDirection}`;
     }
     /**
      * Similar to `pageFetchQueryKey` above, but excludes sort fields since they
@@ -477,10 +593,15 @@ export class CollectionBrowserDataSource {
      */
     async fetchFacets() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        console.log('fetchFacets', this.id, this.host.profileElement);
         const trimmedQuery = (_a = this.host.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
         if (!this.canPerformSearch)
             return;
+        console.log('will actually fetch facets');
         const { facetFetchQueryKey } = this;
+        if (this.fetchesInProgress.has(facetFetchQueryKey))
+            return;
+        this.fetchesInProgress.add(facetFetchQueryKey);
         const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
         const params = {
             ...this.pageSpecifierParams,
@@ -493,15 +614,18 @@ export class CollectionBrowserDataSource {
             // The default aggregations for the search_results page type should be what we need here.
         };
         params.uid = await this.requestUID({ ...params, sort: sortParams }, 'aggregations');
-        this.host.setFacetsLoading(true);
+        this.setFacetsLoading(true);
         const searchResponse = await ((_b = this.host.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.host.searchType));
         const success = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success;
         // This is checking to see if the query has changed since the data was fetched.
         // If so, we just want to discard this set of aggregations because they are
         // likely no longer valid for the newer query.
-        const queryChangedSinceFetch = facetFetchQueryKey !== this.facetFetchQueryKey;
-        if (queryChangedSinceFetch)
+        const queryChangedSinceFetch = this.fetchesInProgress.has(facetFetchQueryKey);
+        this.fetchesInProgress.delete(facetFetchQueryKey);
+        if (queryChangedSinceFetch) {
+            console.log('facet query has changed since fetch, returning. new/old:', this.facetFetchQueryKey, facetFetchQueryKey);
             return;
+        }
         if (!success) {
             const errorMsg = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _c === void 0 ? void 0 : _c.message;
             const detailMsg = (_e = (_d = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _d === void 0 ? void 0 : _d.details) === null || _e === void 0 ? void 0 : _e.message;
@@ -509,6 +633,7 @@ export class CollectionBrowserDataSource {
                 // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
                 (_g = (_f = window === null || window === void 0 ? void 0 : window.Sentry) === null || _f === void 0 ? void 0 : _f.captureMessage) === null || _g === void 0 ? void 0 : _g.call(_f, 'Missing or malformed facet response from backend', 'error');
             }
+            this.setFacetsLoading(false);
             return;
         }
         const { aggregations, collectionTitles } = success.response;
@@ -520,17 +645,16 @@ export class CollectionBrowserDataSource {
         }
         this.yearHistogramAggregation =
             (_j = (_h = success === null || success === void 0 ? void 0 : success.response) === null || _h === void 0 ? void 0 : _h.aggregations) === null || _j === void 0 ? void 0 : _j.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.
      */
     async doInitialPageFetch() {
-        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);
     }
     /**
      * Fetches one or more pages of results and updates the data source.
@@ -541,8 +665,7 @@ export class CollectionBrowserDataSource {
      *  if `pageNumber != 1`, defaulting to a single page.
      */
     async fetchPage(pageNumber, numInitialPages = 1) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        console.log(`fetchPage(${pageNumber})`, this.canPerformSearch, this.hasPage(pageNumber), this.endOfDataReached, this.host.baseQuery, JSON.stringify(this.host.selectedFacets));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const trimmedQuery = (_a = this.host.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
         if (!this.canPerformSearch)
             return;
@@ -557,15 +680,18 @@ export class CollectionBrowserDataSource {
         const numRows = this.pageSize * numPages;
         // if a fetch is already in progress for this query and page, don't fetch again
         const { pageFetchQueryKey } = this;
-        const pageFetches = (_b = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _b !== void 0 ? _b : new Set();
-        if (pageFetches.has(pageNumber)) {
-            console.log(`Skipping fetch for page ${pageNumber} because one is already in progress`);
+        const currentPageKey = `${pageFetchQueryKey}-p:${pageNumber}`;
+        console.log('page fetch key', currentPageKey, this.fetchesInProgress.has(currentPageKey));
+        if (this.fetchesInProgress.has(currentPageKey))
             return;
-        }
+        // const pageFetches =
+        //   this.fetchesInProgress[pageFetchQueryKey] ?? new Set();
+        // if (pageFetches.has(pageNumber)) return;
         for (let i = 0; i < numPages; i += 1) {
-            pageFetches.add(pageNumber + i);
+            this.fetchesInProgress.add(`${pageFetchQueryKey}-p:${pageNumber + i}`);
         }
-        this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
+        console.log(`fetchPage(${pageNumber})`, this.id, this.canPerformSearch, this.hasPage(pageNumber), this.endOfDataReached, this.host.baseQuery, JSON.stringify(this.host.selectedFacets), this.pageFetchQueryKey);
+        this.previousQueryKey = pageFetchQueryKey;
         const sortParams = this.host.sortParam ? [this.host.sortParam] : [];
         const params = {
             ...this.pageSpecifierParams,
@@ -578,37 +704,37 @@ export class CollectionBrowserDataSource {
         };
         params.uid = await this.requestUID(params, 'hits');
         console.log('=== FIRING PAGE REQUEST ===');
-        const searchResponse = await ((_c = this.host.searchService) === null || _c === void 0 ? void 0 : _c.search(params, this.host.searchType));
+        const searchResponse = await ((_b = this.host.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.host.searchType));
         console.log('=== RECEIVED PAGE RESPONSE IN CB === ');
         const success = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success;
-        // This is checking to see if the query has changed since the data was fetched.
-        // If so, we just want to discard the data since there should be a new query
-        // right behind it.
-        const queryChangedSinceFetch = pageFetchQueryKey !== this.pageFetchQueryKey;
-        if (queryChangedSinceFetch)
+        // This is checking to see if the fetch has been invalidated since it was fired off.
+        // If so, we just want to discard the response since it is for an obsolete query state.
+        console.log('after page fetch key:', currentPageKey, this.fetchesInProgress.has(currentPageKey));
+        if (!this.fetchesInProgress.has(currentPageKey))
             return;
+        for (let i = 0; i < numPages; i += 1) {
+            this.fetchesInProgress.delete(`${pageFetchQueryKey}-p:${pageNumber + i}`);
+        }
         if (!success) {
-            const errorMsg = (_d = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _d === void 0 ? void 0 : _d.message;
-            const detailMsg = (_f = (_e = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _e === void 0 ? void 0 : _e.details) === null || _f === void 0 ? void 0 : _f.message;
-            this.host.queryErrorMessage = `${errorMsg !== null && errorMsg !== void 0 ? errorMsg : ''}${detailMsg ? `; ${detailMsg}` : ''}`;
-            if (!this.host.queryErrorMessage) {
-                this.host.queryErrorMessage =
-                    'Missing or malformed response from backend';
+            const errorMsg = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _c === void 0 ? void 0 : _c.message;
+            const detailMsg = (_e = (_d = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _d === void 0 ? void 0 : _d.details) === null || _e === void 0 ? void 0 : _e.message;
+            this.queryErrorMessage = `${errorMsg !== null && errorMsg !== void 0 ? errorMsg : ''}${detailMsg ? `; ${detailMsg}` : ''}`;
+            if (!this.queryErrorMessage) {
+                this.queryErrorMessage = 'Missing or malformed response from backend';
                 // @ts-ignore: Property 'Sentry' does not exist on type 'Window & typeof globalThis'
-                (_h = (_g = window === null || window === void 0 ? void 0 : window.Sentry) === null || _g === void 0 ? void 0 : _g.captureMessage) === null || _h === void 0 ? void 0 : _h.call(_g, this.queryErrorMessage, 'error');
-            }
-            for (let i = 0; i < numPages; i += 1) {
-                (_j = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _j === void 0 ? void 0 : _j.delete(pageNumber + i);
+                (_g = (_f = window === null || window === void 0 ? void 0 : window.Sentry) === null || _f === void 0 ? void 0 : _f.captureMessage) === null || _g === void 0 ? void 0 : _g.call(_f, this.queryErrorMessage, 'error');
             }
-            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);
-        // display event to offshoot when result count is zero.
-        if (this.totalResults === 0) {
-            this.host.emitEmptyResults();
+        if (this.activeOnHost) {
+            this.host.setTotalResultCount(this.totalResults);
+            // display event to offshoot when result count is zero.
+            if (this.totalResults === 0) {
+                this.host.emitEmptyResults();
+            }
         }
         if (this.host.withinCollection) {
             console.log('host is within collection, setting collection info:', success.response.collectionExtraInfo);
@@ -617,7 +743,7 @@ export class CollectionBrowserDataSource {
             // which can be specified in metadata, or otherwise assumed to be week:desc
             this.host.applyDefaultCollectionSort(this.collectionExtraInfo);
             if (this.collectionExtraInfo) {
-                this.parentCollections = [].concat((_l = (_k = this.collectionExtraInfo.public_metadata) === null || _k === void 0 ? void 0 : _k.collection) !== null && _l !== void 0 ? _l : []);
+                this.parentCollections = [].concat((_j = (_h = this.collectionExtraInfo.public_metadata) === null || _h === void 0 ? void 0 : _h.collection) !== null && _j !== void 0 ? _j : []);
             }
         }
         else if (this.host.withinProfile) {
@@ -650,12 +776,11 @@ export class CollectionBrowserDataSource {
         if (resultCountDiscrepancy > 0) {
             console.log('End of data reached');
             this.endOfDataReached = true;
-            this.host.setTileCount(this.totalResults);
-        }
-        for (let i = 0; i < numPages; i += 1) {
-            (_m = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _m === void 0 ? void 0 : _m.delete(pageNumber + i);
+            if (this.activeOnHost)
+                this.host.setTileCount(this.totalResults);
         }
-        this.host.requestUpdate();
+        this.setSearchResultsLoading(false);
+        this.requestHostUpdate();
     }
     /**
      * Update the datasource from the fetch response
@@ -664,10 +789,6 @@ export class CollectionBrowserDataSource {
      * @param results
      */
     addTilesToDataSource(pageNumber, results) {
-        // 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 = [];
         results === null || results === void 0 ? void 0 : results.forEach(result => {
             if (!result.identifier)
@@ -678,7 +799,7 @@ export class CollectionBrowserDataSource {
         const visiblePages = this.host.currentVisiblePageNumbers;
         const needsReload = visiblePages.includes(pageNumber);
         if (needsReload) {
-            this.host.refreshVisibleResults();
+            this.refreshVisibleResults();
         }
     }
     /**
@@ -722,7 +843,7 @@ export class CollectionBrowserDataSource {
             acc[bucket.key.toUpperCase()] = bucket.doc_count;
             return acc;
         }, {});
-        this.host.requestUpdate();
+        this.requestHostUpdate();
     }
 }
 //# sourceMappingURL=collection-browser-data-source.js.map