@internetarchive/collection-browser 0.0.1-alpha.2 → 0.0.1-alpha.22

package/src/collection-browser.ts

@@ -8,6 +8,7 @@ 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,
@@ -17,26 +18,46 @@ import {
   Metadata,
   SearchParams,
   SearchServiceInterface,
+  SortDirection,
 } 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';
+} from '@internetarchive/search-service';
+import {
+  SharedResizeObserverInterface,
+  SharedResizeObserverResizeHandlerInterface,
+} from '@internetarchive/shared-resize-observer';
 import '@internetarchive/infinite-scroller';
-import '@internetarchive/histogram-date-range';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import './tiles/tile-dispatcher';
 import './tiles/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 {
+  SelectedFacets,
+  SortField,
+  SortFieldToMetadataField,
+  CollectionBrowserContext,
+  defaultSelectedFacets,
+  TileModel,
+  CollectionDisplayMode,
+} from './models';
+import {
+  RestorationStateHandlerInterface,
+  RestorationStateHandler,
+  RestorationState,
+} from './restoration-state-handler';
+import chevronIcon from './assets/img/icons/chevron';
 
 @customElement('collection-browser')
 export class CollectionBrowser
   extends LitElement
-  implements InfiniteScrollerCellProviderInterface
+  implements
+    InfiniteScrollerCellProviderInterface,
+    SharedResizeObserverResizeHandlerInterface
 {
   @property({ type: String }) baseNavigationUrl?: string;
 
@@ -46,11 +67,17 @@ export class CollectionBrowser
 
   @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: Object }) sortParam?: SortParam;
+  @property({ type: String }) selectedTitleFilter: string | null = null;
 
-  @property({ type: String }) additionalQueryClause?: string;
+  @property({ type: String }) selectedCreatorFilter: string | null = null;
+
+  @property({ type: String }) sortDirection: SortDirection | null = null;
 
   @property({ type: String }) dateRangeQueryClause?: string;
 
@@ -58,7 +85,31 @@ export class CollectionBrowser
 
   @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
 
