@internetarchive/collection-browser 4.2.0-alpha-webdev8164.3 → 4.2.1-alpha-webdev7004.0

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

@@ -25,27 +25,19 @@ export class MoreFacetsPagination extends LitElement {
 
   @property({ type: Number }) currentPage: number = 1;
 
-  /**
-   * When true, shows a more compact set of page numbers
-   * (only 1 neighbor on each side of the current page).
-   */
-  @property({ type: Boolean }) compact = false;
-
   @state() pages?: number[] = [];
 
+  firstUpdated() {
+    this.observePageCount();
+  }
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  override willUpdate(changed: Map<string, any>) {
-    if (
-      changed.has('size') ||
-      changed.has('compact') ||
-      changed.has('currentPage')
-    ) {
-      this.updatePages();
+  override updated(changed: Map<string, any>) {
+    if (changed.has('size')) {
+      this.observePageCount();
     }
-    if (
-      changed.has('currentPage') &&
-      changed.get('currentPage') !== undefined
-    ) {
+    if (changed.has('currentPage')) {
+      this.observePageCount();
       this.emitPageClick();
     }
   }
@@ -58,14 +50,9 @@ export class MoreFacetsPagination extends LitElement {
    * - outlier: last page selected, show 1 ... N-2 N-1 _N_
    * - outlier: if page count = 7, & selected is either [2, 3, 4, 5, 6], show all pages
    */
-  updatePages() {
+  observePageCount() {
     this.pages = []; /* `0` is elipses marker */
 
-    if (this.compact) {
-      this.updatePagesCompact();
-      return;
-    }
-
     const paginatorMaxPagesToShow = 7;
     const atMinThreshold = this.size <= paginatorMaxPagesToShow;
 
@@ -179,52 +166,6 @@ export class MoreFacetsPagination extends LitElement {
     }
   }
 
-  /**
-   * Compact page calculation: shows first, ..., prev, current, next, ..., last.
-   * Only 1 neighbor on each side of the current page for minimal width.
-   */
-  private updatePagesCompact() {
-    if (this.size <= 3) {
-      this.pages = [...Array(this.size).keys()].map(i => i + 1);
-      return;
-    }
-
-    const pages: number[] = [];
-
-    // First page
-    pages.push(1);
-
-    // Ellipsis after first if current is far enough away
-    if (this.currentPage > 3) {
-      pages.push(0);
-    }
-
-    // Previous page (if not already shown as first)
-    if (this.currentPage - 1 > 1) {
-      pages.push(this.currentPage - 1);
-    }
-
-    // Current page (if not first or last)
-    if (this.currentPage !== 1 && this.currentPage !== this.size) {
-      pages.push(this.currentPage);
-    }
-
-    // Next page (if not already the last)
-    if (this.currentPage + 1 < this.size) {
-      pages.push(this.currentPage + 1);
-    }
-
-    // Ellipsis before last if current is far enough away
-    if (this.currentPage < this.size - 2) {
-      pages.push(0);
-    }
-
-    // Last page
-    pages.push(this.size);
-
-    this.pages = pages;
-  }
-
   private get getEllipsisTemplate() {
     return html`<i class="ellipses">...</i>`;
   }
@@ -309,10 +250,6 @@ export class MoreFacetsPagination extends LitElement {
           margin-top: 10px;
           background-color: #eee;
           text-align: center;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          flex-wrap: nowrap;
         }
         .facets-pagination button {
           border: none;
@@ -339,7 +276,6 @@ export class MoreFacetsPagination extends LitElement {
           vertical-align: baseline;
           display: inline-block;
           min-width: 2.5rem;
-          font-family: inherit;
         }
         .facets-pagination i {
           cursor: auto;
@@ -352,16 +288,6 @@ export class MoreFacetsPagination extends LitElement {
         .page-numbers {
           display: inline-block;
         }
-
-        @media (max-width: 560px) {
-          .facets-pagination button,
-          .facets-pagination i {
-            margin: 5px 2px;
-            padding: 3px;
-            min-width: 2rem;
-            font-size: 1.2rem;
-          }
-        }
       `,
     ];
   }

package/src/collection-facets/toggle-switch.ts

@@ -62,7 +62,6 @@ export class ToggleSwitch extends LitElement {
           id="switch-button"
           class=${this.side}
           aria-hidden="true"
-          tabindex="-1"
           @click=${this.handleClick}
         >
           <div id="knob"></div>

package/src/collection-facets.ts

@@ -42,7 +42,7 @@ import {
   FacetBucket,
   defaultFacetDisplayOrder,
   facetTitles,
-  lendingFacetDisplayNames,
+  customFacetDisplayNames,
   lendingFacetKeysVisibility,
   LendingFacetKey,
   suppressedCollections,
@@ -612,10 +612,12 @@ export class CollectionFacets extends LitElement {
         const buckets: FacetBucket[] = Object.entries(selectedFacets).map(
           ([value, facetData]) => {
             let displayText: string = value;
-            // for lending facets, convert the key to a readable format
-            if (option === 'lending') {
-              displayText =
-                lendingFacetDisplayNames[value as LendingFacetKey] ?? 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,
@@ -667,11 +669,12 @@ export class CollectionFacets extends LitElement {
       const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => {
         const bucketKey = bucket.key;
         let displayText = `${bucket.key}`;
-        // for lending facets, convert the bucket key to a readable format
-        if (option === 'lending') {
-          displayText =
-            lendingFacetDisplayNames[bucket.key as LendingFacetKey] ??
-            `${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,

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

@@ -603,6 +603,24 @@ export class CollectionBrowserDataSource
       );
   }
 
+  /**
+   * Returns the search type to actually use for fetches.
+   * When within a collection with an empty query and FTS selected,
+   * falls back to metadata search since FTS requires a non-empty query
+   * and we'd still like to show the unfiltered collection in that case.
+   */
+  private get effectiveSearchType(): SearchType {
+    const trimmedQuery = this.host.baseQuery?.trim();
+    if (
+      !trimmedQuery &&
+      this.host.withinCollection &&
+      this.host.searchType === SearchType.FULLTEXT
+    ) {
+      return SearchType.METADATA;
+    }
+    return this.host.searchType;
+  }
+
   /**
    * @inheritdoc
    */
@@ -615,9 +633,11 @@ export class CollectionBrowserDataSource
     const isCollectionSearch = !!this.host.withinCollection;
     const isProfileSearch = !!this.host.withinProfile;
     const hasProfileElement = !!this.host.profileElement;
-    const isDefaultedSearch = this.host.searchType === SearchType.DEFAULT;
-    const isMetadataSearch = this.host.searchType === SearchType.METADATA;
-    const isTvSearch = this.host.searchType === SearchType.TV;
+
+    const searchType = this.effectiveSearchType;
+    const isDefaultedSearch = searchType === SearchType.DEFAULT;
+    const isMetadataSearch = searchType === SearchType.METADATA;
+    const isTvSearch = searchType === SearchType.TV;
 
     // Metadata/tv searches within a collection are allowed to have no query.
     const isValidForCollectionSearch =
@@ -696,7 +716,7 @@ export class CollectionBrowserDataSource
     const pageTarget = this.host.withinCollection ?? profileKey;
     const sortField = this.host.selectedSort ?? 'none';
     const sortDirection = this.host.sortDirection ?? 'none';
-    return `fq:${this.fullQuery}-pt:${pageTarget}-st:${this.host.searchType}-sf:${sortField}-sd:${sortDirection}`;
+    return `fq:${this.fullQuery}-pt:${pageTarget}-st:${this.effectiveSearchType}-sf:${sortField}-sd:${sortDirection}`;
   }
 
   /**
@@ -706,7 +726,7 @@ export class CollectionBrowserDataSource
   get facetFetchQueryKey(): string {
     const profileKey = `pf;${this.host.withinProfile}--pe;${this.host.profileElement}`;
     const pageTarget = this.host.withinCollection ?? profileKey;
-    return `facets-fq:${this.fullQuery}-pt:${pageTarget}-st:${this.host.searchType}`;
+    return `facets-fq:${this.fullQuery}-pt:${pageTarget}-st:${this.effectiveSearchType}`;
   }
 
   /**
@@ -1017,7 +1037,7 @@ export class CollectionBrowserDataSource
 
     const searchResponse = await this.host.searchService?.search(
       params,
-      this.host.searchType,
+      this.effectiveSearchType,
     );
     const success = searchResponse?.success;
 
@@ -1127,10 +1147,11 @@ export class CollectionBrowserDataSource
       this.host.defaultSortField
     ) {
       const sortOption = SORT_OPTIONS[this.host.defaultSortField];
-      if (sortOption.searchServiceKey) {
+      const { searchServiceKey, handledBySearchService } = sortOption;
+      if (searchServiceKey && handledBySearchService) {
         sortParams = [
           {
-            field: sortOption.searchServiceKey,
+            field: searchServiceKey,
             direction: this.host.defaultSortDirection ?? 'desc',
           },
         ];
@@ -1152,7 +1173,7 @@ export class CollectionBrowserDataSource
     // log('=== FIRING PAGE REQUEST ===', params);
     const searchResponse = await this.host.searchService?.search(
       params,
-      this.host.searchType,
+      this.effectiveSearchType,
     );
     // log('=== RECEIVED PAGE RESPONSE IN CB ===', searchResponse);
     const success = searchResponse?.success;
@@ -1341,7 +1362,7 @@ export class CollectionBrowserDataSource
 
     const searchResponse = await this.host.searchService?.search(
       params,
-      this.host.searchType,
+      this.effectiveSearchType,
     );
 
     return (searchResponse?.success?.response?.aggregations?.[

package/src/mediatype/mediatype-config.ts

@@ -116,7 +116,7 @@ export const mediatypeConfig: Record<MediatypeConfigKey, MediatypeConfig> = {
   tvCommercial: {
     color: '#84b648',
     icon: tvCommercialIcon,
-    text: 'TV Commercial',
+    text: 'TV Political Ad',
   },
   tvFactCheck: {
     color: '#f1644b',

package/src/models.ts

@@ -588,6 +588,7 @@ export const defaultProfileElementSorts: Record<
   reviews: SortField.datereviewed,
   collections: SortField.datearchived,
   web_archives: SortField.datearchived,
+  favorites: SortField.datefavorited,
 };
 
 /** A union of the fields that permit prefix filtering (e.g., alphabetical filtering) */
@@ -735,7 +736,7 @@ export const tvFacetDisplayOrder: FacetOption[] = [
   'creator',
   'year',
   'subject',
-  'person',
+  // 'person', Omitting the Person facet group for now, though it may be re-added later with new semantics
   'language',
   'clip_type',
 ];
@@ -824,14 +825,35 @@ export const lendingFacetKeysVisibility: Record<LendingFacetKey, boolean> = {
 };
 
 /**
- * Maps valid, visible lending keys to their facet sidebar display text
+ * Most facet options allow any string as keys, while some others can only take on a
+ * limited set of strings. This type just defines those restrictions for the specific
+ * facet types where they apply.
  */
-export const lendingFacetDisplayNames: Partial<
-  Record<LendingFacetKey, string>
-> = {
-  is_lendable: 'Lending Library',
-  available_to_borrow: 'Borrow 14 Days',
-  is_readable: 'Always Available',
+export type AllowedFacetKey<T extends FacetOption> = T extends 'lending'
+  ? LendingFacetKey
+  : T extends 'clip_type'
+    ? TvClipFilterType
+    : string;
+
+/**
+ * A type mapping FacetOptions to objects that define custom display names for some
+ * or all of their valid keys.
+ */
+export type FacetDisplayNameMap = {
+  [K in FacetOption]?: Partial<Record<AllowedFacetKey<K>, string>>;
+};
+
+export const customFacetDisplayNames: FacetDisplayNameMap = {
+  lending: {
+    is_lendable: 'Lending Library',
+    available_to_borrow: 'Borrow 14 Days',
+    is_readable: 'Always Available',
+  },
+  clip_type: {
+    quote: 'Quote',
+    commercial: 'Political Ad',
+    'fact check': 'Fact Check',
+  },
 };
 
 /**

package/src/restoration-state-handler.ts

@@ -337,7 +337,9 @@ export class RestorationStateHandler
     if (facetAnds) {
       facetAnds.forEach(and => {
         // eslint-disable-next-line prefer-const
-        let [field, value] = and.split(':');
+        let [field, ...valueParts] = and.split(':');
+        if (!valueParts.length) return;
+        const value = valueParts.join(':');
 
         // Legacy search allowed and[] fields like 'creatorSorter', 'languageSorter', etc.
         // which we want to normalize to 'creator', 'language', etc. if redirected here.
@@ -396,7 +398,9 @@ export class RestorationStateHandler
 
     if (facetNots) {
       facetNots.forEach(not => {
-        const [field, value] = not.split(':');
+        const [field, ...valueParts] = not.split(':');
+        if (!valueParts.length) return;
+        const value = valueParts.join(':');
         this.setSelectedFacetState(
           restorationState.selectedFacets,
           field as FacetOption,
@@ -531,7 +535,7 @@ export class RestorationStateHandler
     if (!facet) return; // Unrecognized facet group, ignore it.
 
     const unQuotedValue = this.stripQuotes(value);
-    facet[unQuotedValue] ??= this.getDefaultBucket(value);
+    facet[unQuotedValue] ??= this.getDefaultBucket(unQuotedValue);
     facet[unQuotedValue].state = state;
   }
 

package/src/tiles/hover/hover-pane-controller.ts

@@ -227,7 +227,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
 
   /** @inheritdoc */
   toggleHoverPane(options: ToggleHoverPaneOptions): void {
-    if (this.hoverPaneState === 'shown') {
+    if (this.hoverPaneState !== 'hidden') {
       this.fadeOutHoverPane();
       this.forceTouchBackdrop = false;
     } else {
@@ -546,6 +546,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
     if (this.hoverPaneState !== 'hidden') {
       this.fadeOutHoverPane();
     }
+    e.preventDefault();
     e.stopPropagation();
   };
 

package/src/tiles/tile-dispatcher.ts

@@ -218,6 +218,15 @@ export class TileDispatcher
     return window.matchMedia('(hover: hover)').matches;
   }
 
+  /**
+   * Whether the info button should be shown on this tile.
+   * Only shown on touch/non-hover devices where a hover pane is available,
+   * so the button always has something to toggle.
+   */
+  private get shouldShowInfoButton(): boolean {
+    return !this.isHoverEnabled && this.shouldPrepareHoverPane;
+  }
+
   /** @inheritdoc */
   getHoverPane(): TileHoverPane | undefined {
     return this.hoverPane;
@@ -326,7 +335,7 @@ export class TileDispatcher
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
               .layoutType=${this.layoutType}
-              ?showInfoButton=${!this.isHoverEnabled}
+              ?showInfoButton=${this.shouldShowInfoButton}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </collection-tile>`;
@@ -340,7 +349,7 @@ export class TileDispatcher
               .creatorFilter=${creatorFilter}
               .suppressBlurring=${this.suppressBlurring}
               .isManageView=${this.isManageView}
-              ?showInfoButton=${!this.isHoverEnabled}
+              ?showInfoButton=${this.shouldShowInfoButton}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </account-tile>`;
@@ -373,7 +382,7 @@ export class TileDispatcher
               .isManageView=${this.isManageView}
               .layoutType=${this.layoutType}
               ?showTvClips=${this.showTvClips}
-              ?showInfoButton=${!this.isHoverEnabled}
+              ?showInfoButton=${this.shouldShowInfoButton}
               ?useLocalTime=${this.useLocalTime}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >

package/test/collection-browser.test.ts

@@ -1906,6 +1906,111 @@ describe('Collection Browser', () => {
     expect(el.maxSelectedDate).not.to.exist;
   });
 
+  it('does not include stale facets in the search request when query changes', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`,
+    );
+
+    // Perform an initial search with a facet applied
+    const selectedFacets = getDefaultSelectedFacets();
+    selectedFacets.collection.radio = {
+      count: 1,
+      key: 'radio',
+      state: 'selected',
+    } as FacetBucket;
+    el.baseQuery = 'cookies';
+    el.selectedFacets = selectedFacets;
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    // The initial search should include the facet filter
+    expect(searchService.searchParams?.filters?.collection?.radio).to.equal(
+      FilterConstraint.INCLUDE,
+    );
+
+    // Ensure that the first search after the query change doesn't have stale facets
+    const searchSpy = sinon.spy(searchService, 'search');
+    el.baseQuery = 'cookies AND NOT collection:radio';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const firstCall = searchSpy.firstCall;
+    expect(firstCall.args[0].query).to.equal(
+      'cookies AND NOT collection:radio',
+    );
+    expect(firstCall.args[0].filters?.collection).not.to.exist;
+
+    searchSpy.restore();
+  });
+
+  it('does not include stale date range in the search request when query changes', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`,
+    );
+
+    // Perform an initial search with a date range applied
+    el.baseQuery = 'foo';
+    el.minSelectedDate = '2000';
+    el.maxSelectedDate = '2010';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    expect(searchService.searchParams?.filters?.year?.['2000']).to.equal(
+      FilterConstraint.GREATER_OR_EQUAL,
+    );
+    expect(searchService.searchParams?.filters?.year?.['2010']).to.equal(
+      FilterConstraint.LESS_OR_EQUAL,
+    );
+
+    // Change the query, which should clear the date range before searching
+    el.baseQuery = 'bar';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    expect(searchService.searchParams?.filters?.year).not.to.exist;
+    expect(el.minSelectedDate).not.to.exist;
+    expect(el.maxSelectedDate).not.to.exist;
+  });
+
+  it('does not include stale letter filters in the search request when query changes', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`,
+    );
+
+    // Perform an initial search with a letter filter applied
+    el.baseQuery = 'first-creator';
+    el.selectedSort = 'creator' as SortField;
+    el.sortDirection = 'asc';
+    el.selectedCreatorFilter = 'X';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+    await nextTick();
+
+    expect(searchService.searchParams?.filters?.firstCreator?.X).to.equal(
+      FilterConstraint.INCLUDE,
+    );
+
+    // Change the query, which should clear the letter filter before searching.
+    // Check the first search call to ensure stale filters aren't sent initially.
+    const searchSpy = sinon.spy(searchService, 'search');
+    el.baseQuery = 'bar';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+    await nextTick();
+
+    // The very first search after the query change should not include the old filter
+    const firstCall = searchSpy.firstCall;
+    expect(firstCall.args[0].filters?.firstCreator).not.to.exist;
+
+    searchSpy.restore();
+  });
+
   it('correctly retrieves web archive hits', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(