@internetarchive/collection-browser 1.14.9-alpha1 → 1.14.9-alpha10

package/src/collection-facets/facets-template.ts

@@ -1,18 +1,22 @@
-import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';
+import {
+  css,
+  html,
+  LitElement,
+  TemplateResult,
+  CSSResultGroup,
+  nothing,
+} from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import eyeIcon from '../assets/img/icons/eye';
-import eyeClosedIcon from '../assets/img/icons/eye-closed';
 import {
   FacetGroup,
-  FacetOption,
   FacetBucket,
   SelectedFacets,
   getDefaultSelectedFacets,
   FacetEventDetails,
-  FacetState,
 } from '../models';
+import { FacetRow } from './facet-row';
 
 @customElement('facets-template')
 export class FacetsTemplate extends LitElement {
@@ -22,34 +26,24 @@ export class FacetsTemplate extends LitElement {
 
   @property({ type: String }) renderOn?: string;
 
-  @property({ type: String }) collectionPagePath: string = '/details/';
-
   @property({ type: Object })
   collectionNameCache?: CollectionNameCacheInterface;
 
-  private facetClicked(e: Event, count: number, negative: boolean) {
-    const target = e.target as HTMLInputElement;
-    const { checked, name, value } = target;
-    if (checked) {
-      this.facetChecked(name as FacetOption, value, count, negative);
+  private facetClicked(e: CustomEvent<FacetEventDetails>) {
+    const { bucket, negative } = e.detail;
+    if (bucket.state === 'none') {
+      this.facetUnchecked(bucket);
     } else {
-      this.facetUnchecked(name as FacetOption, value);
+      this.facetChecked(bucket, negative);
     }
 
-    this.dispatchFacetClickEvent(
-      name as FacetOption,
-      this.getFacetState(checked, negative),
-      negative
-    );
+    this.dispatchFacetClickEvent(e.detail);
   }
 
-  private facetChecked(
-    key: FacetOption,
-    value: string,
-    count: number,
-    negative: boolean
-  ) {
-    const { selectedFacets } = this;
+  private facetChecked(bucket: FacetBucket, negative: boolean) {
+    const { facetGroup, selectedFacets } = this;
+    if (!facetGroup) return;
+
     let newFacets: SelectedFacets;
     if (selectedFacets) {
       newFacets = {
@@ -58,17 +52,19 @@ export class FacetsTemplate extends LitElement {
     } else {
       newFacets = getDefaultSelectedFacets();
     }
-    newFacets[key][value] = {
-      state: this.getFacetState(true, negative),
-      count,
-    } as FacetBucket;
+    newFacets[facetGroup.key][bucket.key] = {
+      ...bucket,
+      state: FacetRow.getFacetState(true, negative),
+    };
 
     this.selectedFacets = newFacets;
     this.dispatchSelectedFacetsChanged();
   }
 
-  private facetUnchecked(key: FacetOption, value: string) {
-    const { selectedFacets } = this;
+  private facetUnchecked(bucket: FacetBucket) {
+    const { facetGroup, selectedFacets } = this;
+    if (!facetGroup) return;
+
     let newFacets: SelectedFacets;
     if (selectedFacets) {
       newFacets = {
@@ -77,30 +73,15 @@ export class FacetsTemplate extends LitElement {
     } else {
       newFacets = getDefaultSelectedFacets();
     }
-    delete newFacets[key][value];
+    delete newFacets[facetGroup.key][bucket.key];
 
     this.selectedFacets = newFacets;
     this.dispatchSelectedFacetsChanged();
   }
 
-  /** Returns the composed facet state corresponding to a positive or negative facet's checked state */
-  private getFacetState(checked: boolean, negative: boolean): FacetState {
-    let state: FacetState;
-    if (checked) {
-      state = negative ? 'hidden' : 'selected';
-    } else {
-      state = 'none';
-    }
-    return state;
-  }
-
-  private dispatchFacetClickEvent(
-    key: FacetOption,
-    state: FacetState,
-    negative: boolean
-  ) {
+  private dispatchFacetClickEvent(detail: FacetEventDetails) {
     const event = new CustomEvent<FacetEventDetails>('facetClick', {
-      detail: { key, state, negative },
+      detail,
       composed: true,
     });
     this.dispatchEvent(event);
@@ -115,8 +96,11 @@ export class FacetsTemplate extends LitElement {
     this.dispatchEvent(event);
   }
 
-  private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {
-    let facetsBucket = facetGroup?.buckets as FacetBucket[];
+  private get facetsTemplate(): TemplateResult | typeof nothing {
+    const { facetGroup } = this;
+    if (!facetGroup) return nothing;
+
+    let facetBuckets = facetGroup.buckets as FacetBucket[];
 
     /**
      * sorting FacetBucket before render page / modal
@@ -124,105 +108,34 @@ export class FacetsTemplate extends LitElement {
      * - second, suppressed/hidden items should be after selected having sorted
      * - and then no-selected / not suppressed items should render having sorted
      */
-    facetsBucket = [
-      ...facetsBucket
+    facetBuckets = [
+      ...facetBuckets
         .filter(x => x.state === 'selected')
         .sort((a, b) => (a.count < b.count ? 1 : -1)),
-      ...facetsBucket
+      ...facetBuckets
         .filter(x => x.state === 'hidden')
         .sort((a, b) => (a.count < b.count ? 1 : -1)),
-      ...facetsBucket.filter(x => x.state === 'none'),
+      ...facetBuckets.filter(x => x.state === 'none'),
     ];
 
     return html`
       <div class="facets-on-${this.renderOn}">
         ${repeat(
-          facetsBucket,
+          facetBuckets,
           bucket => `${facetGroup.key}:${bucket.key}`,
-          bucket => {
-            const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;
-            const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;
-            // for collections, we need to asynchronously load the collection name
-            // so we use the `async-collection-name` widget and for the rest, we have
-            // a static value to use
-            const bucketTextDisplay =
-              facetGroup.key !== 'collection'
-                ? html`${bucket.displayText ?? bucket.key}`
-                : html`<a href="${this.collectionPagePath}${bucket.key}">
-                    <async-collection-name
-                      .collectionNameCache=${this.collectionNameCache}
-                      .identifier=${bucket.key}
-                      placeholder="-"
-                    ></async-collection-name>
-                  </a> `;
-            const facetHidden = bucket.state === 'hidden';
-            const facetSelected = bucket.state === 'selected';
-            const titleText = `${facetGroup.key}: ${
-              bucket.displayText ?? bucket.key
-            }`;
-            const onlyShowText = facetSelected
-              ? `Show all ${facetGroup.key}s`
-              : `Only show ${titleText}`;
-            const hideText = `Hide ${titleText}`;
-            const unhideText = `Unhide ${titleText}`;
-            const showHideText = facetHidden ? unhideText : hideText;
-            const ariaLabel = `${titleText}, ${bucket.count} results`;
-            return html`
-              <div class="facet-row">
-                <div class="facet-checkbox">
-                  <input
-                    type="checkbox"
-                    .name=${facetGroup.key}
-                    .value=${bucket.key}
-                    @click=${(e: Event) => {
-                      this.facetClicked(e, bucket.count, false);
-                    }}
-                    .checked=${facetSelected}
-                    class="select-facet-checkbox"
-                    title=${onlyShowText}
-                    id=${showOnlyCheckboxId}
-                  />
-                  <input
-                    type="checkbox"
-                    id=${negativeCheckboxId}
-                    .name=${facetGroup.key}
-                    .value=${bucket.key}
-                    @click=${(e: Event) => {
-                      this.facetClicked(e, bucket.count, true);
-                    }}
-                    .checked=${facetHidden}
-                    class="hide-facet-checkbox"
-                  />
-                  <label
-                    for=${negativeCheckboxId}
-                    class="hide-facet-icon${facetHidden ? ' active' : ''}"
-                    title=${showHideText}
-                  >
-                    <span class="eye">${eyeIcon}</span>
-                    <span class="eye-closed">${eyeClosedIcon}</span>
-                  </label>
-                </div>
-                <label
-                  for=${showOnlyCheckboxId}
-                  class="facet-info-display"
-                  title=${onlyShowText}
-                  aria-label=${ariaLabel}
-                >
-                  <div class="facet-title">${bucketTextDisplay}</div>
-                  <div class="facet-count">
-                    ${bucket.count.toLocaleString()}
-                  </div>
-                </label>
-              </div>
-            `;
-          }
+          bucket => html`<facet-row
+            .facetType=${facetGroup.key}
+            .bucket=${bucket}
+            .collectionNameCache=${this.collectionNameCache}
+            @facetClick=${this.facetClicked}
+          ></facet-row>`
         )}
       </div>
     `;
   }
 
   render() {
-    return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;
+    return html`${this.facetsTemplate}`;
   }
 
   static get styles(): CSSResultGroup {
@@ -236,9 +149,7 @@ export class FacetsTemplate extends LitElement {
         column-gap: 15px;
         column-count: 3;
       }
-      async-collection-name {
-        display: contents;
-      }
+
       ul.facet-list {
         list-style: none;
         margin: 0;
@@ -248,19 +159,7 @@ export class FacetsTemplate extends LitElement {
         margin-bottom: 0.2rem;
         display: grid;
       }
-      .facet-checkbox {
-        margin: 0 5px 0 0;
-        display: flex;
-        height: 15px;
-      }
-      .facet-checkbox input:first-child {
-        margin-right: 5px;
-      }
-      .facet-checkbox input {
-        height: 15px;
-        width: 15px;
-        margin: 0;
-      }
+
       .facet-row {
         display: flex;
         font-weight: 500;
@@ -271,52 +170,6 @@ export class FacetsTemplate extends LitElement {
         border-bottom: var(--facet-row-border-bottom, 1px solid transparent);
         overflow: hidden;
       }
-      .facet-info-display {
-        display: flex;
-        flex: 1 1 0%;
-        cursor: pointer;
-        flex-wrap: wrap;
-      }
-      .facet-title {
-        word-break: break-word;
-        display: inline-block;
-        flex: 1 1 0%;
-      }
-      .facet-count {
-        text-align: right;
-      }
-      .select-facet-checkbox {
-        cursor: pointer;
-        display: inline-block;
-      }
-      .hide-facet-checkbox {
-        display: none;
-      }
-      .hide-facet-icon {
-        width: 15px;
-        height: 15px;
-        cursor: pointer;
-        opacity: 0.3;
-        display: inline-block;
-      }
-      .hide-facet-icon:hover,
-      .active {
-        opacity: 1;
-      }
-      .hide-facet-icon:hover .eye,
-      .hide-facet-icon .eye-closed {
-        display: none;
-      }
-      .hide-facet-icon:hover .eye-closed,
-      .hide-facet-icon.active .eye-closed {
-        display: inline;
-      }
-      .hide-facet-icon.active .eye {
-        display: none;
-      }
-      .sorting-icon {
-        cursor: pointer;
-      }
 
       a:link,
       a:visited {

package/src/models.ts

@@ -295,6 +295,9 @@ export const prefixFilterAggregationKeys: Record<PrefixFilterType, string> = {
   creator: 'firstCreator',
 };
 
+/**
+ * Union of the facet types that are available in the sidebar.
+ */
 export type FacetOption =
   | 'subject'
   | 'lending'
@@ -322,9 +325,22 @@ export interface FacetGroup {
   buckets: FacetBucket[];
 }
 
+/**
+ * Information about a user interaction event on a facet.
+ */
 export type FacetEventDetails = {
-  key: FacetOption;
-  state: FacetState;
+  /**
+   * The type of facet that was interacted with (e.g., 'mediatype', 'language', ...).
+   */
+  facetType: FacetOption;
+  /**
+   * The bucket corresponding to the facet that was interacted with, including the
+   * updated state of the facet after the interaction.
+   */
+  bucket: FacetBucket;
+  /**
+   * Whether the interaction occurred on a negative facet.
+   */
   negative: boolean;
 };
 

package/test/collection-browser.test.ts

@@ -177,7 +177,15 @@ describe('Collection Browser', () => {
 
     el.facetClickHandler(
       new CustomEvent('facetClick', {
-        detail: { key: 'mediatype', state: 'selected', negative: false },
+        detail: {
+          facetType: 'mediatype',
+          bucket: {
+            key: '',
+            state: 'selected',
+            count: 123,
+          },
+          negative: false,
+        },
       })
     );
     expect(mockAnalyticsHandler.callCategory).to.equal('search-service');
@@ -186,7 +194,15 @@ describe('Collection Browser', () => {
 
     el.facetClickHandler(
       new CustomEvent('facetClick', {
-        detail: { key: 'mediatype', state: 'none', negative: false },
+        detail: {
+          facetType: 'mediatype',
+          bucket: {
+            key: '',
+            state: 'none',
+            count: 123,
+          },
+          negative: false,
+        },
       })
     );
     expect(el.selectedFacets).to.equal(mockedSelectedFacets);
@@ -219,7 +235,15 @@ describe('Collection Browser', () => {
 
     el.facetClickHandler(
       new CustomEvent('facetClick', {
-        detail: { key: 'mediatype', state: 'hidden', negative: true },
+        detail: {
+          facetType: 'mediatype',
+          bucket: {
+            key: '',
+            state: 'hidden',
+            count: 123,
+          },
+          negative: true,
+        },
       })
     );
     expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
@@ -228,7 +252,15 @@ describe('Collection Browser', () => {
 
     el.facetClickHandler(
       new CustomEvent('facetClick', {
-        detail: { key: 'mediatype', state: 'none', negative: true },
+        detail: {
+          facetType: 'mediatype',
+          bucket: {
+            key: '',
+            state: 'none',
+            count: 123,
+          },
+          negative: true,
+        },
       })
     );
     expect(el.selectedFacets).to.equal(mockedSelectedFacets);