@internetarchive/collection-browser 0.0.1-alpha.8 → 0.1.1

package/src/collection-facets.ts

@@ -1,19 +1,30 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+/* eslint-disable import/no-duplicates */
+import {
+  css,
+  html,
+  LitElement,
+  PropertyValues,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { Aggregation, Bucket } from '@internetarchive/search-service';
 import '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
+import '@internetarchive/collection-name-cache';
+import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import eyeIcon from './assets/img/icons/eye';
 import eyeClosedIcon from './assets/img/icons/eye-closed';
-
-type FacetOption =
-  | 'subject'
-  | 'mediatype'
-  | 'language'
-  | 'creator'
-  | 'collection'
-  | 'year';
+import chevronIcon from './assets/img/icons/chevron';
+import {
+  FacetOption,
+  SelectedFacets,
+  FacetGroup,
+  FacetBucket,
+  defaultSelectedFacets,
+} from './models';
+import { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
 
 const facetDisplayOrder: FacetOption[] = [
   'mediatype',
@@ -42,81 +53,84 @@ const facetTitles: Record<FacetOption, string> = {
   year: 'Year',
 };
 
-interface FacetBucket {
-  // for some facets, we augment the key with a display value
-  displayText?: string;
-  key: string;
-  count: number;
-  selected: boolean;
-  hidden: boolean;
-}
-
-interface FacetGroup {
-  title: string;
-  key: string;
-  buckets: FacetBucket[];
-}
-
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
   @property({ type: Object }) aggregations?: Record<string, Aggregation>;
 
   @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;
 
-  @property({ type: Object }) selectedFacets: Record<string, string[]> = {};
+  @property({ type: String }) minSelectedDate?: string;
 
-  @property({ type: Object }) hiddenFacets: Record<string, string[]> = {};
+  @property({ type: String }) maxSelectedDate?: string;
 
   @property({ type: Boolean }) facetsLoading = false;
 
   @property({ type: Boolean }) fullYearAggregationLoading = false;
 
-  private get hydratedSelectedFacets(): Record<string, string[]> {
-    const { selectedFacets } = this;
-    const hydratedSelectedFacets: Record<string, string[]> = {};
-    Object.entries(selectedFacets).forEach(([key]) => {
-      const values = hydratedSelectedFacets[key];
-      const title = facetTitles[key as FacetOption];
-      hydratedSelectedFacets[title] = values || [];
-      delete hydratedSelectedFacets[key];
-    });
-    return hydratedSelectedFacets;
-  }
+  @property({ type: Object }) selectedFacets?: SelectedFacets;
+
+  @property({ type: Boolean }) collapsableFacets = false;
+
+  @property({ type: Boolean }) showHistogramDatePicker = false;
+
+  @property({ type: Object })
+  languageCodeHandler?: LanguageCodeHandlerInterface;
+
+  @property({ type: Object })
+  collectionNameCache?: CollectionNameCacheInterface;
+
+  @state() openFacets: Record<FacetOption, boolean> = {
+    subject: false,
+    mediatype: false,
+    language: false,
+    creator: false,
+    collection: false,
+    year: false,
+  };
 
   render() {
     return html`
       <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
-        <div class="facet-group">
-          <h1>Year Published <feature-feedback></feature-feedback></h1>
-          ${this.histogramTemplate}
-        </div>
-
-        ${this.mergedFacets.map(
-          facetGroup =>
-            html`
+        ${this.showHistogramDatePicker && this.fullYearsHistogramAggregation
+          ? html`
               <div class="facet-group">
-                <h1>${facetGroup.title}</h1>
-                ${this.getFacetTemplate(facetGroup)}
+                <h1>Year Published <feature-feedback></feature-feedback></h1>
+                ${this.histogramTemplate}
               </div>
             `
+          : nothing}
+        ${this.mergedFacets.map(facetGroup =>
+          this.getFacetGroupTemplate(facetGroup)
         )}
       </div>
     `;
   }
 
+  updated(changed: PropertyValues) {
+    if (changed.has('selectedFacets')) {
+      this.dispatchFacetsChangedEvent();
+    }
+  }
+
+  private dispatchFacetsChangedEvent() {
+    const event = new CustomEvent<SelectedFacets>('facetsChanged', {
+      detail: this.selectedFacets,
+    });
+    this.dispatchEvent(event);
+  }
+
   private get currentYearsHistogramAggregation(): Aggregation | undefined {
     return this.aggregations?.year_histogram;
   }
 
   private get histogramTemplate() {
-    const { currentYearsHistogramAggregation, fullYearsHistogramAggregation } =
-      this;
+    const { fullYearsHistogramAggregation } = this;
     return html`
       <histogram-date-range
         .minDate=${fullYearsHistogramAggregation?.first_bucket_key}
         .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}
-        .minSelectedDate=${currentYearsHistogramAggregation?.first_bucket_key}
-        .maxSelectedDate=${currentYearsHistogramAggregation?.last_bucket_key}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
         .updateDelay=${100}
         missingDataMessage="..."
         .width=${180}
@@ -140,7 +154,7 @@ export class CollectionFacets extends LitElement {
   }
 
   /**
-   * Combines the selected and hidden facets with the aggregations to create a single list of facets
+   * Combines the selected facets with the aggregations to create a single list of facets
    */
   private get mergedFacets(): FacetGroup[] {
     const facetGroups: FacetGroup[] = [];
@@ -149,9 +163,6 @@ export class CollectionFacets extends LitElement {
       const selectedFacetGroup = this.selectedFacetGroups.find(
         group => group.key === facetKey
       );
-      const hiddenFacetGroup = this.hiddenFacetGroups.find(
-        group => group.key === facetKey
-      );
       const aggregateFacetGroup = this.aggregationFacetGroups.find(
         group => group.key === facetKey
       );
@@ -162,17 +173,11 @@ export class CollectionFacets extends LitElement {
         return;
       }
 
-      if (hiddenFacetGroup && !aggregateFacetGroup) {
-        facetGroups.push(hiddenFacetGroup);
-        return;
-      }
-
       // if we don't have an aggregate facet group, don't add this to the list
       if (!aggregateFacetGroup) return;
 
       // start with either the selected group if we have one, or the aggregate group
-      const facetGroup =
-        selectedFacetGroup ?? hiddenFacetGroup ?? aggregateFacetGroup;
+      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;
 
       // attach the counts to the selected buckets
       const bucketsWithCount =
@@ -180,27 +185,13 @@ export class CollectionFacets extends LitElement {
           const selectedBucket = aggregateFacetGroup.buckets.find(
             b => b.key === bucket.key
           );
-          if (selectedBucket) {
-            return {
-              ...bucket,
-              count: selectedBucket.count,
-            };
-          }
-          return bucket;
-        }) ??
-        hiddenFacetGroup?.buckets.map(bucket => {
-          const selectedBucket = aggregateFacetGroup.buckets.find(
-            b => b.key === bucket.key
-          );
-          if (selectedBucket) {
-            return {
-              ...bucket,
-              count: selectedBucket.count,
-            };
-          }
-          return bucket;
-        }) ??
-        [];
+          return selectedBucket
+            ? {
+                ...bucket,
+                count: selectedBucket.count,
+              }
+            : bucket;
+        }) ?? [];
 
       // append any additional buckets that were not selected
       aggregateFacetGroup.buckets.forEach(bucket => {
@@ -210,8 +201,6 @@ export class CollectionFacets extends LitElement {
       });
       facetGroup.buckets = bucketsWithCount.splice(0, 5);
 
-      // if (facetGroup.buckets.length === 0) return;
-
       facetGroups.push(facetGroup);
     });
 
@@ -219,35 +208,45 @@ export class CollectionFacets extends LitElement {
   }
 
   /**
-   * Converts the raw `selectedFacets` to `FacetGroups`, which are easier to use
+   * Converts the selected facets to a `FacetGroup` array,
+   * which is easier to work with
    */
   private get selectedFacetGroups(): FacetGroup[] {
-    return this.getFacetGroups(this.selectedFacets, false);
-  }
+    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, facetState]) => {
+            let displayText = value;
+            // for selected languages, we store the language code instead of the
+            // display name, so look up the name from the mapping
+            if (option === 'language') {
+              displayText =
+                this.languageCodeHandler?.getLanguageNameFromCodeString(
+                  value
+                ) ?? value;
+            }
+            return {
+              displayText,
+              key: value,
+              count: 0,
+              state: facetState,
+            };
+          }
+        );
 
