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

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

@@ -1,85 +1,85 @@
-import {
-  css,
-  html,
-  LitElement,
-  TemplateResult,
-  CSSResultGroup,
-  nothing,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';
-import type { CollectionTitles } from '../data-source/models';
-import './facet-row';
-
-@customElement('facets-template')
-export class FacetsTemplate extends LitElement {
-  @property({ type: Object }) facetGroup?: FacetGroup;
-
-  @property({ type: Object })
-  collectionTitles?: CollectionTitles;
-
-  private facetClicked(e: CustomEvent<FacetEventDetails>) {
-    this.dispatchFacetClickEvent(e.detail);
-  }
-
-  private dispatchFacetClickEvent(detail: FacetEventDetails) {
-    const event = new CustomEvent<FacetEventDetails>('facetClick', {
-      detail,
-      composed: true,
-    });
-    this.dispatchEvent(event);
-  }
-
-  private get facetsTemplate(): TemplateResult | typeof nothing {
-    const { facetGroup } = this;
-    if (!facetGroup) return nothing;
-
-    const facetBuckets = facetGroup.buckets as FacetBucket[];
-    const isLoneBucket = facetBuckets.length === 1;
-
-    // Added data-testid for Playwright testing
-    // Using className and aria-labels is not ideal for Playwright locator
-    return html`
-      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
-        ${repeat(
-          facetBuckets,
-          bucket => `${facetGroup.key}:${bucket.key}`,
-          bucket =>
-            html`<facet-row
-              .facetType=${facetGroup.key}
-              .bucket=${bucket}
-              .collectionTitles=${this.collectionTitles}
-              ?omitHideButton=${isLoneBucket}
-              @facetClick=${this.facetClicked}
-            ></facet-row>`,
-        )}
-      </div>
-    `;
-  }
-
-  render() {
-    return html`${this.facetsTemplate}`;
-  }
-
-  static get styles(): CSSResultGroup {
-    const columnCount = css`var(--facetsColumnCount, 1)`;
-    const columnGap = css`var(--facetsColumnGap, 15px)`;
-
-    return css`
-      .facet-rows {
-        column-count: ${columnCount};
-        column-gap: ${columnGap};
-      }
-
-      a:link,
-      a:visited {
-        text-decoration: none;
-        color: var(--ia-theme-link-color, #4b64ff);
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-    `;
-  }
-}
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import type { FacetGroup, FacetBucket, FacetEventDetails } from '../models';
+import type { CollectionTitles } from '../data-source/models';
+import './facet-row';
+
+@customElement('facets-template')
+export class FacetsTemplate extends LitElement {
+  @property({ type: Object }) facetGroup?: FacetGroup;
+
+  @property({ type: Object })
+  collectionTitles?: CollectionTitles;
+
+  private facetClicked(e: CustomEvent<FacetEventDetails>) {
+    this.dispatchFacetClickEvent(e.detail);
+  }
+
+  private dispatchFacetClickEvent(detail: FacetEventDetails) {
+    const event = new CustomEvent<FacetEventDetails>('facetClick', {
+      detail,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+  }
+
+  private get facetsTemplate(): TemplateResult | typeof nothing {
+    const { facetGroup } = this;
+    if (!facetGroup) return nothing;
+
+    const facetBuckets = facetGroup.buckets as FacetBucket[];
+    const isLoneBucket = facetBuckets.length === 1;
+
+    // Added data-testid for Playwright testing
+    // Using className and aria-labels is not ideal for Playwright locator
+    return html`
+      <div class="facet-rows" data-testid="facets-on-${facetGroup.key}">
+        ${repeat(
+          facetBuckets,
+          bucket => `${facetGroup.key}:${bucket.key}`,
+          bucket =>
+            html`<facet-row
+              .facetType=${facetGroup.key}
+              .bucket=${bucket}
+              .collectionTitles=${this.collectionTitles}
+              ?omitHideButton=${isLoneBucket}
+              @facetClick=${this.facetClicked}
+            ></facet-row>`,
+        )}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`${this.facetsTemplate}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    const columnCount = css`var(--facetsColumnCount, 1)`;
+    const columnGap = css`var(--facetsColumnGap, 15px)`;
+
+    return css`
+      .facet-rows {
+        column-count: ${columnCount};
+        column-gap: ${columnGap};
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+  }
+}

package/src/data-source/collection-browser-data-source-interface.ts

@@ -71,6 +71,12 @@ export interface CollectionBrowserDataSourceInterface
    */
   readonly pageSpecifierParams: PageSpecifierParams | null;
 
+  /**
+   * The Lucene query clause corresponding to the current date range,
+   * e.g. `year:[2000 TO 2020]` or `date:[2020-01 TO 2020-12]`.
+   */
+  readonly dateRangeQueryClause: string | undefined;
+
   /**
    * A FilterMap object representing all filters applied to the current search,
    * including any facets, letter filters, and date ranges.

package/src/data-source/collection-browser-data-source.ts

@@ -33,6 +33,7 @@ import type { CollectionBrowserDataSourceInterface } from './collection-browser-
 import type { CollectionBrowserSearchInterface } from './collection-browser-query-state';
 import { sha1 } from '../utils/sha1';
 import { mergeSelectedFacets } from '../utils/facet-utils';
+import { dateFilterField } from '../utils/date-filter-field';
 
 export class CollectionBrowserDataSource
   implements CollectionBrowserDataSourceInterface
@@ -746,7 +747,10 @@ export class CollectionBrowserDataSource
       selectedCreatorFilter,
     } = this.host;
 
-    const dateField = this.host.searchType === SearchType.TV ? 'date' : 'year';
+    const dateField = dateFilterField(
+      this.host.minSelectedDate,
+      this.host.maxSelectedDate,
+    );
 
     if (minSelectedDate) {
       builder.addFilter(
@@ -901,12 +905,16 @@ export class CollectionBrowserDataSource
     return this.joinFacetClauses(facetClauses)?.trim();
   }
 
-  private get dateRangeQueryClause(): string | undefined {
+  get dateRangeQueryClause(): string | undefined {
     if (!this.host.minSelectedDate || !this.host.maxSelectedDate) {
       return undefined;
     }
 
-    return `year:[${this.host.minSelectedDate} TO ${this.host.maxSelectedDate}]`;
+    const dateField = dateFilterField(
+      this.host.minSelectedDate,
+      this.host.maxSelectedDate,
+    );
+    return `${dateField}:[${this.host.minSelectedDate} TO ${this.host.maxSelectedDate}]`;
   }
 
   private get sortFilterQueries(): string {
@@ -1069,10 +1077,11 @@ export class CollectionBrowserDataSource
       success.response;
     this.aggregations = aggregations;
 
-    this.histogramAggregation =
-      this.host.searchType === SearchType.TV
-        ? aggregations?.date_histogram
-        : aggregations?.year_histogram;
+    const useDateHistogram =
+      this.host.searchType === SearchType.TV || this.host.isTVCollection;
+    this.histogramAggregation = useDateHistogram
+      ? (aggregations?.date_histogram ?? aggregations?.year_histogram)
+      : aggregations?.year_histogram;
 
     if (collectionTitles) {
       for (const [id, title] of Object.entries(collectionTitles)) {

package/src/restoration-state-handler.ts

@@ -14,6 +14,7 @@ import {
   tvClipURLParamsToFilters,
 } from './models';
 import { arrayEquals } from './utils/array-equals';
+import { dateFilterField } from './utils/date-filter-field';
 
 export interface RestorationState {
   displayMode?: CollectionDisplayMode;
@@ -190,11 +191,10 @@ export class RestorationStateHandler
       }
     }
 
-    const dateField =
-      state.minSelectedDate?.includes('-') ||
-      state.maxSelectedDate?.includes('-')
-        ? 'date'
-        : 'year';
+    const dateField = dateFilterField(
+      state.minSelectedDate,
+      state.maxSelectedDate,
+    );
 
     if (state.minSelectedDate && state.maxSelectedDate) {
       newParams.append(

package/src/styles/tile-action-styles.ts

@@ -1,59 +1,59 @@
-import { css } from 'lit';
-
-/**
- * Shared styles for tile action buttons rendered in grid, list-detail, and
- * list-compact display modes. Layout positioning is handled by each tile
- * component; these styles cover only the button appearance and the row
- * container's default flex behavior.
- *
- * Customizable via CSS custom properties:
- *  - `--tileActionColor` (defaults to --primaryErrorCTAFill, then #d9534f)
- *  - `--tileActionBg` (default: #fff)
- *  - `--tileActionBorderColor` (defaults to --primaryErrorCTAFill, then #d9534f)
- *  - `--tileActionHoverBg` (defaults to --primaryErrorCTAFillRGB at 20% alpha)
- *  - `--tileActionHoverColor` (defaults to --tileActionColor)
- */
-export const tileActionStyles = css`
-  .tile-actions {
-    flex-shrink: 0;
-    display: flex;
-    gap: var(--tileActionGap, 0);
-  }
-
-  .tile-action-btn {
-    flex: 1;
-    padding: 6px 5px;
-    border: 2px solid
-      var(--tileActionBorderColor, var(--primaryErrorCTAFill, #d9534f));
-    border-radius: var(--tileActionBorderRadius, 0);
-    /* Inherit from the surrounding tile rather than the UA default for <button> */
-    font-family: inherit;
-    font-size: 1.2rem;
-    font-weight: bold;
-    cursor: pointer;
-    color: var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f));
-    background: var(--tileActionBg, #fff);
-    transition:
-      background 0.15s,
-      color 0.15s;
-  }
-
-  /*
-   * When buttons are flush against each other (no gap), overlap their shared
-   * edge by 1px so adjacent borders don't double up.
-   */
-  .tile-action-btn + .tile-action-btn {
-    margin-left: -1px;
-  }
-
-  .tile-action-btn:hover {
-    background: var(
-      --tileActionHoverBg,
-      rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.2)
-    );
-    color: var(
-      --tileActionHoverColor,
-      var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f))
-    );
-  }
-`;
+import { css } from 'lit';
+
+/**
+ * Shared styles for tile action buttons rendered in grid, list-detail, and
+ * list-compact display modes. Layout positioning is handled by each tile
+ * component; these styles cover only the button appearance and the row
+ * container's default flex behavior.
+ *
+ * Customizable via CSS custom properties:
+ *  - `--tileActionColor` (defaults to --primaryErrorCTAFill, then #d9534f)
+ *  - `--tileActionBg` (default: #fff)
+ *  - `--tileActionBorderColor` (defaults to --primaryErrorCTAFill, then #d9534f)
+ *  - `--tileActionHoverBg` (defaults to --primaryErrorCTAFillRGB at 20% alpha)
+ *  - `--tileActionHoverColor` (defaults to --tileActionColor)
+ */
+export const tileActionStyles = css`
+  .tile-actions {
+    flex-shrink: 0;
+    display: flex;
+    gap: var(--tileActionGap, 0);
+  }
+
+  .tile-action-btn {
+    flex: 1;
+    padding: 6px 5px;
+    border: 2px solid
+      var(--tileActionBorderColor, var(--primaryErrorCTAFill, #d9534f));
+    border-radius: var(--tileActionBorderRadius, 0);
+    /* Inherit from the surrounding tile rather than the UA default for <button> */
+    font-family: inherit;
+    font-size: 1.2rem;
+    font-weight: bold;
+    cursor: pointer;
+    color: var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f));
+    background: var(--tileActionBg, #fff);
+    transition:
+      background 0.15s,
+      color 0.15s;
+  }
+
+  /*
+   * When buttons are flush against each other (no gap), overlap their shared
+   * edge by 1px so adjacent borders don't double up.
+   */
+  .tile-action-btn + .tile-action-btn {
+    margin-left: -1px;
+  }
+
+  .tile-action-btn:hover {
+    background: var(
+      --tileActionHoverBg,
+      rgba(var(--primaryErrorCTAFillRGB, 229, 28, 38), 0.2)
+    );
+    color: var(
+      --tileActionHoverColor,
+      var(--tileActionColor, var(--primaryErrorCTAFill, #d9534f))
+    );
+  }
+`;

package/src/tiles/base-tile-component.ts

@@ -1,124 +1,124 @@
-import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileDisplayValueProvider } from './tile-display-value-provider';
-import type { TileModel } from '../models';
-import { DateFormat, formatDate } from '../utils/format-date';
-import type { TileAction } from './models';
-
-export abstract class BaseTileComponent extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
-  /** Action buttons to display on this tile (rendered by subclasses) */
-  @property({ type: Array }) tileActions: TileAction[] = [];
-
-  @property({ type: Number }) currentWidth?: number;
-
-  @property({ type: Number }) currentHeight?: number;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: String }) collectionPagePath?: string;
-
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
-  @property({ type: Object }) defaultSortParam: SortParam | null = null;
-
-  @property({ type: String }) creatorFilter?: string;
-
-  @property({ type: Number }) mobileBreakpoint?: number;
-
-  @property({ type: Boolean }) loggedIn = false;
-
-  @property({ type: Boolean }) suppressBlurring = false;
-
-  @property({ type: Boolean }) useLocalTime = false;
-
-  protected displayValueProvider = new TileDisplayValueProvider();
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
-    if (
-      changed.has('model') ||
-      changed.has('baseNavigationUrl') ||
-      changed.has('collectionPagePath') ||
-      changed.has('sortParam') ||
-      changed.has('defaultSortParam') ||
-      changed.has('creatorFilter')
-    ) {
-      this.displayValueProvider = new TileDisplayValueProvider({
-        model: this.model,
-        baseNavigationUrl: this.baseNavigationUrl,
-        collectionPagePath: this.collectionPagePath,
-        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
-        creatorFilter: this.creatorFilter,
-      });
-    }
-  }
-
-  /**
-   * The formatted date string for given date and format type, taking into
-   * account whether this tile component should be using local time or UTC.
-   */
-  protected getFormattedDate(date?: Date, format?: DateFormat): string {
-    const { useLocalTime } = this;
-    return formatDate(date, format, { useLocalTime });
-  }
-
-  /**
-   * Renders the action buttons configured for this tile, or `nothing` if
-   * there are none. Optional `extraClass` is appended to the container's
-   * class list so subclasses can target their own layout tweaks.
-   */
-  protected renderTileActions(
-    extraClass: string = '',
-  ): TemplateResult | typeof nothing {
-    if (!this.tileActions.length) return nothing;
-
-    const containerClasses = classMap({
-      'tile-actions': true,
-      ...(extraClass && { [extraClass]: true }),
-    });
-
-    return html`
-      <div class=${containerClasses}>
-        ${this.tileActions.map(
-          action => html`
-            <button
-              class="tile-action-btn"
-              @click=${(e: Event) => this.handleTileActionClick(e, action)}
-            >
-              ${action.label}
-            </button>
-          `,
-        )}
-      </div>
-    `;
-  }
-
-  /**
-   * Click handler for tile action buttons. Stops propagation so the click
-   * doesn't activate a wrapping tile link, and dispatches a
-   * `tileActionClicked` event (bubbling + composed) carrying the action ID
-   * and the tile model.
-   */
-  protected handleTileActionClick(e: Event, action: TileAction): void {
-    e.preventDefault();
-    e.stopPropagation();
-    // Pre-set the hover pane controller's clicking flag so that focus
-    // restoration after a consumer-opened modal won't trigger the hover pane.
-    this.dispatchEvent(
-      new PointerEvent('pointerdown', { bubbles: true, composed: true }),
-    );
-    this.dispatchEvent(
-      new CustomEvent('tileActionClicked', {
-        detail: { actionId: action.id, model: this.model },
-        bubbles: true,
-        composed: true,
-      }),
-    );
-  }
-}
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import type { SortParam } from '@internetarchive/search-service';
+import { TileDisplayValueProvider } from './tile-display-value-provider';
+import type { TileModel } from '../models';
+import { DateFormat, formatDate } from '../utils/format-date';
+import type { TileAction } from './models';
+
+export abstract class BaseTileComponent extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  /** Action buttons to display on this tile (rendered by subclasses) */
+  @property({ type: Array }) tileActions: TileAction[] = [];
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Number }) currentHeight?: number;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: String }) collectionPagePath?: string;
+
+  @property({ type: Object }) sortParam: SortParam | null = null;
+
+  @property({ type: Object }) defaultSortParam: SortParam | null = null;
+
+  @property({ type: String }) creatorFilter?: string;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
+
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) suppressBlurring = false;
+
+  @property({ type: Boolean }) useLocalTime = false;
+
+  protected displayValueProvider = new TileDisplayValueProvider();
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
+    if (
+      changed.has('model') ||
+      changed.has('baseNavigationUrl') ||
+      changed.has('collectionPagePath') ||
+      changed.has('sortParam') ||
+      changed.has('defaultSortParam') ||
+      changed.has('creatorFilter')
+    ) {
+      this.displayValueProvider = new TileDisplayValueProvider({
+        model: this.model,
+        baseNavigationUrl: this.baseNavigationUrl,
+        collectionPagePath: this.collectionPagePath,
+        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
+        creatorFilter: this.creatorFilter,
+      });
+    }
+  }
+
+  /**
+   * The formatted date string for given date and format type, taking into
+   * account whether this tile component should be using local time or UTC.
+   */
+  protected getFormattedDate(date?: Date, format?: DateFormat): string {
+    const { useLocalTime } = this;
+    return formatDate(date, format, { useLocalTime });
+  }
+
+  /**
+   * Renders the action buttons configured for this tile, or `nothing` if
+   * there are none. Optional `extraClass` is appended to the container's
+   * class list so subclasses can target their own layout tweaks.
+   */
+  protected renderTileActions(
+    extraClass: string = '',
+  ): TemplateResult | typeof nothing {
+    if (!this.tileActions.length) return nothing;
+
+    const containerClasses = classMap({
+      'tile-actions': true,
+      ...(extraClass && { [extraClass]: true }),
+    });
+
+    return html`
+      <div class=${containerClasses}>
+        ${this.tileActions.map(
+          action => html`
+            <button
+              class="tile-action-btn"
+              @click=${(e: Event) => this.handleTileActionClick(e, action)}
+            >
+              ${action.label}
+            </button>
+          `,
+        )}
+      </div>
+    `;
+  }
+
+  /**
+   * Click handler for tile action buttons. Stops propagation so the click
+   * doesn't activate a wrapping tile link, and dispatches a
+   * `tileActionClicked` event (bubbling + composed) carrying the action ID
+   * and the tile model.
+   */
+  protected handleTileActionClick(e: Event, action: TileAction): void {
+    e.preventDefault();
+    e.stopPropagation();
+    // Pre-set the hover pane controller's clicking flag so that focus
+    // restoration after a consumer-opened modal won't trigger the hover pane.
+    this.dispatchEvent(
+      new PointerEvent('pointerdown', { bubbles: true, composed: true }),
+    );
+    this.dispatchEvent(
+      new CustomEvent('tileActionClicked', {
+        detail: { actionId: action.id, model: this.model },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}