@internetarchive/collection-browser 0.4.16-alpha.8 → 0.4.16

package/dist/src/collection-browser.js

@@ -82,6 +82,30 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * for the previous/next page, we'll fetch the next/previous page to populate it
          */
         this.dataSource = {};
+        /**
+         * Updates the height of the left column according to its position on the page.
+         * Arrow function ensures proper `this` binding.
+         */
+        this.updateLeftColumnHeight = () => {
+            var _a, _b, _c, _d, _e;
+            if (this.mobileView) {
+                (_b = (_a = this.leftColumn) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.removeProperty('height');
+            }
+            else {
+                const clientTop = (_c = this.leftColumn) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().top;
+                (_e = (_d = this.leftColumn) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.setProperty('height', `${window.innerHeight - (clientTop !== null && clientTop !== void 0 ? clientTop : 0) - 3}px`);
+            }
+        };
+        /**
+         * Toggles whether the fade-out is visible at the bottom of the facets.
+         * It should only be visible if the facets are not scrolled to the bottom.
+         * Arrow function ensures proper `this` binding.
+         */
+        this.updateFacetFadeOut = (entries) => {
+            var _a, _b;
+            const fadeElmt = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('facets-bottom-fade');
+            fadeElmt === null || fadeElmt === void 0 ? void 0 : fadeElmt.classList.toggle('hidden', (_b = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _b === void 0 ? void 0 : _b.isIntersecting);
+        };
         // we only want to scroll on the very first query change
         // so this keeps track of whether we've already set the initial query
         this.initialQueryChangeHappened = false;
@@ -150,8 +174,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (letterFilters) {
             this.selectedTitleFilter = null;
             this.selectedCreatorFilter = null;
-            this.titleQuery = undefined;
-            this.creatorQuery = undefined;
         }
         if (sort) {
             this.sortParam = null;
@@ -193,8 +215,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim())) {
             this.placeholderType = 'empty-query';
         }
-        if ((!this.searchResultsLoading && this.totalResults === 0) ||
-            !this.searchService) {
+        else if (!this.searchResultsLoading &&
+            (this.totalResults === 0 || !this.searchService)) {
             this.placeholderType = 'null-result';
         }
         if (this.queryErrorMessage) {
@@ -218,7 +240,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         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
+        return html ` <div id="left-column-scroll-sentinel"></div>
+      <div
         id="left-column"
         class="column${this.isResizeToMobile ? ' preload' : ''}"
       >
@@ -240,7 +263,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             : ''}
         >
           ${this.facetsTemplate}
+          <div id="facets-scroll-sentinel"></div>
         </div>
+        ${this.mobileView ? nothing : html `<div id="facets-bottom-fade"></div>`}
       </div>
       <div id="right-column" class="column">
         ${this.sortFilterBarTemplate}
@@ -305,7 +330,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         });
     }
     selectedSortChanged() {
-        console.log('selectedSortChanged');
         if (this.selectedSort === 'relevance') {
             this.sortParam = null;
             return;
@@ -317,7 +341,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             return;
         this.sortParam = { field: sortField, direction: this.sortDirection };
         // Lazy-load the alphabet counts for title/creator sort bar as needed
-        console.log('will update prefix filters for current sort');
         this.updatePrefixFiltersForCurrentSort();
     }
     displayModeChanged(e) {
@@ -331,9 +354,28 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             });
         }
     }
-    /** Send Analytics when sorting by title's first letter
+    /**
+     * Returns a query clause identifying the currently selected title filter,
+     * e.g., `firstTitle:X`.
+     */
+    get titleQuery() {
+        return this.selectedTitleFilter
+            ? `firstTitle:${this.selectedTitleFilter}`
+            : undefined;
+    }
+    /**
+     * Returns a query clause identifying the currently selected creator filter,
+     * e.g., `firstCreator:X`.
+     */
+    get creatorQuery() {
+        return this.selectedCreatorFilter
+            ? `firstCreator:${this.selectedCreatorFilter}`
+            : undefined;
+    }
+    /**
+     * Send Analytics when sorting by title's first letter
      * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
-     * */
+     */
     sendFilterByTitleAnalytics(prevSelectedLetter) {
         var _a;
         if (!prevSelectedLetter && !this.selectedTitleFilter) {
@@ -348,14 +390,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 : `${prevSelectedLetter || 'start'}-${this.selectedTitleFilter}`,
         });
     }
-    selectedTitleLetterChanged() {
-        this.titleQuery = this.selectedTitleFilter
-            ? `firstTitle:${this.selectedTitleFilter}`
-            : undefined;
-    }
-    /** Send Analytics when filtering by creator's first letter
+    /**
+     * Send Analytics when filtering by creator's first letter
      * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
-     * */
+     */
     sendFilterByCreatorAnalytics(prevSelectedLetter) {
         var _a;
         if (!prevSelectedLetter && !this.selectedCreatorFilter) {
@@ -370,20 +408,19 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 : `${prevSelectedLetter || 'start'}-${this.selectedCreatorFilter}`,
         });
     }
-    selectedCreatorLetterChanged() {
-        this.creatorQuery = this.selectedCreatorFilter
-            ? `firstCreator:${this.selectedCreatorFilter}`
-            : undefined;
-    }
+    /**
+     * Handler for changes to which letter is selected in the title alphabet bar.
+     */
     titleLetterSelected(e) {
         this.selectedCreatorFilter = null;
         this.selectedTitleFilter = e.detail.selectedLetter;
-        this.selectedTitleLetterChanged();
     }
+    /**
+     * Handler for changes to which letter is selected in the creator alphabet bar.
+     */
     creatorLetterSelected(e) {
         this.selectedTitleFilter = null;
         this.selectedCreatorFilter = e.detail.selectedLetter;
-        this.selectedCreatorLetterChanged();
     }
     get mobileFacetsTemplate() {
         return html `
@@ -424,13 +461,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .selectedFacets=${this.selectedFacets}
         .collectionNameCache=${this.collectionNameCache}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
-        .query=${this.filteredQuery}
+        .query=${this.baseQuery}
         .filterMap=${this.filterMap}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetsLoading}
         ?fullYearAggregationLoading=${this.facetsLoading}
-        .onFacetClick=${this.facetClickHandler}
+        @facetClick=${this.facetClickHandler}
         .analyticsHandler=${this.analyticsHandler}
       >
       </collection-facets>
@@ -479,7 +516,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     updated(changed) {
         var _a;
-        console.log('updated', changed, this.baseQuery, JSON.stringify(this.selectedFacets));
+        if (changed.has('placeholderType') && this.placeholderType === null) {
+            if (!this.leftColIntersectionObserver) {
+                this.setupLeftColumnScrollListeners();
+            }
+            if (!this.facetsIntersectionObserver) {
+                this.setupFacetsScrollListeners();
+            }
+            this.updateLeftColumnHeight();
+        }
         if (changed.has('displayMode') ||
             changed.has('baseNavigationUrl') ||
             changed.has('baseImageUrl') ||
@@ -524,11 +569,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         if (changed.has('selectedTitleFilter')) {
             this.sendFilterByTitleAnalytics(changed.get('selectedTitleFilter'));
-            this.selectedTitleLetterChanged();
         }
         if (changed.has('selectedCreatorFilter')) {
             this.sendFilterByCreatorAnalytics(changed.get('selectedCreatorFilter'));
-            this.selectedCreatorLetterChanged();
         }
         if (changed.has('baseQuery') ||
             changed.has('searchType') ||
@@ -554,12 +597,16 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.resizeObserver) {
             this.disconnectResizeObserver(this.resizeObserver);
         }
         if (this.boundNavigationHandler) {
             window.removeEventListener('popstate', this.boundNavigationHandler);
         }
+        (_a = this.leftColIntersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.facetsIntersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        window.removeEventListener('resize', this.updateLeftColumnHeight);
     }
     handleResize(entry) {
         const previousView = this.mobileView;
@@ -570,6 +617,41 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 this.isResizeToMobile = true;
             }
         }
+        // Ensure the facet sidebar remains sized correctly
+        this.updateLeftColumnHeight();
+    }
+    /**
+     * Sets up listeners for events that may require updating the left column height.
+     */
+    setupLeftColumnScrollListeners() {
+        var _a;
+        // We observe intersections between the left column's scroll sentinel and
+        // the viewport, so that we can ensure the left column is always sized to
+        // match the _available_ viewport height. This should generally be more
+        // performant than listening to scroll events on the page or column.
+        const leftColumnSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#left-column-scroll-sentinel');
+        if (leftColumnSentinel) {
+            this.leftColIntersectionObserver = new IntersectionObserver(this.updateLeftColumnHeight, {
+                threshold: [...Array(101).keys()].map(n => n / 100), // Threshold every 1%
+            });
+            this.leftColIntersectionObserver.observe(leftColumnSentinel);
+        }
+        // We also listen for window resize events, as they are not always captured
+        // by the resize observer and can affect the desired height of the left column.
+        window.addEventListener('resize', this.updateLeftColumnHeight);
+    }
+    /**
+     * Sets up listeners to control whether the facet sidebar shows its bottom fade-out.
+     * Note this uses a separate IntersectionObserver from the left column, because we
+     * don't need granular intersection thresholds for this.
+     */
+    setupFacetsScrollListeners() {
+        var _a;
+        const facetsSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#facets-scroll-sentinel');
+        if (facetsSentinel) {
+            this.facetsIntersectionObserver = new IntersectionObserver(this.updateFacetFadeOut);
+            this.facetsIntersectionObserver.observe(facetsSentinel);
+        }
     }
     emitBaseQueryChanged() {
         this.dispatchEvent(new CustomEvent('baseQueryChanged', {
@@ -706,6 +788,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         await this.fetchPage(this.initialPageNumber);
         this.searchResultsLoading = false;
     }
+    /**
+     * Constructs a search service FilterMap object from the combination of
+     * all the currently-applied filters. This includes any facets, letter
+     * filters, and date range.
+     */
     get filterMap() {
         const builder = new FilterMapBuilder();
         // Add the date range, if applicable
@@ -733,20 +820,16 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 }
             }
         }
+        // Add any letter filters
+        if (this.selectedTitleFilter) {
+            builder.addFilter('firstTitle', this.selectedTitleFilter, FilterConstraint.INCLUDE);
+        }
+        if (this.selectedCreatorFilter) {
+            builder.addFilter('firstCreator', this.selectedCreatorFilter, FilterConstraint.INCLUDE);
+        }
         const filterMap = builder.build();
         return filterMap;
     }
-    /** The base query joined with any title/creator letter filters */
-    get filteredQuery() {
-        if (!this.baseQuery)
-            return undefined;
-        let filteredQuery = this.baseQuery.trim();
-        const { sortFilterQueries } = this;
-        if (sortFilterQueries) {
-            filteredQuery += ` AND ${sortFilterQueries}`;
-        }
-        return filteredQuery.trim();
-    }
     /** The full query, including year facets and date range clauses */
     get fullQuery() {
         if (!this.baseQuery)
@@ -764,20 +847,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         return fullQuery.trim();
     }
-    /** The full query without any title/creator letter filters */
-    get fullQueryWithoutAlphaFilters() {
-        if (!this.baseQuery)
-            return undefined;
-        let fullQuery = this.baseQuery.trim();
-        const { facetQuery, dateRangeQueryClause } = this;
-        if (facetQuery) {
-            fullQuery += ` AND ${facetQuery}`;
-        }
-        if (dateRangeQueryClause) {
-            fullQuery += ` AND ${dateRangeQueryClause}`;
-        }
-        return fullQuery.trim();
-    }
     /**
      * Generates a query string for the given facets
      *
@@ -849,33 +918,37 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     facetsChanged(e) {
         this.selectedFacets = e.detail;
     }
-    facetClickHandler(name, facetSelected, negative) {
+    facetClickHandler({ detail: { key, state: facetState, negative }, }) {
         var _a, _b;
         if (negative) {
             (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
                 category: this.searchContext,
-                action: facetSelected
+                action: facetState !== 'none'
                     ? analyticsActions.facetNegativeSelected
                     : analyticsActions.facetNegativeDeselected,
-                label: name,
+                label: key,
             });
         }
         else {
             (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
                 category: this.searchContext,
-                action: facetSelected
+                action: facetState !== 'none'
                     ? analyticsActions.facetSelected
                     : analyticsActions.facetDeselected,
-                label: name,
+                label: key,
             });
         }
     }
     async fetchFacets() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!this.filteredQuery)
+        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!trimmedQuery)
             return;
+        if (!this.searchService)
+            return;
+        const { facetFetchQueryKey } = this;
         const params = {
-            query: this.filteredQuery,
+            query: trimmedQuery,
             rows: 0,
             filters: this.filterMap,
             // Fetch a few extra buckets beyond the 6 we show, in case some get suppressed
@@ -885,9 +958,14 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             uid: this.facetFetchQueryKey,
         };
         this.facetsLoading = true;
-        const searchResponse = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
+        const searchResponse = await this.searchService.search(params, this.searchType);
         const success = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success;
-        this.facetsLoading = false;
+        // 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)
+            return;
         if (!success) {
             const errorMsg = (_b = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _b === void 0 ? void 0 : _b.message;
             const detailMsg = (_d = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.error) === null || _c === void 0 ? void 0 : _c.details) === null || _d === void 0 ? void 0 : _d.message;
@@ -897,16 +975,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             }
             return;
         }
-        // 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 returnedUid = success.request.clientParameters.uid;
-        const queryChangedSinceFetch = returnedUid !== this.facetFetchQueryKey;
-        if (queryChangedSinceFetch)
-            return;
         this.aggregations = success === null || success === void 0 ? void 0 : success.response.aggregations;
         this.fullYearsHistogramAggregation =
             (_h = (_g = success === null || success === void 0 ? void 0 : success.response) === null || _g === void 0 ? void 0 : _g.aggregations) === null || _h === void 0 ? void 0 : _h.year_histogram;
+        this.facetsLoading = false;
     }
     scrollToPage(pageNumber) {
         return new Promise(resolve => {
@@ -957,8 +1029,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         return `${this.fullQuery}-${this.searchType}`;
     }
     async fetchPage(pageNumber) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        if (!this.filteredQuery)
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!trimmedQuery)
+            return;
+        if (!this.searchService)
             return;
         // if we already have data, don't fetch again
         if (this.dataSource[pageNumber])
@@ -967,14 +1042,14 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             return;
         // if a fetch is already in progress for this query and page, don't fetch again
         const { pageFetchQueryKey } = this;
-        const pageFetches = (_a = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _a !== void 0 ? _a : new Set();
+        const pageFetches = (_b = this.pageFetchesInProgress[pageFetchQueryKey]) !== null && _b !== void 0 ? _b : new Set();
         if (pageFetches.has(pageNumber))
             return;
         pageFetches.add(pageNumber);
         this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
         const sortParams = this.sortParam ? [this.sortParam] : [];
         const params = {
-            query: this.filteredQuery,
+            query: trimmedQuery,
             page: pageNumber,
             rows: this.pageSize,
             sort: sortParams,
@@ -982,8 +1057,14 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             aggregations: { omit: true },
             uid: this.pageFetchQueryKey,
         };
-        const searchResponse = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
+        const searchResponse = await this.searchService.search(params, this.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 the data since there should be a new query
+        // right behind it.
+        const queryChangedSinceFetch = pageFetchQueryKey !== this.pageFetchQueryKey;
+        if (queryChangedSinceFetch)
+            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;
@@ -993,15 +1074,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 // @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, this.queryErrorMessage, 'error');
             }
+            (_h = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _h === void 0 ? void 0 : _h.delete(pageNumber);
+            this.searchResultsLoading = false;
             return;
         }
-        // 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 returnedUid = success.request.clientParameters.uid;
-        const queryChangedSinceFetch = returnedUid !== this.pageFetchQueryKey;
-        if (queryChangedSinceFetch)
-            return;
         this.totalResults = success.response.totalResults;
         const { results } = success.response;
         if (results && results.length > 0) {
@@ -1017,7 +1093,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 this.infiniteScroller.itemCount = this.totalResults;
             }
         }
-        (_h = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _h === void 0 ? void 0 : _h.delete(pageNumber);
+        (_j = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _j === void 0 ? void 0 : _j.delete(pageNumber);
         this.searchResultsLoading = false;
     }
     preloadCollectionNames(results) {
@@ -1119,29 +1195,32 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     /** Fetches the aggregation buckets for the given prefix filter type. */
     async fetchPrefixFilterBuckets(filterType) {
-        var _a, _b, _c, _d, _e, _f;
-        console.log('fetchPrefixFilterBuckets', this.fullQueryWithoutAlphaFilters);
-        if (!this.fullQueryWithoutAlphaFilters)
+        var _a, _b, _c, _d, _e, _f, _g;
+        const trimmedQuery = (_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim();
+        if (!trimmedQuery)
             return [];
         const filterAggregationKey = prefixFilterAggregationKeys[filterType];
         const params = {
-            query: this.fullQueryWithoutAlphaFilters,
+            query: trimmedQuery,
             rows: 0,
+            filters: this.filterMap,
             // Only fetch the firstTitle or firstCreator aggregation
             aggregations: { simpleParams: [filterAggregationKey] },
             // Fetch all 26 letter buckets
             aggregationsSize: 26,
         };
-        console.log('sending prefix filter search request');
-        const searchResponse = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
-        console.log('response', searchResponse);
-        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 : []);
+        const searchResponse = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params, this.searchType));
+        return ((_g = (_f = (_e = (_d = (_c = searchResponse === null || searchResponse === void 0 ? void 0 : searchResponse.success) === null || _c === void 0 ? void 0 : _c.response) === null || _d === void 0 ? void 0 : _d.aggregations) === null || _e === void 0 ? void 0 : _e[filterAggregationKey]) === null || _f === void 0 ? void 0 : _f.buckets) !== null && _g !== void 0 ? _g : []);
     }
     /** Fetches and caches the prefix filter counts for the given filter type. */
     async updatePrefixFilterCounts(filterType) {
-        console.log('updatePrefixFilterCounts');
+        const { facetFetchQueryKey } = this;
         const buckets = await this.fetchPrefixFilterBuckets(filterType);
-        console.log('buckets', buckets);
+        // Don't update the filter counts for an outdated query (if it has been changed
+        // since we sent the request)
+        const queryChangedSinceFetch = facetFetchQueryKey !== this.facetFetchQueryKey;
+        if (queryChangedSinceFetch)
+            return;
         // 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) => {
@@ -1154,12 +1233,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * provided it is one that permits prefix filtering. (If not, this does nothing).
      */
     async updatePrefixFiltersForCurrentSort() {
-        console.log('updatePrefixFiltersForCurrentSort');
         if (['title', 'creator'].includes(this.selectedSort)) {
-            console.log('sort is title or creator - will update');
             const filterType = this.selectedSort;
             if (!this.prefixFilterCountMap[filterType]) {
-                console.log('need new filters, updating');
                 this.updatePrefixFilterCounts(filterType);
             }
         }
@@ -1172,7 +1248,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Call this whenever the counts are invalidated (e.g., by a query change).
      */
     refreshLetterCounts() {
-        console.log('refreshLetterCounts');
         if (Object.keys(this.prefixFilterCountMap).length > 0) {
             this.prefixFilterCountMap = {};
         }
@@ -1229,6 +1304,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
 CollectionBrowser.styles = css `
     :host {
       display: block;
+
+      --leftColumnWidth: 18rem;
+      --leftColumnPaddingRight: 2.5rem;
     }
 
     /**
@@ -1289,15 +1367,91 @@ CollectionBrowser.styles = css `
     }
 
     #left-column {
-      width: 18rem;
-      min-width: 18rem; /* Prevents Safari from shrinking col at first draw */
-      padding-right: 12px;
-      padding-right: 2.5rem;
+      width: var(--leftColumnWidth, 18rem);
+      /* Prevents Safari from shrinking col at first draw */
+      min-width: var(--leftColumnWidth, 18rem);
+      padding-top: 0;
+      /* Reduced padding by 0.2rem to add the invisible border in the rule below */
+      padding-right: calc(var(--leftColumnPaddingRight, 2.5rem) - 0.2rem);
+      border-right: 0.2rem solid transparent; /* Pads to the right of the scrollbar a bit */
       z-index: 1;
     }
 
+    .desktop #left-column {
+      top: 0;
+      position: sticky;
+      height: calc(100vh - 2rem);
+      max-height: calc(100vh - 2rem);
+      overflow-x: hidden;
+      overflow-y: scroll;
+
+      /*
+       * Firefox doesn't support any of the -webkit-scrollbar stuff below, but
+       * does at least give us a tiny bit of control over width & color.
+       */
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
+    .desktop #left-column:hover {
+      scrollbar-color: auto;
+    }
     .desktop #left-column::-webkit-scrollbar {
-      display: none;
+      appearance: none;
+      width: 6px;
+    }
+    .desktop #left-column::-webkit-scrollbar-button {
+      height: 3px;
+      background: transparent;
+    }
+    .desktop #left-column::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    .desktop #left-column::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+    }
+    .desktop #left-column:hover::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+    }
+    .desktop #left-column:hover::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.2);
+    }
+    .desktop #left-column:hover::-webkit-scrollbar-thumb:active {
+      background: rgba(0, 0, 0, 0.3);
+    }
+
+    #facets-bottom-fade {
+      background: linear-gradient(
+        to bottom,
+        #f5f5f700 0%,
+        #f5f5f7c0 50%,
+        #f5f5f7 80%,
+        #f5f5f7 100%
+      );
+      position: fixed;
+      bottom: 0;
+      height: 50px;
+      /* Wide enough to cover the content, but leave the scrollbar uncovered */
+      width: calc(
+        var(--leftColumnWidth) + var(--leftColumnPaddingRight) - 10px
+      );
+      z-index: 2;
+      pointer-events: none;
+      transition: height 0.1s ease;
+    }
+    #facets-bottom-fade.hidden {
+      height: 0;
+    }
+
+    .desktop #left-column-scroll-sentinel {
+      width: 1px;
+      height: 100vh;
+      background: transparent;
+    }
+
+    .desktop #facets-scroll-sentinel {
+      width: 1px;
+      height: 1px;
+      background: transparent;
     }
 
     .mobile #left-column {
@@ -1305,21 +1459,16 @@ CollectionBrowser.styles = css `
       padding: 0;
     }
 
-    .desktop #left-column {
-      top: 0;
-      position: sticky;
-      max-height: 100vh;
-      overflow: scroll;
-      -ms-overflow-style: none; /* hide scrollbar IE and Edge */
-      scrollbar-width: none; /* hide scrollbar Firefox */
-    }
-
     #mobile-header-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
 
+    .desktop #mobile-header-container {
+      padding-top: 2rem;
+    }
+
     #facets-container {
       position: relative;
       max-height: 0;
@@ -1493,12 +1642,6 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], CollectionBrowser.prototype, "resizeObserver", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "titleQuery", void 0);
-__decorate([
-    property({ type: String })
-], CollectionBrowser.prototype, "creatorQuery", void 0);
 __decorate([
     property({ type: Number })
 ], CollectionBrowser.prototype, "currentPage", void 0);
@@ -1583,6 +1726,9 @@ __decorate([
 __decorate([
     query('#content-container')
 ], CollectionBrowser.prototype, "contentContainer", void 0);
+__decorate([
+    query('#left-column')
+], CollectionBrowser.prototype, "leftColumn", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], CollectionBrowser.prototype, "analyticsHandler", void 0);