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

package/src/collection-browser.ts

@@ -8,36 +8,54 @@ import {
   nothing,
 } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import type {
   InfiniteScroller,
   InfiniteScrollerCellProviderInterface,
 } from '@internetarchive/infinite-scroller';
-import {
+import type {
   Aggregation,
   Metadata,
   SearchParams,
   SearchServiceInterface,
+  SortDirection,
+  SortParam,
 } from '@internetarchive/search-service';
 import {
-  AggregateSearchParams,
-  SortParam,
-} from '@internetarchive/search-service/dist/src/search-params';
-import { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
-import type { TileModel, CollectionDisplayMode } from './models';
+  SharedResizeObserverInterface,
+  SharedResizeObserverResizeHandlerInterface,
+} from '@internetarchive/shared-resize-observer';
 import '@internetarchive/infinite-scroller';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 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 { CollectionFacets } from './collection-facets';
 import './circular-activity-indicator';
 import './sort-filter-bar/sort-filter-bar';
-import { SortFilterBar } from './sort-filter-bar/sort-filter-bar';
+import {
+  SelectedFacets,
+  SortField,
+  SortFieldToMetadataField,
+  CollectionBrowserContext,
+  defaultSelectedFacets,
+  TileModel,
+  CollectionDisplayMode,
+} from './models';
+import {
+  RestorationStateHandlerInterface,
+  RestorationStateHandler,
+  RestorationState,
+} from './restoration-state-handler';
+import chevronIcon from './assets/img/icons/chevron';
+import { LanguageCodeHandler } from './language-code-handler/language-code-handler';
 
 @customElement('collection-browser')
 export class CollectionBrowser
   extends LitElement
-  implements InfiniteScrollerCellProviderInterface
+  implements
+    InfiniteScrollerCellProviderInterface,
+    SharedResizeObserverResizeHandlerInterface
 {
   @property({ type: String }) baseNavigationUrl?: string;
 
@@ -45,21 +63,51 @@ export class CollectionBrowser
 
   @property({ type: String }) baseQuery?: string;
 
-  @property({ type: Boolean }) showDeleteButtons = false;
-
-  @property({ type: String }) displayMode: CollectionDisplayMode = 'grid';
+  @property({ type: String }) displayMode?: CollectionDisplayMode;
 
   @property({ type: Object }) sortParam: SortParam | null = null;
 
+  @property({ type: String }) selectedSort: SortField = SortField.relevance;
+
+  @property({ type: String }) selectedTitleFilter: string | null = null;
+
+  @property({ type: String }) selectedCreatorFilter: string | null = null;
+
+  @property({ type: String }) sortDirection: SortDirection | null = null;
+
   @property({ type: String }) dateRangeQueryClause?: string;
 
   @property({ type: Number }) pageSize = 50;
 
   @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
 
-  @query('collection-facets') private collectionFacets!: CollectionFacets;
+  @property({ type: String }) titleQuery?: string;
+
+  @property({ type: String }) creatorQuery?: string;
+
+  @property({ type: Number }) currentPage?: number;
 
-  @query('sort-filter-bar') private sortFilterBar!: SortFilterBar;
+  @property({ type: String }) minSelectedDate?: string;
+
+  @property({ type: String }) maxSelectedDate?: string;
+
+  @property({ type: Object }) selectedFacets?: SelectedFacets;
+
+  @property({ type: Boolean }) showHistogramDatePicker = false;
+
+  @property({ type: Object })
+  collectionNameCache?: CollectionNameCacheInterface;
+
+  @property({ type: String }) pageContext: CollectionBrowserContext = 'search';
+
+  @property({ type: Object })
+  restorationStateHandler: RestorationStateHandlerInterface = new RestorationStateHandler(
+    {
+      context: this.pageContext,
+    }
+  );
+
+  @property({ type: Number }) mobileBreakpoint = 600;
 
   /**
    * The page that the consumer wants to load.
@@ -76,10 +124,6 @@ export class CollectionBrowser
 
   @state() private searchResultsLoading = false;
 
-  @state() private selectedFacets: Record<string, string[]> = {};
-
-  @state() private hiddenFacets: Record<string, string[]> = {};
-
   @state() private facetsLoading = false;
 
   @state() private fullYearAggregationLoading = false;
@@ -90,11 +134,13 @@ export class CollectionBrowser
 
   @state() private totalResults?: number;
 
-  @state() private titleQuery?: string;
+  @state() private mobileView = false;
+
+  @state() private mobileFacetsVisible = false;
 
-  @state() private creatorQuery?: string;
+  @query('#content-container') private contentContainer!: HTMLDivElement;
 
-  @state() private currentPage?: number;
+  private languageCodeHandler = new LanguageCodeHandler();
 
   /**
    * When we're animated scrolling to the page, we don't want to fetch
@@ -107,7 +153,7 @@ export class CollectionBrowser
    */
   private endOfDataReached = false;
 
-  private placeholderCellTemplate = html`<loading-tile></loading-tile>`;
+  private placeholderCellTemplate = html`<collection-browser-loading-tile></collection-browser-loading-tile>`;
 
   private tileModelAtCellIndex(index: number): TileModel | undefined {
     const pageNumber = Math.floor(index / this.pageSize) + 1;
@@ -162,9 +208,9 @@ export class CollectionBrowser
   private infiniteScroller!: InfiniteScroller;
 
   /**
+   * Go to the given page of results
    *
    * @param pageNumber
-   * @param scroll
    */
   goToPage(pageNumber: number) {
     this.initialPageNumber = pageNumber;
@@ -172,45 +218,92 @@ export class CollectionBrowser
     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
-                ? this.totalResults.toLocaleString()
-                : '-'}</span
-            >
-            <span id="big-results-label">Results</span>
+          <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>
+            </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}
@@ -222,19 +315,15 @@ export class CollectionBrowser
     `;
   }
 
-  private sortChanged(
+  private userChangedSort(
     e: CustomEvent<{
-      sortField: string | null;
-      sortDirection: 'asc' | 'desc' | null;
+      selectedSort: SortField;
+      sortDirection: SortDirection | null;
     }>
   ) {
-    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 ((this.currentPage ?? 1) > 1) {
       this.goToPage(1);
@@ -242,34 +331,69 @@ export class CollectionBrowser
     this.currentPage = 1;
   }
 
+  private 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 };
+  }
+
   private displayModeChanged(
     e: CustomEvent<{ displayMode: CollectionDisplayMode }>
   ) {
     this.displayMode = e.detail.displayMode;
   }
 
-  private titleLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {
-    const letter = e.detail.selectedLetter;
-    if (letter) {
-      this.titleQuery = `firstTitle:${letter}`;
-    } else {
-      this.titleQuery = undefined;
-    }
+  private selectedTitleLetterChanged() {
+    this.titleQuery = this.selectedTitleFilter
+      ? `firstTitle:${this.selectedTitleFilter}`
+      : undefined;
   }
 
-  private creatorLetterChanged(e: CustomEvent<{ selectedLetter: string }>) {
-    const letter = e.detail.selectedLetter;
-    if (letter) {
-      this.creatorQuery = `firstCreator:${letter}`;
-    } else {
-      this.creatorQuery = undefined;
-    }
+  private selectedCreatorLetterChanged() {
+    this.creatorQuery = this.selectedCreatorFilter
+      ? `firstCreator:${this.selectedCreatorFilter}`
+      : undefined;
+  }
+
+  private titleLetterSelected(e: CustomEvent<{ selectedLetter: string }>) {
+    this.selectedCreatorFilter = null;
+    this.selectedTitleFilter = e.detail.selectedLetter;
+  }
+
+  private creatorLetterSelected(e: CustomEvent<{ selectedLetter: string }>) {
+    this.selectedTitleFilter = null;
+    this.selectedCreatorFilter = e.detail.selectedLetter;
   }
 
   private get facetDataLoading(): boolean {
     return this.facetsLoading || this.fullYearAggregationLoading;
   }
 
+  private 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>
+    `;
+  }
+
   private get loadingTemplate() {
     return html`
       <div class="loading-cover">
@@ -278,6 +402,20 @@ export class CollectionBrowser
     `;
   }
 
+  private 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>
+    `;
+  }
+
   private get queryDebuggingTemplate() {
     return html`
       <div>
@@ -303,14 +441,21 @@ export class CollectionBrowser
     this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
   }
 
