@internetarchive/collection-browser 0.0.1-alpha.7 → 0.1.0

package/src/collection-facets.ts

@@ -1,17 +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 } from '@internetarchive/search-service';
+import { Aggregation, Bucket } from '@internetarchive/search-service';
 import '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
-
-type FacetOption =
-  | 'subject'
-  | 'mediatype'
-  | 'language'
-  | 'creator'
-  | 'collection'
-  | 'year';
+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';
+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',
@@ -40,82 +53,88 @@ 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;
-}
-
-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: 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}
-        .bins=${fullYearsHistogramAggregation?.buckets}
+        .bins=${fullYearsHistogramAggregation?.buckets as number[]}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
       ></histogram-date-range>
     `;
@@ -166,13 +185,12 @@ export class CollectionFacets extends LitElement {
           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
@@ -183,8 +201,6 @@ export class CollectionFacets extends LitElement {
       });
       facetGroup.buckets = bucketsWithCount.splice(0, 5);
 
-      if (facetGroup.buckets.length === 0) return;
-
       facetGroups.push(facetGroup);
     });
 
@@ -192,24 +208,46 @@ 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[] {
-    const selectedFacetGroups: FacetGroup[] = [];
-    Object.entries(this.selectedFacets).forEach(([key, buckets]) => {
-      const title = facetTitles[key as FacetOption];
-      const group = {
-        title,
-        key,
-        buckets: buckets.map(bucket => ({
-          key: bucket,
-          count: 0,
-          selected: true,
-        })),
-      };
-      selectedFacetGroups.push(group);
-    });
-    return selectedFacetGroups;
+    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,
+            };
+          }
+        );
+
+        return {
+          title,
+          key: option,
+          buckets,
+        };
+      }
+    );
+
+    return facetGroups;
   }
 
   /**
@@ -218,14 +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 facetBuckets: FacetBucket[] = buckets.buckets.map(bucket => ({
-        key: `${bucket.key}`,
-        count: bucket.doc_count,
-        selected: false,
-      }));
+      const castedBuckets = buckets.buckets as Bucket[];
+      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,
@@ -236,74 +290,177 @@ 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 => html`
-            <li>
-              <label class="facet-row">
-                <div class="facet-checkbox">
-                  <input
-                    type="checkbox"
-                    .name=${facetGroup.key}
-                    .value=${bucket.key}
-                    @click=${this.facetToggled}
-                    ?checked=${bucket.selected}
-                  />
+          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`
+                    <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>
+                <div class="facet-row">
+                  <div class="facet-checkbox">
+                    <input
+                      type="checkbox"
+                      .name=${facetGroup.key}
+                      .value=${bucket.key}
+                      @click=${(e: Event) => {
+                        this.facetClicked(e, bucket, 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, true);
+                      }}
+                      .checked=${facetHidden}
+                      class="hide-facet-checkbox"
+                    />
+                    <label
+                      for=${negativeCheckboxId}
+                      class="hide-facet-icon"
+                      title=${showHideText}
+                    >
+                      ${facetHidden ? eyeClosedIcon : eyeIcon}
+                    </label>
+                  </div>
+
+                  <label
+                    for=${showOnlyCheckboxId}
+                    class="facet-info-display"
+                    title=${onlyShowText}
+                  >
+                    <div class="facet-title">${bucketTextDisplay}</div>
+                    <div class="facet-count">${bucket.count}</div>
+                  </label>
                 </div>
-                <div class="facet-title">${bucket.key}</div>
-                <div class="facet-count">${bucket.count}</div>
-              </label>
-            </li>
-          `
+              </li>
+            `;
+          }
         )}
       </ul>
     `;
   }
 
