@internetarchive/collection-browser 0.3.7-alpha.1 → 0.3.8

package/src/app-root.ts

@@ -72,12 +72,13 @@ export class AppRoot extends LitElement {
   private sendAnalytics(ae: AnalyticsEvent) {
     console.log('Analytics Received ----', ae);
     this.latestAction = ae;
-    this.analyticsManager?.sendEventNoSampling(ae);
+    this.analyticsManager?.sendEvent(ae);
   }
 
   private initSearchServiceFromUrlParams() {
     const params = new URL(window.location.href).searchParams;
     return new SearchService({
+      includeCredentials: false,
       baseUrl: params.get('search_base_url') ?? undefined,
       servicePath: params.get('search_service_path') ?? undefined,
       debuggingEnabled: !!params.get('debugging') ?? undefined,
@@ -160,15 +161,15 @@ export class AppRoot extends LitElement {
         <div id="toggle-controls">
           <button
             @click=${() => {
-              const details =
-                this.shadowRoot?.getElementById('cell-size-control');
-              details?.classList.toggle('hidden');
-              const rowGapControls =
-                this.shadowRoot?.getElementById('cell-gap-control');
-              rowGapControls?.classList.toggle('hidden');
+              const cellControls =
+                this.shadowRoot?.getElementById('cell-controls');
+              cellControls?.classList.toggle('hidden');
+              const checkboxControls =
+                this.shadowRoot?.getElementById('checkbox-controls');
+              checkboxControls?.classList.toggle('hidden');
             }}
           >
-            Toggle Cell Controls
+            Toggle Controls
           </button>
           <button
             @click=${() => {
@@ -189,7 +190,7 @@ export class AppRoot extends LitElement {
           >
         </div>
 
-        <div id="cell-controls" class="hidden">
+        <div id="cell-controls">
           <div id="cell-size-control">
             <div>
               <label for="cell-width-slider">Min cell width:</label>
@@ -282,6 +283,15 @@ export class AppRoot extends LitElement {
             />
             <label for="show-dummy-snippets">Show dummy snippets</label>
           </div>
+          <div class="checkbox-control">
+            <input
+              type="checkbox"
+              id="enable-date-picker"
+              checked
+              @click=${this.datePickerChanged}
+            />
+            <label for="enable-date-picker">Enable date picker</label>
+          </div>
         </div>
       </div>
 
@@ -409,6 +419,18 @@ export class AppRoot extends LitElement {
     this.searchQuery = oldQuery; // Re-apply the original query
   }
 
+  private datePickerChanged(e: Event) {
+    const target = e.target as HTMLInputElement;
+    this.collectionBrowser.showHistogramDatePicker = target.checked;
+
+    // When disabling the date picker from the demo app, also clear any existing date range params
+    if (!this.collectionBrowser.showHistogramDatePicker) {
+      this.collectionBrowser.minSelectedDate = undefined;
+      this.collectionBrowser.maxSelectedDate = undefined;
+      this.collectionBrowser.dateRangeQueryClause = undefined;
+    }
+  }
+
   private rowGapChanged(e: Event) {
     const input = e.target as HTMLInputElement;
     this.rowGap = parseFloat(input.value);
@@ -563,7 +585,8 @@ export class AppRoot extends LitElement {
     }
 
     .hidden {
-      display: none;
+      /* If this class is present, we want the element hidden regardless of specificity */
+      display: none !important;
     }
 
     #toggle-controls {

package/src/collection-browser.ts

@@ -46,6 +46,7 @@ import {
   TileModel,
   CollectionDisplayMode,
   FacetOption,
+  FacetBucket,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -404,7 +405,7 @@ export class CollectionBrowser
   private sendSortByAnalytics(prevSortDirection: SortDirection | null): void {
     const directionCleared = prevSortDirection && !this.sortDirection;
 
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: this.searchContext,
       action: analyticsActions.sortBy,
       label: `${this.selectedSort}${
@@ -430,7 +431,7 @@ export class CollectionBrowser
     this.displayMode = e.detail.displayMode;
 
     if (this.displayMode) {
-      this.analyticsHandler?.sendEventNoSampling({
+      this.analyticsHandler?.sendEvent({
         category: this.searchContext,
         action: analyticsActions.displayMode,
         label: this.displayMode,
@@ -447,7 +448,7 @@ export class CollectionBrowser
     }
     const cleared = prevSelectedLetter && this.selectedTitleFilter === null;
 
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: this.searchContext,
       action: analyticsActions.filterByTitle,
       label: cleared
@@ -473,7 +474,7 @@ export class CollectionBrowser
     }
     const cleared = prevSelectedLetter && this.selectedCreatorFilter === null;
 
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: this.searchContext,
       action: analyticsActions.filterByCreator,
       label: cleared
@@ -597,10 +598,12 @@ export class CollectionBrowser
     }>
   ) {
     const { minDate, maxDate } = e.detail;
+
+    [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
     this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
 
     if (this.dateRangeQueryClause) {
-      this.analyticsHandler?.sendEventNoSampling({
+      this.analyticsHandler?.sendEvent({
         category: this.searchContext,
         action: analyticsActions.histogramChanged,
         label: this.dateRangeQueryClause,
@@ -775,6 +778,11 @@ export class CollectionBrowser
     this.pageFetchesInProgress = {};
     this.endOfDataReached = false;
     this.pagesToRender = this.initialPageNumber;
+
+    // Reset the infinite scroller's item count, so that it
+    // shows tile placeholders until the new query's results load in
+    this.infiniteScroller?.reload();
+
     if (!this.initialQueryChangeHappened && this.initialPageNumber > 1) {
       this.scrollToPage(this.initialPageNumber);
     }
@@ -790,7 +798,8 @@ export class CollectionBrowser
     await Promise.all([
       this.doInitialPageFetch(),
       this.fetchFacets(),
-      this.fetchFullYearHistogram(),
+      // Only fetch histogram data separately if we need it b/c of date filters
+      this.shouldRequestYearHistogram && this.fetchFullYearHistogram(),
     ]);
   }
 
@@ -858,21 +867,34 @@ export class CollectionBrowser
     this.searchResultsLoading = false;
   }
 
+  /** The full query, including year facets and date range clauses */
   private get fullQuery(): string | undefined {
-    let { fullQueryWithoutDate } = this;
-    const { dateRangeQueryClause } = this;
+    if (!this.baseQuery) return undefined;
+    let fullQuery = this.baseQuery;
+
+    const { facetQuery, dateRangeQueryClause, sortFilterQueries } = this;
+
+    if (facetQuery) {
+      fullQuery += ` AND ${facetQuery}`;
+    }
     if (dateRangeQueryClause) {
-      fullQueryWithoutDate += ` AND ${dateRangeQueryClause}`;
+      fullQuery += ` AND ${dateRangeQueryClause}`;
     }
-    return fullQueryWithoutDate;
+    if (sortFilterQueries) {
+      fullQuery += ` AND ${sortFilterQueries}`;
+    }
+    return fullQuery;
   }
 
-  private get fullQueryWithoutDate(): string | undefined {
+  /** The full query without any year facets or date range clauses */
+  private get fullQueryWithoutDates(): string | undefined {
     if (!this.baseQuery) return undefined;
     let fullQuery = this.baseQuery;
-    const { facetQuery, sortFilterQueries } = this;
-    if (facetQuery) {
-      fullQuery += ` AND ${facetQuery}`;
+
+    const { facetQueryWithoutYear, sortFilterQueries } = this;
+
+    if (facetQueryWithoutYear) {
+      fullQuery += ` AND ${facetQueryWithoutYear}`;
     }
     if (sortFilterQueries) {
       fullQuery += ` AND ${sortFilterQueries}`;
@@ -887,33 +909,84 @@ export class CollectionBrowser
    */
   private get facetQuery(): string | undefined {
     if (!this.selectedFacets) return undefined;
-    const facetQuery = [];
+    const facetClauses = [];
     for (const [facetName, facetValues] of Object.entries(
       this.selectedFacets
     )) {
-      const facetEntries = Object.entries(facetValues);
-      const facetQueryName =
-        facetName === 'lending' ? 'lending___status' : facetName;
-      // eslint-disable-next-line no-continue
-      if (facetEntries.length === 0) continue;
-      const facetValuesArray: string[] = [];
-      for (const [key, facetData] of facetEntries) {
-        const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
-
-        if (facetName === 'language') {
-          const languages =
-            this.languageCodeHandler.getCodeArrayFromCodeString(key);
-          for (const language of languages) {
-            facetValuesArray.push(`${plusMinusPrefix}"${language}"`);
-          }
-        } else {
-          facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
+      facetClauses.push(this.buildFacetClause(facetName, facetValues));
+    }
+    return this.joinFacetClauses(facetClauses);
+  }
+
+  /**
+   * Generates a query string for the currently selected facets, excluding 'year' facets.
+   *
+   * Example: `mediatype:("collection" OR "audio" OR -"etree") AND subject:("foo" OR -"bar")`
+   */
+  private get facetQueryWithoutYear(): string | undefined {
+    if (!this.selectedFacets) return undefined;
+    const facetClauses = [];
+    for (const [facetName, facetValues] of Object.entries(
+      this.selectedFacets
+    )) {
+      if (facetName !== 'year') {
+        facetClauses.push(this.buildFacetClause(facetName, facetValues));
+      }
+    }
+    return this.joinFacetClauses(facetClauses);
+  }
+
+  /**
+   * Builds an OR-joined facet clause for the given facet name and values.
+   *
+   * E.g., for name `subject` and values
+   * `{ foo: { state: 'selected' }, bar: { state: 'hidden' } }`
+   * this will produce the clause
+   * `subject:("foo" OR -"bar")`.
+   *
+   * @param facetName The facet type (e.g., 'collection')
+   * @param facetValues The facet buckets, mapped by their keys
+   */
+  private buildFacetClause(
+    facetName: string,
+    facetValues: Record<string, FacetBucket>
+  ): string {
+    const facetEntries = Object.entries(facetValues);
+    if (facetEntries.length === 0) return '';
+
+    const facetQueryName =
+      facetName === 'lending' ? 'lending___status' : facetName;
+    const facetValuesArray: string[] = [];
+
+    for (const [key, facetData] of facetEntries) {
+      const plusMinusPrefix = facetData.state === 'hidden' ? '-' : '';
+
+      if (facetName === 'language') {
+        const languages =
+          this.languageCodeHandler.getCodeArrayFromCodeString(key);
+        for (const language of languages) {
+          facetValuesArray.push(`${plusMinusPrefix}"${language}"`);
         }
+      } else {
+        facetValuesArray.push(`${plusMinusPrefix}"${key}"`);
       }
-      const valueQuery = facetValuesArray.join(` OR `);
-      facetQuery.push(`${facetQueryName}:(${valueQuery})`);
     }
-    return facetQuery.length > 0 ? `(${facetQuery.join(' AND ')})` : undefined;
+
+    const valueQuery = facetValuesArray.join(` OR `);
+    return `${facetQueryName}:(${valueQuery})`;
+  }
+
+  /**
+   * Takes an array of facet clauses, and combines them into a
+   * full AND-joined facet query string. Empty clauses are ignored.
+   */
+  private joinFacetClauses(facetClauses: string[]): string | undefined {
+    const nonEmptyFacetClauses = facetClauses.filter(
+      clause => clause.length > 0
+    );
+    return nonEmptyFacetClauses.length > 0
+      ? `(${nonEmptyFacetClauses.join(' AND ')})`
+      : undefined;
   }
 
   facetsChanged(e: CustomEvent<SelectedFacets>) {
@@ -926,7 +999,7 @@ export class CollectionBrowser
     negative: boolean
   ): void {
     if (negative) {
-      this.analyticsHandler?.sendEventNoSampling({
+      this.analyticsHandler?.sendEvent({
         category: this.searchContext,
         action: facetSelected
           ? analyticsActions.facetNegativeSelected
@@ -934,7 +1007,7 @@ export class CollectionBrowser
         label: name,
       });
     } else {
-      this.analyticsHandler?.sendEventNoSampling({
+      this.analyticsHandler?.sendEvent({
         category: this.searchContext,
         action: facetSelected
           ? analyticsActions.facetSelected
@@ -962,6 +1035,13 @@ export class CollectionBrowser
     this.facetsLoading = false;
 
     this.aggregations = results?.success?.response.aggregations;
+
+    // If we're not fetching year histogram data separately, set it from the newly-fetched aggregations
+    if (!this.shouldRequestYearHistogram) {
+      this.fullYearsHistogramAggregation =
+        results?.success?.response?.aggregations?.year_histogram ??
+        results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
+    }
   }
 
   /**
@@ -980,7 +1060,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.searchType}-${this.sortParam?.field}-${this.sortParam?.direction}`;
+    return `${this.fullQueryWithoutDates}-${this.searchType}-${this.sortParam?.field}-${this.sortParam?.direction}`;
   }
 
   /**
@@ -993,10 +1073,11 @@ export class CollectionBrowser
   private async fetchFullYearHistogram(): Promise<void> {
     const { fullQueryNoDateKey } = this;
     if (
-      !this.fullQueryWithoutDate ||
+      !this.fullQueryWithoutDates ||
       fullQueryNoDateKey === this.previousFullQueryNoDate
-    )
+    ) {
       return;
+    }
     this.previousFullQueryNoDate = fullQueryNoDateKey;
 
     const aggregations = {
@@ -1004,7 +1085,7 @@ export class CollectionBrowser
     };
 
     const params = {
-      query: this.fullQueryWithoutDate,
+      query: this.fullQueryWithoutDates,
       aggregations,
       rows: 0,
     };
@@ -1018,6 +1099,20 @@ export class CollectionBrowser
       results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
   }
 
+  /**
+   * We only want to send a separate request for the year_histogram data
+   * if (a) the date picker component is enabled and (b) there is a year facet or date-range filter applied.
+   *
+   * Otherwise, we should just be using the histogram data supplied by the "normal" facet request.
+   */
+  private get shouldRequestYearHistogram() {
+    const datePickerEnabled = this.showHistogramDatePicker;
+    const hasDateRange = !!this.dateRangeQueryClause;
+    const hasYearFacet =
+      Object.keys(this.selectedFacets?.year ?? {}).length > 0;
+    return datePickerEnabled && (hasDateRange || hasYearFacet);
+  }
+
   private scrollToPage(pageNumber: number) {
     const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
     // without this setTimeout, Safari just pauses until the `fetchPage` is complete
@@ -1195,7 +1290,7 @@ export class CollectionBrowser
         dateArchived: result.publicdate?.value,
         datePublished: result.date?.value,
         dateReviewed: result.reviewdate?.value,
-        description: result.description?.value,
+        description: result.description?.values.join('\n'),
         favCount: result.num_favorites?.value ?? 0,
         identifier: result.identifier,
         issue: result.issue?.value,
@@ -1251,13 +1346,13 @@ export class CollectionBrowser
    * Callback when a result is selected
    */
   resultSelected(event: CustomEvent<TileModel>): void {
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: this.searchContext,
       action: analyticsActions.resultSelected,
       label: event.detail.mediatype,
     });
 
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: this.searchContext,
       action: analyticsActions.resultSelected,
       label: `page-${this.currentPage}`,

package/src/collection-facets/more-facets-content.ts

@@ -146,7 +146,7 @@ export class MoreFacetsContent extends LitElement {
       this.pageNumber = Number(page);
     }
 
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: analyticsCategories.default,
       action: analyticsActions.moreFacetsPageChange,
       label: `${this.pageNumber}`,
@@ -437,7 +437,7 @@ export class MoreFacetsContent extends LitElement {
     });
     this.dispatchEvent(event);
     this.modalManager?.closeModal();
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: analyticsCategories.default,
       action: `${analyticsActions.applyMoreFacetsModal}`,
       label: `${this.facetKey}`,
@@ -446,7 +446,7 @@ export class MoreFacetsContent extends LitElement {
 
   private cancelClick() {
     this.modalManager?.closeModal();
-    this.analyticsHandler?.sendEventNoSampling({
+    this.analyticsHandler?.sendEvent({
       category: analyticsCategories.default,
       action: analyticsActions.closeMoreFacetsModal,
       label: `${this.facetKey}`,

package/src/collection-facets.ts

@@ -466,7 +466,7 @@ export class CollectionFacets extends LitElement {
       class="more-link"
       @click=${() => {
         this.showMoreFacetsModal(facetGroup, 'count');
-        this.analyticsHandler?.sendEventNoSampling({
+        this.analyticsHandler?.sendEvent({
           category: analyticsCategories.default,
           action: analyticsActions.showMoreFacetsModal,
           label: facetGroup.key,

package/src/tiles/list/tile-list.ts

@@ -9,6 +9,7 @@ import {
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import DOMPurify from 'dompurify';
 
@@ -295,7 +296,10 @@ export class TileList extends LitElement {
 
   private get descriptionTemplate() {
     return this.metadataTemplate(
-      DOMPurify.sanitize(this.model?.description ?? ''),
+      // Sanitize away any HTML tags and convert line breaks to spaces.
+      unsafeHTML(
+        DOMPurify.sanitize(this.model?.description?.replace(/\n/g, ' ') ?? '')
+      ),
       '',
       'description'
     );
@@ -340,7 +344,7 @@ export class TileList extends LitElement {
     // Note: single ' for href='' to wrap " in query var gets changed back by yarn format
 
     // eslint-disable-next-line lit/no-invalid-html
-    return html`<a href="${this.baseNavigationUrl}/search.php?query=${query}">
+    return html`<a href="${this.baseNavigationUrl}/search?query=${query}">
       ${DOMPurify.sanitize(searchTerm)}</a
     >`;
   }