@internetarchive/collection-browser 4.5.0 → 4.5.1-alpha-webdev8221.0

package/src/tiles/tile-display-value-provider.ts

@@ -1,133 +1,133 @@
-import { TemplateResult, html, nothing } from 'lit';
-import { msg, str } from '@lit/localize';
-import type { SortParam } from '@internetarchive/search-service';
-import type { TileModel } from '../models';
-import { formatDate } from '../utils/format-date';
-
-/**
- * A class encapsulating shared logic for converting model values into display values
- * across different types of tiles.
- */
-export class TileDisplayValueProvider {
-  private model?: TileModel;
-
-  private baseNavigationUrl?: string;
-
-  private collectionPagePath?: string;
-
-  private sortParam?: SortParam;
-
-  private creatorFilter?: string;
-
-  constructor(
-    options: {
-      model?: TileModel;
-      baseNavigationUrl?: string;
-      collectionPagePath?: string;
-      sortParam?: SortParam;
-      creatorFilter?: string;
-    } = {},
-  ) {
-    this.model = options.model;
-    this.baseNavigationUrl = options.baseNavigationUrl;
-    this.collectionPagePath = options.collectionPagePath ?? '/details/';
-    this.sortParam = options.sortParam;
-    this.creatorFilter = options.creatorFilter;
-  }
-
-  /**
-   * Examines the creator(s) for the given tile model, returning
-   * the first creator whose name matches the provided filter
-   * (or simply the first creator overall if no filter is provided).
-   */
-  get firstCreatorMatchingFilter(): string | undefined {
-    let matchingCreator;
-
-    // If we're filtering by creator initial and have multiple creators, we want
-    // to surface the first creator who matches the filter.
-    if (this.creatorFilter && this.model?.creators.length) {
-      const firstLetter = this.creatorFilter; // This is just to satisfy tsc
-      matchingCreator = this.model.creators.find(creator =>
-        // Decompose combining characters first, so that e.g., filtering on E matches É too.
-        // Then remove anything that isn't strictly alphabetic, since our filters currently
-        // only handle A-Z. The first such letter (if one exists) is what needs to match.
-        creator
-          .normalize('NFD')
-          .replace(/[^A-Z]+/gi, '')
-          .toUpperCase()
-          .startsWith(firstLetter),
-      );
-    }
-
-    return matchingCreator ?? this.model?.creator;
-  }
-
-  /**
-   * The label indicating what year an account item was created.
-   * E.g., "Archivist since 2015"
-   */
-  get accountLabel(): string {
-    return this.model?.dateAdded
-      ? msg(str`Archivist since ${this.model.dateAdded.getFullYear()}`)
-      : '';
-  }
-
-  /**
-   * The readable label for the current sort if it is a type of date sort,
-   * or the empty string otherwise.
-   */
-  get dateLabel(): string {
-    switch (this.sortParam?.field) {
-      case 'publicdate':
-        return msg('Archived');
-      case 'reviewdate':
-        return msg('Reviewed');
-      case 'addeddate':
-        return msg('Added');
-      case 'date':
-        return msg('Published');
-      default:
-        return '';
-    }
-  }
-
-  /**
-   * The readable label for the current views column, based on whether
-   * weekly or all-time views are being shown.
-   */
-  get viewsLabel(): string {
-    return this.sortParam?.field === 'week'
-      ? msg('Weekly views')
-      : msg('All-time views');
-  }
-
-  /**
-   * Produces a URL pointing at the item page for the given identifier,
-   * using the current base URL and the correct path based on whether the
-   * item is specified to be a collection (default false).
-   */
-  itemPageUrl(
-    identifier?: string,
-    isCollection = false,
-  ): string | typeof nothing {
-    if (!identifier || this.baseNavigationUrl == null) return nothing;
-    const basePath = isCollection ? this.collectionPagePath : '/details/';
-    return `${this.baseNavigationUrl}${basePath}${identifier}`;
-  }
-
-  /**
-   * Produces a template for a link to a single web capture of the given URL and date
-   */
-  webArchivesCaptureLink(url: string, date: Date): TemplateResult {
-    // Convert the date into the format used to identify wayback captures (e.g., '20150102124550')
-    const captureDateStr = date
-      .toISOString()
-      .replace(/[TZ:-]/g, '')
-      .replace(/\..*/, '');
-    // url must not be percent-encoded — Wayback Machine matches on the raw URL
-    const captureHref = `https://web.archive.org/web/${captureDateStr}/${url}`;
-    const captureText = formatDate(date, 'long');
-
-    return html` <a href=${captureHref}> ${captureText} </a> `;
-  }
-}
+import { TemplateResult, html, nothing } from 'lit';
+import { msg, str } from '@lit/localize';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../models';
+import { formatDate } from '../utils/format-date';
+
+/**
+ * A class encapsulating shared logic for converting model values into display values
+ * across different types of tiles.
+ */
+export class TileDisplayValueProvider {
+  private model?: TileModel;
+
+  private baseNavigationUrl?: string;
+
+  private collectionPagePath?: string;
+
+  private sortParam?: SortParam;
+
+  private creatorFilter?: string;
+
+  constructor(
+    options: {
+      model?: TileModel;
+      baseNavigationUrl?: string;
+      collectionPagePath?: string;
+      sortParam?: SortParam;
+      creatorFilter?: string;
+    } = {},
+  ) {
+    this.model = options.model;
+    this.baseNavigationUrl = options.baseNavigationUrl;
+    this.collectionPagePath = options.collectionPagePath ?? '/details/';
+    this.sortParam = options.sortParam;
+    this.creatorFilter = options.creatorFilter;
+  }
+
+  /**
+   * Examines the creator(s) for the given tile model, returning
+   * the first creator whose name matches the provided filter
+   * (or simply the first creator overall if no filter is provided).
+   */
+  get firstCreatorMatchingFilter(): string | undefined {
+    let matchingCreator;
+
+    // If we're filtering by creator initial and have multiple creators, we want
+    // to surface the first creator who matches the filter.
+    if (this.creatorFilter && this.model?.creators.length) {
+      const firstLetter = this.creatorFilter; // This is just to satisfy tsc
+      matchingCreator = this.model.creators.find(creator =>
+        // Decompose combining characters first, so that e.g., filtering on E matches É too.
+        // Then remove anything that isn't strictly alphabetic, since our filters currently
+        // only handle A-Z. The first such letter (if one exists) is what needs to match.
+        creator
+          .normalize('NFD')
+          .replace(/[^A-Z]+/gi, '')
+          .toUpperCase()
+          .startsWith(firstLetter),
+      );
+    }
+
+    return matchingCreator ?? this.model?.creator;
+  }
+
+  /**
+   * The label indicating what year an account item was created.
+   * E.g., "Archivist since 2015"
+   */
+  get accountLabel(): string {
+    return this.model?.dateAdded
+      ? msg(str`Archivist since ${this.model.dateAdded.getFullYear()}`)
+      : '';
+  }
+
+  /**
+   * The readable label for the current sort if it is a type of date sort,
+   * or the empty string otherwise.
+   */
+  get dateLabel(): string {
+    switch (this.sortParam?.field) {
+      case 'publicdate':
+        return msg('Archived');
+      case 'reviewdate':
+        return msg('Reviewed');
+      case 'addeddate':
+        return msg('Added');
+      case 'date':
+        return msg('Published');
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * The readable label for the current views column, based on whether
+   * weekly or all-time views are being shown.
+   */
+  get viewsLabel(): string {
+    return this.sortParam?.field === 'week'
+      ? msg('Weekly views')
+      : msg('All-time views');
+  }
+
+  /**
+   * Produces a URL pointing at the item page for the given identifier,
+   * using the current base URL and the correct path based on whether the
+   * item is specified to be a collection (default false).
+   */
+  itemPageUrl(
+    identifier?: string,
+    isCollection = false,
+  ): string | typeof nothing {
+    if (!identifier || this.baseNavigationUrl == null) return nothing;
+    const basePath = isCollection ? this.collectionPagePath : '/details/';
+    return `${this.baseNavigationUrl}${basePath}${identifier}`;
+  }
+
+  /**
+   * Produces a template for a link to a single web capture of the given URL and date
+   */
+  webArchivesCaptureLink(url: string, date: Date): TemplateResult {
+    // Convert the date into the format used to identify wayback captures (e.g., '20150102124550')
+    const captureDateStr = date
+      .toISOString()
+      .replace(/[TZ:-]/g, '')
+      .replace(/\..*/, '');
+    // url must not be percent-encoded — Wayback Machine matches on the raw URL
+    const captureHref = `https://web.archive.org/web/${captureDateStr}/${url}`;
+    const captureText = formatDate(date, 'long');
+
+    return html` <a href=${captureHref}> ${captureText} </a> `;
+  }
+}

package/src/utils/date-filter-field.ts

@@ -0,0 +1,11 @@
+/**
+ * Determines the appropriate search filter field name based on date format.
+ * Dates in YYYY-MM format (containing a hyphen) use the `date` field;
+ * dates in YYYY format use the `year` field.
+ */
+export function dateFilterField(
+  minDate?: string,
+  maxDate?: string,
+): 'date' | 'year' {
+  return minDate?.includes('-') || maxDate?.includes('-') ? 'date' : 'year';
+}

package/test/collection-browser.test.ts

@@ -2504,4 +2504,136 @@ describe('Collection Browser', () => {
     const initialResults = el.dataSource.getAllPages();
     expect(Object.keys(initialResults).length).to.deep.equal(numberOfPages);
   });
+
+  it('uses date filter field for YYYY-MM selected dates', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'months';
+    el.searchType = SearchType.TV;
+    el.minSelectedDate = '2001-02';
+    el.maxSelectedDate = '2002-12';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    expect(searchService.searchParams?.filters?.date?.['2001-02']).to.equal(
+      FilterConstraint.GREATER_OR_EQUAL,
+    );
+    expect(searchService.searchParams?.filters?.date?.['2002-12']).to.equal(
+      FilterConstraint.LESS_OR_EQUAL,
+    );
+    expect(searchService.searchParams?.filters?.year).not.to.exist;
+  });
+
+  it('still uses year filter field for YYYY selected dates', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'years';
+    el.minSelectedDate = '1950';
+    el.maxSelectedDate = '1970';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    expect(searchService.searchParams?.filters?.year?.['1950']).to.equal(
+      FilterConstraint.GREATER_OR_EQUAL,
+    );
+    expect(searchService.searchParams?.filters?.year?.['1970']).to.equal(
+      FilterConstraint.LESS_OR_EQUAL,
+    );
+    expect(searchService.searchParams?.filters?.date).not.to.exist;
+  });
+
+  it('selects date_histogram for isTVCollection even with metadata searchType', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .suppressPlaceholders=${true}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'months';
+    el.isTVCollection = true;
+    el.showHistogramDatePicker = true;
+    await el.updateComplete;
+    await el.initialSearchComplete;
+    await nextTick();
+
+    const facets = el.shadowRoot?.querySelector(
+      'collection-facets',
+    ) as CollectionFacets;
+    await facets?.updateComplete;
+    await nextTick();
+
+    const histogram = facets?.shadowRoot?.querySelector(
+      'histogram-date-range',
+    ) as HistogramDateRange;
+
+    expect(histogram, 'histogram exists').to.exist;
+  });
+
+  it('uses date: query clause for YYYY-MM date ranges', async () => {
+    const searchService = new MockSearchService();
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .analyticsHandler=${mockAnalyticsHandler}
+        .suppressPlaceholders=${true}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'months';
+    el.searchType = SearchType.TV;
+    el.showHistogramDatePicker = true;
+    await el.updateComplete;
+
+    const facets = el.shadowRoot?.querySelector(
+      'collection-facets',
+    ) as CollectionFacets;
+    await facets?.updateComplete;
+
+    await nextTick();
+
+    const histogram = facets?.shadowRoot?.querySelector(
+      'histogram-date-range',
+    ) as HistogramDateRange;
+
+    expect(histogram, 'histogram exists').to.exist;
+
+    // Enter a new min date into the date picker
+    const minDateInput = histogram.shadowRoot?.querySelector(
+      '#date-min',
+    ) as HTMLInputElement;
+
+    const pressEnterEvent = new KeyboardEvent('keyup', {
+      key: 'Enter',
+    });
+
+    minDateInput.value = '2001-02';
+    minDateInput.dispatchEvent(pressEnterEvent);
+
+    // Wait for the histogram's update delay
+    await aTimeout(histogram.updateDelay + 50);
+
+    await el.updateComplete;
+    expect(el.minSelectedDate).to.equal('2001-02');
+    expect(el.maxSelectedDate).to.equal('2002-12');
+
+    // Verify the analytics event used date: not year:
+    expect(mockAnalyticsHandler.callAction).to.equal(
+      analyticsActions.histogramChanged,
+    );
+    expect(mockAnalyticsHandler.callLabel).to.include('date:');
+    expect(mockAnalyticsHandler.callLabel).not.to.include('year:');
+  });
 });