+  firstUpdated(): void {
+    this.setupStateRestorationObserver();
+    this.restoreState();
+  }
+
   updated(changed: PropertyValues) {
-    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') ||
@@ -318,16 +463,73 @@ export class CollectionBrowser
       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'
+      ) as SharedResizeObserverInterface;
+      if (oldObserver) this.disconnectResizeObserver(oldObserver);
+      this.setupResizeObserver();
+    }
+  }
+
+  disconnectedCallback(): void {
+    if (this.resizeObserver) {
+      this.disconnectResizeObserver(this.resizeObserver);
+    }
+    if (this.boundNavigationHandler) {
+      window.removeEventListener('popstate', this.boundNavigationHandler);
+    }
+  }
+
+  handleResize(entry: ResizeObserverEntry): void {
+    if (entry.target === this.contentContainer) {
+      this.mobileView = entry.contentRect.width < 600;
+    }
+  }
+
+  private emitBaseQueryChanged() {
+    this.dispatchEvent(
+      new CustomEvent<{ baseQuery?: string }>('baseQueryChanged', {
+        detail: {
+          baseQuery: this.baseQuery,
+        },
+      })
+    );
+  }
+
+  private disconnectResizeObserver(
+    resizeObserver: SharedResizeObserverInterface
+  ) {
+    resizeObserver.removeObserver({
+      target: this.contentContainer,
+      handler: this,
+    });
+  }
+
+  private setupResizeObserver() {
+    if (!this.resizeObserver) return;
+    this.resizeObserver.addObserver({
+      target: this.contentContainer,
+      handler: this,
+    });
   }
 
   /**
@@ -347,6 +549,9 @@ export class CollectionBrowser
       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,
@@ -359,6 +564,8 @@ export class CollectionBrowser
   // so this keeps track of whether we've already set the initial query
   private initialQueryChangeHappened = false;
 
+  private historyPopOccurred = false;
+
   // this lets us store the query key so we know if it's actually changed or not
   private previousQueryKey?: string;
 
@@ -376,6 +583,12 @@ export class CollectionBrowser
       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(),
@@ -384,6 +597,61 @@ export class CollectionBrowser
     ]);
   }
 
+  private 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);
+  }
+
+  private boundNavigationHandler?: () => void;
+
+  private historyNavigationHandler() {
+    this.historyPopOccurred = true;
+    this.restoreState();
+  }
+
+  private restoreState() {
+    const restorationState = this.restorationStateHandler.getRestorationState();
+    this.displayMode = restorationState.displayMode;
+    this.selectedSort = restorationState.selectedSort ?? SortField.relevance;
+    this.sortDirection = restorationState.sortDirection ?? null;
+    this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
+    this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
+    this.selectedFacets = restorationState.selectedFacets;
+    this.baseQuery = restorationState.baseQuery;
+    this.titleQuery = restorationState.titleQuery;
+    this.creatorQuery = restorationState.creatorQuery;
+    this.dateRangeQueryClause = restorationState.dateRangeQueryClause;
+    this.sortParam = restorationState.sortParam ?? null;
+    this.currentPage = restorationState.currentPage ?? 1;
+    this.minSelectedDate = restorationState.minSelectedDate;
+    this.maxSelectedDate = restorationState.maxSelectedDate;
+    if (this.currentPage > 1) {
+      this.goToPage(this.currentPage);
+    }
+  }
+
+  private persistState() {
+    const restorationState: RestorationState = {
+      displayMode: this.displayMode,
+      sortParam: this.sortParam ?? undefined,
+      selectedSort: this.selectedSort,
+      sortDirection: this.sortDirection ?? undefined,
+      selectedFacets: this.selectedFacets ?? defaultSelectedFacets,
+      baseQuery: this.baseQuery,
+      currentPage: this.currentPage,
+      dateRangeQueryClause: this.dateRangeQueryClause,
+      titleQuery: this.titleQuery,
+      creatorQuery: this.creatorQuery,
+      minSelectedDate: this.minSelectedDate,
+      maxSelectedDate: this.maxSelectedDate,
+      selectedTitleFilter: this.selectedTitleFilter ?? undefined,
+      selectedCreatorFilter: this.selectedCreatorFilter ?? undefined,
+    };
+    this.restorationStateHandler.persistState(restorationState);
+  }
+
   private async doInitialPageFetch() {
     this.searchResultsLoading = true;
     await this.fetchPage(this.initialPageNumber);
@@ -412,54 +680,48 @@ export class CollectionBrowser
     return fullQuery;
   }
 
-  private get facetQuery(): string | undefined {
-    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")`
    */
