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

package/src/collection-facets/facets-template.ts

@@ -10,6 +10,8 @@ import {
   FacetBucket,
   SelectedFacets,
   getDefaultSelectedFacets,
+  FacetEventDetails,
+  FacetState,
 } from '../models';
 
 @customElement('facets-template')
@@ -31,6 +33,12 @@ export class FacetsTemplate extends LitElement {
     } else {
       this.facetUnchecked(name as FacetOption, value);
     }
+
+    this.dispatchFacetClickEvent(
+      name as FacetOption,
+      this.getFacetState(checked, negative),
+      negative
+    );
   }
 
   private facetChecked(
@@ -49,7 +57,7 @@ export class FacetsTemplate extends LitElement {
       newFacets = getDefaultSelectedFacets();
     }
     newFacets[key][value] = {
-      state: negative ? 'hidden' : 'selected',
+      state: this.getFacetState(true, negative),
       count,
     } as FacetBucket;
 
@@ -73,6 +81,29 @@ export class FacetsTemplate extends LitElement {
     this.dispatchSelectedFacetsChanged();
   }
 
+  /** Returns the composed facet state corresponding to a positive or negative facet's checked state */
+  private getFacetState(checked: boolean, negative: boolean): FacetState {
+    let state: FacetState;
+    if (checked) {
+      state = negative ? 'hidden' : 'selected';
+    } else {
+      state = 'none';
+    }
+    return state;
+  }
+
+  private dispatchFacetClickEvent(
+    key: FacetOption,
+    state: FacetState,
+    negative: boolean
+  ) {
+    const event = new CustomEvent<FacetEventDetails>('facetClick', {
+      detail: { key, state, negative },
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+
   private dispatchSelectedFacetsChanged() {
     const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {
       detail: this.selectedFacets,

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

@@ -130,13 +130,16 @@ export class MoreFacetsContent extends LitElement {
    * - this.aggregations - hold result of search service and being used for further processing.
    */
   async updateSpecificFacets(): Promise<void> {
+    const trimmedQuery = this.query?.trim();
+    if (!trimmedQuery) return;
+
     const aggregations = {
       simpleParams: [this.facetAggregationKey as string],
     };
     const aggregationsSize = 65535; // todo - do we want to have all the records at once?
 
     const params: SearchParams = {
-      query: this.query as string,
+      query: trimmedQuery,
       filters: this.filterMap,
       aggregations,
       aggregationsSize,

package/src/collection-facets.ts

@@ -99,13 +99,6 @@ export class CollectionFacets extends LitElement {
   @property({ type: Object, attribute: false })
   collectionNameCache?: CollectionNameCacheInterface;
 
-  /** Fires when a facet is clicked */
-  @property({ type: Function }) onFacetClick?: (
-    name: FacetOption,
-    facetChecked: boolean,
-    negative: boolean
-  ) => void;
-
   @state() openFacets: Record<FacetOption, boolean> = {
     subject: false,
     lending: false,
@@ -554,7 +547,7 @@ export class CollectionFacets extends LitElement {
         transform: rotate(90deg);
       }
 
-      .facet-group {
+      .facet-group:not(:last-child) {
         margin-bottom: 2rem;
       }
 

package/src/empty-placeholder.ts

@@ -119,6 +119,7 @@ export class EmptyPlaceholder extends LitElement {
 
       .error-details {
         font-size: 1.2rem;
+        word-break: break-word;
       }
     `;
   }

package/src/models.ts

@@ -220,6 +220,12 @@ export interface FacetGroup {
   buckets: FacetBucket[];
 }
 
+export type FacetEventDetails = {
+  key: FacetOption;
+  state: FacetState;
+  negative: boolean;
+};
+
 export type FacetValue = string;
 
 export type SelectedFacets = Record<

package/src/tiles/grid/item-tile.ts

@@ -11,7 +11,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { SortParam } from '@internetarchive/search-service';
 
-import { formatDate } from '../../utils/format-date';
+import { DateFormat, formatDate } from '../../utils/format-date';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import type { TileModel } from '../../models';
 
 import { baseTileStyles } from './styles/tile-grid-shared-styles';
@@ -104,10 +105,16 @@ export class ItemTile extends LitElement {
 
   private get sortedDateInfoTemplate() {
     let sortedValue;
+    let format: DateFormat = 'long';
     switch (this.sortParam?.field) {
-      case 'date':
-        sortedValue = { field: 'published', value: this.model?.datePublished };
+      case 'date': {
+        const datePublished = this.model?.datePublished;
+        sortedValue = { field: 'published', value: datePublished };
+        if (isFirstMillisecondOfUTCYear(datePublished)) {
+          format = 'year-only';
+        }
         break;
+      }
       case 'reviewdate':
         sortedValue = { field: 'reviewed', value: this.model?.dateReviewed };
         break;
@@ -127,7 +134,7 @@ export class ItemTile extends LitElement {
     return html`
       <div class="date-sorted-by truncated">
         <span>
-          ${sortedValue?.field} ${formatDate(sortedValue?.value, 'long')}
+          ${sortedValue?.field} ${formatDate(sortedValue?.value, format)}
         </span>
       </div>
     `;

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

@@ -6,6 +6,7 @@ import type { TileModel } from '../../models';
 
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import { accountLabel } from './account-label';
 
 import '../image-block';
@@ -49,7 +50,7 @@ export class TileListCompact extends LitElement {
             ? accountLabel(this.model?.dateAdded)
             : DOMPurify.sanitize(this.model?.creator ?? '')}
         </div>
-        <div id="date">${formatDate(this.date, this.formatSize)}</div>
+        <div id="date">${formatDate(this.date, this.dateFormatSize)}</div>
         <div id="icon">
           <mediatype-icon
             .mediatype=${this.model?.mediatype}
@@ -111,7 +112,20 @@ export class TileListCompact extends LitElement {
     return 'desktop';
   }
 
-  private get formatSize(): DateFormat | NumberFormat {
+  private get dateFormatSize(): DateFormat {
+    // If we're showing a date published of Jan 1 at midnight, only show the year.
+    // This is because items with only a year for their publication date are normalized to
+    // Jan 1 at midnight timestamps in the search engine documents.
+    if (
+      (!this.sortParam?.field || this.sortParam.field === 'date') && // No sort or date published
+      isFirstMillisecondOfUTCYear(this.model?.datePublished)
+    ) {
+      return 'year-only';
+    }
+    return this.formatSize;
+  }
+
+  private get formatSize(): NumberFormat {
     if (
       this.mobileBreakpoint &&
       this.currentWidth &&

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

@@ -21,6 +21,7 @@ import { dateLabel } from './date-label';
 import { accountLabel } from './account-label';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
+import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 
 import '../image-block';
 import '../mediatype-icon';
@@ -205,10 +206,16 @@ export class TileList extends LitElement {
   }
 
   private get datePublishedTemplate() {
-    return this.metadataTemplate(
-      formatDate(this.model?.datePublished, 'long'),
-      'Published'
-    );
+    // If we're showing a date published of Jan 1 at midnight, only show the year.
+    // This is because items with only a year for their publication date are normalized to
+    // Jan 1 at midnight timestamps in the search engine documents.
+    const date: Date | undefined = this.model?.datePublished;
+    let format: DateFormat = 'long';
+    if (isFirstMillisecondOfUTCYear(date)) {
+      format = 'year-only';
+    }
+
+    return this.metadataTemplate(formatDate(date, format), 'Published');
   }
 
   // Show date label/value when sorted by date type
@@ -430,7 +437,7 @@ export class TileList extends LitElement {
     return 'desktop';
   }
 
-  private get formatSize(): DateFormat | NumberFormat {
+  private get formatSize(): NumberFormat {
     if (
       this.mobileBreakpoint &&
       this.currentWidth &&

package/src/utils/format-date.ts

@@ -3,6 +3,7 @@
  * Override browser timezone to always display same date as in data
  */
 export type DateFormat =
+  | 'year-only' // 2020
   | 'short' // Dec 2020
   | 'long'; // Dec 20, 2020
 
@@ -18,6 +19,9 @@ export function formatDate(
     timeZone: 'UTC', // Override browser timezone
   };
   switch (format) {
+    case 'year-only':
+      options.year = 'numeric';
+      break;
     case 'short':
       options.month = 'short';
       options.year = 'numeric';

package/src/utils/local-date-from-utc.ts

@@ -0,0 +1,15 @@
+/**
+ * Converts a given UTC date into the equivalent local-timestamp one.
+ */
+export function localDateFromUTC(date: Date): Date {
+  return new Date(date.getTime() - date.getTimezoneOffset() * 1000 * 60);
+}
+
+/**
+ * Returns whether a given UTC date corresponds to the first
+ * millisecond of the year (e.g., Jan 1 at exactly midnight).
+ */
+export function isFirstMillisecondOfUTCYear(date?: Date): boolean {
+  if (!date) return false;
+  return localDateFromUTC(date).toISOString().endsWith('-01-01T00:00:00.000Z');
+}

package/test/collection-browser.test.ts

@@ -3,7 +3,7 @@ import { aTimeout, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 import sinon from 'sinon';
 import type { InfiniteScroller } from '@internetarchive/infinite-scroller';
-import { SearchType } from '@internetarchive/search-service';
+import { FilterConstraint, SearchType } from '@internetarchive/search-service';
 import type { HistogramDateRange } from '@internetarchive/histogram-date-range';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
@@ -174,12 +174,20 @@ describe('Collection Browser', () => {
     el.selectedFacets = mockedSelectedFacets;
     await el.updateComplete;
 
-    el.facetClickHandler('mediatype', true, false);
+    el.facetClickHandler(
+      new CustomEvent('facetClick', {
+        detail: { key: 'mediatype', state: 'selected', negative: false },
+      })
+    );
     expect(mockAnalyticsHandler.callCategory).to.equal('search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetSelected');
     expect(mockAnalyticsHandler.callLabel).to.equal('mediatype');
 
-    el.facetClickHandler('mediatype', false, false);
+    el.facetClickHandler(
+      new CustomEvent('facetClick', {
+        detail: { key: 'mediatype', state: 'none', negative: false },
+      })
+    );
     expect(el.selectedFacets).to.equal(mockedSelectedFacets);
     expect(mockAnalyticsHandler.callCategory).to.equal('search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetDeselected');
@@ -208,12 +216,20 @@ describe('Collection Browser', () => {
     el.selectedFacets = mockedSelectedFacets;
     await el.updateComplete;
 
-    el.facetClickHandler('mediatype', true, true);
+    el.facetClickHandler(
+      new CustomEvent('facetClick', {
+        detail: { key: 'mediatype', state: 'hidden', negative: true },
+      })
+    );
     expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetNegativeSelected');
     expect(mockAnalyticsHandler.callLabel).to.equal('mediatype');
 
-    el.facetClickHandler('mediatype', false, true);
+    el.facetClickHandler(
+      new CustomEvent('facetClick', {
+        detail: { key: 'mediatype', state: 'none', negative: true },
+      })
+    );
     expect(el.selectedFacets).to.equal(mockedSelectedFacets);
     expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetNegativeDeselected');
@@ -727,8 +743,9 @@ describe('Collection Browser', () => {
     el.selectedTitleFilter = 'X';
     await el.updateComplete;
 
-    expect(searchService.searchParams?.query).to.equal(
-      'first-title AND firstTitle:X'
+    expect(searchService.searchParams?.query).to.equal('first-title');
+    expect(searchService.searchParams?.filters?.firstTitle?.X).to.equal(
+      FilterConstraint.INCLUDE
     );
   });
 
@@ -745,8 +762,9 @@ describe('Collection Browser', () => {
     el.selectedCreatorFilter = 'X';
     await el.updateComplete;
 
-    expect(searchService.searchParams?.query).to.equal(
-      'first-creator AND firstCreator:X'
+    expect(searchService.searchParams?.query).to.equal('first-creator');
+    expect(searchService.searchParams?.filters?.firstCreator?.X).to.equal(
+      FilterConstraint.INCLUDE
     );
   });
 
@@ -776,9 +794,7 @@ describe('Collection Browser', () => {
     el.selectedCreatorFilter = 'X';
     await el.updateComplete;
 
-    expect(searchService.searchParams?.query).to.equal(
-      'first-creator AND firstCreator:X'
-    );
+    expect(searchService.searchParams?.query).to.equal('first-creator');
     expect(searchService.searchParams?.filters).to.deep.equal({
       collection: {
         foo: 'inc',
@@ -787,9 +803,38 @@ describe('Collection Browser', () => {
         '1950': 'gte',
         '1970': 'lte',
       },
+      firstCreator: {
+        X: 'inc',
+      },
     });
   });
 
+  it('resets letter filters when query changes', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'first-creator';
+    el.selectedSort = 'creator' as SortField;
+    el.sortDirection = 'asc';
+    el.selectedCreatorFilter = 'X';
+    await el.updateComplete;
+    await nextTick();
+
+    expect(searchService.searchParams?.query).to.equal('first-creator');
+    expect(searchService.searchParams?.filters?.firstCreator?.X).to.equal(
+      FilterConstraint.INCLUDE
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('collection:foo');
+    expect(searchService.searchParams?.filters?.firstCreator).not.to.exist;
+  });
+
   it('sets date range query when date picker selection changed', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(

package/test/collection-facets/facets-template.test.ts

@@ -1,7 +1,9 @@
 import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
 import { html } from 'lit';
 import type { FacetsTemplate } from '../../src/collection-facets/facets-template';
 import '../../src/collection-facets/facets-template';
+import { getDefaultSelectedFacets, FacetEventDetails } from '../../src/models';
 
 const facetGroup = {
   title: 'Media Type',
@@ -102,4 +104,100 @@ describe('Render facets', () => {
       'Hide mediatype: movies'
     );
   });
+
+  it('emits facetClick events for normal facets', async () => {
+    const facetClickSpy = sinon.spy();
+    const mediatypeGroup = {
+      title: 'Media Type',
+      key: 'mediatype',
+      buckets: [
+        { displayText: 'audio', key: 'audio', count: 42, state: 'none' },
+      ],
+    };
+    const selectedFacets = getDefaultSelectedFacets();
+    const el = await fixture<FacetsTemplate>(
+      html`<facets-template
+        .facetGroup=${mediatypeGroup}
+        .selectedFacets=${selectedFacets}
+        @facetClick=${facetClickSpy}
+      ></facets-template>`
+    );
+
+    const checkbox = el.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(checkbox).to.exist;
+
+    // Select it
+    checkbox.click();
+    await el.updateComplete;
+    expect(facetClickSpy.callCount).to.equal(1);
+
+    const selectEvent = facetClickSpy
+      .args[0][0] as CustomEvent<FacetEventDetails>;
+    expect(selectEvent).to.exist;
+    expect(selectEvent?.detail?.key).to.equal('mediatype');
+    expect(selectEvent?.detail?.state).to.equal('selected');
+    expect(selectEvent?.detail?.negative).to.be.false;
+
+    // Unselect it
+    checkbox.click();
+    await el.updateComplete;
+    expect(facetClickSpy.callCount).to.equal(2);
+
+    const unselectEvent = facetClickSpy
+      .args[1][0] as CustomEvent<FacetEventDetails>;
+    expect(unselectEvent).to.exist;
+    expect(unselectEvent?.detail?.key).to.equal('mediatype');
+    expect(unselectEvent?.detail?.state).to.equal('none');
+    expect(unselectEvent?.detail?.negative).to.be.false;
+  });
+
+  it('emits facetClick events for negative facets', async () => {
+    const facetClickSpy = sinon.spy();
+    const mediatypeGroup = {
+      title: 'Media Type',
+      key: 'mediatype',
+      buckets: [
+        { displayText: 'audio', key: 'audio', count: 42, state: 'none' },
+      ],
+    };
+    const selectedFacets = getDefaultSelectedFacets();
+    const el = await fixture<FacetsTemplate>(
+      html`<facets-template
+        .facetGroup=${mediatypeGroup}
+        .selectedFacets=${selectedFacets}
+        @facetClick=${facetClickSpy}
+      ></facets-template>`
+    );
+
+    const checkbox = el.shadowRoot?.querySelector(
+      '.hide-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(checkbox).to.exist;
+
+    // Select it
+    checkbox.click();
+    await el.updateComplete;
+    expect(facetClickSpy.callCount).to.equal(1);
+
+    const selectEvent = facetClickSpy
+      .args[0][0] as CustomEvent<FacetEventDetails>;
+    expect(selectEvent).to.exist;
+    expect(selectEvent?.detail?.key).to.equal('mediatype');
+    expect(selectEvent?.detail?.state).to.equal('hidden');
+    expect(selectEvent?.detail?.negative).to.be.true;
+
+    // Unselect it
+    checkbox.click();
+    await el.updateComplete;
+    expect(facetClickSpy.callCount).to.equal(2);
+
+    const unselectEvent = facetClickSpy
+      .args[1][0] as CustomEvent<FacetEventDetails>;
+    expect(unselectEvent).to.exist;
+    expect(unselectEvent?.detail?.key).to.equal('mediatype');
+    expect(unselectEvent?.detail?.state).to.equal('none');
+    expect(unselectEvent?.detail?.negative).to.be.true;
+  });
 });