@internetarchive/collection-browser 0.4.0 → 0.4.2

package/dist/src/collection-browser.js

@@ -3,7 +3,7 @@ import { __decorate } from "tslib";
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { SearchType, } from '@internetarchive/search-service';
+import { FilterConstraint, FilterMapBuilder, SearchType, } from '@internetarchive/search-service';
 import '@internetarchive/infinite-scroller';
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
@@ -11,7 +11,7 @@ import './sort-filter-bar/sort-filter-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './sort-filter-bar/sort-filter-bar';
-import { SortField, SortFieldToMetadataField, defaultSelectedFacets, } from './models';
+import { SortField, SortFieldToMetadataField, defaultSelectedFacets, prefixFilterAggregationKeys, } from './models';
 import { RestorationStateHandler, } from './restoration-state-handler';
 import chevronIcon from './assets/img/icons/chevron';
 import { LanguageCodeHandler } from './language-code-handler/language-code-handler';
@@ -59,6 +59,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.mobileView = false;
         this.mobileFacetsVisible = false;
         this.placeholderType = null;
+        this.prefixFilterCountMap = {};
         this.languageCodeHandler = new LanguageCodeHandler();
         /**
          * When we're animated scrolling to the page, we don't want to fetch
@@ -183,6 +184,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     `;
     }
     get collectionBrowserTemplate() {
+        var _a;
+        const shouldShowSearching = this.searchResultsLoading || this.totalResults === undefined;
+        const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.toLocaleString();
+        const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
         return html `<div
         id="left-column"
         class="column${this.isResizeToMobile ? ' preload' : ''}"
@@ -191,12 +196,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           ${this.mobileView ? this.mobileFacetsTemplate : nothing}
           <div id="results-total">
             <span id="big-results-count">
-              ${this.totalResults !== undefined
-            ? this.totalResults.toLocaleString()
-            : '-'}
+              ${shouldShowSearching ? html `Searching&hellip;` : resultsCount}
             </span>
             <span id="big-results-label">
-              ${this.totalResults === 1 ? 'Result' : 'Results'}
+              ${shouldShowSearching ? nothing : resultsLabel}
             </span>
           </div>
         </div>
@@ -234,6 +237,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .displayMode=${this.displayMode}
         .selectedTitleFilter=${this.selectedTitleFilter}
         .selectedCreatorFilter=${this.selectedCreatorFilter}
+        .prefixFilterCountMap=${this.prefixFilterCountMap}
         .resizeObserver=${this.resizeObserver}
         @sortChanged=${this.userChangedSort}
         @displayModeChanged=${this.displayModeChanged}
@@ -271,6 +275,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (!sortField)
             return;
         this.sortParam = { field: sortField, direction: this.sortDirection };
+        // Lazy-load the alphabet counts for title/creator sort bar as needed
+        this.updatePrefixFiltersForCurrentSort();
     }
     displayModeChanged(e) {
         var _a;
@@ -375,7 +381,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .collectionNameCache=${this.collectionNameCache}
         .languageCodeHandler=${this.languageCodeHandler}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
-        .fullQuery=${this.fullQuery}
+        .query=${this.filteredQuery}
+        .filterMap=${this.filterMap}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetDataLoading}
@@ -407,33 +414,21 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       </div>
     `;
     }
-    get queryDebuggingTemplate() {
-        var _a, _b;
-        return html `
-      <div>
-        <ul>
-          <li>Base Query: ${this.baseQuery}</li>
-          <li>Facet Query: ${this.facetQuery}</li>
-          <li>Sort Filter Query: ${this.sortFilterQueries}</li>
-          <li>Date Range Query: ${this.dateRangeQueryClause}</li>
-          <li>Sort: ${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field} ${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}</li>
-          <li>Full Query: ${this.fullQuery}</li>
-        </ul>
-      </div>
-    `;
-    }
     histogramDateRangeUpdated(e) {
         var _a;
         const { minDate, maxDate } = e.detail;
         [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
-        this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
-        if (this.dateRangeQueryClause) {
-            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
-                category: this.searchContext,
-                action: analyticsActions.histogramChanged,
-                label: this.dateRangeQueryClause,
-            });
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
+            category: this.searchContext,
+            action: analyticsActions.histogramChanged,
+            label: this.dateRangeQueryClause,
+        });
+    }
+    get dateRangeQueryClause() {
+        if (!this.minSelectedDate || !this.maxSelectedDate) {
+            return undefined;
         }
+        return `year:[${this.minSelectedDate} TO ${this.maxSelectedDate}]`;
     }
     firstUpdated() {
         this.setupStateRestorationObserver();
@@ -459,12 +454,19 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (changed.has('baseQuery') ||
             changed.has('titleQuery') ||
             changed.has('creatorQuery') ||
-            changed.has('dateRangeQueryClause') ||
+            changed.has('minSelectedDate') ||
+            changed.has('maxSelectedDate') ||
             changed.has('sortParam') ||
             changed.has('selectedFacets') ||
             changed.has('searchService')) {
             this.handleQueryChange();
         }
+        if (changed.has('baseQuery') ||
+            changed.has('minSelectedDate') ||
+            changed.has('maxSelectedDate') ||
+            changed.has('selectedFacets')) {
+            this.refreshLetterCounts();
+        }
         if (changed.has('selectedSort') || changed.has('sortDirection')) {
             const prevSortDirection = changed.get('sortDirection');
             this.sendSortByAnalytics(prevSortDirection);
@@ -566,6 +568,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             return;
         this.previousQueryKey = this.pageFetchQueryKey;
         this.dataSource = {};
+        this.totalResults = undefined;
+        this.aggregations = undefined;
+        this.fullYearsHistogramAggregation = undefined;
         this.pageFetchesInProgress = {};
         this.endOfDataReached = false;
         this.pagesToRender = this.initialPageNumber;
@@ -614,7 +619,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.baseQuery = restorationState.baseQuery;
         this.titleQuery = restorationState.titleQuery;
         this.creatorQuery = restorationState.creatorQuery;
-        this.dateRangeQueryClause = restorationState.dateRangeQueryClause;
         this.sortParam = (_e = restorationState.sortParam) !== null && _e !== void 0 ? _e : null;
         this.currentPage = (_f = restorationState.currentPage) !== null && _f !== void 0 ? _f : 1;
         this.minSelectedDate = restorationState.minSelectedDate;
@@ -634,7 +638,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             selectedFacets: (_c = this.selectedFacets) !== null && _c !== void 0 ? _c : defaultSelectedFacets,
             baseQuery: this.baseQuery,
             currentPage: this.currentPage,
-            dateRangeQueryClause: this.dateRangeQueryClause,
             titleQuery: this.titleQuery,
             creatorQuery: this.creatorQuery,
             minSelectedDate: this.minSelectedDate,
@@ -649,6 +652,64 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         await this.fetchPage(this.initialPageNumber);
         this.searchResultsLoading = false;
     }
+    get filterMap() {
+        const builder = new FilterMapBuilder();
+        // Add the date range, if applicable
+        if (this.minSelectedDate) {
+            builder.addFilter('year', this.minSelectedDate, FilterConstraint.GREATER_OR_EQUAL);
+        }
+        if (this.maxSelectedDate) {
+            builder.addFilter('year', this.maxSelectedDate, FilterConstraint.LESS_OR_EQUAL);
+        }
+        // Add any selected facets
+        if (this.selectedFacets) {
+            for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
+                const { name, values } = this.prepareFacetForFetch(facetName, facetValues);
+                for (const [value, bucket] of Object.entries(values)) {
+                    let constraint;
+                    if (bucket.state === 'selected') {
+                        constraint = FilterConstraint.INCLUDE;
+                    }
+                    else if (bucket.state === 'hidden') {
+                        constraint = FilterConstraint.EXCLUDE;
+                    }
+                    if (constraint) {
+                        builder.addFilter(name, value, constraint);
+                    }
+                }
+            }
+        }
+        const filterMap = builder.build();
+        // TEMP: At present, the backend search engine incorrectly returns 0 results if
+        // the _first_ language filter contains a space, so let's try to avoid that if possible.
+        if (filterMap.language) {
+            for (const [value, constraint] of Object.entries(filterMap.language)) {
+                if (value.includes(' ')) {
+                    // Delete and re-add this filter to make it the last one on the parent object
+                    // (Technically this isn't in the standard, but most browser impls output
+                    // object keys in the order they were added.)
+                    delete filterMap.language[value];
+                    filterMap.language[value] = constraint;
+                }
+                else {
+                    // As soon as we reach one without a space, we're done
+                    break;
+                }
+            }
+        }
+        return filterMap;
+    }
+    /** The base query joined with any title/creator letter filters */
+    get filteredQuery() {
+        if (!this.baseQuery)
+            return undefined;
+        let filteredQuery = this.baseQuery;
+        const { sortFilterQueries } = this;
+        if (sortFilterQueries) {
+            filteredQuery += ` AND ${sortFilterQueries}`;
+        }
+        return filteredQuery;
+    }
     /** The full query, including year facets and date range clauses */
     get fullQuery() {
         if (!this.baseQuery)
@@ -666,6 +727,20 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         return fullQuery;
     }