-  private getFacetQuery(
-    facets: Record<string, string[]>,
-    negative: boolean
-  ): string | undefined {
+  private get facetQuery(): string | undefined {
+    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: string[] = [];
+      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: CustomEvent<Record<string, string[]>>) {
+  facetsChanged(e: CustomEvent<SelectedFacets>) {
     this.selectedFacets = e.detail;
   }
 
-  hiddenFacetsChanged(e: CustomEvent<Record<string, string[]>>) {
-    this.hiddenFacets = e.detail;
-  }
-
   private async fetchFacets() {
     if (!this.fullQuery) return;
 
-    const aggregations = new AggregateSearchParams({
+    const aggregations = {
       advancedParams: [
         {
           field: 'subjectSorter',
@@ -486,14 +748,14 @@ export class CollectionBrowser
           size: 50,
         },
       ],
-    });
+    };
 
-    const params = new SearchParams({
+    const params: SearchParams = {
       query: this.fullQuery,
       fields: ['identifier'],
       aggregations,
       rows: 1,
-    });
+    };
     this.facetsLoading = true;
     const results = await this.searchService?.search(params);
     this.facetsLoading = false;
@@ -517,7 +779,7 @@ export class CollectionBrowser
    * If this doesn't change, we don't need to re-fetch the histogram date range
    */
   private get fullQueryNoDateKey() {
-    return `${this.fullQueryWithoutDate}-${this.sortParam?.asString}`;
+    return `${this.fullQueryWithoutDate}-${this.sortParam?.field}-${this.sortParam?.direction}`;
   }
 
   /**
@@ -536,16 +798,16 @@ export class CollectionBrowser
       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 this.searchService?.search(params);
@@ -580,7 +842,7 @@ export class CollectionBrowser
    * no longer relevant.
    */
   private get pageFetchQueryKey() {
-    return `${this.fullQuery}-${this.sortParam?.asString}`;
+    return `${this.fullQuery}-${this.sortParam?.field}-${this.sortParam?.direction}`;
   }
 
   // this maps the query to the pages being fetched for that query
@@ -603,32 +865,33 @@ export class CollectionBrowser
     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', // topic
         'source',
-        'collections_raw',
+        'subject', // topic
+        'title',
+        'volume',
       ],
       page: pageNumber,
       rows: this.pageSize,
       sort: sortParams,
-    });
+    };
     const results = await this.searchService?.search(params);
     const success = results?.success;
 
