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

package/local.archive.org.key

@@ -1,27 +1,27 @@
------BEGIN RSA PRIVATE KEY-----
-MIIEowIBAAKCAQEAqVTKNP+LMgI5l2G99RJcStCHLtZCY3LqtJCVzErvWmYJnx0I
-DbL0LrNVWZwPdzce16Nctz2BhPxVryDnPL2eKyue0ZWdFJBwfJl48d1CK/2HuQnw
-9lDHkEHe4u7doEpN3iBq6BuBf9kXDfXyodyJ2OmJnP9Atw67FtvR4GdfJN47uBi4
-pt3VJooqpPIDsagVIzHJZd6bWrDwT+938Yt7kZWgYb4fZCnGLiwDG/CRlrar+xG3
-HEG8Q24bbyiIQL2oRyiepGQx4KVy2wnLsJ561dB/FRV11NZ4QcmhVHNIGU9ylaEx
-s0yBQRND2ZuM0C4pCaJZaxVtXJMiA/Vy8Ea+ZQIDAQABAoIBAAQgUdEazQyJ61da
-BWP8b41PKYwlonaD7V47C7tvtAdy5xcegPy8eKDOs+y8FdBk4naEv5Sjhg10jK34
-0kmzoTASHwuiZrKClosivkS+jIc/5VfH+zw1WbeVM1Y6VeI7DUy1Y4WGbhBsfNhV
-PvVcx2smvbi6q5wKWtrCvomGW1YtngNBXJBPDWXysaVZdpF+6iWtw0RjWxbKEeMb
-fjZ2sxl7h1EkTXxQR9pfl9WVgl6vRRXp1o+N71M14jp5t95xCyf49YzeEuZmc1Fc
-dD77LNGcxr3kpkcQH5FdDP/spla+lR+JKb78FVqhEdPP3WcJ1qcrAstG2npAfKpj
-MD9AhsECgYEA3BddOjeK9epaGbTZRKgmIOSgGEHo8WbVHqBHhyQKAb8kFVEPn+Hl
-sq2EEQZf0ZJ/HhlVBc0Gj4/2PI8vj1Lzh+QWJnFu+XN/doOm5X62Ctz13qC5oWJp
-foQ9HXcg4GAXhm/o3KUIntLrUwoi/UW8YOSRFXS8RSJtuh1rI5P2jjECgYEAxPVP
-o/9+12Fc2ujdm8cQ1tB1Ab9Z73/vloG/xit0uMp89OqXUHEmtud/WzaIQvNxdaWi
-9/BqAG9Oml51T3cuYPxNDkSmtd2fieq9Nh17dw8zYGMk0cSYeecgvCJOrRIJnebW
-Glyt8vzBb3eD6FzhZoVNOVYareainSP1cwl5YnUCgYAsr2m0OjayeyRT983tDJ7B
-Kun+QtOCv7ghgbVEEOMfO6md0llzwq+aOXSI6Fxn9nBssgP7K4dbeoUqAoBLfzIG
-sx50K6+2YebNLymhirp3NimNS+CkjZCRqVOnOdqo85mTKAGFWtSHOpegwnwcJB59
-Jar3Sj43YygYE4T/Mjlq4QKBgQC8zUcdt2J4xl1Df6xHkuiic0tmdG6a9jHOPex+
-49NM/NYR1Ptd4kmxVXKxFjJCs6jUlQYG1NBYQFrCAcBEf8PWtqSLA+YnOh6gD4R3
-ZoWfGNQwFnoKF4HugU/Q6LYwk7TiR5B/zs30urQWzSOGT9rF8wyW5OJIR2kkZ373
-WmKgrQKBgGaw32CMejz3wBpzOAXsYJcMsVfNCMD4bJ2EbXhYuY8HB8IEEv6wqMsp
-wtXIgHJubfIiA3MlVsfaUkRdtHMHbN+Us1oynu6nByLhYlAMKpOsJFzPVHHwGB/1
-g3WtzfFk5eOoZltJBm5K41zjS7lyr1t05648pT6niy9snu6LaF94
------END RSA PRIVATE KEY-----
+-----BEGIN RSA PRIVATE KEY-----
+MIIEowIBAAKCAQEAqVTKNP+LMgI5l2G99RJcStCHLtZCY3LqtJCVzErvWmYJnx0I
+DbL0LrNVWZwPdzce16Nctz2BhPxVryDnPL2eKyue0ZWdFJBwfJl48d1CK/2HuQnw
+9lDHkEHe4u7doEpN3iBq6BuBf9kXDfXyodyJ2OmJnP9Atw67FtvR4GdfJN47uBi4
+pt3VJooqpPIDsagVIzHJZd6bWrDwT+938Yt7kZWgYb4fZCnGLiwDG/CRlrar+xG3
+HEG8Q24bbyiIQL2oRyiepGQx4KVy2wnLsJ561dB/FRV11NZ4QcmhVHNIGU9ylaEx
+s0yBQRND2ZuM0C4pCaJZaxVtXJMiA/Vy8Ea+ZQIDAQABAoIBAAQgUdEazQyJ61da
+BWP8b41PKYwlonaD7V47C7tvtAdy5xcegPy8eKDOs+y8FdBk4naEv5Sjhg10jK34
+0kmzoTASHwuiZrKClosivkS+jIc/5VfH+zw1WbeVM1Y6VeI7DUy1Y4WGbhBsfNhV
+PvVcx2smvbi6q5wKWtrCvomGW1YtngNBXJBPDWXysaVZdpF+6iWtw0RjWxbKEeMb
+fjZ2sxl7h1EkTXxQR9pfl9WVgl6vRRXp1o+N71M14jp5t95xCyf49YzeEuZmc1Fc
+dD77LNGcxr3kpkcQH5FdDP/spla+lR+JKb78FVqhEdPP3WcJ1qcrAstG2npAfKpj
+MD9AhsECgYEA3BddOjeK9epaGbTZRKgmIOSgGEHo8WbVHqBHhyQKAb8kFVEPn+Hl
+sq2EEQZf0ZJ/HhlVBc0Gj4/2PI8vj1Lzh+QWJnFu+XN/doOm5X62Ctz13qC5oWJp
+foQ9HXcg4GAXhm/o3KUIntLrUwoi/UW8YOSRFXS8RSJtuh1rI5P2jjECgYEAxPVP
+o/9+12Fc2ujdm8cQ1tB1Ab9Z73/vloG/xit0uMp89OqXUHEmtud/WzaIQvNxdaWi
+9/BqAG9Oml51T3cuYPxNDkSmtd2fieq9Nh17dw8zYGMk0cSYeecgvCJOrRIJnebW
+Glyt8vzBb3eD6FzhZoVNOVYareainSP1cwl5YnUCgYAsr2m0OjayeyRT983tDJ7B
+Kun+QtOCv7ghgbVEEOMfO6md0llzwq+aOXSI6Fxn9nBssgP7K4dbeoUqAoBLfzIG
+sx50K6+2YebNLymhirp3NimNS+CkjZCRqVOnOdqo85mTKAGFWtSHOpegwnwcJB59
+Jar3Sj43YygYE4T/Mjlq4QKBgQC8zUcdt2J4xl1Df6xHkuiic0tmdG6a9jHOPex+
+49NM/NYR1Ptd4kmxVXKxFjJCs6jUlQYG1NBYQFrCAcBEf8PWtqSLA+YnOh6gD4R3
+ZoWfGNQwFnoKF4HugU/Q6LYwk7TiR5B/zs30urQWzSOGT9rF8wyW5OJIR2kkZ373
+WmKgrQKBgGaw32CMejz3wBpzOAXsYJcMsVfNCMD4bJ2EbXhYuY8HB8IEEv6wqMsp
+wtXIgHJubfIiA3MlVsfaUkRdtHMHbN+Us1oynu6nByLhYlAMKpOsJFzPVHHwGB/1
+g3WtzfFk5eOoZltJBm5K41zjS7lyr1t05648pT6niy9snu6LaF94
+-----END RSA PRIVATE KEY-----

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.15.1-alpha-webdev7667.3",
+  "version": "2.16.1-webdev-7558.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -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.4.1-alpha-webdev7667.0",
+    "@internetarchive/search-service": "2.4.1-webdev-7558.3",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.12.2",
     "dompurify": "^3.2.4",

