@internetarchive/collection-browser 2.15.1-alpha-webdev7667.3 → 2.16.1-webdev-7558.0

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

@@ -114,13 +114,18 @@ export class CollectionBrowserDataSource
   /**
    * @inheritdoc
    */
-  yearHistogramAggregation?: Aggregation;
+  histogramAggregation?: Aggregation;
 
   /**
    * @inheritdoc
    */
   collectionTitles = new Map<string, string>();
 
+  /**
+   * @inheritdoc
+   */
+  tvChannelAliases = new Map<string, string>();
+
   /**
    * @inheritdoc
    */
@@ -234,7 +239,7 @@ export class CollectionBrowserDataSource
     log('Resetting CB data source');
     this.pages = {};
     this.aggregations = {};
-    this.yearHistogramAggregation = undefined;
+    this.histogramAggregation = undefined;
     this.pageElements = undefined;
     this.parentCollections = [];
     this.previousQueryKey = '';
@@ -700,16 +705,18 @@ export class CollectionBrowserDataSource
       selectedCreatorFilter,
     } = this.host;
 
+    const dateField = this.host.searchType === SearchType.TV ? 'date' : 'year';
+
     if (minSelectedDate) {
       builder.addFilter(
-        'year',
+        dateField,
         minSelectedDate,
         FilterConstraint.GREATER_OR_EQUAL,
       );
     }
     if (maxSelectedDate) {
       builder.addFilter(
-        'year',
+        dateField,
         maxSelectedDate,
         FilterConstraint.LESS_OR_EQUAL,
       );
@@ -1029,17 +1036,25 @@ export class CollectionBrowserDataSource
       return;
     }
 
-    const { aggregations, collectionTitles } = success.response;
+    const { aggregations, collectionTitles, tvChannelAliases } =
+      success.response;
     this.aggregations = aggregations;
 
+    this.histogramAggregation =
+      this.host.searchType === SearchType.TV
+        ? aggregations?.date_histogram
+        : aggregations?.year_histogram;
+
     if (collectionTitles) {
       for (const [id, title] of Object.entries(collectionTitles)) {
         this.collectionTitles.set(id, title);
       }
     }
-
-    this.yearHistogramAggregation =
-      success?.response?.aggregations?.year_histogram;
+    if (tvChannelAliases) {
+      for (const [channel, network] of Object.entries(tvChannelAliases)) {
+        this.tvChannelAliases.set(channel, network);
+      }
+    }
 
     this.setFacetsLoading(false);
     this.requestHostUpdate();
@@ -1187,7 +1202,7 @@ export class CollectionBrowserDataSource
       this.pageElements = success.response.pageElements;
     }
 
-    const { results, collectionTitles } = success.response;
+    const { results, collectionTitles, tvChannelAliases } = success.response;
     if (results && results.length > 0) {
       // Load any collection titles present on the response into the cache,
       // or queue up preload fetches for them if none were present.
@@ -1203,6 +1218,12 @@ export class CollectionBrowserDataSource
         }
       }
 
