@internetarchive/collection-browser 0.0.1-alpha.8 → 0.1.1

package/dist/src/collection-browser.js

@@ -2,22 +2,33 @@ import { __decorate } from "tslib";
 /* eslint-disable import/no-duplicates */
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { SearchParams, } from '@internetarchive/search-service';
-import { AggregateSearchParams, SortParam, } from '@internetarchive/search-service/dist/src/search-params';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '@internetarchive/infinite-scroller';
 import './tiles/tile-dispatcher';
-import './tiles/loading-tile';
+import './tiles/collection-browser-loading-tile';
 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 { RestorationStateHandler, } from './restoration-state-handler';
+import chevronIcon from './assets/img/icons/chevron';
+import { LanguageCodeHandler } from './language-code-handler/language-code-handler';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     constructor() {
         super(...arguments);
-        this.showDeleteButtons = false;
-        this.displayMode = 'grid';
         this.sortParam = null;
+        this.selectedSort = SortField.relevance;
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = null;
+        this.sortDirection = null;
         this.pageSize = 50;
+        this.showHistogramDatePicker = false;
+        this.pageContext = 'search';
+        this.restorationStateHandler = new RestorationStateHandler({
+            context: this.pageContext,
+        });
+        this.mobileBreakpoint = 600;
         /**
          * The page that the consumer wants to load.
          */
@@ -30,10 +41,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         this.pagesToRender = this.initialPageNumber;
         this.searchResultsLoading = false;
-        this.selectedFacets = {};
-        this.hiddenFacets = {};
         this.facetsLoading = false;
         this.fullYearAggregationLoading = false;
+        this.mobileView = false;
+        this.mobileFacetsVisible = false;
+        this.languageCodeHandler = new LanguageCodeHandler();
         /**
          * When we're animated scrolling to the page, we don't want to fetch
          * all of the pages as it scrolls so this lets us know if we're scrolling
@@ -43,7 +55,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * When we've reached the end of the data, stop trying to fetch more
          */
         this.endOfDataReached = false;
-        this.placeholderCellTemplate = html `<loading-tile></loading-tile>`;
+        this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
         /**
          * The results per page so we can paginate.
          *
@@ -55,6 +67,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         // 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;
+        this.historyPopOccurred = false;
         // this maps the query to the pages being fetched for that query
         this.pageFetchesInProgress = {};
     }
@@ -93,54 +106,100 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         return Object.keys(this.dataSource).reduce((acc, page) => acc + this.dataSource[page].length, 0);
     }
     /**
+     * Go to the given page of results
      *
      * @param pageNumber
-     * @param scroll
      */
     goToPage(pageNumber) {
         this.initialPageNumber = pageNumber;
         this.pagesToRender = pageNumber;
         this.scrollToPage(pageNumber);
     }
+    clearFilters() {
+        this.selectedFacets = defaultSelectedFacets;
+        this.sortParam = null;
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = null;
+        this.titleQuery = undefined;
+        this.creatorQuery = undefined;
+        this.selectedSort = SortField.relevance;
+        this.sortDirection = null;
+    }
     render() {
         return html `
-      ${this.queryDebuggingTemplate}
-
-      <div id="content-container">
+      <div id="content-container" class=${this.mobileView ? 'mobile' : ''}>
         <div id="left-column" class="column">
-          <div id="results-total">
-            <span id="big-results-count"
-              >${this.totalResults
+          <div id="mobile-header-container">
+            ${this.mobileView
+            ? html `
+                  <div id="mobile-filter-collapse">
+                    <h1
+                      @click=${() => {
+                this.mobileFacetsVisible = !this.mobileFacetsVisible;
+            }}
+                      @keyup=${() => {
+                this.mobileFacetsVisible = !this.mobileFacetsVisible;
+            }}
+                    >
+                      <span
+                        class="collapser ${this.mobileFacetsVisible
+                ? 'open'
+                : ''}"
+                      >
+                        ${chevronIcon}
+                      </span>
+                      Filters
+                    </h1>
+                  </div>
+                `
+            : nothing}
+            <div id="results-total">
+              <span id="big-results-count"
+                >${this.totalResults !== undefined
             ? this.totalResults.toLocaleString()
             : '-'}</span
-            >
-            <span id="big-results-label">Results</span>
+              >
+              <span id="big-results-label">Results</span>
+            </div>
           </div>
-          <div id="facets-container">
-            ${this.facetsLoading ? this.loadingTemplate : nothing}
-            <collection-facets
-              @facetsChanged=${this.facetsChanged}
-              @hiddenFacetsChanged=${this.hiddenFacetsChanged}
-              @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-              .aggregations=${this.aggregations}
-              .fullYearsHistogramAggregation=${this
-            .fullYearsHistogramAggregation}
-              ?facetsLoading=${this.facetDataLoading}
-              ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
-            ></collection-facets>
+          <div
+            id="facets-container"
+            class=${!this.mobileView || this.mobileFacetsVisible
+            ? 'expanded'
+            : ''}
+          >
+            ${this.facetsTemplate}
           </div>
         </div>
         <div id="right-column" class="column">
           ${this.searchResultsLoading ? this.loadingTemplate : nothing}
           <sort-filter-bar
-            @sortChanged=${this.sortChanged}
+            .selectedSort=${this.selectedSort}
+            .sortDirection=${this.sortDirection}
+            .displayMode=${this.displayMode}
+            .selectedTitleFilter=${this.selectedTitleFilter}
+            .selectedCreatorFilter=${this.selectedCreatorFilter}
+            .resizeObserver=${this.resizeObserver}
+            @sortChanged=${this.userChangedSort}
             @displayModeChanged=${this.displayModeChanged}
-            @titleLetterChanged=${this.titleLetterChanged}
-            @creatorLetterChanged=${this.creatorLetterChanged}
+            @titleLetterChanged=${this.titleLetterSelected}
+            @creatorLetterChanged=${this.creatorLetterSelected}
           ></sort-filter-bar>
 
+          ${this.displayMode === `list-compact`
+            ? this.listHeaderTemplate
+            : nothing}
+          ${!this.searchResultsLoading && this.totalResults === 0
+            ? html `
+                <h2>
+                  Your search did not match any items in the Archive. Try
+                  different keywords or a more general search.
+                </h2>
+              `
+            : nothing}
+
           <infinite-scroller
-            class="${this.displayMode}"
+            class="${ifDefined(this.displayMode)}"
             .cellProvider=${this}
             .placeholderCellTemplate=${this.placeholderCellTemplate}
             @scrollThresholdReached=${this.scrollThresholdReached}
@@ -151,45 +210,70 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       </div>
     `;
     }
