@internetarchive/collection-browser 2.12.0 → 2.12.1-alpha-webdev5427.1

package/src/app-root.ts

@@ -169,6 +169,17 @@ export class AppRoot extends LitElement {
 
           <div id="search-types">
             Search type:
+            <span class="search-type">
+              <input
+                type="radio"
+                id="default-search"
+                name="search-type"
+                value="default"
+                .checked=${this.searchType === SearchType.DEFAULT}
+                @click=${this.searchTypeSelected}
+              />
+              <label for="default-search">Default</label>
+            </span>
             <span class="search-type">
               <input
                 type="radio"
@@ -191,6 +202,28 @@ export class AppRoot extends LitElement {
               />
               <label for="fulltext-search">Full text</label>
             </span>
+            <span class="search-type">
+              <input
+                type="radio"
+                id="tv-search"
+                name="search-type"
+                value="tv"
+                .checked=${this.searchType === SearchType.TV}
+                @click=${this.searchTypeSelected}
+              />
+              <label for="tv-search">TV</label>
+            </span>
+            <span class="search-type">
+              <input
+                type="radio"
+                id="radio-search"
+                name="search-type"
+                value="radio"
+                .checked=${this.searchType === SearchType.RADIO}
+                @click=${this.searchTypeSelected}
+              />
+              <label for="radio-search">Radio</label>
+            </span>
           </div>
 
           <div id="toggle-controls">
@@ -529,8 +562,22 @@ export class AppRoot extends LitElement {
   /** Handler for user input selecting a search type */
   private searchTypeSelected(e: Event) {
     const target = e.target as HTMLInputElement;
-    this.searchType =
-      target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;
+    this.searchType = this.searchTypeFromSelectedOption(target.value);
+  }
+
+  private searchTypeFromSelectedOption(option: string): SearchType {
+    switch (option) {
+      case 'metadata':
+        return SearchType.METADATA;
+      case 'fulltext':
+        return SearchType.FULLTEXT;
+      case 'tv':
+        return SearchType.TV;
+      case 'radio':
+        return SearchType.RADIO;
+      default:
+        return SearchType.DEFAULT;
+    }
   }
 
   private loginChanged(e: Event) {

package/src/collection-browser.ts

@@ -43,6 +43,8 @@ import {
   SORT_OPTIONS,
   defaultProfileElementSorts,
   FacetLoadStrategy,
+  defaultFacetDisplayOrder,
+  tvFacetDisplayOrder,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -1100,6 +1102,14 @@ export class CollectionBrowser
       `;
     }
 
+    // We switch to TV facet ordering & date picker if we are in a TV collection or showing TV search results
+    const shouldUseTvInterface =
+      this.isTVCollection ||
+      (!this.withinCollection && this.searchType === SearchType.TV);
+    const facetDisplayOrder = shouldUseTvInterface
+      ? tvFacetDisplayOrder
+      : defaultFacetDisplayOrder;
+
     const facets = html`
       <collection-facets
         @facetsChanged=${this.facetsChanged}
@@ -1122,11 +1132,13 @@ export class CollectionBrowser
         .collectionTitles=${this.dataSource.collectionTitles}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
         .allowExpandingDatePicker=${!this.mobileView}
+        .allowDatePickerMonths=${shouldUseTvInterface}
         .contentWidth=${this.contentWidth}
         .query=${this.baseQuery}
         .filterMap=${this.dataSource.filterMap}
         .isManageView=${this.isManageView}
         .modalManager=${this.modalManager}
+        .facetDisplayOrder=${facetDisplayOrder}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetsLoading}
         ?fullYearAggregationLoading=${this.facetsLoading}

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

@@ -60,7 +60,7 @@ export class MoreFacetsContent extends LitElement {
 
   @property({ type: Object }) filterMap?: FilterMap;
 
-  @property({ type: String }) searchType?: SearchType;
+  @property({ type: Number }) searchType?: SearchType;
 
   @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;
 
@@ -83,7 +83,7 @@ export class MoreFacetsContent extends LitElement {
    */
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
-  @property({ type: String }) sortedBy: AggregationSortType =
+  @property({ type: Number }) sortedBy: AggregationSortType =
     AggregationSortType.COUNT;
 
   @property({ type: Object }) modalManager?: ModalManagerInterface;
@@ -109,7 +109,8 @@ export class MoreFacetsContent extends LitElement {
    * eventually merged into the existing `selectedFacets` when the patron applies
    * their changes, or discarded if they cancel/close the dialog.
    */
-  @state() private unappliedFacetChanges = getDefaultSelectedFacets();
+  @state() private unappliedFacetChanges: SelectedFacets =
+    getDefaultSelectedFacets();
 
   /**
    * Which page of facets we are showing.
@@ -272,7 +273,7 @@ export class MoreFacetsContent extends LitElement {
     // Apply any unapplied selections that appear on this page
     const unappliedBuckets = this.unappliedFacetChanges[this.facetKey];
     for (const [index, bucket] of bucketsWithCount.entries()) {
-      const unappliedBucket = unappliedBuckets[bucket.key];
+      const unappliedBucket = unappliedBuckets?.[bucket.key];
       if (unappliedBucket) {
         bucketsWithCount[index] = { ...unappliedBucket };
       }

package/src/collection-facets/smart-facets/smart-facet-bar.ts

@@ -202,7 +202,7 @@ export class SmartFacetBar extends LitElement {
         if (
           key === 'mediatype' &&
           this.selectedFacets &&
-          Object.values(this.selectedFacets.mediatype).some(
+          Object.values(this.selectedFacets.mediatype ?? {}).some(
             bucket => bucket.state !== 'none',
           )
         ) {
@@ -213,7 +213,7 @@ export class SmartFacetBar extends LitElement {
         const buckets = agg.buckets as Bucket[];
 
         const unusedBuckets = buckets.filter(b => {
-          const selectedFacetBucket = this.selectedFacets?.[facetType][b.key];
+          const selectedFacetBucket = this.selectedFacets?.[facetType]?.[b.key];
           if (selectedFacetBucket && selectedFacetBucket.state !== 'none') {
             return false;
           }

package/src/collection-facets.ts

@@ -11,7 +11,7 @@ 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 type {
+import {
   Aggregation,
   AggregationSortType,
   Bucket,
@@ -36,7 +36,7 @@ import {
   SelectedFacets,
   FacetGroup,
   FacetBucket,
-  facetDisplayOrder,
+  defaultFacetDisplayOrder,
   facetTitles,
   lendingFacetDisplayNames,
   lendingFacetKeysVisibility,
@@ -68,7 +68,7 @@ import {
 export class CollectionFacets extends LitElement {
   @property({ type: Object }) searchService?: SearchServiceInterface;
 
-  @property({ type: String }) searchType?: SearchType;
+  @property({ type: Number }) searchType?: SearchType;
 
   @property({ type: Object }) aggregations?: Record<string, Aggregation>;
 
@@ -94,6 +94,8 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Boolean }) allowExpandingDatePicker = false;
 
+  @property({ type: Boolean }) allowDatePickerMonths = false;
+
   @property({ type: String }) query?: string;
 
   @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;
@@ -108,6 +110,9 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Boolean }) isManageView = false;
 
+  @property({ type: Array }) facetDisplayOrder: FacetOption[] =
+    defaultFacetDisplayOrder;
+
   @property({ type: Object, attribute: false })
   modalManager?: ModalManagerInterface;
 
@@ -134,6 +139,9 @@ export class CollectionFacets extends LitElement {
     creator: false,
     collection: false,
     year: false,
+    program: false,
+    person: false,
+    sponsor: false,
   };
 
   /**
@@ -319,15 +327,18 @@ export class CollectionFacets extends LitElement {
     const { fullYearsHistogramAggregation } = this;
     const minDate = fullYearsHistogramAggregation?.first_bucket_key;
     const maxDate = fullYearsHistogramAggregation?.last_bucket_key;
+    const dateFormat = this.allowDatePickerMonths ? 'YYYY-MM' : 'YYYY';
     return this.fullYearAggregationLoading
       ? html`<div class="histogram-loading-indicator">&hellip;</div>` // Ellipsis block
       : html`
           <histogram-date-range
+            class=${this.allowDatePickerMonths ? '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
@@ -363,7 +374,7 @@ export class CollectionFacets extends LitElement {
   private get mergedFacets(): FacetGroup[] {
     const facetGroups: FacetGroup[] = [];
 
-    facetDisplayOrder.forEach(facetKey => {
+    this.facetDisplayOrder.forEach(facetKey => {
       const selectedFacetGroup = this.selectedFacetGroups.find(
         group => group.key === facetKey,
       );
@@ -820,7 +831,7 @@ export class CollectionFacets extends LitElement {
 
         h3 {
           font-size: 1.4rem;
-          font-weight: 200
+          font-weight: 200;
           padding-bottom: 3px;
           margin: 0;
         }
@@ -858,6 +869,10 @@ export class CollectionFacets extends LitElement {
           height: 15px;
           cursor: pointer;
         }
+
+        histogram-date-range.wide-inputs {
+          --histogramDateRangeInputWidth: 4.8rem;
+        }
       `,
     ];
   }

package/src/models.ts

@@ -530,7 +530,11 @@ export type FacetOption =
   | 'language'
   | 'creator'
   | 'collection'
-  | 'year';
+  | 'year'
+  // TV-specific facet options:
+  | 'program'
+  | 'person'
+  | 'sponsor';
 
 export type SelectedFacetState = 'selected' | 'hidden';
 
@@ -571,12 +575,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: {},
@@ -584,9 +587,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',
@@ -596,6 +605,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',
@@ -604,6 +630,9 @@ export const facetTitles: Record<FacetOption, string> = {
   creator: 'Creator',
   collection: 'Collection',
   year: 'Year',
+  program: 'Program',
+  person: 'Person',
+  sponsor: 'Sponsor',
 };
 
 /**
@@ -616,7 +645,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,
 };
 
 /**
@@ -630,7 +662,10 @@ 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,
 };
 
 export type LendingFacetKey =

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',
     );
   });