+      if (tvChannelAliases) {
+        for (const [channel, network] of Object.entries(tvChannelAliases)) {
+          this.tvChannelAliases.set(channel, network);
+        }
+      }
+
       // Update the data source for each returned page.
       // For loans and web archives, we must account for receiving more pages than we asked for.
       const isUnpagedElement = ['lending', 'web_archives'].includes(

package/src/data-source/models.ts

@@ -8,6 +8,11 @@ import type {
  */
 export type CollectionTitles = Map<string, string>;
 
+/**
+ * A Map from channel names to their corresponding, more human-readable network name.
+ */
+export type TVChannelAliases = Map<string, string>;
+
 /**
  * The subset of search service params that uniquely specify the type of results
  * that are sought by an instance of collection browser.

package/src/expanded-date-picker.ts

@@ -1,13 +1,17 @@
 import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { msg } from '@lit/localize';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import { BinSnappingInterval } from '@internetarchive/histogram-date-range';
 import {
   analyticsActions,
   analyticsCategories,
 } from './utils/analytics-events';
 
+import '@internetarchive/histogram-date-range';
+
 @customElement('expanded-date-picker')
 export class ExpandedDatePicker extends LitElement {
   @property({ type: String }) minDate?: string;
@@ -22,6 +26,10 @@ export class ExpandedDatePicker extends LitElement {
 
   @property({ type: String }) dateFormat: string = 'YYYY';
 
+  @property({ type: String }) tooltipDateFormat?: string;
+
+  @property({ type: String }) binSnapping?: BinSnappingInterval;
+
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
 
@@ -38,6 +46,8 @@ export class ExpandedDatePicker extends LitElement {
           .minSelectedDate=${this.minSelectedDate ?? this.minDate}
           .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}
           .dateFormat=${this.dateFormat}
+          tooltipDateFormat=${ifDefined(this.tooltipDateFormat)}
+          binSnapping=${ifDefined(this.binSnapping)}
           .updateDelay=${0}
           updateWhileFocused
           missingDataMessage="..."

package/src/models.ts

@@ -750,42 +750,6 @@ export const valueFacetSort: Record<FacetOption, AggregationSortType> = {
   sponsor: AggregationSortType.ALPHABETICAL,
 };
 
-/**
- * Extra parenthesized labels to show next to certain TV channel facets
- *
- * TODO: This is only needed until we can receive the appropriate mapping via PPS,
- * and can be removed/replaced once that is set up.
- */
-export const tvChannelFacetLabels: Record<string, string> = Object.fromEntries(
-  // prettier-ignore
-  Object.entries({
-    'Al Jazeera'     : ['ALJAZAM', 'ALJAZ'],
-    'Bloomberg'      : ['BLOOMBERG'],
-    'BBC'            : ['BBC', 'BBC1', 'BBC2'],
-    'BBC America'    : ['BBCAMERICA'],
-    'BBC News'       : ['BBCNEWS'],
-    'GB News'        : ['GBN'],
-    'BET'            : ['BETW'],
-    'CNBC'           : ['CNBC'],
-    'CNN'            : ['CNNW', 'CNN'],
-    'Comedy Central' : ['COM', 'COMW'],
-    'CSPAN'          : ['CSPAN', 'CSPAN2', 'CSPAN3'],
-    'Current'        : ['CURRENT'],
-    'Deutsche Welle' : ['DW'],
-    'France 24'      : ['FRANCE24'],
-    'FOX Business'   : ['FBC'],
-    'FOX News'       : ['FOXNEWSW', 'FOXNEWS'],
-    'LINKTV'         : ['LINKTV'],
-    'MSNBC'          : ['MSNBCW', 'MSNBC'],
-    'NHK World'      : ['NHK'],
-    'RT'             : ['RT'],
-    'Sky News'       : ['SKY'],
-  }).reduce(
-    (acc, [label, channels]) => acc.concat(channels.map(ch => [ch, label])),
-    [] as [string, string][],
-  ),
-);
-
 export type LendingFacetKey =
   | 'is_lendable'
   | 'is_borrowable'

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

@@ -27,8 +27,6 @@ export abstract class BaseTileComponent extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
-  @property({ type: Boolean }) suppressBlurring = false;
-
   protected displayValueProvider = new TileDisplayValueProvider();
 
   protected willUpdate(changed: PropertyValues<this>) {

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

@@ -21,7 +21,6 @@ export class AccountTile extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   @property({ type: Boolean }) showInfoButton = false;
@@ -47,7 +46,6 @@ export class AccountTile extends BaseTileComponent {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     `;

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

@@ -21,7 +21,6 @@ export class CollectionTile extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   @property({ type: Boolean }) showInfoButton = false;
@@ -47,7 +46,6 @@ export class CollectionTile extends BaseTileComponent {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     `;

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

@@ -33,7 +33,6 @@ export class ItemTile extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   @property({ type: Boolean }) showInfoButton = false;
@@ -99,7 +98,6 @@ export class ItemTile extends BaseTileComponent {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.suppressBlurring}
         .isCompactTile=${false}
         .isListTile=${false}
         .viewSize=${'grid'}

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

@@ -18,7 +18,6 @@ export class SearchTile extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   @property({ type: Boolean }) showInfoButton = false;
@@ -41,7 +40,6 @@ export class SearchTile extends BaseTileComponent {
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
         .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     `;

package/src/tiles/hover/hover-pane-controller.ts

@@ -16,7 +16,6 @@ export interface HoverPaneProperties {
   baseNavigationUrl?: string;
   baseImageUrl?: string;
   loggedIn: boolean;
-  suppressBlurring: boolean;
   sortParam: SortParam | null;
   collectionTitles?: CollectionTitles;
 }
@@ -190,7 +189,6 @@ export class HoverPaneController implements HoverPaneControllerInterface {
             .baseNavigationUrl=${this.hoverPaneProps?.baseNavigationUrl}
             .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}
             .loggedIn=${this.hoverPaneProps?.loggedIn}
-            .suppressBlurring=${this.hoverPaneProps?.suppressBlurring}
             .sortParam=${this.hoverPaneProps?.sortParam}
             .collectionTitles=${this.hoverPaneProps?.collectionTitles}
             .mobileBreakpoint=${this.mobileBreakpoint}
@@ -308,6 +306,9 @@ export class HoverPaneController implements HoverPaneControllerInterface {
       }
     }
 
+    left += window.scrollX;
+    top += window.scrollY;
+
     return { left, top };
   }
 
@@ -467,6 +468,10 @@ export class HoverPaneController implements HoverPaneControllerInterface {
     // Wait for the state update to render the hover pane
     await this.host.updateComplete;
 
+    // Ensure the hover pane element is still in the document before showing,
+    // as it might have been removed by the previous update.
+    if (!this.hoverPane?.isConnected) return;
+
     this.hoverPane?.showPopover?.();
     await new Promise(resolve => {
       // Pane sizes aren't accurate until next frame

package/src/tiles/hover/tile-hover-pane.ts

@@ -22,8 +22,6 @@ export class TileHoverPane extends LitElement {
 
   @property({ type: Boolean }) loggedIn: boolean = false;
 
-  @property({ type: Boolean }) suppressBlurring: boolean = false;
-
   @property({ type: Object }) sortParam?: SortParam;
 
   @property({ type: Number }) mobileBreakpoint?: number;
@@ -43,7 +41,6 @@ export class TileHoverPane extends LitElement {
             .baseNavigationUrl=${this.baseNavigationUrl}
             .baseImageUrl=${this.baseImageUrl}
             .loggedIn=${this.loggedIn}
-            .suppressBlurring=${this.suppressBlurring}
             .sortParam=${this.sortParam}
             .collectionTitles=${this.collectionTitles}
             .mobileBreakpoint=${this.mobileBreakpoint}

package/src/tiles/image-block.ts

@@ -17,8 +17,6 @@ export class ImageBlock extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
-  @property({ type: Boolean }) suppressBlurring = false;
-
   @property({ type: Object }) model?: TileModel;
 
   @property({ type: String }) viewSize: string = 'desktop';
@@ -34,7 +32,6 @@ export class ImageBlock extends LitElement {
           .isListTile=${this.isListTile}
           .isCompactTile=${this.isCompactTile}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
           style="--imgHeight: 100%; --imgWidth: 100%"
         >
         </item-image>
@@ -81,8 +78,6 @@ export class ImageBlock extends LitElement {
   }
 
   private get overlayType(): TileOverlayType | undefined {
-    if (this.suppressBlurring) return undefined;
-
     // Prioritize showing the login-required overlay if needed.
     // Otherwise, if a content warning is required, show that overlay instead.
     // If neither flag is present, no overlay should be shown.

package/src/tiles/item-image.ts

@@ -22,8 +22,6 @@ export class ItemImage extends LitElement {
 
   @property({ type: Boolean }) loggedIn = false;
 
-  @property({ type: Boolean }) suppressBlurring = false;
-
   @state() private isWaveform = false;
 
   @state() private isNotFound = false;
@@ -113,14 +111,12 @@ export class ItemImage extends LitElement {
   }
 
   private get itemImageClass(): ClassInfo {
-    const toBlur =
-      !this.suppressBlurring &&
-      !!(this.model?.contentWarning || this.model?.loginRequired);
+    const toBlur = this.model?.contentWarning || this.model?.loginRequired;
 
     return {
       contain: !this.isCompactTile && !this.isWaveform,
       cover: this.isCompactTile,
-      blur: toBlur,
+      blur: toBlur || false,
       waveform: this.isWaveform,
       'account-image': this.isAccountImage, // for account tile image
       'collection-image': this.model?.mediatype === 'collection', // for collection tile image

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

@@ -17,7 +17,6 @@ export class TileListCompactHeader extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   render() {

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

@@ -26,7 +26,6 @@ export class TileListCompact extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   render() {
@@ -39,7 +38,6 @@ export class TileListCompact extends BaseTileComponent {
           .isListTile=${true}
           .viewSize=${this.classSize}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
         >
         </image-block>
         <a href=${this.href} id="title"

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

@@ -36,7 +36,6 @@ export class TileList extends BaseTileComponent {
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressBlurring = false;
    */
 
   @property({ type: Object })
@@ -102,7 +101,6 @@ export class TileList extends BaseTileComponent {
         .isListTile=${true}
         .viewSize=${this.classSize}
         .loggedIn=${this.loggedIn}
-        .suppressBlurring=${this.suppressBlurring}
       >
       </image-block>
     </a> `;

package/src/tiles/tile-dispatcher.ts

@@ -45,7 +45,6 @@ export class TileDispatcher
    *  - creatorFilter?: string;
    *  - mobileBreakpoint?: number;
    *  - loggedIn = false;
-   *  - suppressTileBlurring = false;
    */
 
   @property({ type: String }) tileDisplayMode?: TileDisplayMode;
@@ -303,7 +302,6 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -317,7 +315,6 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${!this.isHoverEnabled}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -331,7 +328,6 @@ export class TileDispatcher
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
               .creatorFilter=${creatorFilter}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?showInfoButton=${false}
               @infoButtonPressed=${this.tileInfoButtonPressed}
@@ -348,7 +344,6 @@ export class TileDispatcher
               .defaultSortParam=${defaultSortParam}
               .creatorFilter=${creatorFilter}
               .loggedIn=${this.loggedIn}
-              .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               ?useSimpleLayout=${this.useSimpleLayout}
               ?showTvClips=${this.showTvClips}
@@ -370,7 +365,6 @@ export class TileDispatcher
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
         >
         </tile-list-compact>`;
       case 'list-detail':
@@ -387,7 +381,6 @@ export class TileDispatcher
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${this.suppressBlurring}
         >
         </tile-list>`;
       default:

package/test/collection-browser.test.ts

@@ -744,6 +744,22 @@ describe('Collection Browser', () => {
     );
   });
 
+  it('adds tv channel aliases to cache when present on response', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'channel-aliases';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    expect(el.dataSource.tvChannelAliases.get('foo')).to.equal('Foo Network');
+    expect(el.dataSource.tvChannelAliases.get('bar')).to.equal('Bar Network');
+  });
+
   it('keeps search results from fetch if no change to query or sort param', async () => {
     const resultsSpy = sinon.spy();
     const searchService = new MockSearchService({
@@ -1101,7 +1117,58 @@ describe('Collection Browser', () => {
     // date query correctly.
     await el.updateComplete;
     expect(el.minSelectedDate).to.equal('1960');
-    expect(el.maxSelectedDate).to.equal('2000');
+    expect(el.maxSelectedDate).to.equal('2009');
+  });
+
+  it('sets date range query when monthly date picker selection changed', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .suppressPlaceholders=${true}
+      >
+      </collection-browser>`,
+    );
+
+    el.baseQuery = 'months'; // Includes date_histogram aggregation in response
+    el.searchType = SearchType.TV;
+    el.showHistogramDatePicker = true;
+    await el.updateComplete;
+
+    const facets = el.shadowRoot?.querySelector(
+      'collection-facets',
+    ) as CollectionFacets;
+    await facets?.updateComplete;
+
+    // Wait for the date picker to be rendered (which may take until the next tick)
+    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);
+
+    // Ensure that the histogram change propagated to the collection browser's
+    // date query correctly.
+    await el.updateComplete;
+    expect(el.minSelectedDate).to.equal('2001-02');
+    expect(el.maxSelectedDate).to.equal('2002-12');
   });
 
   it('emits event when results start and end loading', async () => {

package/test/collection-facets.test.ts

@@ -41,8 +41,13 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = true;
+    el.histogramAggregationLoading = true;
     el.showHistogramDatePicker = true;
+    el.histogramAggregation = new Aggregation({
+      buckets: [1, 2, 3],
+      first_bucket_key: 0,
+      last_bucket_key: 2,
+    });
     await el.updateComplete;
 
     const histogramLoader = el.shadowRoot?.querySelector(
@@ -56,8 +61,13 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = true;
+    el.histogramAggregationLoading = true;
     el.showHistogramDatePicker = false;
+    el.histogramAggregation = new Aggregation({
+      buckets: [1, 2, 3],
+      first_bucket_key: 0,
+      last_bucket_key: 2,
+    });
     await el.updateComplete;
 
     const histogramLoader = el.shadowRoot?.querySelector(
@@ -71,9 +81,9 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -89,9 +99,9 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = false;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -107,10 +117,10 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -126,10 +136,10 @@ describe('Collection Facets', () => {
       html`<collection-facets></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = false;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -151,10 +161,10 @@ describe('Collection Facets', () => {
       ></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,
@@ -868,10 +878,10 @@ describe('Collection Facets', () => {
       ></collection-facets>`,
     );
 
-    el.fullYearAggregationLoading = false;
+    el.histogramAggregationLoading = false;
     el.showHistogramDatePicker = true;
     el.allowExpandingDatePicker = true;
-    el.fullYearsHistogramAggregation = new Aggregation({
+    el.histogramAggregation = new Aggregation({
       buckets: [1, 2, 3],
       first_bucket_key: 0,
       last_bucket_key: 2,