@internetarchive/collection-browser 4.7.0 → 4.7.1-alpha-webdev9189.0

package/.claude/worktrees/WEBDEV-9127-fix-publish-dist-tag/src/collection-facets.ts

@@ -1,1013 +0,0 @@
-import {
-  css,
-  html,
-  LitElement,
-  PropertyValues,
-  nothing,
-  TemplateResult,
-} from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { map } from 'lit/directives/map.js';
-import { ref } from 'lit/directives/ref.js';
-import { msg } from '@lit/localize';
-import { classMap } from 'lit/directives/class-map.js';
-import {
-  Aggregation,
-  AggregationSortType,
-  Bucket,
-  FilterMap,
-  SearchServiceInterface,
-  SearchType,
-} from '@internetarchive/search-service';
-import '@internetarchive/histogram-date-range';
-import '@internetarchive/feature-feedback';
-import {
-  ModalConfig,
-  ModalManagerInterface,
-} from '@internetarchive/modal-manager';
-import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
-import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
-import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
-import type { SharedResizeObserverInterface } from '@internetarchive/shared-resize-observer';
-import type {
-  BarScalingOption,
-  BinSnappingInterval,
-} from '@internetarchive/histogram-date-range';
-import chevronIcon from './assets/img/icons/chevron';
-import expandIcon from './assets/img/icons/expand';
-import {
-  FacetOption,
-  SelectedFacets,
-  FacetGroup,
-  FacetBucket,
-  defaultFacetDisplayOrder,
-  facetTitles,
-  customFacetDisplayNames,
-  lendingFacetKeysVisibility,
-  LendingFacetKey,
-  suppressedCollections,
-  defaultFacetSort,
-  FacetEventDetails,
-} from './models';
-import type {
-  CollectionTitles,
-  PageSpecifierParams,
-  TVChannelAliases,
-} from './data-source/models';
-import {
-  analyticsActions,
-  analyticsCategories,
-} from './utils/analytics-events';
-import { srOnlyStyle } from './styles/sr-only';
-import { ExpandedDatePicker } from './expanded-date-picker';
-import {
-  sortBucketsBySelectionState,
-  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;
-
-  @property({ type: Number }) searchType?: SearchType;
-
-  @property({ type: Object }) aggregations?: Record<string, Aggregation>;
-
-  @property({ type: Object }) histogramAggregation?: Aggregation;
-
-  @property({ type: String }) minSelectedDate?: string;
-
-  @property({ type: String }) maxSelectedDate?: string;
-
-  @property({ type: Boolean }) moreLinksVisible = true;
-
-  @property({ type: Boolean }) facetsLoading = false;
-
-  @property({ type: Boolean }) histogramAggregationLoading = false;
-
-  @property({ type: Object }) selectedFacets?: SelectedFacets;
-
-  @property({ type: Boolean }) collapsableFacets = false;
-
-  @property({ type: Number }) contentWidth?: number;
-
-  @property({ type: Boolean }) showHistogramDatePicker = false;
-
-  @property({ type: Boolean }) allowExpandingDatePicker = false;
-
-  @property({ type: Boolean }) suppressMediatypeFacets = false;
-
-  @property({ type: String }) query?: string;
-
-  @property({ type: Array }) identifiers?: string[];
-
-  @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;
-
-  @property({ type: Array }) parentCollections: string[] = [];
-
-  @property({ type: Object }) filterMap?: FilterMap;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
-  @property({ type: Boolean }) isManageView = false;
-
-  @property({ type: Boolean }) isTvSearch = false;
-
-  @property({ type: Array }) facetDisplayOrder: FacetOption[] =
-    defaultFacetDisplayOrder;
-
-  @property({ type: Object, attribute: false })
-  modalManager?: ModalManagerInterface;
-
-  @property({ type: Object, attribute: false })
-  resizeObserver?: SharedResizeObserverInterface;
-
-  @property({ type: Object, attribute: false })
-  featureFeedbackService?: FeatureFeedbackServiceInterface;
-
-  @property({ type: Object, attribute: false })
-  recaptchaManager?: RecaptchaManagerInterface;
-
-  @property({ type: Object, attribute: false })
-  analyticsHandler?: AnalyticsManagerInterface;
-
-  @property({ type: Object, attribute: false })
-  collectionTitles?: CollectionTitles;
-
-  @property({ type: Object, attribute: false })
-  tvChannelAliases?: TVChannelAliases;
-
-  @state() openFacets: Record<FacetOption, boolean> = {
-    subject: false,
-    lending: false,
-    mediatype: false,
-    language: false,
-    creator: false,
-    collection: false,
-    year: false,
-    clip_type: false,
-    program: false,
-    person: false,
-    sponsor: false,
-  };
-
-  /**
-   * Maximum # of facet buckets to render per facet group
-   */
-  private allowedFacetCount = 6;
-
-  render() {
-    const containerClasses = classMap({
-      loading: this.facetsLoading,
-      managing: this.isManageView,
-    });
-
-    const heading = this.isTvSearch
-      ? msg('Date Published')
-      : msg('Year Published');
-
-    // Added data-testid for Playwright testing
-    // Using facet-group class and aria-labels is not ideal for Playwright locator
-    const datePickerLabelId = 'date-picker-label';
-    return html`
-      <div id="container" class=${containerClasses}>
-        ${this.showHistogramDatePicker &&
-        (this.histogramAggregation || this.histogramAggregationLoading)
-          ? html`
-              <section
-                class="facet-group"
-                aria-labelledby=${datePickerLabelId}
-                data-testid="facet-group-header-label-date-picker"
-              >
-                <h3 id=${datePickerLabelId}>
-                  ${heading} <span class="sr-only">${msg('range filter')}</span>
-                  ${this.expandDatePickerBtnTemplate}
-                </h3>
-                ${this.histogramTemplate}
-              </section>
-            `
-          : nothing}
-        ${this.collectionPartOfTemplate}
-        <slot name="facets-top"></slot>
-        ${this.mergedFacets.map(facetGroup =>
-          this.getFacetGroupTemplate(facetGroup),
-        )}
-      </div>
-    `;
-  }
-
-  private get collectionPartOfTemplate(): TemplateResult | typeof nothing {
-    // We only display the "Part Of" section on collection pages
-    if (!this.parentCollections?.length) return nothing;
-
-    // Added data-testid for Playwright testing
-    // Using className and aria-labels is not ideal for Playwright locator
-    const headingId = 'partof-heading';
-    return html`
-      <section
-        class="facet-group partof-collections"
-        aria-labelledby=${headingId}
-        data-testid="facet-group-partof-collections"
-      >
-        <div class="facet-group-header">
-          <h3 id=${headingId}>${msg('Part Of')}</h3>
-        </div>
-        <ul>
-          ${map(this.parentCollections, collxn => {
-            const collectionURL = `${this.baseNavigationUrl}${this.collectionPagePath}${collxn}`;
-
-            return html` <li>
-              <a
-                href=${collectionURL}
-                data-id=${collxn}
-                @click=${this.partOfCollectionClicked}
-              >
-                ${this.collectionTitles?.get(collxn) ?? collxn}
-              </a>
-            </li>`;
-          })}
-        </ul>
-      </section>
-    `;
-  }
-
-  private partOfCollectionClicked(e: Event): void {
-    this.analyticsHandler?.sendEvent({
-      category: analyticsCategories.default,
-      action: analyticsActions.partOfCollectionClicked,
-      label: (e.target as HTMLElement).dataset.id,
-    });
-  }
-
-  /**
-   * 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');
-
-    // The date picker is configured differently for TV search, allowing month-level resolution
-    if (this.isTvSearch) {
-      // Whether the bucket interval is less than a year
-      // (i.e., requires individual months to be handled & labeled)
-      const mustHandleMonths = monthInterval < 12;
-
-      return {
-        buckets: aggregation.buckets as number[],
-        dateFormat: 'YYYY-MM',
-        tooltipDateFormat: mustHandleMonths ? 'MMM YYYY' : 'YYYY',
-        tooltipLabel: 'broadcast',
-        binSnapping: (mustHandleMonths
-          ? 'month'
-          : 'year') as BinSnappingInterval,
-        barScaling: 'linear' as BarScalingOption,
-        minDate: `${firstYear}-${zeroPadMonth(firstMonth)}`,
-        maxDate: `${lastYear}-${zeroPadMonth(lastMonth + monthInterval - 1)}`,
-      };
-    }
-
-    // All other search types use the same configuration
-    return {
-      buckets: aggregation.buckets as number[],
-      dateFormat: 'YYYY',
-      tooltipDateFormat: 'YYYY',
-      tooltipLabel: 'item',
-      binSnapping: 'year' as BinSnappingInterval,
-      barScaling: 'logarithmic' as BarScalingOption,
-      minDate: `${firstYear}`,
-      maxDate: `${lastYear + yearInterval - 1}`,
-    };
-  }
-
-  /**
-   * Opens a modal dialog containing an enlarged version of the date picker.
-   */
-  private showDatePickerModal(): void {
-    const { histogramProps } = this;
-    if (!histogramProps) return;
-
-    const {
-      buckets,
-      dateFormat,
-      tooltipDateFormat,
-      tooltipLabel,
-      binSnapping,
-      barScaling,
-      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.
-    // And because it isn't actually a descendent of this collection-facets component,
-    // changes to the template defined here may not trigger a reactive update to the date
-    // picker, resulting in it displaying a stale date range.
-    // This ref callback ensures that every time the date picker modal is opened, it will
-    // always propagate the most recent date range into the date picker regardless of
-    // whether Lit thinks the update is necessary.
-    const expandedDatePickerChanged = (elmt?: Element) => {
-      if (elmt && elmt instanceof ExpandedDatePicker) {
-        const expandedDatePicker = elmt as ExpandedDatePicker;
-        expandedDatePicker.minSelectedDate = this.minSelectedDate;
-        expandedDatePicker.maxSelectedDate = this.maxSelectedDate;
-      }
-    };
-
-    const customModalContent = html`
-      <expanded-date-picker
-        ${ref(expandedDatePickerChanged)}
-        .minDate=${minDate}
-        .maxDate=${maxDate}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .customDateFormat=${dateFormat}
-        .customTooltipDateFormat=${tooltipDateFormat}
-        .customTooltipLabel=${tooltipLabel}
-        .binSnapping=${binSnapping}
-        .barScaling=${barScaling}
-        .buckets=${buckets}
-        .modalManager=${this.modalManager}
-        .analyticsHandler=${this.analyticsHandler}
-        @histogramDateRangeApplied=${this.histogramDateRangeUpdated}
-        @modalClosed=${this.handleExpandedDatePickerClosed}
-      ></expanded-date-picker>
-    `;
-
-    const config = new ModalConfig({
-      bodyColor: '#fff',
-      headerColor: '#194880',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true, // TODO: want to fire analytics
-      title: html`${msg('Select a date range')}`,
-    });
-
-    this.modalManager?.classList.add('expanded-date-picker');
-    this.modalManager?.showModal({
-      config,
-      customModalContent,
-      userClosedModalCallback: this.handleExpandedDatePickerClosed,
-    });
-
-    this.analyticsHandler?.sendEvent({
-      category: analyticsCategories.default,
-      action: analyticsActions.histogramExpanded,
-      label: window.location.href,
-    });
-  }
-
-  private handleExpandedDatePickerClosed = (): void => {
-    this.modalManager?.classList.remove('expanded-date-picker');
-  };
-
-  updated(changed: PropertyValues) {
-    if (changed.has('selectedFacets')) {
-      this.dispatchFacetsChangedEvent();
-    }
-  }
-
-  // TODO: want to fire analytics?
-  private dispatchFacetsChangedEvent() {
-    const event = new CustomEvent<SelectedFacets>('facetsChanged', {
-      detail: this.selectedFacets,
-    });
-    this.dispatchEvent(event);
-  }
-
-  /**
-   * Template for the "Expand" button to show the date picker modal, or
-   * `nothing` if that button should currently not be shown.
-   */
-  private get expandDatePickerBtnTemplate(): TemplateResult | typeof nothing {
-    return this.allowExpandingDatePicker && !this.facetsLoading
-      ? html`<button
-          class="expand-date-picker-btn"
-          aria-haspopup="dialog"
-          @click=${this.showDatePickerModal}
-        >
-          <span class="sr-only">${msg('Expand date histogram')}</span>
-          <span aria-hidden="true">${expandIcon}</span>
-        </button>`
-      : nothing;
-  }
-
-  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,
-      tooltipLabel,
-      binSnapping,
-      barScaling,
-      minDate,
-      maxDate,
-    } = histogramProps;
-
-    return html`
-      <histogram-date-range
-        class=${this.isTvSearch ? 'wide-inputs' : ''}
-        .minDate=${minDate}
-        .maxDate=${maxDate}
-        .minSelectedDate=${this.minSelectedDate ?? minDate}
-        .maxSelectedDate=${this.maxSelectedDate ?? maxDate}
-        .updateDelay=${100}
-        .dateFormat=${dateFormat}
-        .tooltipDateFormat=${tooltipDateFormat}
-        .tooltipLabel=${tooltipLabel}
-        .binSnapping=${binSnapping}
-        .barScaling=${barScaling}
-        .bins=${buckets}
-        missingDataMessage="..."
-        .width=${this.collapsableFacets && this.contentWidth
-          ? this.contentWidth
-          : 180}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      ></histogram-date-range>
-    `;
-  }
-
-  /**
-   * Dispatches a `histogramDateRangeUpdated` event with the date range copied from the
-   * input event.
-   *
-   * Arrow function to ensure `this` is always bound to the current component.
-   */
-  private histogramDateRangeUpdated = (
-    e: CustomEvent<{
-      minDate: string;
-      maxDate: string;
-    }>,
-  ): void => {
-    const { minDate, maxDate } = e.detail;
-    const event = new CustomEvent('histogramDateRangeUpdated', {
-      detail: { minDate, maxDate },
-    });
-    this.dispatchEvent(event);
-  };
-
-  /**
-   * Combines the selected facets with the aggregations to create a single list of facets
-   */
-  private get mergedFacets(): FacetGroup[] {
-    const facetGroups: FacetGroup[] = [];
-
-    this.facetDisplayOrder.forEach(facetKey => {
-      if (facetKey === 'mediatype' && this.suppressMediatypeFacets) return;
-
-      const selectedFacetGroup = this.selectedFacetGroups.find(
-        group => group.key === facetKey,
-      );
-      const aggregateFacetGroup = this.aggregationFacetGroups.find(
-        group => group.key === facetKey,
-      );
-
-      // if the user selected a facet, but it's not in the aggregation, we add it as-is
-      if (selectedFacetGroup && !aggregateFacetGroup) {
-        facetGroups.push(selectedFacetGroup);
-        return;
-      }
-
-      // if we don't have an aggregate facet group, don't add this to the list
-      if (!aggregateFacetGroup) return;
-
-      // start with either the selected group if we have one, or the aggregate group
-      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;
-
-      // attach the counts to the selected buckets
-      let bucketsWithCount =
-        selectedFacetGroup?.buckets.map(bucket => {
-          const selectedBucket = aggregateFacetGroup.buckets.find(
-            b => b.key === bucket.key,
-          );
-          return selectedBucket
-            ? {
-                ...bucket,
-                count: selectedBucket.count,
-              }
-            : bucket;
-        }) ?? [];
-
-      // append any additional buckets that were not selected
-      aggregateFacetGroup.buckets.forEach(bucket => {
-        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
-        if (existingBucket) return;
-        bucketsWithCount.push(bucket);
-      });
-
-      /**
-       * render limited facet items on page facet area
-       *
-       * - by-default we are showing 6 items
-       * - additionally want to show all items (selected/suppressed) in page facet area
-       */
-      let allowedFacetCount = Object.keys(
-        (selectedFacetGroup?.buckets as []) || [],
-      )?.length;
-      if (allowedFacetCount < this.allowedFacetCount) {
-        allowedFacetCount = this.allowedFacetCount; // splice start index from 0th
-      }
-
-      // For lending facets, only include a specific subset of buckets
-      if (facetKey === 'lending') {
-        bucketsWithCount = bucketsWithCount.filter(
-          bucket => lendingFacetKeysVisibility[bucket.key as LendingFacetKey],
-        );
-      }
-
-      // Sort the FacetBuckets so that selected and hidden buckets come before the rest
-      sortBucketsBySelectionState(bucketsWithCount, defaultFacetSort[facetKey]);
-
-      // For mediatype facets, ensure the collection bucket is always shown if present
-      if (facetKey === 'mediatype') {
-        const collectionIndex = bucketsWithCount.findIndex(
-          bucket => bucket.key === 'collection',
-        );
-
-        if (collectionIndex >= allowedFacetCount) {
-          const [collectionBucket] = bucketsWithCount.splice(
-            collectionIndex,
-            1,
-          );
-
-          // If we're showing lots of selected facets, ensure we're not cutting off the last one
-          if (allowedFacetCount > this.allowedFacetCount) {
-            allowedFacetCount += 1;
-          }
-
-          bucketsWithCount.splice(allowedFacetCount - 1, 0, collectionBucket);
-        }
-      }
-
-      // For TV creator facets, uppercase the display text
-      if (facetKey === 'creator' && this.isTvSearch) {
-        bucketsWithCount.forEach(b => {
-          b.displayText = (b.displayText ?? b.key)?.toLocaleUpperCase();
-
-          const channelLabel = this.tvChannelAliases?.get(b.displayText);
-          if (channelLabel && channelLabel !== b.displayText) {
-            b.extraNote = `(${channelLabel})`;
-          }
-        });
-      }
-      // For TV clip_type facets, capitalize the display text
-      if (facetKey === 'clip_type') {
-        bucketsWithCount.forEach(b => {
-          b.displayText ??= b.key;
-          b.displayText =
-            b.displayText.charAt(0).toLocaleUpperCase() +
-            b.displayText.slice(1);
-        });
-      }
-
-      // slice off how many items we want to show in page facet area
-      facetGroup.buckets = bucketsWithCount.slice(0, allowedFacetCount);
-
-      facetGroups.push(facetGroup);
-    });
-
-    return facetGroups;
-  }
-
-  /**
-   * Converts the selected facets to a `FacetGroup` array,
-   * which is easier to work with
-   */
-  private get selectedFacetGroups(): FacetGroup[] {
-    if (!this.selectedFacets) return [];
-
-    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(
-      ([key, selectedFacets]) => {
-        const option = key as FacetOption;
-        const title = facetTitles[option];
-
-        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(
-          ([value, facetData]) => {
-            let displayText: string = value;
-            // For certain facet types/keys, we use a custom readable display name
-            const currentGroupCustomNames = customFacetDisplayNames[
-              option
-            ] as Record<string, string>;
-            if (currentGroupCustomNames) {
-              displayText = currentGroupCustomNames[value] ?? value;
-            }
-            return {
-              displayText,
-              key: value,
-              count: facetData.count,
-              state: facetData.state,
-            };
-          },
-        );
-
-        return {
-          title,
-          key: option,
-          buckets,
-        };
-      },
-    );
-
-    return facetGroups;
-  }
-
-  /**
-   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
-   */
-  private get aggregationFacetGroups(): FacetGroup[] {
-    const facetGroups: FacetGroup[] = [];
-    Object.entries(this.aggregations ?? []).forEach(([key, aggregation]) => {
-      // 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];
-      if (!title) return;
-
-      let castedBuckets = aggregation.getSortedBuckets(
-        defaultFacetSort[option],
-      ) as Bucket[];
-
-      if (option === 'collection') {
-        // we are not showing fav- collections or certain deemphasized collections in facets
-        castedBuckets = castedBuckets?.filter(bucket => {
-          const bucketKey = bucket?.key?.toString();
-          return (
-            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')
-          );
-        });
-      }
-
-      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => {
-        const bucketKey = bucket.key;
-        let displayText = `${bucket.key}`;
-        // For certain facet types/keys, we use a custom readable display name
-        const currentGroupCustomNames = customFacetDisplayNames[
-          option
-        ] as Record<string, string>;
-        if (currentGroupCustomNames) {
-          displayText = currentGroupCustomNames[bucket.key] ?? `${bucket.key}`;
-        }
-        return {
-          displayText,
-          key: `${bucketKey}`,
-          count: bucket.doc_count,
-          state: 'none',
-        };
-      });
-      const group: FacetGroup = {
-        title,
-        key: option,
-        buckets: facetBuckets,
-      };
-      facetGroups.push(group);
-    });
-    return facetGroups;
-  }
-
-  /**
-   * Generate the template for a facet group with a header and the collapsible
-   * chevron for the mobile view
-   */
-  private getFacetGroupTemplate(
-    facetGroup: FacetGroup,
-  ): TemplateResult | typeof nothing {
-    if (!this.facetsLoading && facetGroup.buckets.length === 0) return nothing;
-
-    const { key } = facetGroup;
-    const isOpen = this.openFacets[key];
-    const collapser = html`
-      <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
-    `;
-
-    const toggleCollapsed = () => {
-      const newOpenFacets = { ...this.openFacets };
-      newOpenFacets[key] = !isOpen;
-      this.openFacets = newOpenFacets;
-    };
-
-    // Added data-testid for Playwright testing
-    // Using className and aria-labels is not ideal for Playwright locator
-    const headerId = `facet-group-header-label-${facetGroup.key}`;
-    return html`
-      <section
-        class="facet-group ${this.collapsableFacets ? 'mobile' : ''}"
-        aria-labelledby=${headerId}
-        data-testid=${headerId}
-      >
-        <div class="facet-group-header">
-          <h3
-            id=${headerId}
-            @click=${toggleCollapsed}
-            @keyup=${toggleCollapsed}
-          >
-            ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
-            <span class="sr-only">filters</span>
-          </h3>
-        </div>
-        <div
-          class="facet-group-content ${isOpen ? 'open' : ''}"
-          data-testid="facet-group-content-${facetGroup.key}"
-        >
-          ${this.facetsLoading
-            ? this.getTombstoneFacetGroupTemplate()
-            : html`
-                ${this.getFacetTemplate(facetGroup)}
-                ${this.searchMoreFacetsLink(facetGroup)}
-              `}
-        </div>
-      </section>
-    `;
-  }
-
-  private getTombstoneFacetGroupTemplate(): TemplateResult {
-    // Render five tombstone rows
-    return html`
-      ${map(
-        Array(5).fill(null),
-        () => html`<facet-tombstone-row></facet-tombstone-row>`,
-      )}
-    `;
-  }
-
-  /**
-   * Generate the More... link button just below the facets group
-   *
-   * TODO: want to fire analytics?
-   */
-  private searchMoreFacetsLink(
-    facetGroup: FacetGroup,
-  ): TemplateResult | typeof nothing {
-    // Don't render More... links for FTS searches
-    if (!this.moreLinksVisible) {
-      return nothing;
-    }
-
-    // Don't render More... links for lending facets
-    if (facetGroup.key === 'lending') {
-      return nothing;
-    }
-
-    // Don't render More... link if the number of facets < this.allowedFacetCount
-    if (Object.keys(facetGroup.buckets).length < this.allowedFacetCount) {
-      return nothing;
-    }
-
-    // We sort years in numeric order by default, rather than bucket count
-    const facetSort = defaultFacetSort[facetGroup.key];
-
-    // Added data-testid for Playwright testing
-    // Using the className is not ideal for Playwright locator
-    return html`<button
-      class="more-link"
-      @click=${() => {
-        this.showMoreFacetsModal(facetGroup, facetSort);
-        this.analyticsHandler?.sendEvent({
-          category: analyticsCategories.default,
-          action: analyticsActions.showMoreFacetsModal,
-          label: facetGroup.key,
-        });
-        this.dispatchEvent(
-          new CustomEvent('showMoreFacets', { detail: facetGroup.key }),
-        );
-      }}
-      data-testid="more-link-btn"
-    >
-      More...
-    </button>`;
-  }
-
-  async showMoreFacetsModal(
-    facetGroup: FacetGroup,
-    sortedBy: AggregationSortType,
-  ): Promise<void> {
-    const customModalContent = html`
-      <more-facets-content
-        .analyticsHandler=${this.analyticsHandler}
-        .facetKey=${facetGroup.key}
-        .query=${this.query}
-        .identifiers=${this.identifiers}
-        .filterMap=${this.filterMap}
-        .pageSpecifierParams=${this.pageSpecifierParams}
-        .modalManager=${this.modalManager}
-        .searchService=${this.searchService}
-        .searchType=${this.searchType}
-        .collectionTitles=${this.collectionTitles}
-        .tvChannelAliases=${this.tvChannelAliases}
-        .selectedFacets=${this.selectedFacets}
-        .sortedBy=${sortedBy}
-        .isTvSearch=${this.isTvSearch}
-        @facetsChanged=${(e: CustomEvent) => {
-          const event = new CustomEvent<SelectedFacets>('facetsChanged', {
-            detail: e.detail,
-            bubbles: true,
-            composed: true,
-          });
-          this.dispatchEvent(event);
-        }}
-      >
-      </more-facets-content>
-    `;
-
-    const config = new ModalConfig({
-      bodyColor: '#fff',
-      headerColor: '#194880',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true, // TODO: want to fire analytics
-      title: html`Select filters`,
-    });
-    this.modalManager?.classList.add('more-search-facets');
-    this.modalManager?.showModal({
-      config,
-      customModalContent,
-      userClosedModalCallback: () => {
-        this.modalManager?.classList.remove('more-search-facets');
-      },
-    });
-  }
-
-  /**
-   * Generate the list template for each bucket in a facet group
-   */
-  private getFacetTemplate(facetGroup: FacetGroup): TemplateResult {
-    return html`
-      <facets-template
-        .collectionPagePath=${this.collectionPagePath}
-        .facetGroup=${facetGroup}
-        .selectedFacets=${this.selectedFacets}
-        .collectionTitles=${this.collectionTitles}
-        @facetClick=${(e: CustomEvent<FacetEventDetails>) => {
-          this.selectedFacets = updateSelectedFacetBucket(
-            this.selectedFacets,
-            facetGroup.key,
-            e.detail.bucket,
-            true,
-          );
-
-          const event = new CustomEvent<SelectedFacets>('facetsChanged', {
-            detail: this.selectedFacets,
-            bubbles: true,
-            composed: true,
-          });
-          this.dispatchEvent(event);
-        }}
-      ></facets-template>
-    `;
-  }
-
-  static get styles() {
-    return [
-      srOnlyStyle,
-      css`
-        a:link {
-          text-decoration: none;
-          color: var(--ia-theme-link-color, #4b64ff);
-        }
-        a:link:hover {
-          text-decoration: underline;
-        }
-
-        #container.loading {
-          opacity: 0.5;
-        }
-
-        #container.managing {
-          opacity: 0.3;
-        }
-
-        .histogram-loading-indicator {
-          width: 100%;
-          height: 5.25rem;
-          margin-top: 1.75rem;
-          font-size: 1.4rem;
-          text-align: center;
-        }
-
-        .collapser {
-          display: inline-block;
-          cursor: pointer;
-          width: 10px;
-          height: 10px;
-        }
-
-        .collapser svg {
-          transition: transform 0.2s ease-in-out;
-        }
-
-        .collapser.open svg {
-          transform: rotate(90deg);
-        }
-
-        .facet-group {
-          margin-bottom: 2rem;
-        }
-
-        .facet-group h3 {
-          margin-bottom: 0.7rem;
-        }
-
-        .facet-group.mobile h3 {
-          cursor: pointer;
-        }
-
-        .facet-group-header {
-          display: flex;
-          margin-bottom: 0.7rem;
-          justify-content: space-between;
-          border-bottom: 1px solid rgb(232, 232, 232);
-        }
-
-        .facet-group-content {
-          transition: max-height 0.2s ease-in-out;
-        }
-
-        .facet-group.mobile .facet-group-content {
-          max-height: 0;
-          overflow: hidden;
-        }
-
-        .facet-group.mobile .facet-group-content.open {
-          max-height: 2000px;
-        }
-
-        .partof-collections ul {
-          list-style-type: none;
-          padding: 0;
-          font-size: 1.2rem;
-        }
-
-        h3 {
-          font-size: 1.4rem;
-          margin: 0;
-        }
-
-        .more-link {
-          font-size: 1.2rem;
-          text-decoration: none;
-          padding: 0;
-          margin-top: 0.25rem;
-          background: inherit;
-          border: 0;
-          color: var(--ia-theme-link-color, #4b64ff);
-          cursor: pointer;
-        }
-
-        #date-picker-label {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .expand-date-picker-btn {
-          margin: 0;
-          padding: 0;
-          border: 0;
-          appearance: none;
-          background: none;
-          cursor: pointer;
-        }
-
-        .expand-date-picker-btn svg {
-          width: 14px;
-          height: 14px;
-        }
-
-        .sorting-icon {
-          height: 15px;
-          cursor: pointer;
-        }
-
-        histogram-date-range.wide-inputs {
-          --histogramDateRangeInputWidth: 4.8rem;
-        }
-      `,
-    ];
-  }
-}