-  private get hiddenFacetGroups(): FacetGroup[] {
-    return this.getFacetGroups(this.hiddenFacets, true);
-  }
+        return {
+          title,
+          key: option,
+          buckets,
+        };
+      }
+    );
 
-  private getFacetGroups(
-    facets: Record<string, string[]>,
-    hidden: boolean
-  ): FacetGroup[] {
-    const facetGroups: FacetGroup[] = [];
-    Object.entries(facets).forEach(([key, buckets]) => {
-      const title = facetTitles[key as FacetOption];
-      const group = {
-        title,
-        key,
-        buckets: buckets.map(bucket => ({
-          key: bucket,
-          count: 0,
-          selected: !hidden,
-          hidden,
-        })),
-      };
-      facetGroups.push(group);
-    });
     return facetGroups;
   }
 
@@ -257,16 +256,30 @@ export class CollectionFacets extends LitElement {
   private get aggregationFacetGroups(): FacetGroup[] {
     const facetGroups: FacetGroup[] = [];
     Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {
+      // the year_histogram data is in a different format so can't be handled here
       if (key === 'year_histogram') return;
       const option = this.getFacetOptionFromKey(key);
       const title = facetTitles[option];
       const castedBuckets = buckets.buckets as Bucket[];
-      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => ({
-        key: `${bucket.key}`,
-        count: bucket.doc_count,
-        selected: false,
-        hidden: false,
-      }));
+      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => {
+        let bucketKey = bucket.key;
+        // for languages, we need to search by language code instead of the
+        // display name, which is what we get from the search engine result
+        if (option === 'language') {
+          // const languageCodeKey = languageToCodeMap[bucket.key];
+          bucketKey =
+            this.languageCodeHandler?.getCodeStringFromLanguageName(
+              `${bucket.key}`
+            ) ?? bucket.key;
+          // bucketKey = languageCodeKey ?? bucket.key;
+        }
+        return {
+          displayText: `${bucket.key}`,
+          key: `${bucketKey}`,
+          count: bucket.doc_count,
+          state: 'none',
+        };
+      });
       const group: FacetGroup = {
         title,
         key: option,
@@ -277,42 +290,133 @@ export class CollectionFacets extends LitElement {
     return facetGroups;
   }
 
-  private getFacetTemplate(facetGroup: FacetGroup) {
+  /**
+   * Generate the template for a facet group with a header and the collapsible
+   * chevron for the mobile view
+   */
+  private getFacetGroupTemplate(
+    facetGroup: FacetGroup
+  ): TemplateResult | typeof nothing {
+    if (facetGroup.buckets.length === 0) return nothing;
+    const { key } = facetGroup;
+    const isOpen = this.openFacets[key];
+    const collapser = html`
+      <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
+    `;
+
+    return html`
+      <div class="facet-group ${this.collapsableFacets ? 'mobile' : ''}">
+        <h1
+          @click=${() => {
+            const newOpenFacets = { ...this.openFacets };
+            newOpenFacets[key] = !isOpen;
+            this.openFacets = newOpenFacets;
+          }}
+          @keyup=${() => {
+            const newOpenFacets = { ...this.openFacets };
+            newOpenFacets[key] = !isOpen;
+            this.openFacets = newOpenFacets;
+          }}
+        >
+          ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
+        </h1>
+        <div class="facet-group-content ${isOpen ? 'open' : ''}">
+          ${this.getFacetTemplate(facetGroup)}
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * Generate the list template for each bucket in a facet group
+   */
+  private getFacetTemplate(facetGroup: FacetGroup): TemplateResult {
+    const bucketsNoFavorites = facetGroup.buckets.filter(
+      bucket => bucket.key.startsWith('fav-') === false
+    );
+    const bucketsMaxSix = bucketsNoFavorites.slice(0, 6);
+
     return html`
       <ul class="facet-list">
         ${repeat(
-          facetGroup.buckets,
+          bucketsMaxSix,
           bucket => `${facetGroup.key}:${bucket.key}`,
           bucket => {
-            const hiddenCheckboxId = `${facetGroup.key}:${bucket.key}-hidden`;
+            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`
+                    <async-collection-name
+                      .collectionNameCache=${this.collectionNameCache}
+                      .identifier=${bucket.key}
+                      placeholder="-"
+                    ></async-collection-name>
+                  `;
+
+            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;
+
             return html`
               <li>
-                <label class="facet-row">
+                <div class="facet-row">
                   <div class="facet-checkbox">
                     <input
                       type="checkbox"
                       .name=${facetGroup.key}
                       .value=${bucket.key}
-                      @click=${this.facetToggled}
-                      ?checked=${bucket.selected}
+                      @click=${(e: Event) => {
+                        this.facetClicked(e, bucket, false);
+                      }}
+                      .checked=${facetSelected}
                       class="select-facet-checkbox"
+                      title=${onlyShowText}
+                      id=${showOnlyCheckboxId}
                     />
                     <input
                       type="checkbox"
-                      id=${hiddenCheckboxId}
+                      id=${negativeCheckboxId}
                       .name=${facetGroup.key}
                       .value=${bucket.key}
-                      @click=${this.hideFacetToggled}
-                      ?checked=${bucket.hidden}
+                      @click=${(e: Event) => {
+                        this.facetClicked(e, bucket, true);
+                      }}
+                      .checked=${facetHidden}
                       class="hide-facet-checkbox"
                     />
-                    <label for=${hiddenCheckboxId} class="hide-facet-icon">
-                      ${bucket.hidden ? eyeClosedIcon : eyeIcon}
+                    <label
+                      for=${negativeCheckboxId}
+                      class="hide-facet-icon"
+                      title=${showHideText}
+                    >
+                      ${facetHidden ? eyeClosedIcon : eyeIcon}
                     </label>
                   </div>
-                  <div class="facet-title">${bucket.key}</div>
-                  <div class="facet-count">${bucket.count}</div>
-                </label>
+
+                  <label
+                    for=${showOnlyCheckboxId}
+                    class="facet-info-display"
+                    title=${onlyShowText}
+                  >
+                    <div class="facet-title">${bucketTextDisplay}</div>
+                    <div class="facet-count">${bucket.count}</div>
+                  </label>
+                </div>
               </li>
             `;
           }
@@ -321,91 +425,42 @@ export class CollectionFacets extends LitElement {
     `;
   }
 
-  private facetChecked(name: string, value: string) {
-    const { selectedFacets } = this;
-    const facetClone = { ...selectedFacets };
-    const currentFacetValues = facetClone[name];
-    if (currentFacetValues) {
-      currentFacetValues.push(value);
-      facetClone[name] = currentFacetValues;
-    } else {
-      facetClone[name] = [value];
-    }
-    this.selectedFacets = facetClone;
-  }
-
-  private facetUnchecked(name: string, value: string) {
-    const { selectedFacets } = this;
-    const facetClone = { ...selectedFacets };
-    let currentFacetValues = selectedFacets[name];
-    if (currentFacetValues) {
-      currentFacetValues = currentFacetValues.filter(el => el !== value);
-      facetClone[name] = currentFacetValues;
-      if (currentFacetValues.length === 0) {
-        delete facetClone[name];
-      }
-    }
-    this.selectedFacets = facetClone;
-  }
-
-  private facetToggled(e: Event) {
+  private facetClicked(e: Event, bucket: FacetBucket, negative: boolean) {
     const target = e.target as HTMLInputElement;
     const { checked, name, value } = target;
     if (checked) {
-      this.facetChecked(name, value);
+      this.facetChecked(name as FacetOption, value, negative);
     } else {
-      this.facetUnchecked(name, value);
+      this.facetUnchecked(name as FacetOption, value);
     }
-
-    const event = new CustomEvent<Record<string, string[]>>('facetsChanged', {
-      detail: this.selectedFacets,
-    });
-    this.dispatchEvent(event);
   }
 
-  private hideFacetToggled(e: Event) {
-    const target = e.target as HTMLInputElement;
-    const { checked, name, value } = target;
-    if (checked) {
-      this.facetHidden(name, value);
+  private facetChecked(key: FacetOption, value: string, negative: boolean) {
+    const { selectedFacets } = this;
+    let newFacets: SelectedFacets;
+    if (selectedFacets) {
+      newFacets = {
+        ...selectedFacets,
+      };
     } else {
-      this.facetUnhidden(name, value);
+      newFacets = defaultSelectedFacets;
     }
-
-    const event = new CustomEvent<Record<string, string[]>>(
-      'hiddenFacetsChanged',
-      {
-        detail: this.hiddenFacets,
-      }
-    );
-    this.dispatchEvent(event);
+    newFacets[key][value] = negative ? 'hidden' : 'selected';
+    this.selectedFacets = newFacets;
   }
 
-  private facetHidden(name: string, value: string) {
-    const { hiddenFacets } = this;
-    const facetClone = { ...hiddenFacets };
-    const currentFacetValues = facetClone[name];
-    if (currentFacetValues) {
-      currentFacetValues.push(value);
-      facetClone[name] = currentFacetValues;
+  private facetUnchecked(key: FacetOption, value: string) {
+    const { selectedFacets } = this;
+    let newFacets: SelectedFacets;
+    if (selectedFacets) {
+      newFacets = {
+        ...selectedFacets,
+      };
     } else {
-      facetClone[name] = [value];
-    }
-    this.hiddenFacets = facetClone;
-  }
-
-  private facetUnhidden(name: string, value: string) {
-    const { hiddenFacets } = this;
-    const facetClone = { ...hiddenFacets };
-    let currentFacetValues = hiddenFacets[name];
-    if (currentFacetValues) {
-      currentFacetValues = currentFacetValues.filter(el => el !== value);
-      facetClone[name] = currentFacetValues;
-      if (currentFacetValues.length === 0) {
-        delete facetClone[name];
-      }
+      newFacets = defaultSelectedFacets;
     }
-    this.hiddenFacets = facetClone;
+    delete newFacets[key][value];
+    this.selectedFacets = newFacets;
   }
 
   /**
@@ -434,12 +489,52 @@ export class CollectionFacets extends LitElement {
         opacity: 0.5;
       }
 
+      .collapser {
+        display: inline-block;
+        cursor: pointer;
+        width: 10px;
+        height: 10px;
+      }
+
+      .collapser svg {
+        transition: transform 0.2s ease-in-out;
+      }
+
+      .collapser.open svg {
+        transform: rotate(90deg);
+      }
+
+      .facet-group {
+        margin-bottom: 2rem;
+      }
+
+      .facet-group h1 {
+        margin-bottom: 0.7rem;
+      }
+
+      .facet-group.mobile h1 {
+        cursor: pointer;
+      }
+
+      .facet-group-content {
+        transition: max-height 0.2s ease-in-out;
+      }
+
+      .facet-group.mobile .facet-group-content {
+        max-height: 0;
+        overflow: hidden;
+      }
+
+      .facet-group.mobile .facet-group-content.open {
+        max-height: 2000px;
+      }
+
       h1 {
         font-size: 1.4rem;
         font-weight: 200;
         border-bottom: 1px solid rgb(232, 232, 232);
         padding-bottom: 3px;
-        margin: 24px 0 14px 0;
+        margin: 0;
       }
 
       ul.facet-list {
@@ -460,11 +555,17 @@ export class CollectionFacets extends LitElement {
 
       .facet-row {
         display: flex;
-        align-items: center;
+        align-items: start;
         font-weight: 500;
         font-size: 1.2rem;
       }
 
+      .facet-info-display {
+        display: flex;
+        flex: 1;
+        cursor: pointer;
+      }
+
       .facet-title {
         flex: 1;
       }
@@ -474,6 +575,7 @@ export class CollectionFacets extends LitElement {
       }
 
       .select-facet-checkbox {
+        cursor: pointer;
         margin-right: 5px;
       }