WEBDEV-7737 Support month resolution in date picker (#476)

* Upgrade search service version

* Generalize handling of histogram aggregations

* Upgrade to alpha date picker

* Use correct bin snapping & tooltips on date picker

* Update unit tests

* Restore correct loading behavior for histogram

* Use date instead of year in filter map

* Upgrade off alpha date picker version

Author: latonv

package.json

@@ -26,13 +26,13 @@
     "@internetarchive/analytics-manager": "^0.1.4",
     "@internetarchive/feature-feedback": "^1.0.0",
     "@internetarchive/field-parsers": "^1.0.0",
-    "@internetarchive/histogram-date-range": "^1.2.1",
+    "@internetarchive/histogram-date-range": "^1.3.0",
     "@internetarchive/ia-activity-indicator": "^0.0.6",
     "@internetarchive/ia-dropdown": "^1.3.10",
     "@internetarchive/iaux-item-metadata": "^1.0.5",
     "@internetarchive/infinite-scroller": "^1.0.1",
     "@internetarchive/modal-manager": "^2.0.1",
-    "@internetarchive/search-service": "^2.3.2",
+    "@internetarchive/search-service": "^2.4.0",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.12.2",
     "dompurify": "^3.2.4",

src/collection-browser.ts

@@ -1138,8 +1138,7 @@ export class CollectionBrowser
         .resizeObserver=${this.resizeObserver}
         .searchType=${this.searchType}
         .aggregations=${this.dataSource.aggregations}
-        .fullYearsHistogramAggregation=${this.dataSource
-          .yearHistogramAggregation}
+        .histogramAggregation=${this.dataSource.histogramAggregation}
         .minSelectedDate=${this.minSelectedDate}
         .maxSelectedDate=${this.maxSelectedDate}
         .selectedFacets=${this.selectedFacets}
@@ -1158,7 +1157,7 @@ export class CollectionBrowser
         .isTvSearch=${shouldUseTvInterface}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetsLoading}
-        ?fullYearAggregationLoading=${this.facetsLoading}
+        ?histogramAggregationLoading=${this.facetsLoading}
         ?suppressMediatypeFacets=${this.suppressMediatypeFacets}
         @facetClick=${this.facetClickHandler}
         @facetsChanged=${this.facetsChanged}

src/collection-facets.ts

@@ -29,6 +29,7 @@ import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-f
 import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
+import type { BinSnappingInterval } from '@internetarchive/histogram-date-range';
 import chevronIcon from './assets/img/icons/chevron';
 import expandIcon from './assets/img/icons/expand';
 import {
@@ -50,10 +51,6 @@ import type {
   CollectionTitles,
   PageSpecifierParams,
 } from './data-source/models';
-import './collection-facets/more-facets-content';
-import './collection-facets/facets-template';
-import './collection-facets/facet-tombstone-row';
-import './expanded-date-picker';
 import {
   analyticsActions,
   analyticsCategories,
@@ -65,6 +62,12 @@ import {
   updateSelectedFacetBucket,
 } from './utils/facet-utils';
 
+import '@internetarchive/histogram-date-range';
+import './collection-facets/more-facets-content';
+import './collection-facets/facets-template';
+import './collection-facets/facet-tombstone-row';
+import './expanded-date-picker';
+
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
   @property({ type: Object }) searchService?: SearchServiceInterface;
@@ -73,7 +76,7 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Object }) aggregations?: Record<string, Aggregation>;
 
-  @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;
+  @property({ type: Object }) histogramAggregation?: Aggregation;
 
   @property({ type: String }) minSelectedDate?: string;
 
@@ -83,7 +86,7 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Boolean }) facetsLoading = false;
 
-  @property({ type: Boolean }) fullYearAggregationLoading = false;
+  @property({ type: Boolean }) histogramAggregationLoading = false;
 
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
@@ -164,7 +167,7 @@ export class CollectionFacets extends LitElement {
     return html`
       <div id="container" class=${containerClasses}>
         ${this.showHistogramDatePicker &&
-        (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)
+        (this.histogramAggregation || this.histogramAggregationLoading)
           ? html`
               <section
                 class="facet-group"
@@ -230,15 +233,63 @@ export class CollectionFacets extends LitElement {
     });
   }
 