-  @query('collection-facets') collectionFacets!: CollectionFacets;
+  @property({ type: String }) titleQuery?: string;
+
+  @property({ type: String }) creatorQuery?: string;
+
+  @property({ type: Number }) currentPage?: number;
+
+  @property({ type: String }) minSelectedDate?: string;
+
+  @property({ type: String }) maxSelectedDate?: string;
+
+  @property({ type: Object }) selectedFacets?: SelectedFacets;
+
+  @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 = 530;
 
   /**
    * The page that the consumer wants to load.
@@ -75,8 +126,6 @@ export class CollectionBrowser
 
   @state() private searchResultsLoading = false;
 
-  @state() private selectedFacets: Record<string, string[]> = {};
-
   @state() private facetsLoading = false;
 
   @state() private fullYearAggregationLoading = false;
@@ -85,6 +134,14 @@ export class CollectionBrowser
 
   @state() private fullYearsHistogramAggregation: Aggregation | undefined;
 
+  @state() private totalResults?: number;
+
+  @state() private mobileView = false;
+
+  @state() private mobileFacetsVisible = false;
+
+  @query('#content-container') private contentContainer!: HTMLDivElement;
+
   /**
    * 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
@@ -116,6 +173,11 @@ export class CollectionBrowser
     return model;
   }
 
+  private get sortFilterQueries(): string {
+    const queries = [this.titleQuery, this.creatorQuery];
+    return queries.filter(q => q).join(' AND ');
+  }
+
   // this is the total number of tiles we expect if
   // the data returned is a full page worth
   // this is useful for putting in placeholders for the expected number of tiles
@@ -146,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;
@@ -158,34 +220,71 @@ export class CollectionBrowser
 
   render() {
     return html`
-      <h1>Collection Browser</h1>
-
-      <div id="query">
-        <ul>
-          <li>Base Query: ${this.baseQuery}</li>
-          <li>Facet Query: ${this.facetQuery}</li>
-          <li>Additional Query: ${this.additionalQueryClause}</li>
-          <li>Date Range Query: ${this.dateRangeQueryClause}</li>
-          <li>Sort: ${this.sortParam?.field} ${this.sortParam?.direction}</li>
-          <li>Full Query: ${this.fullQuery}</li>
-        </ul>
-      </div>
-
-      <div id="content-container">
-        <div id="left-column">
-          <div id="histogram-container">${this.histogramTemplate}</div>
-          <div id="facets-container">
-            ${this.facetsLoading ? this.loadingTemplate : nothing}
-            <collection-facets
-              @facetsChanged=${this.facetsChanged}
-              .aggregations=${this.aggregations}
-            ></collection-facets>
+      <div id="content-container" class=${this.mobileView ? 'mobile' : ''}>
+        <div id="left-column" class="column">
+          <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
+                  ? this.totalResults.toLocaleString()
+                  : '-'}</span
+              >
+              <span id="big-results-label">Results</span>
+            </div>
+          </div>
+          <div
+            id="facets-container"
+            class=${!this.mobileView || this.mobileFacetsVisible
+              ? 'expanded'
+              : ''}
+          >
+            ${this.facetsTemplate}
           </div>
         </div>
-        <div id="right-column">
+        <div id="right-column" class="column">
           ${this.searchResultsLoading ? this.loadingTemplate : nothing}
+          <sort-filter-bar
+            .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.titleLetterSelected}
+            @creatorLetterChanged=${this.creatorLetterSelected}
+          ></sort-filter-bar>
+
+          ${this.displayMode === `list-compact`
+            ? this.listHeaderTemplate
+            : nothing}
+
           <infinite-scroller
-            class="${this.displayMode}"
+            class="${ifDefined(this.displayMode)}"
             .cellProvider=${this}
             .placeholderCellTemplate=${this.placeholderCellTemplate}
             @scrollThresholdReached=${this.scrollThresholdReached}
@@ -197,6 +296,81 @@ export class CollectionBrowser
     `;
   }
 
+  private userChangedSort(
+    e: CustomEvent<{
+      selectedSort: SortField;
+      sortDirection: SortDirection | null;
+    }>
+  ) {
+    const { selectedSort, sortDirection } = e.detail;
+    this.selectedSort = selectedSort;
+    this.sortDirection = sortDirection;
+
+    if ((this.currentPage ?? 1) > 1) {
+      this.goToPage(1);
+    }
+    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 = new SortParam(sortField, this.sortDirection);
+  }
+
+  private displayModeChanged(
+    e: CustomEvent<{ displayMode: CollectionDisplayMode }>
+  ) {
+    this.displayMode = e.detail.displayMode;
+  }
+
+  private selectedTitleLetterChanged() {
+    this.titleQuery = this.selectedTitleFilter
+      ? `firstTitle:${this.selectedTitleFilter}`
+      : undefined;
+  }
+
+  private selectedCreatorLetterChanged() {
+    this.creatorQuery = this.selectedCreatorFilter
+      ? `firstCreator:${this.selectedCreatorFilter}`
+      : undefined;
+  }
+
+  private titleLetterSelected(e: CustomEvent<{ selectedLetter: string }>) {
+    this.selectedTitleFilter = e.detail.selectedLetter;
+  }
+
+  private creatorLetterSelected(e: CustomEvent<{ selectedLetter: string }>) {
+    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}
+        ?collapsableFacets=${this.mobileView}
+        ?facetsLoading=${this.facetDataLoading}
+        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+      ></collection-facets>
+    `;
+  }
+
   private get loadingTemplate() {
     return html`
       <div class="loading-cover">
@@ -205,30 +379,31 @@ export class CollectionBrowser
     `;
   }
 
-  private get currentYearsHistogramAggregation(): Aggregation | undefined {
-    return this.aggregations?.year_histogram;
-  }
-
-  private get histogramDataLoading(): boolean {
-    return this.facetsLoading || this.fullYearAggregationLoading;
+  private get listHeaderTemplate() {
+    return html`
+      <div id="list-header">
+        <tile-dispatcher
+          .displayMode=${'list-header'}
+          .resizeObserver=${this.resizeObserver}
+          .sortParam=${this.sortParam}
+        >
+        </tile-dispatcher>
+      </div>
+    `;
   }
 
-  private get histogramTemplate() {
-    const { currentYearsHistogramAggregation, fullYearsHistogramAggregation } =
-      this;
+  private get queryDebuggingTemplate() {
     return html`
-      <histogram-date-range
-        .minDate=${fullYearsHistogramAggregation?.first_bucket_key}
-        .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}
-        .minSelectedDate=${currentYearsHistogramAggregation?.first_bucket_key}
-        .maxSelectedDate=${currentYearsHistogramAggregation?.last_bucket_key}
-        .updateDelay=${100}
-        missingDataMessage="..."
-        ?loading=${this.histogramDataLoading}
-        .width=${150}
-        .bins=${fullYearsHistogramAggregation?.buckets}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      ></histogram-date-range>
+      <div>
+        <ul>
+          <li>Base Query: ${this.baseQuery}</li>
+          <li>Facet Query: ${this.facetQuery}</li>
+          <li>Sort Filter Query: ${this.sortFilterQueries}</li>
+          <li>Date Range Query: ${this.dateRangeQueryClause}</li>
+          <li>Sort: ${this.sortParam?.field} ${this.sortParam?.direction}</li>
+          <li>Full Query: ${this.fullQuery}</li>
+        </ul>
+      </div>
     `;
   }
 
@@ -242,6 +417,10 @@ export class CollectionBrowser
     this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
   }
 
+  firstUpdated(): void {
+    this.restoreState();
+  }
+
   updated(changed: PropertyValues) {
     if (
       changed.has('displayMode') ||
@@ -250,9 +429,13 @@ export class CollectionBrowser
     ) {
       this.infiniteScroller.reload();
     }
+    if (changed.has('currentPage') || changed.has('displayMode')) {
+      this.persistState();
+    }
     if (
       changed.has('baseQuery') ||
-      changed.has('additionalQueryClause') ||
+      changed.has('titleQuery') ||
+      changed.has('creatorQuery') ||
       changed.has('dateRangeQueryClause') ||
       changed.has('sortParam') ||
       changed.has('selectedFacets') ||
@@ -260,11 +443,56 @@ export class CollectionBrowser
     ) {
       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);
+    }
+  }
+
+  handleResize(entry: ResizeObserverEntry): void {
+    if (entry.target === this.contentContainer) {
+      this.mobileView = entry.contentRect.width < 600;
+    }
+  }
+
+  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,
+    });
   }
 
   /**
@@ -284,6 +512,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,
@@ -301,7 +532,8 @@ export class CollectionBrowser
 
   private async handleQueryChange() {
     // only reset if the query has actually changed
-    if (this.pageFetchQueryKey === this.previousQueryKey) return;
+    if (!this.searchService || this.pageFetchQueryKey === this.previousQueryKey)
+      return;
     this.previousQueryKey = this.pageFetchQueryKey;
 
     this.dataSource = {};
@@ -312,6 +544,7 @@ export class CollectionBrowser
       this.scrollToPage(this.initialPageNumber);
     }
     this.initialQueryChangeHappened = true;
+    this.persistState();
 
     await Promise.all([
       this.doInitialPageFetch(),
@@ -320,6 +553,47 @@ export class CollectionBrowser
     ]);
   }
 
+  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);
@@ -338,32 +612,41 @@ export class CollectionBrowser
   private get fullQueryWithoutDate(): string | undefined {
     if (!this.baseQuery) return undefined;
     let fullQuery = this.baseQuery;
-    const { facetQuery, additionalQueryClause } = this;
+    const { facetQuery, sortFilterQueries } = this;
     if (facetQuery) {
       fullQuery += ` AND ${facetQuery}`;
     }
-    if (additionalQueryClause) {
-      fullQuery += ` AND ${additionalQueryClause}`;
+    if (sortFilterQueries) {
+      fullQuery += ` AND ${sortFilterQueries}`;
     }
     return fullQuery;
   }
 
+  /**
+   * Generates a query string for the given facets
+   *
+   * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
+   */
   private get facetQuery(): string | undefined {
+    if (!this.selectedFacets) return undefined;
     const facetQuery = [];
-    for (const [facetName, selectedValues] of Object.entries(
+    for (const [facetName, facetValues] of Object.entries(
       this.selectedFacets
     )) {
-      const values: string[] = [];
-      for (const value of selectedValues) {
-        values.push(`${facetName}:"${value}"`);
+      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) {
+        facetValuesArray.push(`${facetState === 'hidden' ? '-' : ''}"${key}"`);
       }
-      const valueQuery = values.join(' OR ');
-      facetQuery.push(`(${valueQuery})`);
+      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;
   }
 
@@ -517,23 +800,25 @@ export class CollectionBrowser
     const params = new SearchParams({
       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',
-        'collection',
+        'subject', // topic
+        'title',
+        'volume',
       ],
       page: pageNumber,
       rows: this.pageSize,
@@ -544,6 +829,8 @@ export class CollectionBrowser
 
     if (!success) return;
 
+    this.totalResults = success.response.numFound;
+
     // 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
@@ -555,6 +842,7 @@ export class CollectionBrowser
 
     const { docs } = success.response;
     if (docs && docs.length > 0) {
+      this.preloadCollectionNames(docs);
       this.updateDataSource(pageNumber, docs);
     }
     if (docs.length < this.pageSize) {
@@ -566,6 +854,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.
    *
@@ -597,23 +891,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,
-        collection: doc.collection?.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;
@@ -634,10 +935,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) {
@@ -657,6 +958,7 @@ export class CollectionBrowser
       .displayMode=${this.displayMode}
       .resizeObserver=${this.resizeObserver}
       .sortParam=${this.sortParam}
+      .collectionNameCache=${this.collectionNameCache}
       ?showDeleteButton=${this.showDeleteButtons}
     ></tile-dispatcher>`;
   }
@@ -679,17 +981,99 @@ 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: 15rem;
+      width: 18rem;
+      padding-right: 12px;
+      padding-right: 1rem;
+    }
+
+    .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 {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5rem;
+    }
+
+    .mobile #results-total {
+      margin-bottom: 0;
+    }
+
+    #big-results-count {
+      font-size: 2.4rem;
+      font-weight: 500;
+      margin-right: 5px;
+    }
+
+    #big-results-label {
+      font-size: 1rem;
+      font-weight: 200;
+      text-transform: uppercase;
+    }
+
+    #list-header {
+      max-height: 3rem;
     }
 
     .loading-cover {
@@ -698,7 +1082,6 @@ export class CollectionBrowser
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: rgba(255, 255, 255, 0.75);
       display: flex;
       justify-content: center;
       z-index: 1;
@@ -710,6 +1093,11 @@ export class CollectionBrowser
       height: 30px;
     }
 
+    sort-filter-bar {
+      display: block;
+      margin-bottom: 4rem;
+    }
+
     infinite-scroller {
       display: block;
       --infiniteScrollerRowGap: var(--collectionBrowserRowGap, 1.7rem);
@@ -721,14 +1109,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 {
@@ -740,6 +1123,8 @@ export class CollectionBrowser
         --collectionBrowserCellMinHeight,
         5rem
       );
+      /* 30px, but compensating for a -5px margin */
+      --infiniteScrollerRowGap: 35px;
     }
 
     infinite-scroller.grid {