@internetarchive/collection-browser 0.0.1-alpha.2 → 0.0.1-alpha.22

package/src/collection-facets.ts

@@ -1,15 +1,22 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+/* eslint-disable import/no-duplicates */
+import { css, html, LitElement, PropertyValues, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import { Aggregation } from '@internetarchive/search-service';
-
-type FacetOption =
-  | 'subject'
-  | 'mediatype'
-  | 'language'
-  | 'creator'
-  | 'collection'
-  | 'year';
+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';
+import chevronIcon from './assets/img/icons/chevron';
+import {
+  FacetOption,
+  SelectedFacets,
+  FacetGroup,
+  FacetBucket,
+  defaultSelectedFacets,
+} from './models';
 
 const facetDisplayOrder: FacetOption[] = [
   'mediatype',
@@ -38,46 +45,98 @@ 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 }) selectedFacets: Record<string, string[]> = {};
+  @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;
 
-  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: String }) minSelectedDate?: string;
+
+  @property({ type: String }) maxSelectedDate?: string;
+
+  @property({ type: Boolean }) facetsLoading = false;
+
+  @property({ type: Boolean }) fullYearAggregationLoading = false;
+
+  @property({ type: Object }) selectedFacets?: SelectedFacets;
+
+  @property({ type: Boolean }) collapsableFacets = false;
+
+  @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`
-      <h1>Facets</h1>
+      <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 =>
+          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);
+  }
 
-      ${this.mergedFacets.map(facetGroup => this.getFacetTemplate(facetGroup))}
+  private get currentYearsHistogramAggregation(): Aggregation | undefined {
+    return this.aggregations?.year_histogram;
+  }
+
+  private get histogramTemplate() {
+    const { fullYearsHistogramAggregation } = this;
+    return html`
+      <histogram-date-range
+        .minDate=${fullYearsHistogramAggregation?.first_bucket_key}
+        .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .updateDelay=${100}
+        missingDataMessage="..."
+        .width=${180}
+        .bins=${fullYearsHistogramAggregation?.buckets as number[]}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+      ></histogram-date-range>
     `;
   }
 
+  private histogramDateRangeUpdated(
+    e: CustomEvent<{
+      minDate: string;
+      maxDate: string;
+    }>
+  ) {
+    const { minDate, maxDate } = e.detail;
+    const event = new CustomEvent('histogramDateRangeUpdated', {
+      detail: { minDate, maxDate },
+    });
+    this.dispatchEvent(event);
+  }
+
   /**
    * Combines the selected facets with the aggregations to create a single list of facets
    */
@@ -127,8 +186,6 @@ export class CollectionFacets extends LitElement {
       });
       facetGroup.buckets = bucketsWithCount.splice(0, 5);
 
-      if (facetGroup.buckets.length === 0) return;
-
       facetGroups.push(facetGroup);
     });
 
@@ -136,24 +193,34 @@ 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]) => ({
+            key: value,
+            count: 0,
+            state: facetState,
+          })
+        );
+
+        return {
+          title,
+          key: option,
+          buckets,
+        };
+      }
+    );
+
+    return facetGroups;
   }
 
   /**
@@ -165,10 +232,11 @@ export class CollectionFacets extends LitElement {
       if (key === 'year_histogram') return;
       const option = this.getFacetOptionFromKey(key);
       const title = facetTitles[option];
-      const facetBuckets: FacetBucket[] = buckets.buckets.map(bucket => ({
+      const castedBuckets = buckets.buckets as Bucket[];
+      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => ({
         key: `${bucket.key}`,
         count: bucket.doc_count,
-        selected: false,
+        state: 'none',
       }));
       const group: FacetGroup = {
         title,
@@ -180,71 +248,134 @@ export class CollectionFacets extends LitElement {
     return facetGroups;
   }
 
+  private getFacetGroupTemplate(facetGroup: FacetGroup) {
+    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>
+    `;
+  }
+
   private getFacetTemplate(facetGroup: FacetGroup) {
     return html`
-      <h2>${facetGroup.title}</h2>
-      ${repeat(
-        facetGroup.buckets,
-        bucket => `${facetGroup.key}:${bucket.key}`,
-        bucket => html`
-          <label class="facet-row">
-            <div class="facet-checkbox">
-              <input
-                type="checkbox"
-                .name=${facetGroup.key}
-                .value=${bucket.key}
-                @click=${this.facetToggled}
-                ?checked=${bucket.selected}
-              />
-            </div>
-            <div class="facet-title">${bucket.key}</div>
-            <div class="facet-count">${bucket.count}</div>
-          </label>
-        `
-      )}
+      <ul class="facet-list">
+        ${repeat(
+          facetGroup.buckets,
+          bucket => `${facetGroup.key}:${bucket.key}`,
+          bucket => {
+            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`
+                    <async-collection-name
+                      .collectionNameCache=${this.collectionNameCache}
+                      .identifier=${bucket.key}
+                      placeholder="-"
+                    ></async-collection-name>
+                  `
+                : html`${bucket.key}`;
+
+            return html`
+              <li>
+                <label 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=${bucket.state === 'selected'}
+                      class="select-facet-checkbox"
+                    />
+                    <input
+                      type="checkbox"
+                      id=${negativeCheckboxId}
+                      .name=${facetGroup.key}
+                      .value=${bucket.key}
+                      @click=${(e: Event) => {
+                        this.facetClicked(e, bucket, true);
+                      }}
+                      .checked=${bucket.state === 'hidden'}
+                      class="hide-facet-checkbox"
+                    />
+                    <label for=${negativeCheckboxId} class="hide-facet-icon">
+                      ${bucket.state === 'hidden' ? eyeClosedIcon : eyeIcon}
+                    </label>
+                  </div>
+                  <div class="facet-title">${bucketTextDisplay}</div>
+                  <div class="facet-count">${bucket.count}</div>
+                </label>
+              </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;
   }
 
   /**
@@ -269,8 +400,79 @@ export class CollectionFacets extends LitElement {
 
   static get styles() {
     return css`
+      #container.loading {
+        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: 0;
+      }
+
+      ul.facet-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ul.facet-list li {
+        margin-bottom: 0.2rem;
+      }
+
+      .facet-checkbox {
+        margin-right: 0.5rem;
+        display: flex;
+        align-items: center;
+      }
+
       .facet-row {
         display: flex;
+        align-items: center;
+        font-weight: 500;
+        font-size: 1.2rem;
       }
 
       .facet-title {
@@ -280,6 +482,20 @@ export class CollectionFacets extends LitElement {
       .facet-count {
         margin-left: 0.5rem;
       }
+
+      .select-facet-checkbox {
+        margin-right: 5px;
+      }
+
+      .hide-facet-checkbox {
+        display: none;
+      }
+
+      .hide-facet-icon {
+        width: 15px;
+        height: 15px;
+        cursor: pointer;
+      }
     `;
   }
 }

package/src/mediatype-icon.ts

@@ -1,6 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import { accountIcon } from './assets/img/icons/mediatype/account';
 import { audioIcon } from './assets/img/icons/mediatype/audio';
 import { etreeIcon } from './assets/img/icons/mediatype/etree';
 import { imagesIcon } from './assets/img/icons/mediatype/images';
@@ -19,6 +20,7 @@ export class MediatypeIcon extends LitElement {
   @property({ type: Boolean }) showText = false;
 
   private readonly mediatypeIcons: { [key: string]: any } = {
+    account: accountIcon,
     audio: audioIcon,
     collection: collectionIcon,
     data: etreeIcon,
@@ -34,6 +36,7 @@ export class MediatypeIcon extends LitElement {
   };
 
   private readonly mediatypeText: { [key: string]: any } = {
+    account: 'Account',
     audio: 'Audio',
     collection: 'Collection',
     data: 'Data',
@@ -74,9 +77,13 @@ export class MediatypeIcon extends LitElement {
         display: none;
       }
 
-      #icon.show-text svg {
-        height: 10px;
-        width: 10px;
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconFillColor);
       }
     `;
   }