package/renovate.json

@@ -1,6 +1,6 @@
-{
-  "extends": [
-    "config:base",
-    ":preserveSemverRanges"
-  ]
-}
+{
+  "extends": [
+    "config:base",
+    ":preserveSemverRanges"
+  ]
+}

package/src/app-root.ts

@@ -665,6 +665,9 @@ export class AppRoot extends LitElement {
           });
           return searchResponse;
         },
+        async itemDetails(identifier: string) {
+          return SearchService.default.itemDetails(identifier);
+        },
       };
     } else {
       // Restore the default seach service
@@ -697,6 +700,9 @@ export class AppRoot extends LitElement {
           });
           return searchResponse;
         },
+        async itemDetails(identifier: string) {
+          return SearchService.default.itemDetails(identifier);
+        },
       };
     } else {
       // Restore the default seach service

package/src/collection-browser.ts

@@ -318,10 +318,6 @@ export class CollectionBrowser
 
   @state() private mobileView = false;
 
-  @state() private tileBlurPreference = true;
-
-  @state() private tileBlurOverride?: boolean;
-
   @state() private collapsibleFacetsVisible = false;
 
   @state() private contentWidth?: number;
@@ -805,7 +801,6 @@ export class CollectionBrowser
         @titleLetterChanged=${this.titleLetterSelected}
         @creatorLetterChanged=${this.creatorLetterSelected}
       >
-        ${this.tileBlurCheckboxTemplate}
         <slot name="sort-options-left" slot="sort-options-left"></slot>
         <slot name="sort-options" slot="sort-options"></slot>
         <slot name="sort-options-right" slot="sort-options-right"></slot>
@@ -813,31 +808,6 @@ export class CollectionBrowser
     `;
   }
 
-  /**
-   * Template for the Blurring toggle for admins to enable/disable blurring of
-   * sensitive content in result tiles.
-   */
-  private get tileBlurCheckboxTemplate(): TemplateResult | typeof nothing {
-    // Only show the checkbox for @archive.org users
-    if (!this.dataSource.sessionContext?.is_archive_user) return nothing;
-
-    return html`
-      <label
-        id="tile-blur-label"
-        for="tile-blur-check"
-        slot="sort-options-right"
-      >
-        ${msg('Blurring')}
-        <input
-          id="tile-blur-check"
-          type="checkbox"
-          ?checked=${this.shouldBlurTiles}
-          @change=${this.tileBlurCheckboxChanged}
-        />
-      </label>
-    `;
-  }
-
   /**
    * Template for the manage bar UI that appears atop the search results when we are
    * showing the management view. This generally replaces the sort bar when present.
@@ -931,29 +901,6 @@ export class CollectionBrowser
     this.dataSource.removeCheckedTiles();
   }
 
-  /**
-   * Handler for when the tile blurring checkbox state is toggled
-   */
-  private tileBlurCheckboxChanged(e: Event): void {
-    const { checked } = e.target as HTMLInputElement;
-    this.tileBlurOverride = checked;
-    this.infiniteScroller?.refreshAllVisibleCells();
-  }
-
-  /**
-   * Whether result tiles that contain sensitive content should be blurred.
-   * First considers the `tileBlurOverride` if set, falling back to the setting in
-   * user preferences if not.
-   */
-  private get shouldBlurTiles(): boolean {
-    const { sessionContext } = this.dataSource;
-    const userPrefs = sessionContext?.pps_relevant_user_preferences;
-    const blurringPref = userPrefs?.display__blur_moderated_content;
-    const blurringPrefState =
-      blurringPref === undefined ? undefined : blurringPref === 'on';
-    return this.tileBlurOverride ?? blurringPrefState ?? true;
-  }
-
   /**
    * Handler for when the user changes the selected sort option or direction.
    */
@@ -1191,13 +1138,13 @@ 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}
         .baseNavigationUrl=${this.baseNavigationUrl}
         .collectionTitles=${this.dataSource.collectionTitles}
+        .tvChannelAliases=${this.dataSource.tvChannelAliases}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
         .allowExpandingDatePicker=${!this.mobileView}
         .allowDatePickerMonths=${shouldUseTvInterface}
@@ -1211,7 +1158,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}
@@ -1291,7 +1238,6 @@ export class CollectionBrowser
           .defaultSortParam=${this.defaultSortParam}
           .mobileBreakpoint=${this.mobileBreakpoint}
           .loggedIn=${this.loggedIn}
-          .suppressBlurring=${!this.shouldBlurTiles}
         >
         </tile-dispatcher>
       </div>
@@ -2212,7 +2158,6 @@ export class CollectionBrowser
         .creatorFilter=${this.selectedCreatorFilter}
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
-        .suppressBlurring=${!this.shouldBlurTiles}
         .isManageView=${this.isManageView}
         ?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
         ?enableHoverPane=${true}
@@ -2605,16 +2550,6 @@ export class CollectionBrowser
           padding-top: 50px;
         }
 
-        #tile-blur-label {
-          display: flex;
-          align-items: center;
-          column-gap: 5px;
-        }
-
-        #tile-blur-check {
-          margin: 0 5px 0 0;
-        }
-
         circular-activity-indicator {
           width: 30px;
           height: 30px;

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

@@ -32,11 +32,11 @@ import {
   defaultFacetSort,
   getDefaultSelectedFacets,
   FacetEventDetails,
-  tvChannelFacetLabels,
 } from '../models';
 import type {
   CollectionTitles,
   PageSpecifierParams,
+  TVChannelAliases,
 } from '../data-source/models';
 import '@internetarchive/ia-activity-indicator';
 import './more-facets-pagination';
@@ -68,6 +68,9 @@ export class MoreFacetsContent extends LitElement {
   @property({ type: Object })
   collectionTitles?: CollectionTitles;
 
+  @property({ type: Object })
+  tvChannelAliases?: TVChannelAliases;
+
   /**
    * Maximum number of facets to show per page within the modal.
    */
@@ -287,7 +290,7 @@ export class MoreFacetsContent extends LitElement {
       bucketsWithCount.forEach(b => {
         b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
 
-        const channelLabel = tvChannelFacetLabels[b.displayText];
+        const channelLabel = this.tvChannelAliases?.get(b.displayText);
         if (channelLabel && channelLabel !== b.displayText) {
           b.extraNote = `(${channelLabel})`;
         }

package/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 (

package/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 {
@@ -44,16 +45,12 @@ import {
   suppressedCollections,
   defaultFacetSort,
   FacetEventDetails,
-  tvChannelFacetLabels,
 } from './models';
 import type {
   CollectionTitles,
   PageSpecifierParams,
+  TVChannelAliases,
 } 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;
 
@@ -134,6 +137,9 @@ export class CollectionFacets extends LitElement {
   @property({ type: Object, attribute: false })
   collectionTitles?: CollectionTitles;
 
+  @property({ type: Object, attribute: false })
+  tvChannelAliases?: TVChannelAliases;
+
   @state() openFacets: Record<FacetOption, boolean> = {
     subject: false,
     lending: false,
@@ -164,7 +170,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 +236,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 +318,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 +384,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>
+    `;
   }
 
   /**
@@ -471,7 +539,7 @@ export class CollectionFacets extends LitElement {
         bucketsWithCount.forEach(b => {
           b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
 
-          const channelLabel = tvChannelFacetLabels[b.displayText];
+          const channelLabel = this.tvChannelAliases?.get(b.displayText);
           if (channelLabel && channelLabel !== b.displayText) {
             b.extraNote = `(${channelLabel})`;
           }
@@ -533,8 +601,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];
@@ -707,6 +775,7 @@ export class CollectionFacets extends LitElement {
         .searchService=${this.searchService}
         .searchType=${this.searchType}
         .collectionTitles=${this.collectionTitles}
+        .tvChannelAliases=${this.tvChannelAliases}
         .selectedFacets=${this.selectedFacets}
         .sortedBy=${sortedBy}
         .isTvSearch=${this.isTvSearch}

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

@@ -12,7 +12,11 @@ import type {
   PrefixFilterCounts,
   TileModel,
 } from '../models';
-import type { PageSpecifierParams, CollectionTitles } from './models';
+import type {
+  PageSpecifierParams,
+  CollectionTitles,
+  TVChannelAliases,
+} from './models';
 
 export interface CollectionBrowserDataSourceInterface
   extends ReactiveController {
@@ -78,9 +82,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
@@ -88,6 +92,12 @@ export interface CollectionBrowserDataSourceInterface
    */
   readonly collectionTitles: CollectionTitles;
 
+  /**
+   * A map from TV channel names appearing in `creator` aggregations, to their
+   * more human-readable network names.
+   */
+  readonly tvChannelAliases: TVChannelAliases;
+
   /**
    * The "extra info" package provided by the PPS for collection pages, including details
    * used to populate the target collection header & About tab content.