+  /**
+   * Properties to pass into the date-picker histogram component
+   */
+  private get histogramProps() {
+    const { histogramAggregation: aggregation } = this;
+    if (!aggregation) return undefined;
+
+    // Normalize some properties from the raw aggregation
+    const firstYear =
+      aggregation.first_bucket_year ?? aggregation.first_bucket_key;
+    const lastYear =
+      aggregation.last_bucket_year ?? aggregation.last_bucket_key;
+    if (firstYear == null || lastYear == null) return undefined; // We at least need a start/end year defined
+
+    const firstMonth = aggregation.first_bucket_month ?? 1;
+    const lastMonth = aggregation.last_bucket_month ?? 12;
+
+    const yearInterval = aggregation.interval ?? 1;
+    const monthInterval = aggregation.interval_in_months ?? 12;
+
+    const zeroPadMonth = (month: number) => month.toString().padStart(2, '0');
+
+    // Format the min/max dates appropriately
+    const minDate = this.isTvSearch
+      ? `${firstYear}-${zeroPadMonth(firstMonth)}`
+      : `${firstYear}`;
+
+    const maxDate = this.isTvSearch
+      ? `${lastYear}-${zeroPadMonth(lastMonth + monthInterval - 1)}`
+      : `${lastYear + yearInterval - 1}`;
+
+    const hasMonths = this.isTvSearch && monthInterval < 12;
+    return {
+      buckets: aggregation.buckets as number[],
+      dateFormat: this.isTvSearch ? 'YYYY-MM' : 'YYYY',
+      tooltipDateFormat: hasMonths ? 'MMM YYYY' : 'YYYY',
+      binSnapping: (hasMonths ? 'month' : 'year') as BinSnappingInterval,
+      minDate,
+      maxDate,
+    };
+  }
+
   /**
    * Opens a modal dialog containing an enlarged version of the date picker.
    */
   private showDatePickerModal(): void {
-    const { fullYearsHistogramAggregation } = this;
-    const minDate = fullYearsHistogramAggregation?.first_bucket_key;
-    const maxDate = fullYearsHistogramAggregation?.last_bucket_key;
-    const buckets = fullYearsHistogramAggregation?.buckets as number[];
-    const dateFormat = this.isTvSearch ? 'YYYY-MM' : 'YYYY';
+    const { histogramProps } = this;
+    if (!histogramProps) return;
+
+    const {
+      buckets,
+      dateFormat,
+      tooltipDateFormat,
+      binSnapping,
+      minDate,
+      maxDate,
+    } = histogramProps;
 
     // Because the modal manager does not clear its DOM content after being closed,
     // it may try to render the exact same date picker template when it is reopened.
@@ -264,6 +315,8 @@ export class CollectionFacets extends LitElement {
         .minSelectedDate=${this.minSelectedDate}
         .maxSelectedDate=${this.maxSelectedDate}
         .dateFormat=${dateFormat}
+        .tooltipDateFormat=${tooltipDateFormat}
+        .binSnapping=${binSnapping}
         .buckets=${buckets}
         .modalManager=${this.modalManager}
         .analyticsHandler=${this.analyticsHandler}
@@ -328,30 +381,42 @@ export class CollectionFacets extends LitElement {
       : nothing;
   }
 
-  private get histogramTemplate() {
-    const { fullYearsHistogramAggregation } = this;
-    const minDate = fullYearsHistogramAggregation?.first_bucket_key;
-    const maxDate = fullYearsHistogramAggregation?.last_bucket_key;
-    const dateFormat = this.isTvSearch ? 'YYYY-MM' : 'YYYY';
-    return this.fullYearAggregationLoading
-      ? html`<div class="histogram-loading-indicator">&hellip;</div>` // Ellipsis block
-      : html`
-          <histogram-date-range
-            class=${this.isTvSearch ? 'wide-inputs' : nothing}
-            .minDate=${minDate}
-            .maxDate=${maxDate}
-            .minSelectedDate=${this.minSelectedDate ?? minDate}
-            .maxSelectedDate=${this.maxSelectedDate ?? maxDate}
-            .updateDelay=${100}
-            .dateFormat=${dateFormat}
-            missingDataMessage="..."
-            .width=${this.collapsableFacets && this.contentWidth
-              ? this.contentWidth
-              : 180}
-            .bins=${fullYearsHistogramAggregation?.buckets as number[]}
-            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-          ></histogram-date-range>
-        `;
+  private get histogramTemplate(): TemplateResult | typeof nothing {
+    if (this.histogramAggregationLoading) {
+      return html` <div class="histogram-loading-indicator">&hellip;</div> `;
+    }
+
+    const { histogramProps } = this;
+    if (!histogramProps) return nothing;
+
+    const {
+      buckets,
+      dateFormat,
+      tooltipDateFormat,
+      binSnapping,
+      minDate,
+      maxDate,
+    } = histogramProps;
+
+    return html`
+      <histogram-date-range
+        class=${this.isTvSearch ? 'wide-inputs' : nothing}
+        .minDate=${minDate}
+        .maxDate=${maxDate}
+        .minSelectedDate=${this.minSelectedDate ?? minDate}
+        .maxSelectedDate=${this.maxSelectedDate ?? maxDate}
+        .updateDelay=${100}
+        .dateFormat=${dateFormat}
+        .tooltipDateFormat=${tooltipDateFormat}
+        .binSnapping=${binSnapping}
+        .bins=${buckets}
+        missingDataMessage="..."
+        .width=${this.collapsableFacets && this.contentWidth
+          ? this.contentWidth
+          : 180}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+      ></histogram-date-range>
+    `;
   }
 
   /**
@@ -533,8 +598,8 @@ export class CollectionFacets extends LitElement {
   private get aggregationFacetGroups(): FacetGroup[] {
     const facetGroups: FacetGroup[] = [];
     Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {
-      // the year_histogram data is in a different format so can't be handled here
-      if (key === 'year_histogram') return;
+      // the year_histogram and date_histogram data is in a different format so can't be handled here
+      if (['year_histogram', 'date_histogram'].includes(key)) return;
 
       const option = key as FacetOption;
       const title = facetTitles[option];

src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -193,7 +193,8 @@ export class SmartFacetBar extends LitElement {
         const agg = this.lastAggregations[key];
         if (!agg) continue;
         if (agg.buckets.length === 0) continue;
-        if (['lending', 'year_histogram'].includes(key)) continue;
+        if (['lending', 'year_histogram', 'date_histogram'].includes(key))
+          continue;
         if (typeof agg.buckets[0] === 'number') continue;
 
         if (

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

@@ -78,9 +78,9 @@ export interface CollectionBrowserDataSourceInterface
   readonly aggregations?: Record<string, Aggregation>;
 
   /**
-   * The `year_histogram` aggregation retrieved for the current search.
+   * The `year_histogram` or `date_histogram` aggregation retrieved for the current search.
    */
-  readonly yearHistogramAggregation?: Aggregation;
+  readonly histogramAggregation?: Aggregation;
 
   /**
    * A map from collection identifiers that appear on hits or aggregations for the

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

@@ -114,7 +114,7 @@ export class CollectionBrowserDataSource
   /**
    * @inheritdoc
    */
-  yearHistogramAggregation?: Aggregation;
+  histogramAggregation?: Aggregation;
 
   /**
    * @inheritdoc
@@ -234,7 +234,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 +700,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,
       );
@@ -1038,8 +1040,10 @@ export class CollectionBrowserDataSource
       }
     }
 
-    this.yearHistogramAggregation =
-      success?.response?.aggregations?.year_histogram;
+    this.histogramAggregation =
+      this.host.searchType === SearchType.TV
+        ? aggregations?.date_histogram
+        : aggregations?.year_histogram;
 
     this.setFacetsLoading(false);
     this.requestHostUpdate();

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="..."