-  private facetChecked(name: string, value: string) {
-    const { selectedFacets } = this;
-    const facetClone = { ...selectedFacets };
-    const currentFacetValues = facetClone[name];
-    if (currentFacetValues) {
-      currentFacetValues.push(value);
-      facetClone[name] = currentFacetValues;
+  private facetClicked(e: Event, bucket: FacetBucket, negative: boolean) {
+    const target = e.target as HTMLInputElement;
+    const { checked, name, value } = target;
+    if (checked) {
+      this.facetChecked(name as FacetOption, value, negative);
     } else {
-      facetClone[name] = [value];
+      this.facetUnchecked(name as FacetOption, value);
     }
-    this.selectedFacets = facetClone;
   }
 
-  private facetUnchecked(name: string, value: string) {
+  private facetChecked(key: FacetOption, value: string, negative: boolean) {
     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];
-      }
+    let newFacets: SelectedFacets;
+    if (selectedFacets) {
+      newFacets = {
+        ...selectedFacets,
+      };
+    } else {
+      newFacets = defaultSelectedFacets;
     }
-    this.selectedFacets = facetClone;
+    newFacets[key][value] = negative ? 'hidden' : 'selected';
+    this.selectedFacets = newFacets;
   }
 
-  private facetToggled(e: Event) {
-    const target = e.target as HTMLInputElement;
-    const { checked, name, value } = target;
-    if (checked) {
-      this.facetChecked(name, value);
+  private facetUnchecked(key: FacetOption, value: string) {
+    const { selectedFacets } = this;
+    let newFacets: SelectedFacets;
+    if (selectedFacets) {
+      newFacets = {
+        ...selectedFacets,
+      };
     } else {
-      this.facetUnchecked(name, value);
+      newFacets = defaultSelectedFacets;
     }
-
-    const event = new CustomEvent<Record<string, string[]>>('facetsChanged', {
-      detail: this.selectedFacets,
-    });
-    this.dispatchEvent(event);
+    delete newFacets[key][value];
+    this.selectedFacets = newFacets;
   }
 
   /**
@@ -332,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 {
@@ -352,15 +549,23 @@ export class CollectionFacets extends LitElement {
 
       .facet-checkbox {
         margin-right: 0.5rem;
+        display: flex;
+        align-items: center;
       }
 
       .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;
       }
@@ -368,6 +573,21 @@ export class CollectionFacets extends LitElement {
       .facet-count {
         margin-left: 0.5rem;
       }
+
+      .select-facet-checkbox {
+        cursor: pointer;
+        margin-right: 5px;
+      }
+
+      .hide-facet-checkbox {
+        display: none;
+      }
+
+      .hide-facet-icon {
+        width: 15px;
+        height: 15px;
+        cursor: pointer;
+      }
     `;
   }
 }

package/src/language-code-handler/language-code-handler.ts

@@ -0,0 +1,64 @@
+import { codeToLanguageMap } from './language-code-mapping';
+
+// To serialize the list of potential language codes, we store
+// the string in the format `en-us|en|en-gb` with `|` being the separator.
+// This allows us to generate a query of `language:(en-us OR en OR en-gb)`
+// when we deserialize the string.
+export interface LanguageCodeHandlerInterface {
+  /**
+   * This takes a list of codes in the format `en-us|en|en-gb` and
+   * returns the first language code in the list.
+   *
+   * The codes in the string should always represent the same language name.
+   * eg `en-us`, `en-gb`, and `en` should always be "English"
+   *
+   * @param languageCodes
+   */
+  getLanguageNameFromCodeString(languageCodes: string): string;
+
+  /**
+   * This creates a serialized string of language codes for the given language.
+   *
+   * eg. `English` becomes `en-us|en|en-gb|.....`
+   *
+   * @param languageName
+   */
+  getCodeStringFromLanguageName(languageName: string): string;
+
+  /**
+   * Get an array of langauge codes from a serialized string.
+   *
+   * eg. `en-us|en|en-gb` becomes `['en-us', 'en', 'en-gb']`
+   *
+   * @param languageCodes
+   */
+  getCodeArrayFromCodeString(languageCodes: string): string[];
+}
+
+export class LanguageCodeHandler implements LanguageCodeHandlerInterface {
+  private delimeter = '|';
+
+  /** @inheritdoc */
+  getLanguageNameFromCodeString(languageCodes: string): string {
+    const split = this.getCodeArrayFromCodeString(languageCodes);
+    if (split.length === 0) return '';
+    const languageCode = split[0];
+    const languageName = codeToLanguageMap[languageCode];
+    return languageName ?? languageCodes;
+  }
+
+  /** @inheritdoc */
+  getCodeStringFromLanguageName(languageName: string): string {
+    const languageCodes = Object.keys(codeToLanguageMap).filter(
+      code => codeToLanguageMap[code] === languageName
+    );
+    const stringifiedCodes = languageCodes?.join(this.delimeter);
+    return stringifiedCodes;
+  }
+
+  /** @inheritdoc */
+  getCodeArrayFromCodeString(languageCodes: string): string[] {
+    const split = languageCodes.split(this.delimeter);
+    return split;
+  }
+}