@internetarchive/collection-browser 2.13.1 → 2.13.2-alpha-webdev5427.0

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

@@ -690,27 +690,32 @@ export class CollectionBrowserDataSource
   get filterMap(): FilterMap {
     const builder = new FilterMapBuilder();
 
-    // Add the date range, if applicable
-    if (this.host.minSelectedDate) {
+    const {
+      minSelectedDate,
+      maxSelectedDate,
+      selectedFacets,
+      selectedTitleFilter,
+      selectedCreatorFilter,
+    } = this.host;
+
+    if (minSelectedDate) {
       builder.addFilter(
         'year',
-        this.host.minSelectedDate,
+        minSelectedDate,
         FilterConstraint.GREATER_OR_EQUAL,
       );
     }
-    if (this.host.maxSelectedDate) {
+    if (maxSelectedDate) {
       builder.addFilter(
         'year',
-        this.host.maxSelectedDate,
+        maxSelectedDate,
         FilterConstraint.LESS_OR_EQUAL,
       );
     }
 
     // Add any selected facets
-    if (this.host.selectedFacets) {
-      for (const [facetName, facetValues] of Object.entries(
-        this.host.selectedFacets,
-      )) {
+    if (selectedFacets) {
+      for (const [facetName, facetValues] of Object.entries(selectedFacets)) {
         const { name, values } = this.prepareFacetForFetch(
           facetName,
           facetValues,
@@ -731,17 +736,17 @@ export class CollectionBrowserDataSource
     }
 
     // Add any letter filters
-    if (this.host.selectedTitleFilter) {
+    if (selectedTitleFilter) {
       builder.addFilter(
         'firstTitle',
-        this.host.selectedTitleFilter,
+        selectedTitleFilter,
         FilterConstraint.INCLUDE,
       );
     }
-    if (this.host.selectedCreatorFilter) {
+    if (selectedCreatorFilter) {
       builder.addFilter(
         'firstCreator',
-        this.host.selectedCreatorFilter,
+        selectedCreatorFilter,
         FilterConstraint.INCLUDE,
       );
     }

package/src/expanded-date-picker.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement, CSSResultGroup, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import {
@@ -19,6 +20,8 @@ export class ExpandedDatePicker extends LitElement {
 
   @property({ type: Array }) buckets?: number[];
 
+  @property({ type: String }) dateFormat: string = 'YYYY';
+
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
 
@@ -34,6 +37,7 @@ export class ExpandedDatePicker extends LitElement {
           .maxDate=${this.maxDate}
           .minSelectedDate=${this.minSelectedDate ?? this.minDate}
           .maxSelectedDate=${this.maxSelectedDate ?? this.maxDate}
+          .dateFormat=${this.dateFormat}
           .updateDelay=${0}
           updateWhileFocused
           missingDataMessage="..."
@@ -47,7 +51,7 @@ export class ExpandedDatePicker extends LitElement {
             slot="inputs-right-side"
             @click=${this.applyBtnClicked}
           >
-            Apply date range
+            ${msg('Apply date range')}
           </button>
         </histogram-date-range>
       </div>

package/src/models.ts

@@ -564,18 +564,24 @@ export type FacetOption =
   | 'language'
   | 'creator'
   | 'collection'
-  | 'year';
+  | 'year'
+  // TV-specific facet options:
+  | 'program'
+  | 'person'
+  | 'sponsor';
 
 export type SelectedFacetState = 'selected' | 'hidden';
 
 export type FacetState = SelectedFacetState | 'none';
 
 export interface FacetBucket {
-  // for some facets, we augment the key with a display value
-  displayText?: string;
   key: string;
   count: number;
   state: FacetState;
+  // for some facets, we augment the key with a display value
+  displayText?: string;
+  // for TV channel facets, we add a parenthesized secondary name
+  extraNote?: string;
 }
 
 export interface FacetGroup {
@@ -605,12 +611,11 @@ export type FacetEventDetails = {
 
 export type FacetValue = string;
 
-export type SelectedFacets = Record<
-  FacetOption,
-  Record<FacetValue, FacetBucket>
+export type SelectedFacets = Partial<
+  Record<FacetOption, Record<FacetValue, FacetBucket>>
 >;
 
-export const getDefaultSelectedFacets = (): SelectedFacets => ({
+export const getDefaultSelectedFacets = (): Required<SelectedFacets> => ({
   subject: {},
   lending: {},
   mediatype: {},
@@ -618,9 +623,15 @@ export const getDefaultSelectedFacets = (): SelectedFacets => ({
   creator: {},
   collection: {},
   year: {},
+  program: {},
+  person: {},
+  sponsor: {},
 });
 
-export const facetDisplayOrder: FacetOption[] = [
+/**
+ * Facet display order when presenting results for all search types *except* TV (see below).
+ */
+export const defaultFacetDisplayOrder: FacetOption[] = [
   'mediatype',
   // 'lending', Commenting this out removes the lending facet from the sidebar for now
   'year',
@@ -630,6 +641,23 @@ export const facetDisplayOrder: FacetOption[] = [
   'language',
 ];
 
+/**
+ * Specialized facet ordering when displaying TV search results
+ */
+export const tvFacetDisplayOrder: FacetOption[] = [
+  'program',
+  'creator',
+  'year',
+  'subject',
+  'collection',
+  'person',
+  'sponsor',
+  'language',
+];
+
+/**
+ * Human-readable titles for each facet group.
+ */
 export const facetTitles: Record<FacetOption, string> = {
   subject: 'Subject',
   lending: 'Availability',
@@ -638,6 +666,9 @@ export const facetTitles: Record<FacetOption, string> = {
   creator: 'Creator',
   collection: 'Collection',
   year: 'Year',
+  program: 'Program',
+  person: 'Person',
+  sponsor: 'Sponsor',
 };
 
 /**
@@ -650,7 +681,10 @@ export const defaultFacetSort: Record<FacetOption, AggregationSortType> = {
   language: AggregationSortType.COUNT,
   creator: AggregationSortType.COUNT,
   collection: AggregationSortType.COUNT,
-  year: AggregationSortType.NUMERIC,
+  year: AggregationSortType.NUMERIC, // Year facets are ordered by their numeric value by default
+  program: AggregationSortType.COUNT,
+  person: AggregationSortType.COUNT,
+  sponsor: AggregationSortType.COUNT,
 };
 
 /**
@@ -664,9 +698,48 @@ export const valueFacetSort: Record<FacetOption, AggregationSortType> = {
   language: AggregationSortType.ALPHABETICAL,
   creator: AggregationSortType.ALPHABETICAL,
   collection: AggregationSortType.ALPHABETICAL,
-  year: AggregationSortType.NUMERIC,
+  year: AggregationSortType.NUMERIC, // Year facets' values should be compared numerically, not lexicographically (year 2001 > year 3)
+  program: AggregationSortType.ALPHABETICAL,
+  person: AggregationSortType.ALPHABETICAL,
+  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/restoration-state-handler.ts

@@ -185,10 +185,16 @@ export class RestorationStateHandler
       }
     }
 
+    const dateField =
+      state.minSelectedDate?.includes('-') ||
+      state.maxSelectedDate?.includes('-')
+        ? 'date'
+        : 'year';
+
     if (state.minSelectedDate && state.maxSelectedDate) {
       newParams.append(
         'and[]',
-        `year:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`,
+        `${dateField}:[${state.minSelectedDate} TO ${state.maxSelectedDate}]`,
       );
     }
 
@@ -337,6 +343,7 @@ export class RestorationStateHandler
         }
 
         switch (field) {
+          case 'date':
           case 'year': {
             const [minDate, maxDate] = value.split(' TO ');
             // we have two potential ways of filtering by date:

package/src/utils/facet-utils.ts

@@ -62,7 +62,7 @@ export function updateSelectedFacetBucket(
   omitNoneState = false,
 ): SelectedFacets {
   const defaultedSelectedFacets = selectedFacets ?? getDefaultSelectedFacets();
-  const newFacets = {
+  const newFacets: SelectedFacets = {
     ...defaultedSelectedFacets,
     [facetType]: {
       ...defaultedSelectedFacets[facetType],
@@ -71,7 +71,7 @@ export function updateSelectedFacetBucket(
   };
 
   if (omitNoneState && bucket.state === 'none') {
-    delete newFacets[facetType][bucket.key];
+    delete newFacets[facetType]?.[bucket.key];
   }
 
   return newFacets;
@@ -93,6 +93,7 @@ export function cloneSelectedFacets(
 ): SelectedFacets {
   const cloneResult = getDefaultSelectedFacets();
   forEachFacetBucket(selectedFacets, (facetType, bucketKey, bucket) => {
+    if (!cloneResult[facetType]) cloneResult[facetType] = {};
     cloneResult[facetType][bucketKey] = bucket;
   });
   return cloneResult;
@@ -124,13 +125,14 @@ export function mergeSelectedFacets(
 ): SelectedFacets {
   const mergeResult = cloneSelectedFacets(destination);
   forEachFacetBucket(source, (facetType, bucketKey, bucket) => {
+    if (!mergeResult[facetType]) mergeResult[facetType] = {};
     mergeResult[facetType][bucketKey] = bucket;
   });
 
   // Normalize any 'none' states on the result (from either source or destination)
   forEachFacetBucket(mergeResult, (facetType, bucketKey, bucket) => {
     if (bucket.state === 'none') {
-      delete mergeResult[facetType][bucketKey];
+      delete mergeResult[facetType]?.[bucketKey];
     }
   });
 

package/test/collection-facets.test.ts

@@ -629,6 +629,39 @@ describe('Collection Facets', () => {
     expect(facetRows?.[7]?.bucket?.key).to.equal('collection');
   });
 
+  it('uses specified facet display order', async () => {
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets
+        .facetDisplayOrder=${['language', 'creator'] as FacetOption[]}
+      ></collection-facets>`,
+    );
+
+    const aggs: Record<string, Aggregation> = {
+      mediatype: new Aggregation({
+        buckets: [{ key: 'texts', doc_count: 5 }],
+      }),
+      collection: new Aggregation({
+        buckets: [{ key: 'foo', doc_count: 10 }],
+      }),
+      creator: new Aggregation({
+        buckets: [{ key: 'bar', doc_count: 15 }],
+      }),
+      language: new Aggregation({
+        buckets: [{ key: 'baz', doc_count: 20 }],
+      }),
+    };
+
+    el.aggregations = aggs;
+    await el.updateComplete;
+
+    const facetHeaders = el.shadowRoot?.querySelectorAll('.facet-group-header');
+
+    // The only two facet groups should be Language and Creator (in that order)
+    expect(facetHeaders?.length).to.equal(2);
+    expect(facetHeaders?.[0].textContent).to.contain('Language');
+    expect(facetHeaders?.[1].textContent).to.contain('Creator');
+  });
+
   describe('More Facets', () => {
     it('Does not render < allowedFacetCount', async () => {
       const el = await fixture<CollectionFacets>(

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

@@ -100,7 +100,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.year['2018'].state).to.equal(
+    expect(restorationState.selectedFacets.year?.['2018'].state).to.equal(
       'selected',
     );
   });
@@ -160,7 +160,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.subject.foo.state).to.equal(
+    expect(restorationState.selectedFacets.subject?.foo.state).to.equal(
       'selected',
     );
   });
@@ -173,7 +173,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.year['2018'].state).to.equal(
+    expect(restorationState.selectedFacets.year?.['2018'].state).to.equal(
       'hidden',
     );
   });
@@ -188,17 +188,17 @@ describe('Restoration state handler', () => {
 
     const restorationState = handler.getRestorationState();
 
-    expect(restorationState.selectedFacets.collection.foo.state).to.equal(
+    expect(restorationState.selectedFacets.collection?.foo.state).to.equal(
       'selected',
     );
-    expect(restorationState.selectedFacets.collection.bar.state).to.equal(
+    expect(restorationState.selectedFacets.collection?.bar.state).to.equal(
       'selected',
     );
 
-    expect(restorationState.selectedFacets.collection.baz.state).to.equal(
+    expect(restorationState.selectedFacets.collection?.baz.state).to.equal(
       'hidden',
     );
-    expect(restorationState.selectedFacets.collection.boop.state).to.equal(
+    expect(restorationState.selectedFacets.collection?.boop.state).to.equal(
       'hidden',
     );
   });
@@ -211,7 +211,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.collection.foo.state).to.equal(
+    expect(restorationState.selectedFacets.collection?.foo.state).to.equal(
       'hidden',
     );
   });
@@ -224,7 +224,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.subject.foo.state).to.equal(
+    expect(restorationState.selectedFacets.subject?.foo.state).to.equal(
       'selected',
     );
   });
@@ -237,7 +237,7 @@ describe('Restoration state handler', () => {
     window.history.replaceState({ path: url.href }, '', url.href);
 
     const restorationState = handler.getRestorationState();
-    expect(restorationState.selectedFacets.year['2018'].state).to.equal(
+    expect(restorationState.selectedFacets.year?.['2018'].state).to.equal(
       'hidden',
     );
   });

package/dist/test/tiles/mediatype-icon.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mediatype-icon.test.js","sourceRoot":"","sources":["../../../test/tiles/mediatype-icon.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { TileMediatypeIcon } from '../../src/tiles/tile-mediatype-icon';\n\nimport '../../src/tiles/tile-mediatype-icon';\n\ndescribe('Mediatype Icon', () => {\n  it('renders component', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon mediatype=\"texts\"></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon');\n    expect(iconDiv).to.exist;\n  });\n\n  it('renders basic mediatype correctly', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon mediatype=\"movies\"></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('Movie');\n    expect(iconDiv.getAttribute('style')).to.include('#f1644b');\n    expect(iconDiv.children[0]).to.be.instanceOf(SVGElement);\n  });\n\n  it('renders TV mediatype', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon\n        mediatype=\"movies\"\n        .collections=${['tvnews']}\n      ></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV');\n  });\n\n  it('renders TV Commercial mediatype', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon\n        mediatype=\"movies\"\n        .collections=${['tvnews', 'tv_ads']}\n      ></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV Commercial');\n  });\n\n  it('renders TV Fact Check mediatype for search results', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon\n        isTvSearchResult\n        mediatype=\"movies\"\n        .collections=${['tvnews', 'factchecked']}\n      ></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV Fact Check');\n  });\n\n  it('does not use TV Fact Check mediatype for non-search results', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon\n        mediatype=\"movies\"\n        .collections=${['tvnews', 'factchecked']}\n      ></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV');\n  });\n\n  it('renders radio mediatype', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon\n        mediatype=\"audio\"\n        .collections=${['radio']}\n      ></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('Radio');\n  });\n\n  it('renders no icon if mediatype is unrecognized', async () => {\n    const el = await fixture<TileMediatypeIcon>(html`\n      <tile-mediatype-icon mediatype=\"foobar\"></tile-mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon');\n    expect(iconDiv).not.to.exist;\n  });\n});\n"]}