@internetarchive/collection-browser 3.4.0 → 3.4.1-alpha-webdev7761.1

package/src/collection-facets.ts

@@ -153,6 +153,7 @@ export class CollectionFacets extends LitElement {
     creator: false,
     collection: false,
     year: false,
+    clip_type: false,
     program: false,
     person: false,
     sponsor: false,
@@ -169,6 +170,10 @@ export class CollectionFacets extends LitElement {
       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';
@@ -183,7 +188,7 @@ export class CollectionFacets extends LitElement {
                 data-testid="facet-group-header-label-date-picker"
               >
                 <h3 id=${datePickerLabelId}>
-                  Year Published <span class="sr-only">range filter</span>
+                  ${heading} <span class="sr-only">${msg('range filter')}</span>
                   ${this.expandDatePickerBtnTemplate}
                 </h3>
                 ${this.histogramTemplate}
@@ -191,6 +196,7 @@ export class CollectionFacets extends LitElement {
             `
           : nothing}
         ${this.collectionPartOfTemplate}
+        <slot name="facets-top"></slot>
         ${this.mergedFacets.map(facetGroup =>
           this.getFacetGroupTemplate(facetGroup),
         )}
@@ -572,6 +578,15 @@ export class CollectionFacets extends LitElement {
           }
         });
       }
+      // 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);
@@ -908,7 +923,7 @@ export class CollectionFacets extends LitElement {
           transform: rotate(90deg);
         }
 
-        .facet-group:not(:last-child) {
+        .facet-group {
           margin-bottom: 2rem;
         }
 

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

@@ -16,6 +16,7 @@ import type {
   PageSpecifierParams,
   CollectionTitles,
   TVChannelAliases,
+  TVChannelMaps,
 } from './models';
 
 export interface CollectionBrowserDataSourceInterface
@@ -98,6 +99,11 @@ export interface CollectionBrowserDataSourceInterface
    */
   readonly tvChannelAliases: TVChannelAliases;
 
+  /**
+   * An object holding mappings from channels to networks, and programs to channels.
+   */
+  readonly tvChannelMaps: TVChannelMaps;
+
   /**
    * The "extra info" package provided by the PPS for collection pages, including details
    * used to populate the target collection header & About tab content.
@@ -330,4 +336,10 @@ export interface CollectionBrowserDataSourceInterface
    * of the data source to account for any new gaps in the data.
    */
   removeCheckedTiles(): void;
+
+  /**
+   * Fires requests to populate the TV channel mappings (chan2network and programs2chan),
+   * or returns the existing Promise for any such request that has already been made.
+   */
+  populateTVChannelMaps(): Promise<TVChannelMaps>;
 }

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

@@ -24,7 +24,11 @@ import {
   SORT_OPTIONS,
   HitRequestSource,
 } from '../models';
-import { FACETLESS_PAGE_ELEMENTS, type PageSpecifierParams } from './models';
+import {
+  FACETLESS_PAGE_ELEMENTS,
+  TVChannelMaps,
+  type PageSpecifierParams,
+} from './models';
 import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
 import type { CollectionBrowserSearchInterface } from './collection-browser-query-state';
 import { sha1 } from '../utils/sha1';
@@ -121,6 +125,11 @@ export class CollectionBrowserDataSource
    */
   collectionTitles = new Map<string, string>();
 
+  /**
+   * @inheritdoc
+   */
+  tvChannelMaps: TVChannelMaps = {};
+
   /**
    * @inheritdoc
    */
@@ -162,6 +171,11 @@ export class CollectionBrowserDataSource
    */
   queryErrorMessage?: string;
 
+  /**
+   * Internal property to store the promise for any current TV channel maps fetch.
+   */
+  private _tvMapsPromise?: Promise<TVChannelMaps>;
+
   /**
    * Internal property to store the private value backing the `initialSearchComplete` getter.
    */
@@ -773,24 +787,6 @@ export class CollectionBrowserDataSource
       );
     }
 
-    // Add any TV clip type filter, if applicable
-    if (this.host.searchType === SearchType.TV) {
-      switch (this.host.tvClipFilter) {
-        case 'commercials':
-          builder.addFilter('ad_id', '*', FilterConstraint.INCLUDE);
-          break;
-        case 'factchecks':
-          builder.addFilter('factcheck', '*', FilterConstraint.INCLUDE);
-          break;
-        case 'quotes':
-          builder.addFilter('clip', '1', FilterConstraint.INCLUDE);
-          break;
-        case 'all':
-        default:
-          break;
-      }
-    }
-
     const filterMap = builder.build();
     return filterMap;
   }
@@ -1398,4 +1394,48 @@ export class CollectionBrowserDataSource
     this.updatePrefixFiltersForCurrentSort();
     this.requestHostUpdate();
   }
+
+  /**
+   * @inheritdoc
+   */
+  populateTVChannelMaps(): Promise<TVChannelMaps> {
+    // To ensure that we only make these requests once, cache the Promise returned by the
+    // first call, and return the same Promise on repeated calls.
+    // Resolves once both maps have been retrieved and saved in the data source.
+    if (!this._tvMapsPromise) {
+      this._tvMapsPromise = this._fetchTVChannelMaps();
+    }
+
+    return this._tvMapsPromise;
+  }
+
+  /**
+   * Internal function implementing the actual fetches for TV channel mappings.
+   * This should only called by the public populateTVChannelMaps method, which is guarded so
+   * that we do not make extra requests for these rather large mappings.
+   */
+  private async _fetchTVChannelMaps(): Promise<TVChannelMaps> {
+    const baseURL = 'https://av.archive.org/etc';
+    const dateStr = new Date().toISOString().slice(0, 10); // YYYY-MM-DD
+    const chan2networkPromise = fetch(
+      `${baseURL}/chan2network.json?date=${dateStr}`,
+    );
+    const program2chansPromise = fetch(
+      `${baseURL}/program2chans.json?date=${dateStr}`,
+    );
+
+    const [chan2networkResponse, program2chansResponse] = await Promise.all([
+      chan2networkPromise,
+      program2chansPromise,
+    ]);
+    this.tvChannelMaps.channelToNetwork = new Map(
+      Object.entries(await chan2networkResponse.json()),
+    );
+    this.tvChannelMaps.programToChannels = new Map(
+      Object.entries(await program2chansResponse.json()),
+    );
+
+    this.requestHostUpdate();
+    return this.tvChannelMaps;
+  }
 }

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

@@ -6,12 +6,7 @@ import type {
   SortDirection,
   SortParam,
 } from '@internetarchive/search-service';
-import type {
-  FacetLoadStrategy,
-  SelectedFacets,
-  SortField,
-  TvClipFilterType,
-} from '../models';
+import type { FacetLoadStrategy, SelectedFacets, SortField } from '../models';
 import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
 
 /**
@@ -30,7 +25,6 @@ export interface CollectionBrowserQueryState {
   maxSelectedDate?: string;
   selectedTitleFilter: string | null;
   selectedCreatorFilter: string | null;
-  tvClipFilter?: TvClipFilterType;
   selectedSort?: SortField;
   sortDirection: SortDirection | null;
 }

package/src/data-source/models.ts

@@ -13,6 +13,19 @@ export type CollectionTitles = Map<string, string>;
  */
 export type TVChannelAliases = Map<string, string>;
 
+/**
+ * A Map from program (show) names to a mapping of all the channels that run them.
+ */
+export type TVProgramChannels = Map<string, Record<string, number>>;
+
+/**
+ * Object storing the different TV channel mappings used by the data source.
+ */
+export type TVChannelMaps = {
+  channelToNetwork?: TVChannelAliases;
+  programToChannels?: TVProgramChannels;
+};
+
 /**
  * The subset of search service params that uniquely specify the type of results
  * that are sought by an instance of collection browser.

package/src/models.ts

@@ -636,6 +636,7 @@ export type FacetOption =
   | 'collection'
   | 'year'
   // TV-specific facet options:
+  | 'clip_type'
   | 'program'
   | 'person'
   | 'sponsor';
@@ -693,6 +694,7 @@ export const getDefaultSelectedFacets = (): Required<SelectedFacets> => ({
   creator: {},
   collection: {},
   year: {},
+  clip_type: {},
   program: {},
   person: {},
   sponsor: {},
@@ -701,25 +703,15 @@ export const getDefaultSelectedFacets = (): Required<SelectedFacets> => ({
 /**
  * For TV search results, what types of TV clips to restrict the results to.
  */
-export type TvClipFilterType = 'all' | 'commercials' | 'factchecks' | 'quotes';
-
-/**
- * Map from TV clip filter types to their corresponding URL params
- */
-export const tvClipFiltersToURLParams: Record<TvClipFilterType, string> = {
-  all: '',
-  commercials: 'only_commercials',
-  factchecks: 'only_factchecks',
-  quotes: 'only_quotes',
-};
+export type TvClipFilterType = 'commercial' | 'fact check' | 'quote';
 
 /**
  * Map from allowed TV filtering parameters in the URL to their corresponding filter type
  */
 export const tvClipURLParamsToFilters: Record<string, TvClipFilterType> = {
-  only_commercials: 'commercials',
-  only_factchecks: 'factchecks',
-  only_quotes: 'quotes',
+  only_commercials: 'commercial',
+  only_factchecks: 'fact check',
+  only_quotes: 'quote',
 };
 
 /**
@@ -743,10 +735,11 @@ export const tvFacetDisplayOrder: FacetOption[] = [
   'creator',
   'year',
   'subject',
-  'collection',
+  // 'collection',
   'person',
-  'sponsor',
+  // 'sponsor',
   'language',
+  'clip_type',
 ];
 
 /**
@@ -760,6 +753,7 @@ export const facetTitles: Record<FacetOption, string> = {
   creator: 'Creator',
   collection: 'Collection',
   year: 'Year',
+  clip_type: 'Clip Type',
   program: 'Program',
   person: 'Person',
   sponsor: 'Sponsor',
@@ -776,6 +770,7 @@ export const defaultFacetSort: Record<FacetOption, AggregationSortType> = {
   creator: AggregationSortType.COUNT,
   collection: AggregationSortType.COUNT,
   year: AggregationSortType.NUMERIC, // Year facets are ordered by their numeric value by default
+  clip_type: AggregationSortType.COUNT,
   program: AggregationSortType.COUNT,
   person: AggregationSortType.COUNT,
   sponsor: AggregationSortType.COUNT,
@@ -793,6 +788,7 @@ export const valueFacetSort: Record<FacetOption, AggregationSortType> = {
   creator: AggregationSortType.ALPHABETICAL,
   collection: AggregationSortType.ALPHABETICAL,
   year: AggregationSortType.NUMERIC, // Year facets' values should be compared numerically, not lexicographically (year 2001 > year 3)
+  clip_type: AggregationSortType.ALPHABETICAL,
   program: AggregationSortType.ALPHABETICAL,
   person: AggregationSortType.ALPHABETICAL,
   sponsor: AggregationSortType.ALPHABETICAL,

package/src/restoration-state-handler.ts

@@ -5,14 +5,12 @@ import {
   CollectionBrowserContext,
   CollectionDisplayMode,
   SelectedFacets,
-  TvClipFilterType,
   SortField,
   FacetBucket,
   FacetState,
   getDefaultSelectedFacets,
   sortOptionFromAPIString,
   SORT_OPTIONS,
-  tvClipFiltersToURLParams,
   tvClipURLParamsToFilters,
 } from './models';
 import { arrayEquals } from './utils/array-equals';
@@ -31,7 +29,6 @@ export interface RestorationState {
   maxSelectedDate?: string;
   selectedTitleFilter?: string;
   selectedCreatorFilter?: string;
-  tvClipFilter?: TvClipFilterType;
 }
 
 export interface RestorationStatePersistOptions {
@@ -210,12 +207,6 @@ export class RestorationStateHandler
       newParams.append('and[]', state.creatorQuery);
     }
 
-    // TV clip special filters
-    if (state.tvClipFilter) {
-      const tvClipParam = tvClipFiltersToURLParams[state.tvClipFilter];
-      if (tvClipParam) newParams.append(tvClipParam, '1');
-    }
-
     // Ensure we aren't pushing consecutive identical states to the history stack.
     //  - If the state has changed, we push a new history entry.
     //  - If only the page number has changed, we replace the current history entry.
@@ -412,9 +403,16 @@ export class RestorationStateHandler
     }
 
     // TV clip special filters (carryovers from legacy page)
-    for (const [paramKey, filter] of Object.entries(tvClipURLParamsToFilters)) {
+    for (const [paramKey, facetKey] of Object.entries(
+      tvClipURLParamsToFilters,
+    )) {
       if (url.searchParams.get(paramKey)) {
-        restorationState.tvClipFilter = filter;
+        this.setSelectedFacetState(
+          restorationState.selectedFacets,
+          'clip_type',
+          facetKey,
+          'selected',
+        );
         break;
       }
     }

package/test/collection-browser.test.ts

@@ -1087,7 +1087,7 @@ describe('Collection Browser', () => {
     });
   });
 
-  it('applies correct search filter when TV clip filter set to commercials', async () => {
+  it('applies correct TV search filter for commercials', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -1096,16 +1096,20 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'tv-fields';
     el.searchType = SearchType.TV;
-    el.tvClipFilter = 'commercials';
+    el.selectedFacets = {
+      clip_type: {
+        commercial: { key: 'commercial', count: 1, state: 'selected' },
+      },
+    };
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    expect(searchService.searchParams?.filters?.ad_id?.['*']).to.equal(
+    expect(searchService.searchParams?.filters?.clip_type?.commercial).to.equal(
       FilterConstraint.INCLUDE,
     );
   });
 
-  it('applies correct search filter when TV clip filter set to factchecks', async () => {
+  it('applies correct TV search filter for fact checks', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -1114,16 +1118,20 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'tv-fields';
     el.searchType = SearchType.TV;
-    el.tvClipFilter = 'factchecks';
+    el.selectedFacets = {
+      clip_type: {
+        'fact check': { key: 'fact check', count: 1, state: 'selected' },
+      },
+    };
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    expect(searchService.searchParams?.filters?.factcheck?.['*']).to.equal(
-      FilterConstraint.INCLUDE,
-    );
+    expect(
+      searchService.searchParams?.filters?.clip_type?.['fact check'],
+    ).to.equal(FilterConstraint.INCLUDE);
   });
 
-  it('applies correct search filter when TV clip filter set to quotes', async () => {
+  it('applies correct TV search filter for quotes', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .searchService=${searchService}>
@@ -1132,11 +1140,13 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'tv-fields';
     el.searchType = SearchType.TV;
-    el.tvClipFilter = 'quotes';
+    el.selectedFacets = {
+      clip_type: { quote: { key: 'quote', count: 1, state: 'selected' } },
+    };
     await el.updateComplete;
     await el.initialSearchComplete;
 
-    expect(searchService.searchParams?.filters?.clip?.['1']).to.equal(
+    expect(searchService.searchParams?.filters?.clip_type?.quote).to.equal(
       FilterConstraint.INCLUDE,
     );
   });

package/test/restoration-state-handler.test.ts

@@ -250,25 +250,33 @@ describe('Restoration state handler', () => {
     url.search = '?only_commercials=1';
     window.history.replaceState({ path: url.href }, '', url.href);
     const commercialsRestorationState = handler.getRestorationState();
-    expect(commercialsRestorationState.tvClipFilter).to.equal('commercials');
+    expect(
+      commercialsRestorationState.selectedFacets.clip_type?.commercial.state,
+    ).to.equal('selected');
 
     // Fact checks
     url.search = '?only_factchecks=1';
     window.history.replaceState({ path: url.href }, '', url.href);
     const factchecksRestorationState = handler.getRestorationState();
-    expect(factchecksRestorationState.tvClipFilter).to.equal('factchecks');
+    expect(
+      factchecksRestorationState.selectedFacets.clip_type?.['fact check'].state,
+    ).to.equal('selected');
 
     // Quotes
     url.search = '?only_quotes=1';
     window.history.replaceState({ path: url.href }, '', url.href);
     const quotesRestorationState = handler.getRestorationState();
-    expect(quotesRestorationState.tvClipFilter).to.equal('quotes');
+    expect(
+      quotesRestorationState.selectedFacets.clip_type?.quote.state,
+    ).to.equal('selected');
 
     // No filter param
     url.search = '';
     window.history.replaceState({ path: url.href }, '', url.href);
     const unfilteredRestorationState = handler.getRestorationState();
-    expect(unfilteredRestorationState.tvClipFilter).not.to.exist;
+    expect(unfilteredRestorationState.selectedFacets.clip_type).to.deep.equal(
+      {},
+    );
   });
 
   it('should restore sort from URL (space format)', async () => {
@@ -402,44 +410,6 @@ describe('Restoration state handler', () => {
     expect(window.location.search).to.equal('?page=2');
   });
 
-  it('should persist TV clip filter types to the URL', async () => {
-    const url = new URL(window.location.href);
-    url.search = '';
-    window.history.replaceState({ path: url.href }, '', url.href);
-
-    // Commercials
-    const handler = new RestorationStateHandler({ context: 'search' });
-    handler.persistState({
-      tvClipFilter: 'commercials',
-      selectedFacets: getDefaultSelectedFacets(),
-    });
-    expect(window.location.search).to.equal('?only_commercials=1');
-
-    // Fact checks
-    window.history.replaceState({ path: url.href }, '', url.href);
-    handler.persistState({
-      tvClipFilter: 'factchecks',
-      selectedFacets: getDefaultSelectedFacets(),
-    });
-    expect(window.location.search).to.equal('?only_factchecks=1');
-
-    // Quotes
-    window.history.replaceState({ path: url.href }, '', url.href);
-    handler.persistState({
-      tvClipFilter: 'quotes',
-      selectedFacets: getDefaultSelectedFacets(),
-    });
-    expect(window.location.search).to.equal('?only_quotes=1');
-
-    // Unfiltered
-    window.history.replaceState({ path: url.href }, '', url.href);
-    handler.persistState({
-      tvClipFilter: 'all',
-      selectedFacets: getDefaultSelectedFacets(),
-    });
-    expect(window.location.search).to.equal('');
-  });
-
   it('should upgrade legacy search params to new ones', async () => {
     const url = new URL(window.location.href);
     url.search = '?q=foo';