-    sortChanged(e) {
+    userChangedSort(e) {
         var _a;
-        const { sortField, sortDirection } = e.detail;
-        console.debug('sortChanged', sortField, sortDirection);
-        if (sortField && sortDirection) {
-            this.sortParam = new SortParam(sortField, sortDirection);
-        }
-        else {
-            this.sortParam = null;
-        }
+        const { selectedSort, sortDirection } = e.detail;
+        this.selectedSort = selectedSort;
+        this.sortDirection = sortDirection;
         if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
             this.goToPage(1);
         }
         this.currentPage = 1;
     }
+    selectedSortChanged() {
+        if (this.selectedSort === 'relevance' || this.sortDirection === null) {
+            this.sortParam = null;
+            return;
+        }
+        const sortField = SortFieldToMetadataField[this.selectedSort];
+        if (!sortField)
+            return;
+        this.sortParam = { field: sortField, direction: this.sortDirection };
+    }
     displayModeChanged(e) {
         this.displayMode = e.detail.displayMode;
     }
-    titleLetterChanged(e) {
-        const letter = e.detail.selectedLetter;
-        if (letter) {
-            this.titleQuery = `firstTitle:${letter}`;
-        }
-        else {
-            this.titleQuery = undefined;
-        }
+    selectedTitleLetterChanged() {
+        this.titleQuery = this.selectedTitleFilter
+            ? `firstTitle:${this.selectedTitleFilter}`
+            : undefined;
     }
-    creatorLetterChanged(e) {
-        const letter = e.detail.selectedLetter;
-        if (letter) {
-            this.creatorQuery = `firstCreator:${letter}`;
-        }
-        else {
-            this.creatorQuery = undefined;
-        }
+    selectedCreatorLetterChanged() {
+        this.creatorQuery = this.selectedCreatorFilter
+            ? `firstCreator:${this.selectedCreatorFilter}`
+            : undefined;
+    }
+    titleLetterSelected(e) {
+        this.selectedCreatorFilter = null;
+        this.selectedTitleFilter = e.detail.selectedLetter;
+    }
+    creatorLetterSelected(e) {
+        this.selectedTitleFilter = null;
+        this.selectedCreatorFilter = e.detail.selectedLetter;
     }
     get facetDataLoading() {
         return this.facetsLoading || this.fullYearAggregationLoading;
     }
+    get facetsTemplate() {
+        return html `
+      ${this.facetsLoading ? this.loadingTemplate : nothing}
+      <collection-facets
+        @facetsChanged=${this.facetsChanged}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .aggregations=${this.aggregations}
+        .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .selectedFacets=${this.selectedFacets}
+        .collectionNameCache=${this.collectionNameCache}
+        .languageCodeHandler=${this.languageCodeHandler}
+        .showHistogramDatePicker=${this.showHistogramDatePicker}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetDataLoading}
+        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+      ></collection-facets>
+    `;
+    }
     get loadingTemplate() {
         return html `
       <div class="loading-cover">
@@ -197,6 +281,19 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       </div>
     `;
     }
+    get listHeaderTemplate() {
+        return html `
+      <div id="list-header">
+        <tile-dispatcher
+          .tileDisplayMode=${'list-header'}
+          .resizeObserver=${this.resizeObserver}
+          .sortParam=${this.sortParam}
+          .mobileBreakpoint=${this.mobileBreakpoint}
+        >
+        </tile-dispatcher>
+      </div>
+    `;
+    }
     get queryDebuggingTemplate() {
         var _a, _b;
         return html `
@@ -216,27 +313,83 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const { minDate, maxDate } = e.detail;
         this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
     }
+    firstUpdated() {
+        this.setupStateRestorationObserver();
+        this.restoreState();
+    }
     updated(changed) {
-        if (changed.has('displayMode') ||
-            changed.has('showDeleteButtons') ||
-            changed.has('baseNavigationUrl')) {
+        if (changed.has('displayMode') || changed.has('baseNavigationUrl')) {
             this.infiniteScroller.reload();
         }
+        if (changed.has('baseQuery')) {
+            this.emitBaseQueryChanged();
+        }
+        if (changed.has('currentPage') || changed.has('displayMode')) {
+            this.persistState();
+        }
         if (changed.has('baseQuery') ||
             changed.has('titleQuery') ||
             changed.has('creatorQuery') ||
             changed.has('dateRangeQueryClause') ||
             changed.has('sortParam') ||
             changed.has('selectedFacets') ||
-            changed.has('hiddenFacets') ||
             changed.has('searchService')) {
             this.handleQueryChange();
         }
+        if (changed.has('selectedSort') || changed.has('sortDirection')) {
+            this.selectedSortChanged();
+        }
+        if (changed.has('selectedTitleFilter')) {
+            this.selectedTitleLetterChanged();
+        }
+        if (changed.has('selectedCreatorFilter')) {
+            this.selectedCreatorLetterChanged();
+        }
         if (changed.has('pagesToRender')) {
             if (!this.endOfDataReached) {
                 this.infiniteScroller.itemCount = this.estimatedTileCount;
             }
         }
+        if (changed.has('resizeObserver')) {
+            const oldObserver = changed.get('resizeObserver');
+            if (oldObserver)
+                this.disconnectResizeObserver(oldObserver);
+            this.setupResizeObserver();
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.disconnectResizeObserver(this.resizeObserver);
+        }
+        if (this.boundNavigationHandler) {
+            window.removeEventListener('popstate', this.boundNavigationHandler);
+        }
+    }
+    handleResize(entry) {
+        if (entry.target === this.contentContainer) {
+            this.mobileView = entry.contentRect.width < 600;
+        }
+    }
+    emitBaseQueryChanged() {
+        this.dispatchEvent(new CustomEvent('baseQueryChanged', {
+            detail: {
+                baseQuery: this.baseQuery,
+            },
+        }));
+    }
+    disconnectResizeObserver(resizeObserver) {
+        resizeObserver.removeObserver({
+            target: this.contentContainer,
+            handler: this,
+        });
+    }
+    setupResizeObserver() {
+        if (!this.resizeObserver)
+            return;
+        this.resizeObserver.addObserver({
+            target: this.contentContainer,
+            handler: this,
+        });
     }
     /**
      * When the visible cells change from the infinite scroller, we want to emit
@@ -253,6 +406,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             return;
         const lastVisibleCellIndex = visibleCellIndices[visibleCellIndices.length - 1];
         const lastVisibleCellPage = Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
+        if (this.currentPage !== lastVisibleCellPage) {
+            this.currentPage = lastVisibleCellPage;
+        }
         const event = new CustomEvent('visiblePageChanged', {
             detail: {
                 pageNumber: lastVisibleCellPage,
@@ -273,12 +429,70 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.scrollToPage(this.initialPageNumber);
         }
         this.initialQueryChangeHappened = true;
+        // if the query changed as part of a window.history pop event, we don't want to
+        // persist the state because it overwrites the forward history
+        if (!this.historyPopOccurred) {
+            this.persistState();
+            this.historyPopOccurred = false;
+        }
         await Promise.all([
             this.doInitialPageFetch(),
             this.fetchFacets(),
             this.fetchFullYearHistogram(),
         ]);
     }
+    setupStateRestorationObserver() {
+        if (this.boundNavigationHandler)
+            return;
+        this.boundNavigationHandler = this.historyNavigationHandler.bind(this);
+        // when the user navigates back, we want to update the UI to match the URL
+        window.addEventListener('popstate', this.boundNavigationHandler);
+    }
+    historyNavigationHandler() {
+        this.historyPopOccurred = true;
+        this.restoreState();
+    }
+    restoreState() {
+        var _a, _b, _c, _d, _e, _f;
+        const restorationState = this.restorationStateHandler.getRestorationState();
+        this.displayMode = restorationState.displayMode;
+        this.selectedSort = (_a = restorationState.selectedSort) !== null && _a !== void 0 ? _a : SortField.relevance;
+        this.sortDirection = (_b = restorationState.sortDirection) !== null && _b !== void 0 ? _b : null;
+        this.selectedTitleFilter = (_c = restorationState.selectedTitleFilter) !== null && _c !== void 0 ? _c : null;
+        this.selectedCreatorFilter = (_d = restorationState.selectedCreatorFilter) !== null && _d !== void 0 ? _d : null;
+        this.selectedFacets = restorationState.selectedFacets;
+        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;
+        this.maxSelectedDate = restorationState.maxSelectedDate;
+        if (this.currentPage > 1) {
+            this.goToPage(this.currentPage);
+        }
+    }
+    persistState() {
+        var _a, _b, _c, _d, _e;
+        const restorationState = {
+            displayMode: this.displayMode,
+            sortParam: (_a = this.sortParam) !== null && _a !== void 0 ? _a : undefined,
+            selectedSort: this.selectedSort,
+            sortDirection: (_b = this.sortDirection) !== null && _b !== void 0 ? _b : undefined,
+            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,
+            maxSelectedDate: this.maxSelectedDate,
+            selectedTitleFilter: (_d = this.selectedTitleFilter) !== null && _d !== void 0 ? _d : undefined,
+            selectedCreatorFilter: (_e = this.selectedCreatorFilter) !== null && _e !== void 0 ? _e : undefined,
+        };
+        this.restorationStateHandler.persistState(restorationState);
+    }
     async doInitialPageFetch() {
         this.searchResultsLoading = true;
         await this.fetchPage(this.initialPageNumber);
@@ -305,50 +519,46 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         return fullQuery;
     }
-    get facetQuery() {
-        const facets = this.getFacetQuery(this.selectedFacets, false);
-        const hiddenFacets = this.getFacetQuery(this.hiddenFacets, true);
-        if (facets && hiddenFacets)
-            return [facets, hiddenFacets].join(' AND ');
-        if (facets)
-            return facets;
-        if (hiddenFacets)
-            return hiddenFacets;
-        return undefined;
-    }
     /**
      * Generates a query string for the given facets
      *
-     * Example: `mediatype:("collection" OR "audio") AND year:("2000" OR "2001")`
-     *
-     * For negative facets, we prefix the field with `-`, ie:
-     * `-mediatype:("collection" OR "audio")`
-     *
-     * @param facets
-     * @param negative
-     * @returns
+     * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
      */
-    getFacetQuery(facets, negative) {
+    get facetQuery() {
+        if (!this.selectedFacets)
+            return undefined;
         const facetQuery = [];
-        for (const [facetName, facetValues] of Object.entries(facets)) {
-            const negation = negative ? '-' : '';
-            const wrappedValues = facetValues.map(value => `"${value}"`);
-            const valueQuery = wrappedValues.join(` OR `);
-            facetQuery.push(`${negation}${facetName}:(${valueQuery})`);
+        for (const [facetName, facetValues] of Object.entries(this.selectedFacets)) {
+            const facetEntries = Object.entries(facetValues);
+            // eslint-disable-next-line no-continue
+            if (facetEntries.length === 0)
+                continue;
+            const facetValuesArray = [];
+            for (const [key, facetState] of facetEntries) {
+                const plusMinusPrefix = facetState === 'hidden' ? '-' : '';
+                if (facetName === 'language') {
+                    const languages = this.languageCodeHandler.getCodeArrayFromCodeString(key);
+                    for (const language of languages) {
+                        facetValuesArray.push(`${plusMinusPrefix}"${language}"`);
+                    }
+                }
+                else {
+                    facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
+                }
+            }
+            const valueQuery = facetValuesArray.join(` OR `);
+            facetQuery.push(`${facetName}:(${valueQuery})`);
         }
         return facetQuery.length > 0 ? `(${facetQuery.join(' AND ')})` : undefined;
     }
     facetsChanged(e) {
         this.selectedFacets = e.detail;
     }
-    hiddenFacetsChanged(e) {
-        this.hiddenFacets = e.detail;
-    }
     async fetchFacets() {
         var _a, _b;
         if (!this.fullQuery)
             return;
-        const aggregations = new AggregateSearchParams({
+        const aggregations = {
             advancedParams: [
                 {
                     field: 'subjectSorter',
@@ -375,13 +585,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                     size: 50,
                 },
             ],
-        });
-        const params = new SearchParams({
+        };
+        const params = {
             query: this.fullQuery,
             fields: ['identifier'],
             aggregations,
             rows: 1,
-        });
+        };
         this.facetsLoading = true;
         const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params));
         this.facetsLoading = false;
@@ -394,8 +604,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * If this doesn't change, we don't need to re-fetch the histogram date range
      */
     get fullQueryNoDateKey() {
-        var _a;
-        return `${this.fullQueryWithoutDate}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.asString}`;
+        var _a, _b;
+        return `${this.fullQueryWithoutDate}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
     }
     /**
      * This method is similar to fetching the facets above,
@@ -411,15 +621,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             fullQueryNoDateKey === this.previousFullQueryNoDate)
             return;
         this.previousFullQueryNoDate = fullQueryNoDateKey;
-        const aggregations = new AggregateSearchParams({
+        const aggregations = {
             simpleParams: ['year'],
-        });
-        const params = new SearchParams({
+        };
+        const params = {
             query: this.fullQueryWithoutDate,
             fields: ['identifier'],
             aggregations,
             rows: 1,
-        });
+        };
         this.fullYearAggregationLoading = true;
         const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params));
         this.fullYearAggregationLoading = false;
@@ -450,11 +660,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * no longer relevant.
      */
     get pageFetchQueryKey() {
-        var _a;
-        return `${this.fullQuery}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.asString}`;
+        var _a, _b;
+        return `${this.fullQuery}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.direction}`;
     }
     async fetchPage(pageNumber) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!this.fullQuery)
             return;
         // if we already have data, don't fetch again