@@ -641,12 +904,33 @@ export class CollectionBrowser
     // right behind it
     const searchQuery = success.responseHeader.params.qin;
     const searchSort = success.responseHeader.params.sort;
+    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 !== this.sortParam?.field ||
+          direction !== this.sortParam?.direction
+        ) {
+          sortChanged = true;
+        }
+      }
+    }
     const queryChangedSinceFetch =
-      searchQuery !== this.fullQuery || searchSort !== this.sortParam?.asString;
+      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) {
@@ -658,6 +942,12 @@ export class CollectionBrowser
     this.searchResultsLoading = false;
   }
 
+  private preloadCollectionNames(docs: Metadata[]) {
+    const collectionIds = docs.map(doc => doc.collections_raw?.values).flat();
+    const collectionIdsArray = Array.from(new Set(collectionIds)) as string[];
+    this.collectionNameCache?.preloadIdentifiers(collectionIdsArray);
+  }
+
   /**
    * This is useful for determining whether we need to reload the scroller.
    *
@@ -689,23 +979,30 @@ export class CollectionBrowser
     docs?.forEach(doc => {
       if (!doc.identifier) return;
       tiles.push({
-        identifier: doc.identifier,
-        title: this.etreeTitle(doc.title?.value, doc.mediatype?.value),
-        mediatype: doc.mediatype?.value ?? 'data',
-        viewCount: doc.downloads?.value ?? 0,
-        favCount: doc.num_favorites?.value ?? 0,
+        averageRating: doc.avg_rating?.value,
+        collections: doc.collections_raw?.values ?? [],
         commentCount: doc.num_reviews?.value ?? 0,
-        itemCount: doc.item_count?.value ?? 0,
-        description: doc.description?.value,
+        creator: doc.creator?.value,
+        creators: doc.creator?.values ?? [],
         dateAdded: doc.addeddate?.value,
         dateArchived: doc.publicdate?.value,
-        dateReviewed: doc.reviewdate?.value,
         datePublished: doc.date?.value,
-        creator: doc.creator?.value,
-        averageRating: doc.avg_rating?.value,
-        subject: doc.subject?.value,
+        dateReviewed: doc.reviewdate?.value,
+        description: doc.description?.value,
+        favCount: doc.num_favorites?.value ?? 0,
+        identifier: doc.identifier,
+        issue: doc.issue?.value,
+        itemCount: doc.item_count?.value ?? 0,
+        mediatype: doc.mediatype?.value ?? 'data',
         source: doc.source?.value,
-        collections: doc.collections_raw?.values ?? [],
+        subjects: doc.subject?.values ?? [],
+        title: this.etreeTitle(
+          doc.title?.value,
+          doc.mediatype?.value,
+          doc.collection?.values
+        ),
+        volume: doc.volume?.value,
+        viewCount: doc.downloads?.value ?? 0,
       });
     });
     datasource[pageNumber] = tiles;
@@ -726,10 +1023,10 @@ export class CollectionBrowser
    */
   private etreeTitle(
     title: string | undefined,
-    mediatype: string | undefined
+    mediatype: string | undefined,
+    collections: string[] | undefined
   ): string {
-    if (mediatype === 'etree') {
-      // || collections.includes('etree')) {
+    if (mediatype === 'etree' || collections?.includes('etree')) {
       const regex = /^(.*) Live at (.*) on (\d\d\d\d-\d\d-\d\d)$/;
       const newTitle = title?.replace(regex, '$3: $2');
       if (newTitle) {
@@ -746,10 +1043,11 @@ export class CollectionBrowser
     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>`;
   }
 
@@ -771,23 +1069,73 @@ export class CollectionBrowser
       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 {
@@ -796,6 +1144,10 @@ export class CollectionBrowser
       margin-bottom: 5rem;
     }
 
+    .mobile #results-total {
+      margin-bottom: 0;
+    }
+
     #big-results-count {
       font-size: 2.4rem;
       font-weight: 500;
@@ -808,6 +1160,10 @@ export class CollectionBrowser
       text-transform: uppercase;
     }
 
+    #list-header {
+      max-height: 4.2rem;
+    }
+
     .loading-cover {
       position: absolute;
       top: 0;
@@ -825,6 +1181,11 @@ export class CollectionBrowser
       height: 30px;
     }
 
+    sort-filter-bar {
+      display: block;
+      margin-bottom: 4rem;
+    }
+
     infinite-scroller {
       display: block;
       --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
@@ -836,14 +1197,9 @@ export class CollectionBrowser
         --collectionBrowserCellMinWidth,
         100%
       );
-      --infiniteScrollerCellMinHeight: var(
-        --collectionBrowserCellMinHeight,
-        2rem
-      );
-      --infiniteScrollerCellMaxHeight: var(
-        --collectionBrowserCellMaxHeight,
-        2rem
-      );
+      --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+      --infiniteScrollerCellMaxHeight: 56px;
+      --infiniteScrollerRowGap: 0px;
     }
 
     infinite-scroller.list-detail {
@@ -855,6 +1211,16 @@ export class CollectionBrowser
         --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 {