@internetarchive/collection-browser 2.15.1-alpha-webdev7667.3 → 2.16.0

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.

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() {