@@ -470,32 +680,33 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         pageFetches.add(pageNumber);
         this.pageFetchesInProgress[pageFetchQueryKey] = pageFetches;
         const sortParams = this.sortParam ? [this.sortParam] : [];
-        console.debug('sortParam', sortParams);
-        const params = new SearchParams({
+        const params = {
             query: this.fullQuery,
             fields: [
+                'addeddate',
+                'avg_rating',
+                'collections_raw',
+                'creator',
+                'date',
+                'description',
+                'downloads',
                 'identifier',
-                'title',
+                'issue',
+                'item_count',
                 'mediatype',
-                'downloads',
-                'avg_rating',
                 'num_favorites',
                 'num_reviews',
-                'item_count',
-                'description',
-                'date',
-                'addeddate',
                 'publicdate',
                 'reviewdate',
-                'creator',
-                'subject',
                 'source',
-                'collections_raw',
+                'subject',
+                'title',
+                'volume',
             ],
             page: pageNumber,
             rows: this.pageSize,
             sort: sortParams,
-        });
+        };
         const results = await ((_b = this.searchService) === null || _b === void 0 ? void 0 : _b.search(params));
         const success = results === null || results === void 0 ? void 0 : results.success;
         if (!success)
@@ -506,11 +717,31 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         // right behind it
         const searchQuery = success.responseHeader.params.qin;
         const searchSort = success.responseHeader.params.sort;
