@internetarchive/collection-browser 2.4.1-e2e-test-2 → 2.5.1-alpha.0

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

@@ -22,6 +22,7 @@ import {
 } from '@internetarchive/search-service';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
+import { msg } from '@lit/localize';
 import {
   SelectedFacets,
   FacetGroup,
@@ -31,6 +32,8 @@ import {
   suppressedCollections,
   valueFacetSort,
   defaultFacetSort,
+  getDefaultSelectedFacets,
+  FacetEventDetails,
 } from '../models';
 import type {
   CollectionTitles,
@@ -45,21 +48,20 @@ import {
 } from '../utils/analytics-events';
 import './toggle-switch';
 import { srOnlyStyle } from '../styles/sr-only';
+import {
+  mergeSelectedFacets,
+  sortBucketsBySelectionState,
+  updateSelectedFacetBucket,
+} from '../utils/facet-utils';
 
 @customElement('more-facets-content')
 export class MoreFacetsContent extends LitElement {
   @property({ type: String }) facetKey?: FacetOption;
 
-  @property({ type: String }) facetAggregationKey?: FacetOption;
-
   @property({ type: String }) query?: string;
 
   @property({ type: Object }) filterMap?: FilterMap;
 
-  @property({ type: Object }) modalManager?: ModalManagerInterface;
-
-  @property({ type: Object }) searchService?: SearchServiceInterface;
-
   @property({ type: String }) searchType?: SearchType;
 
   @property({ type: Object }) pageSpecifierParams?: PageSpecifierParams;
@@ -67,37 +69,73 @@ export class MoreFacetsContent extends LitElement {
   @property({ type: Object })
   collectionTitles?: CollectionTitles;
 
+  /**
+   * Maximum number of facets to show per page within the modal.
+   */
+  @property({ type: Number }) facetsPerPage = 35;
+
+  /**
+   * Whether we are waiting for facet data to load.
+   * We begin with this set to true so that we show an initial loading indicator.
+   */
+  @property({ type: Boolean }) facetsLoading = true;
+
+  /**
+   * The set of pre-existing facet selections (including both selected & negated facets).
+   */
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
   @property({ type: String }) sortedBy: AggregationSortType =
     AggregationSortType.COUNT;
 
-  @property({ type: Object, attribute: false })
-  analyticsHandler?: AnalyticsManagerInterface;
-
-  @state() aggregations?: Record<string, Aggregation>;
+  @property({ type: Object }) modalManager?: ModalManagerInterface;
 
-  @state() facetGroup?: FacetGroup[] = [];
+  @property({ type: Object }) searchService?: SearchServiceInterface;
 
-  @state() facetGroupTitle?: String = '';
+  @property({ type: Object, attribute: false })
+  analyticsHandler?: AnalyticsManagerInterface;
 
-  @state() pageNumber = 1;
+  /**
+   * The full set of aggregations received from the search service
+   */
+  @state() private aggregations?: Record<string, Aggregation>;
 
   /**
-   * Facets are loading on popup
+   * A FacetGroup storing the full set of facet buckets to be shown on the dialog.
    */
-  @state() facetsLoading = true;
+  @state() private facetGroup?: FacetGroup;
 
-  @state() paginationSize = 0;
+  /**
+   * An object holding any changes the patron has made to their facet selections
+   * within the modal dialog but which they have not yet applied. These are
+   * 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() facetsType = 'modal';
+  /**
+   * Which page of facets we are showing.
+   */
+  @state() private pageNumber = 1;
 
-  private facetsPerPage = 35;
+  willUpdate(changed: PropertyValues): void {
+    if (
+      changed.has('aggregations') ||
+      changed.has('facetsPerPage') ||
+      changed.has('sortedBy') ||
+      changed.has('selectedFacets') ||
+      changed.has('unappliedFacetChanges')
+    ) {
+      // Convert the merged selected facets & aggregations into a facet group, and
+      // store it for reuse across pages.
+      this.facetGroup = this.mergedFacets;
+    }
+  }
 
-  updated(changed: PropertyValues) {
+  updated(changed: PropertyValues): void {
+    // If any of the search properties change, it triggers a facet fetch
     if (
       changed.has('facetKey') ||
-      changed.has('facetAggregationKey') ||
       changed.has('query') ||
       changed.has('searchType') ||
       changed.has('filterMap')
@@ -108,13 +146,9 @@ export class MoreFacetsContent extends LitElement {
 
       this.updateSpecificFacets();
     }
-
-    if (changed.has('pageNumber')) {
-      this.facetGroup = this.aggregationFacetGroups;
-    }
   }
 
-  firstUpdated() {
+  firstUpdated(): void {
     this.setupEscapeListeners();
   }
 
@@ -148,11 +182,13 @@ export class MoreFacetsContent extends LitElement {
    * - this.aggregations - hold result of search service and being used for further processing.
    */
   async updateSpecificFacets(): Promise<void> {
+    if (!this.facetKey) return; // Can't fetch facets if we don't know what type of facets we need!
+
     const trimmedQuery = this.query?.trim();
     if (!trimmedQuery && this.isSearchResultsPage) return; // The search page _requires_ a query
 
     const aggregations = {
-      simpleParams: [this.facetAggregationKey as string],
+      simpleParams: [this.facetKey],
     };
     const aggregationsSize = 65535; // todo - do we want to have all the records at once?
 
@@ -167,8 +203,6 @@ export class MoreFacetsContent extends LitElement {
 
     const results = await this.searchService?.search(params, this.searchType);
     this.aggregations = results?.success?.response.aggregations;
-
-    this.facetGroup = this.aggregationFacetGroups;
     this.facetsLoading = false;
 
     const collectionTitles = results?.success?.response?.collectionTitles;
@@ -179,6 +213,9 @@ export class MoreFacetsContent extends LitElement {
     }
   }
 
+  /**
+   * Handler for page number changes from the pagination widget.
+   */
   private pageNumberClicked(e: CustomEvent<{ page: number }>) {
     const page = e?.detail?.page;
     if (page) {
@@ -195,32 +232,24 @@ export class MoreFacetsContent extends LitElement {
   /**
    * Combines the selected facets with the aggregations to create a single list of facets
    */
-  private get mergedFacets(): FacetGroup[] | void {
-    const facetGroups: FacetGroup[] = [];
+  private get mergedFacets(): FacetGroup | undefined {
+    if (!this.facetKey || !this.selectedFacets) return undefined;
 
-    const selectedFacetGroup = this.selectedFacetGroups.find(
-      group => group.key === this.facetKey
-    );
-    const aggregateFacetGroup = this.aggregationFacetGroups.find(
-      group => group.key === this.facetKey
+    const { selectedFacetGroup, aggregationFacetGroup } = this;
+    const unappliedFacetBuckets = Object.values(
+      this.unappliedFacetChanges[this.facetKey]
     );
 
-    // if the user selected a facet, but it's not in the aggregation, we add it as-is
-    if (selectedFacetGroup && !aggregateFacetGroup) {
-      facetGroups.push(selectedFacetGroup);
-      return facetGroups;
-    }
-
-    // if we don't have an aggregate facet group, don't add this to the list
-    if (!aggregateFacetGroup) return facetGroups;
+    // If we don't have any aggregations, then there is nothing to show yet
+    if (!aggregationFacetGroup) return undefined;
 
-    // start with either the selected group if we have one, or the aggregate group
-    const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;
+    // Start with either the selected group if we have one, or the aggregate group otherwise
+    const facetGroup = { ...(selectedFacetGroup ?? aggregationFacetGroup) };
 
-    // attach the counts to the selected buckets
+    // Attach the counts to the selected buckets
     const bucketsWithCount =
       selectedFacetGroup?.buckets.map(bucket => {
-        const selectedBucket = aggregateFacetGroup.buckets.find(
+        const selectedBucket = aggregationFacetGroup.buckets.find(
           b => b.key === bucket.key
         );
         return selectedBucket
@@ -231,119 +260,143 @@ export class MoreFacetsContent extends LitElement {
           : bucket;
       }) ?? [];
 
-    // append any additional buckets that were not selected
-    aggregateFacetGroup.buckets.forEach(bucket => {
+    // Sort the buckets by selection state
+    // We do this *prior* to considering unapplied selections, because we want the facets
+    // to remain in position when they are selected/unselected, rather than re-sort themselves.
+    sortBucketsBySelectionState(bucketsWithCount, this.sortedBy);
+    console.log('done sorting buckets');
+
+    // Append any additional buckets that were not selected
+    aggregationFacetGroup.buckets.forEach(bucket => {
       const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);
       if (existingBucket) return;
       bucketsWithCount.push(bucket);
     });
+
+    // Apply any unapplied selections that appear on this page
+    for (const bucket of unappliedFacetBuckets) {
+      const existingBucketIndex = bucketsWithCount.findIndex(
+        b => b.key === bucket.key
+      );
+      if (existingBucketIndex >= 0) {
+        bucketsWithCount[existingBucketIndex] = { ...bucket };
+      }
+    }
     facetGroup.buckets = bucketsWithCount;
 
-    facetGroups.push(facetGroup);
-    return facetGroups;
+    return facetGroup;
   }
 
   /**
-   * Converts the selected facets to a `FacetGroup` array,
-   * which is easier to work with
+   * Converts the selected facets for the current facet key to a `FacetGroup`,
+   * which is easier to work with.
    */
-  private get selectedFacetGroups(): FacetGroup[] {
-    if (!this.selectedFacets) return [];
-
-    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(
-      ([key, selectedFacets]) => {
-        const option = key as FacetOption;
-        const title = facetTitles[option];
-
-        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(
-          ([value, data]) => {
-            const displayText: string = value;
-            return {
-              displayText,
-              key: value,
-              count: data?.count,
-              state: data?.state,
-            };
-          }
-        );
+  private get selectedFacetGroup(): FacetGroup | undefined {
+    if (!this.selectedFacets || !this.facetKey) return undefined;
+
+    const selectedFacetsForKey = this.selectedFacets[this.facetKey];
+    if (!selectedFacetsForKey) return undefined;
 
+    const facetGroupTitle = facetTitles[this.facetKey];
+
+    const buckets: FacetBucket[] = Object.entries(selectedFacetsForKey).map(
+      ([value, data]) => {
+        const displayText: string = value;
         return {
-          title,
-          key: option,
-          buckets,
+          displayText,
+          key: value,
+          count: data?.count,
+          state: data?.state,
         };
       }
     );
 
-    return facetGroups;
+    return {
+      title: facetGroupTitle,
+      key: this.facetKey,
+      buckets,
+    };
   }
 
   /**
-   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+   * Converts the raw `aggregations` for the current facet key to a `FacetGroup`,
+   * which is easier to work with.
    */
-  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;
-
-      const option = key as FacetOption;
-      this.facetGroupTitle = facetTitles[option];
-
-      // sort facets in specific order
-      let castedBuckets = aggregation.getSortedBuckets(
-        this.sortedBy
-      ) as Bucket[];
-
-      if (option === 'collection') {
-        // we are not showing fav- collections or certain deemphasized collections in facets
-        castedBuckets = castedBuckets?.filter(bucket => {
-          const bucketKey = bucket?.key?.toString();
-          return (
-            !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')
-          );
-        });
-      }
+  private get aggregationFacetGroup(): FacetGroup | undefined {
+    if (!this.aggregations || !this.facetKey) return undefined;
 
-      // find length and pagination size for modal pagination
-      const { length } = Object.keys(castedBuckets as []);
-      this.paginationSize = Math.ceil(length / this.facetsPerPage);
+    const currentAggregation = this.aggregations[this.facetKey];
+    if (!currentAggregation) return undefined;
 
-      // render only items which will be visible as per this.facetsPerPage
-      const bucketsMaxSix = castedBuckets?.slice(
-        (this.pageNumber - 1) * this.facetsPerPage,
-        this.pageNumber * this.facetsPerPage
-      );
+    const facetGroupTitle = facetTitles[this.facetKey];
 
-      const facetBucket: FacetBucket[] = bucketsMaxSix.map(bucket => {
-        const bucketKey = bucket.key;
-        return {
-          displayText: `${bucket.key}`,
-          key: `${bucketKey}`,
-          count: bucket.doc_count,
-          state: 'none',
-        };
+    // Order the facets according to the current sort option
+    let sortedBuckets = currentAggregation.getSortedBuckets(
+      this.sortedBy
+    ) as Bucket[];
+
+    if (this.facetKey === 'collection') {
+      // we are not showing fav- collections or certain deemphasized collections in facets
+      sortedBuckets = sortedBuckets?.filter(bucket => {
+        const bucketKey = bucket?.key?.toString();
+        return (
+          !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')
+        );
       });
-      const group: FacetGroup = {
-        title: this.facetGroupTitle as string,
-        key: option,
-        buckets: facetBucket,
+    }
+
+    // Construct the array of facet buckets from the aggregation buckets
+    const facetBuckets: FacetBucket[] = sortedBuckets.map(bucket => {
+      const bucketKeyStr = `${bucket.key}`;
+      return {
+        displayText: `${bucketKeyStr}`,
+        key: `${bucketKeyStr}`,
+        count: bucket.doc_count,
+        state: 'none',
       };
-      facetGroups.push(group);
     });
 
-    return facetGroups;
+    return {
+      title: facetGroupTitle,
+      key: this.facetKey,
+      buckets: facetBuckets,
+    };
+  }
+
+  /**
+   * Returns a FacetGroup representing only the current page of facet buckets to show.
+   */
+  private get facetGroupForCurrentPage(): FacetGroup | undefined {
+    const { facetGroup } = this;
+    if (!facetGroup) return undefined;
+
+    // Slice out only the current page of facet buckets
+    const firstBucketIndexOnPage = (this.pageNumber - 1) * this.facetsPerPage;
+    const truncatedBuckets = facetGroup.buckets.slice(
+      firstBucketIndexOnPage,
+      firstBucketIndexOnPage + this.facetsPerPage
+    );
+
+    return {
+      ...facetGroup,
+      buckets: truncatedBuckets,
+    };
   }
 
-  private get getMoreFacetsTemplate(): TemplateResult {
+  private get moreFacetsTemplate(): TemplateResult {
     return html`
       <facets-template
-        .facetGroup=${this.mergedFacets?.shift()}
+        .facetGroup=${this.facetGroupForCurrentPage}
         .selectedFacets=${this.selectedFacets}
-        .renderOn=${'modal'}
         .collectionTitles=${this.collectionTitles}
-        @selectedFacetsChanged=${(e: CustomEvent) => {
-          this.selectedFacets = e.detail;
+        @facetClick=${(e: CustomEvent<FacetEventDetails>) => {
+          if (this.facetKey) {
+            this.unappliedFacetChanges = updateSelectedFacetBucket(
+              this.unappliedFacetChanges,
+              this.facetKey,
+              e.detail.bucket
+            );
+          }
         }}
       ></facets-template>
     `;
@@ -355,6 +408,17 @@ export class MoreFacetsContent extends LitElement {
     </div> `;
   }
 
+  /**
+   * How many pages of facets to show in the modal pagination widget
+   */
+  private get paginationSize(): number {
+    if (!this.aggregations || !this.facetKey) return 0;
+
+    // Calculate the appropriate number of pages to show in the modal pagination widget
+    const length = this.aggregations[this.facetKey]?.buckets.length;
+    return Math.ceil(length / this.facetsPerPage);
+  }
+
   // render pagination if more then 1 page
   private get facetsPaginationTemplate() {
     return this.paginationSize > 1
@@ -397,24 +461,24 @@ export class MoreFacetsContent extends LitElement {
     );
   }
 
-  private get getModalHeaderTemplate(): TemplateResult {
+  private get modalHeaderTemplate(): TemplateResult {
     const facetSort =
       this.sortedBy ?? defaultFacetSort[this.facetKey as FacetOption];
     const defaultSwitchSide =
       facetSort === AggregationSortType.COUNT ? 'left' : 'right';
 
-    return html`<span class="sr-only">More facets for:</span>
+    return html`<span class="sr-only">${msg('More facets for:')}</span>
       <span class="title">
-        ${this.facetGroupTitle}
+        ${this.facetGroup?.title}
 
-        <label class="sort-label">Sort by:</label>
+        <label class="sort-label">${msg('Sort by:')}</label>
         ${this.facetKey
           ? html`<toggle-switch
               class="sort-toggle"
               leftValue=${AggregationSortType.COUNT}
               leftLabel="Count"
               rightValue=${valueFacetSort[this.facetKey]}
-              rightLabel=${this.facetGroupTitle}
+              rightLabel=${this.facetGroup?.title}
               side=${defaultSwitchSide}
               @change=${(e: CustomEvent<string>) => {
                 this.sortFacetAggregation(
@@ -432,8 +496,8 @@ export class MoreFacetsContent extends LitElement {
         ? this.loaderTemplate
         : html`
             <section id="more-facets">
-              <div class="header-content">${this.getModalHeaderTemplate}</div>
-              <div class="facets-content">${this.getMoreFacetsTemplate}</div>
+              <div class="header-content">${this.modalHeaderTemplate}</div>
+              <div class="facets-content">${this.moreFacetsTemplate}</div>
               ${this.footerTemplate}
             </section>
           `}
@@ -441,12 +505,21 @@ export class MoreFacetsContent extends LitElement {
   }
 
   private applySearchFacetsClicked() {
+    const mergedSelections = mergeSelectedFacets(
+      this.selectedFacets,
+      this.unappliedFacetChanges
+    );
+
     const event = new CustomEvent<SelectedFacets>('facetsChanged', {
-      detail: this.selectedFacets,
+      detail: mergedSelections,
       bubbles: true,
       composed: true,
     });
     this.dispatchEvent(event);
+
+    // Reset the unapplied changes back to default, now that they have been applied
+    this.unappliedFacetChanges = getDefaultSelectedFacets();
+
     this.modalManager?.closeModal();
     this.analyticsHandler?.sendEvent({
       category: analyticsCategories.default,
@@ -470,18 +543,10 @@ export class MoreFacetsContent extends LitElement {
     return [
       srOnlyStyle,
       css`
-        @media (max-width: 560px) {
-          section#more-facets {
-            max-height: 450px;
-          }
-          .facets-content {
-            overflow-y: auto;
-            height: 300px;
-          }
-        }
         section#more-facets {
           overflow: auto;
           padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
+          --facetsColumnCount: 3;
         }
         .header-content .title {
           display: block;
@@ -533,6 +598,17 @@ export class MoreFacetsContent extends LitElement {
           text-align: center;
           margin-top: 10px;
         }
+
+        @media (max-width: 560px) {
+          section#more-facets {
+            max-height: 450px;
+            --facetsColumnCount: 1;
+          }
+          .facets-content {
+            overflow-y: auto;
+            height: 300px;
+          }
+        }
       `,
     ];
   }

package/src/collection-facets.ts

@@ -44,6 +44,7 @@ import {
   LendingFacetKey,
   suppressedCollections,
   defaultFacetSort,
+  FacetEventDetails,
 } from './models';
 import type {
   CollectionTitles,
@@ -59,6 +60,10 @@ import {
 } from './utils/analytics-events';
 import { srOnlyStyle } from './styles/sr-only';
 import { ExpandedDatePicker } from './expanded-date-picker';
+import {
+  sortBucketsBySelectionState,
+  updateSelectedFacetBucket,
+} from './utils/facet-utils';
 
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
@@ -175,7 +180,6 @@ export class CollectionFacets extends LitElement {
       <section
         class="facet-group partof-collections"
         aria-labelledby=${headingId}
-        data-testid="facet-group-partof-collections"
       >
         <div class="facet-group-header">
           <h3 id=${headingId}>${msg('Part Of')}</h3>
@@ -412,6 +416,9 @@ export class CollectionFacets extends LitElement {
         );
       }
 
+      // Sort the FacetBuckets so that selected and hidden buckets come before the rest
+      sortBucketsBySelectionState(bucketsWithCount);
+
       // For mediatype facets, ensure the collection bucket is always shown if present
       if (facetKey === 'mediatype') {
         const collectionIndex = bucketsWithCount.findIndex(
@@ -423,15 +430,18 @@ export class CollectionFacets extends LitElement {
             collectionIndex,
             1
           );
-          bucketsWithCount.splice(allowedFacetCount - 1, 0, collectionBucket);
+
           // If we're showing lots of selected facets, ensure we're not cutting off the last one
-          if (allowedFacetCount > this.allowedFacetCount)
+          if (allowedFacetCount > this.allowedFacetCount) {
             allowedFacetCount += 1;
+          }
+
+          bucketsWithCount.splice(allowedFacetCount - 1, 0, collectionBucket);
         }
       }
 
-      // splice how many items we want to show in page facet area
-      facetGroup.buckets = bucketsWithCount.splice(0, allowedFacetCount);
+      // slice off how many items we want to show in page facet area
+      facetGroup.buckets = bucketsWithCount.slice(0, allowedFacetCount);
 
       facetGroups.push(facetGroup);
     });
@@ -558,7 +568,6 @@ export class CollectionFacets extends LitElement {
       <section
         class="facet-group ${this.collapsableFacets ? 'mobile' : ''}"
         aria-labelledby=${headerId}
-        data-testid=${headerId}
       >
         <div class="facet-group-header">
           <h3
@@ -640,13 +649,10 @@ export class CollectionFacets extends LitElement {
     facetGroup: FacetGroup,
     sortedBy: AggregationSortType
   ): Promise<void> {
-    const facetAggrKey = facetGroup.key;
-
     const customModalContent = html`
       <more-facets-content
         .analyticsHandler=${this.analyticsHandler}
         .facetKey=${facetGroup.key}
-        .facetAggregationKey=${facetAggrKey}
         .query=${this.query}
         .filterMap=${this.filterMap}
         .pageSpecifierParams=${this.pageSpecifierParams}
@@ -694,11 +700,17 @@ export class CollectionFacets extends LitElement {
         .collectionPagePath=${this.collectionPagePath}
         .facetGroup=${facetGroup}
         .selectedFacets=${this.selectedFacets}
-        .renderOn=${'page'}
         .collectionTitles=${this.collectionTitles}
-        @selectedFacetsChanged=${(e: CustomEvent) => {
+        @facetClick=${(e: CustomEvent<FacetEventDetails>) => {
+          this.selectedFacets = updateSelectedFacetBucket(
+            this.selectedFacets,
+            facetGroup.key,
+            e.detail.bucket,
+            true
+          );
+
           const event = new CustomEvent<SelectedFacets>('facetsChanged', {
-            detail: e.detail,
+            detail: this.selectedFacets,
             bubbles: true,
             composed: true,
           });