+    /** The full query without any title/creator letter filters */
+    get fullQueryWithoutAlphaFilters() {
+        if (!this.baseQuery)
+            return undefined;
+        let fullQuery = this.baseQuery;
+        const { facetQuery, dateRangeQueryClause } = this;
+        if (facetQuery) {
+            fullQuery += ` AND ${facetQuery}`;
+        }
+        if (dateRangeQueryClause) {
+            fullQuery += ` AND ${dateRangeQueryClause}`;
+        }
+        return fullQuery;
+    }
     /** The full query without any year facets or date range clauses */
     get fullQueryWithoutDates() {
         if (!this.baseQuery)
@@ -722,26 +797,46 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * @param facetValues The facet buckets, mapped by their keys
      */
     buildFacetClause(facetName, facetValues) {
-        const facetEntries = Object.entries(facetValues);
+        const { name: facetQueryName, values } = this.prepareFacetForFetch(facetName, facetValues);
+        const facetEntries = Object.entries(values);
         if (facetEntries.length === 0)
             return '';
-        const facetQueryName = facetName === 'lending' ? 'lending___status' : facetName;
         const facetValuesArray = [];
         for (const [key, facetData] of facetEntries) {
             const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
-            if (facetName === 'language') {
-                const languages = this.languageCodeHandler.getCodeArrayFromCodeString(key);
-                for (const language of languages) {
-                    facetValuesArray.push(`${plusMinusPrefix}"${language}"`);
-                }
-            }
-            else {
-                facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
-            }
+            facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
         }
         const valueQuery = facetValuesArray.join(` OR `);
         return `${facetQueryName}:(${valueQuery})`;
     }
+    /**
+     * Handles some special pre-request normalization steps for certain facet types
+     * that require them.
+     *
+     * @param facetName The name of the facet type (e.g., 'language')
+     * @param facetValues An array of values for that facet type
+     */
+    prepareFacetForFetch(facetName, facetValues) {
+        let [normalizedName, normalizedValues] = [facetName, facetValues];
+        // The full "search engine" name of the lending field is "lending___status"
+        if (facetName === 'lending') {
+            normalizedName = 'lending___status';
+        }
+        // Language codes like "en-US|en-GB|en" need to be broken apart into individual values
+        if (facetName === 'language') {
+            normalizedValues = {};
+            for (const [facetValue, facetData] of Object.entries(facetValues)) {
+                const languages = this.languageCodeHandler.getCodeArrayFromCodeString(facetValue);
+                for (const lang of languages) {
+                    normalizedValues[lang] = { ...facetData };
+                }
+            }
+        }
+        return {
+            name: normalizedName,
+            values: normalizedValues,
+        };
+    }
     /**
      * Takes an array of facet clauses, and combines them into a
      * full AND-joined facet query string. Empty clauses are ignored.
@@ -778,11 +873,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     async fetchFacets() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!this.fullQuery)
+        if (!this.filteredQuery)
             return;
         const params = {
-            query: this.fullQuery,
+            query: this.filteredQuery,
             rows: 0,
+            filters: this.filterMap,
             // Fetch a few extra buckets beyond the 6 we show, in case some get suppressed
             aggregationsSize: 10,
             // Note: we don't need an aggregations param to fetch the default aggregations from the PPS.
@@ -869,7 +965,14 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }, 0);
     }
     /**
-     * The query key is a string that uniquely identifies the current query
+     * The query key is a string that uniquely identifies the current search.
+     * It consists of:
+     *  - The current base query
+     *  - The current search type
+     *  - Any currently-applied facets
+     *  - Any currently-applied date range
+     *  - 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.
@@ -880,7 +983,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     async fetchPage(pageNumber) {
         var _a, _b, _c, _d, _e;
-        if (!this.fullQuery)
+        if (!this.filteredQuery)
             return;
         // if we already have data, don't fetch again
         if (this.dataSource[pageNumber])
@@ -896,10 +999,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
         const sortParams = this.sortParam ? [this.sortParam] : [];
         const params = {
-            query: this.fullQuery,
+            query: this.filteredQuery,
             page: pageNumber,
             rows: this.pageSize,
             sort: sortParams,
+            filters: this.filterMap,
             aggregations: { omit: true },
         };
         const searchResponse = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
@@ -930,7 +1034,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 }
             }
         }
-        const queryChangedSinceFetch = searchQuery !== this.fullQuery || sortChanged;
+        const queryChangedSinceFetch = searchQuery !== this.filteredQuery || sortChanged;
         if (queryChangedSinceFetch)
             return;
         const { results } = success.response;
@@ -938,12 +1042,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.preloadCollectionNames(results);
             this.updateDataSource(pageNumber, results);
         }
+        // When we reach the end of the data, we can set the infinite scroller's
+        // item count to the real total number of results (rather than the
+        // temporary estimates based on pages rendered so far).
         if (results.length < this.pageSize) {
             this.endOfDataReached = true;
-            // this updates the infinite scroller to show the actual size
-            if (this.infiniteScroller) {
-                this.infiniteScroller.itemCount = this.actualTileCount;
-            }
+            this.infiniteScroller.itemCount = this.totalResults;
         }
         (_e = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _e === void 0 ? void 0 : _e.delete(pageNumber);
         this.searchResultsLoading = false;
@@ -1041,6 +1145,56 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.infiniteScroller.reload();
         }
     }
+    /** Fetches the aggregation buckets for the given prefix filter type. */
+    async fetchPrefixFilterBuckets(filterType) {
+        var _a, _b, _c, _d, _e, _f;
+        if (!this.fullQueryWithoutAlphaFilters)
+            return [];
+        const filterAggregationKey = prefixFilterAggregationKeys[filterType];
+        const params = {
+            query: this.fullQueryWithoutAlphaFilters,
+            rows: 0,
+            // Only fetch the firstTitle or firstCreator aggregation
+            aggregations: { simpleParams: [filterAggregationKey] },
+            // Fetch all 26 letter buckets
+            aggregationsSize: 26,
+        };
+        const searchResponse = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
+        return ((_f = (_e = (_d = (_c = (_b = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.aggregations) === null || _d === void 0 ? void 0 : _d[filterAggregationKey]) === null || _e === void 0 ? void 0 : _e.buckets) !== null && _f !== void 0 ? _f : []);
+    }
+    /** Fetches and caches the prefix filter counts for the given filter type. */
+    async updatePrefixFilterCounts(filterType) {
+        const buckets = await this.fetchPrefixFilterBuckets(filterType);
+        // Unpack the aggregation buckets into a simple map like { 'A': 50, 'B': 25, ... }
+        this.prefixFilterCountMap = { ...this.prefixFilterCountMap }; // Clone the object to trigger an update
+        this.prefixFilterCountMap[filterType] = buckets.reduce((acc, bucket) => {
+            acc[bucket.key.toUpperCase()] = bucket.doc_count;
+            return acc;
+        }, {});
+    }
+    /**
+     * 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).
+     */
+    async updatePrefixFiltersForCurrentSort() {
+        if (['title', 'creator'].includes(this.selectedSort)) {
+            const filterType = this.selectedSort;
+            if (!this.prefixFilterCountMap[filterType]) {
+                this.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).
+     */
+    refreshLetterCounts() {
+        this.prefixFilterCountMap = {};
+        this.updatePrefixFiltersForCurrentSort();
+    }
     /*
      * Convert etree titles
      * "[Creator] Live at [Place] on [Date]" => "[Date]: [Place]"
@@ -1099,8 +1253,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * increase the number of pages to render and start fetching data for the new page
      */
     scrollThresholdReached() {
-        this.pagesToRender += 1;
-        this.fetchPage(this.pagesToRender);
+        if (!this.endOfDataReached) {
+            this.pagesToRender += 1;
+            this.fetchPage(this.pagesToRender);
+        }
     }
 };
 CollectionBrowser.styles = css `
@@ -1342,9 +1498,6 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "sortDirection", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "dateRangeQueryClause", void 0);
 __decorate([
     property({ type: Number })
 ], CollectionBrowser.prototype, "pageSize", void 0);
@@ -1429,6 +1582,9 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "placeholderType", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "prefixFilterCountMap", void 0);
 __decorate([
     query('#content-container')
 ], CollectionBrowser.prototype, "contentContainer", void 0);