-        const queryChangedSinceFetch = searchQuery !== this.fullQuery || searchSort !== ((_c = this.sortParam) === null || _c === void 0 ? void 0 : _c.asString);
+        let sortChanged = false;
+        if (!searchSort) {
+            // if we went from no sort to sort, the sort has changed
+            if (this.sortParam) {
+                sortChanged = true;
+            }
+        }
+        else {
+            // check if the sort has changed
+            const split = searchSort.split(' ');
+            if (split.length > 1) {
+                const field = searchSort.split(' ')[0];
+                const direction = searchSort.split(' ')[1];
+                if (field !== ((_c = this.sortParam) === null || _c === void 0 ? void 0 : _c.field) ||
+                    direction !== ((_d = this.sortParam) === null || _d === void 0 ? void 0 : _d.direction)) {
+                    sortChanged = true;
+                }
+            }
+        }
+        const queryChangedSinceFetch = searchQuery !== this.fullQuery || sortChanged;
         if (queryChangedSinceFetch)
             return;
         const { docs } = success.response;
         if (docs && docs.length > 0) {
+            this.preloadCollectionNames(docs);
             this.updateDataSource(pageNumber, docs);
         }
         if (docs.length < this.pageSize) {
@@ -518,9 +749,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             // this updates the infinite scroller to show the actual size
             this.infiniteScroller.itemCount = this.actualTileCount;
         }
-        (_d = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _d === void 0 ? void 0 : _d.delete(pageNumber);
+        (_e = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _e === void 0 ? void 0 : _e.delete(pageNumber);
         this.searchResultsLoading = false;
     }
+    preloadCollectionNames(docs) {
+        var _a;
+        const collectionIds = docs.map(doc => { var _a; return (_a = doc.collections_raw) === null || _a === void 0 ? void 0 : _a.values; }).flat();
+        const collectionIdsArray = Array.from(new Set(collectionIds));
+        (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
+    }
     /**
      * This is useful for determining whether we need to reload the scroller.
      *
@@ -549,27 +786,30 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const datasource = { ...this.dataSource };
         const tiles = [];
         docs === null || docs === void 0 ? void 0 : docs.forEach(doc => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
             if (!doc.identifier)
                 return;
             tiles.push({
-                identifier: doc.identifier,
-                title: this.etreeTitle((_a = doc.title) === null || _a === void 0 ? void 0 : _a.value, (_b = doc.mediatype) === null || _b === void 0 ? void 0 : _b.value),
-                mediatype: (_d = (_c = doc.mediatype) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 'data',
-                viewCount: (_f = (_e = doc.downloads) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : 0,
-                favCount: (_h = (_g = doc.num_favorites) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : 0,
-                commentCount: (_k = (_j = doc.num_reviews) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : 0,
-                itemCount: (_m = (_l = doc.item_count) === null || _l === void 0 ? void 0 : _l.value) !== null && _m !== void 0 ? _m : 0,
+                averageRating: (_a = doc.avg_rating) === null || _a === void 0 ? void 0 : _a.value,
+                collections: (_c = (_b = doc.collections_raw) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : [],
+                commentCount: (_e = (_d = doc.num_reviews) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : 0,
+                creator: (_f = doc.creator) === null || _f === void 0 ? void 0 : _f.value,
+                creators: (_h = (_g = doc.creator) === null || _g === void 0 ? void 0 : _g.values) !== null && _h !== void 0 ? _h : [],
+                dateAdded: (_j = doc.addeddate) === null || _j === void 0 ? void 0 : _j.value,
+                dateArchived: (_k = doc.publicdate) === null || _k === void 0 ? void 0 : _k.value,
+                datePublished: (_l = doc.date) === null || _l === void 0 ? void 0 : _l.value,
+                dateReviewed: (_m = doc.reviewdate) === null || _m === void 0 ? void 0 : _m.value,
                 description: (_o = doc.description) === null || _o === void 0 ? void 0 : _o.value,
-                dateAdded: (_p = doc.addeddate) === null || _p === void 0 ? void 0 : _p.value,
-                dateArchived: (_q = doc.publicdate) === null || _q === void 0 ? void 0 : _q.value,
-                dateReviewed: (_r = doc.reviewdate) === null || _r === void 0 ? void 0 : _r.value,
-                datePublished: (_s = doc.date) === null || _s === void 0 ? void 0 : _s.value,
-                creator: (_t = doc.creator) === null || _t === void 0 ? void 0 : _t.value,
-                averageRating: (_u = doc.avg_rating) === null || _u === void 0 ? void 0 : _u.value,
-                subject: (_v = doc.subject) === null || _v === void 0 ? void 0 : _v.value,
+                favCount: (_q = (_p = doc.num_favorites) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 0,
+                identifier: doc.identifier,
+                issue: (_r = doc.issue) === null || _r === void 0 ? void 0 : _r.value,
+                itemCount: (_t = (_s = doc.item_count) === null || _s === void 0 ? void 0 : _s.value) !== null && _t !== void 0 ? _t : 0,
+                mediatype: (_v = (_u = doc.mediatype) === null || _u === void 0 ? void 0 : _u.value) !== null && _v !== void 0 ? _v : 'data',
                 source: (_w = doc.source) === null || _w === void 0 ? void 0 : _w.value,
-                collections: (_y = (_x = doc.collections_raw) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [],
+                subjects: (_y = (_x = doc.subject) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [],
+                title: this.etreeTitle((_z = doc.title) === null || _z === void 0 ? void 0 : _z.value, (_0 = doc.mediatype) === null || _0 === void 0 ? void 0 : _0.value, (_1 = doc.collection) === null || _1 === void 0 ? void 0 : _1.values),
+                volume: (_2 = doc.volume) === null || _2 === void 0 ? void 0 : _2.value,
+                viewCount: (_4 = (_3 = doc.downloads) === null || _3 === void 0 ? void 0 : _3.value) !== null && _4 !== void 0 ? _4 : 0,
             });
         });
         datasource[pageNumber] = tiles;
@@ -587,9 +827,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Todo: Check collection(s) for etree, need to get as array.
      * Current search-service only returns first collection as string.
      */
-    etreeTitle(title, mediatype) {
-        if (mediatype === 'etree') {
-            // || collections.includes('etree')) {
+    etreeTitle(title, mediatype, collections) {
+        if (mediatype === 'etree' || (collections === null || collections === void 0 ? void 0 : collections.includes('etree'))) {
             const regex = /^(.*) Live at (.*) on (\d\d\d\d-\d\d-\d\d)$/;
             const newTitle = title === null || title === void 0 ? void 0 : title.replace(regex, '$3: $2');
             if (newTitle) {
@@ -605,10 +844,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         return html ` <tile-dispatcher
       .baseNavigationUrl=${this.baseNavigationUrl}
       .model=${model}
-      .displayMode=${this.displayMode}
+      .tileDisplayMode=${this.displayMode}
       .resizeObserver=${this.resizeObserver}
+      .collectionNameCache=${this.collectionNameCache}
       .sortParam=${this.sortParam}
-      ?showDeleteButton=${this.showDeleteButtons}
+      .mobileBreakpoint=${this.mobileBreakpoint}
     ></tile-dispatcher>`;
     }
     /**
@@ -629,23 +869,73 @@ CollectionBrowser.styles = css `
       display: flex;
     }
 
+    .collapser {
+      display: inline-block;
+    }
+
+    .collapser svg {
+      width: 10px;
+      height: 10px;
+      transition: transform 0.2s ease-out;
+    }
+
+    .collapser.open svg {
+      transform: rotate(90deg);
+    }
+
+    #mobile-filter-collapse h1 {
+      cursor: pointer;
+    }
+
+    #content-container.mobile {
+      display: block;
+    }
+
+    .column {
+      padding-top: 2rem;
+    }
+
     #right-column {
       flex: 1;
       position: relative;
       border-left: 1px solid rgb(232, 232, 232);
+      padding-left: 1rem;
+    }
+
+    .mobile #right-column {
+      border-left: none;
+      padding: 0;
     }
 
     #left-column {
       width: 18rem;
       padding-right: 12px;
+      padding-right: 1rem;
     }
 
-    .column {
-      padding-top: 2rem;
+    .mobile #left-column {
+      width: 100%;
+      padding: 0;
+    }
+
+    #mobile-header-container {
+      display: flex;
+      justify-content: space-between;
     }
 
     #facets-container {
       position: relative;
+      max-height: 0;
+      transition: max-height 0.2s ease-in-out;
+      z-index: 1;
+    }
+
+    .mobile #facets-container {
+      overflow: hidden;
+    }
+
+    #facets-container.expanded {
+      max-height: 2000px;
     }
 
     #results-total {
@@ -654,6 +944,10 @@ CollectionBrowser.styles = css `
       margin-bottom: 5rem;
     }
 
+    .mobile #results-total {
+      margin-bottom: 0;
+    }
+
     #big-results-count {
       font-size: 2.4rem;
       font-weight: 500;
@@ -666,6 +960,10 @@ CollectionBrowser.styles = css `
       text-transform: uppercase;
     }
 
+    #list-header {
+      max-height: 4.2rem;
+    }
+
     .loading-cover {
       position: absolute;
       top: 0;
@@ -683,6 +981,11 @@ CollectionBrowser.styles = css `
       height: 30px;
     }
 
+    sort-filter-bar {
+      display: block;
+      margin-bottom: 4rem;
+    }
+
     infinite-scroller {
       display: block;
       --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
@@ -694,14 +997,9 @@ CollectionBrowser.styles = css `
         --collectionBrowserCellMinWidth,
         100%
       );
-      --infiniteScrollerCellMinHeight: var(
-        --collectionBrowserCellMinHeight,
-        2rem
-      );
-      --infiniteScrollerCellMaxHeight: var(
-        --collectionBrowserCellMaxHeight,
-        2rem
-      );
+      --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+      --infiniteScrollerCellMaxHeight: 56px;
+      --infiniteScrollerRowGap: 0px;
     }
 
     infinite-scroller.list-detail {
@@ -713,6 +1011,16 @@ CollectionBrowser.styles = css `
         --collectionBrowserCellMinHeight,
         5rem
       );
+      /*
+        30px in spec, compensating for a -4px margin
+        to align title with top of item image
+        src/tiles/list/tile-list.ts
+       */
+      --infiniteScrollerRowGap: 34px;
+    }
+
+    .mobile infinite-scroller.list-detail {
+      --infiniteScrollerRowGap: 24px;
     }
 
     infinite-scroller.grid {
@@ -740,15 +1048,24 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "baseQuery", void 0);
-__decorate([
-    property({ type: Boolean })
-], CollectionBrowser.prototype, "showDeleteButtons", void 0);
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "displayMode", void 0);
 __decorate([
     property({ type: Object })
 ], CollectionBrowser.prototype, "sortParam", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "selectedSort", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "selectedTitleFilter", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "selectedCreatorFilter", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "sortDirection", void 0);
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "dateRangeQueryClause", void 0);
@@ -759,23 +1076,44 @@ __decorate([
     property({ type: Object })
 ], CollectionBrowser.prototype, "resizeObserver", void 0);
 __decorate([
-    query('collection-facets')
-], CollectionBrowser.prototype, "collectionFacets", void 0);
+    property({ type: String })
+], CollectionBrowser.prototype, "titleQuery", void 0);
 __decorate([
-    query('sort-filter-bar')
-], CollectionBrowser.prototype, "sortFilterBar", void 0);
+    property({ type: String })
+], CollectionBrowser.prototype, "creatorQuery", void 0);
 __decorate([
-    state()
-], CollectionBrowser.prototype, "pagesToRender", void 0);
+    property({ type: Number })
+], CollectionBrowser.prototype, "currentPage", void 0);
 __decorate([
-    state()
-], CollectionBrowser.prototype, "searchResultsLoading", void 0);
+    property({ type: String })
+], CollectionBrowser.prototype, "minSelectedDate", void 0);
 __decorate([
-    state()
+    property({ type: String })
+], CollectionBrowser.prototype, "maxSelectedDate", void 0);
+__decorate([
+    property({ type: Object })
 ], CollectionBrowser.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionBrowser.prototype, "showHistogramDatePicker", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "collectionNameCache", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "pageContext", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "restorationStateHandler", void 0);
+__decorate([
+    property({ type: Number })
+], CollectionBrowser.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "pagesToRender", void 0);
 __decorate([
     state()
-], CollectionBrowser.prototype, "hiddenFacets", void 0);
+], CollectionBrowser.prototype, "searchResultsLoading", void 0);
 __decorate([
     state()
 ], CollectionBrowser.prototype, "facetsLoading", void 0);
@@ -793,13 +1131,13 @@ __decorate([
 ], CollectionBrowser.prototype, "totalResults", void 0);
 __decorate([
     state()
-], CollectionBrowser.prototype, "titleQuery", void 0);
+], CollectionBrowser.prototype, "mobileView", void 0);
 __decorate([
     state()
-], CollectionBrowser.prototype, "creatorQuery", void 0);
+], CollectionBrowser.prototype, "mobileFacetsVisible", void 0);
 __decorate([
-    state()
-], CollectionBrowser.prototype, "currentPage", void 0);
+    query('#content-container')
+], CollectionBrowser.prototype, "contentContainer", void 0);
 __decorate([
     query('infinite-scroller')
 ], CollectionBrowser.prototype, "infiniteScroller", void 0);