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

package/dist/src/collection-facets.js

@@ -1,7 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+/* eslint-disable import/no-duplicates */
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import '@internetarchive/histogram-date-range';
+import '@internetarchive/feature-feedback';
+import '@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 { defaultSelectedFacets, } from './models';
 const facetDisplayOrder = [
     'mediatype',
     'year',
@@ -29,26 +37,68 @@ const facetTitles = {
 let CollectionFacets = class CollectionFacets extends LitElement {
     constructor() {
         super(...arguments);
-        this.selectedFacets = {};
-    }
-    get hydratedSelectedFacets() {
-        const { selectedFacets } = this;
-        const hydratedSelectedFacets = {};
-        Object.entries(selectedFacets).forEach(([key]) => {
-            const values = hydratedSelectedFacets[key];
-            const title = facetTitles[key];
-            hydratedSelectedFacets[title] = values || [];
-            delete hydratedSelectedFacets[key];
-        });
-        return hydratedSelectedFacets;
+        this.facetsLoading = false;
+        this.fullYearAggregationLoading = false;
+        this.collapsableFacets = false;
+        this.openFacets = {
+            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.getFacetTemplate(facetGroup))}
+        ${this.mergedFacets.map(facetGroup => this.getFacetGroupTemplate(facetGroup))}
+      </div>
     `;
     }
+    updated(changed) {
+        if (changed.has('selectedFacets')) {
+            this.dispatchFacetsChangedEvent();
+        }
+    }
+    dispatchFacetsChangedEvent() {
+        const event = new CustomEvent('facetsChanged', {
+            detail: this.selectedFacets,
+        });
+        this.dispatchEvent(event);
+    }
+    get currentYearsHistogramAggregation() {
+        var _a;
+        return (_a = this.aggregations) === null || _a === void 0 ? void 0 : _a.year_histogram;
+    }
+    get histogramTemplate() {
+        const { fullYearsHistogramAggregation } = this;
+        return html `
+      <histogram-date-range
+        .minDate=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.first_bucket_key}
+        .maxDate=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.last_bucket_key}
+        .minSelectedDate=${this.minSelectedDate}
+        .maxSelectedDate=${this.maxSelectedDate}
+        .updateDelay=${100}
+        missingDataMessage="..."
+        .width=${180}
+        .bins=${fullYearsHistogramAggregation === null || fullYearsHistogramAggregation === void 0 ? void 0 : fullYearsHistogramAggregation.buckets}
+        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+      ></histogram-date-range>
+    `;
+    }
+    histogramDateRangeUpdated(e) {
+        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
      */
@@ -87,31 +137,32 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 bucketsWithCount.push(bucket);
             });
             facetGroup.buckets = bucketsWithCount.splice(0, 5);
-            if (facetGroup.buckets.length === 0)
-                return;
             facetGroups.push(facetGroup);
         });
         return facetGroups;
     }
     /**
-     * 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
      */
     get selectedFacetGroups() {
-        const selectedFacetGroups = [];
-        Object.entries(this.selectedFacets).forEach(([key, buckets]) => {
-            const title = facetTitles[key];
-            const group = {
+        if (!this.selectedFacets)
+            return [];
+        const facetGroups = Object.entries(this.selectedFacets).map(([key, selectedFacets]) => {
+            const option = key;
+            const title = facetTitles[option];
+            const buckets = Object.entries(selectedFacets).map(([value, facetState]) => ({
+                key: value,
+                count: 0,
+                state: facetState,
+            }));
+            return {
                 title,
-                key,
-                buckets: buckets.map(bucket => ({
-                    key: bucket,
-                    count: 0,
-                    selected: true,
-                })),
+                key: option,
+                buckets,
             };
-            selectedFacetGroups.push(group);
         });
-        return selectedFacetGroups;
+        return facetGroups;
     }
     /**
      * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
@@ -124,10 +175,11 @@ let CollectionFacets = class CollectionFacets extends LitElement {
                 return;
             const option = this.getFacetOptionFromKey(key);
             const title = facetTitles[option];
-            const facetBuckets = buckets.buckets.map(bucket => ({
+            const castedBuckets = buckets.buckets;
+            const facetBuckets = castedBuckets.map(bucket => ({
                 key: `${bucket.key}`,
                 count: bucket.doc_count,
-                selected: false,
+                state: 'none',
             }));
             const group = {
                 title,
@@ -138,65 +190,126 @@ let CollectionFacets = class CollectionFacets extends LitElement {
         });
         return facetGroups;
     }
+    getFacetGroupTemplate(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>
+    `;
+    }
     getFacetTemplate(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) => {
+                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) => {
+                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>
     `;
     }
-    facetChecked(name, value) {
-        const { selectedFacets } = this;
-        const facetClone = { ...selectedFacets };
-        const currentFacetValues = facetClone[name];
-        if (currentFacetValues) {
-            currentFacetValues.push(value);
-            facetClone[name] = currentFacetValues;
+    facetClicked(e, bucket, negative) {
+        const target = e.target;
+        const { checked, name, value } = target;
+        if (checked) {
+            this.facetChecked(name, value, negative);
         }
         else {
-            facetClone[name] = [value];
+            this.facetUnchecked(name, value);
         }
-        this.selectedFacets = facetClone;
     }
-    facetUnchecked(name, value) {
+    facetChecked(key, value, negative) {
         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;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
         }
-        this.selectedFacets = facetClone;
+        else {
+            newFacets = defaultSelectedFacets;
+        }
+        newFacets[key][value] = negative ? 'hidden' : 'selected';
+        this.selectedFacets = newFacets;
     }
-    facetToggled(e) {
-        const target = e.target;
-        const { checked, name, value } = target;
-        if (checked) {
-            this.facetChecked(name, value);
+    facetUnchecked(key, value) {
+        const { selectedFacets } = this;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
         }
         else {
-            this.facetUnchecked(name, value);
+            newFacets = defaultSelectedFacets;
         }
-        const event = new CustomEvent('facetsChanged', {
-            detail: this.selectedFacets,
-        });
-        this.dispatchEvent(event);
+        delete newFacets[key][value];
+        this.selectedFacets = newFacets;
     }
     /**
      * Parse the aggregate key title into the human readable title
@@ -218,8 +331,79 @@ let CollectionFacets = 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 {
@@ -229,15 +413,53 @@ let CollectionFacets = 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;
+      }
     `;
     }
 };
 __decorate([
     property({ type: Object })
 ], CollectionFacets.prototype, "aggregations", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "fullYearsHistogramAggregation", void 0);
+__decorate([
+    property({ type: String })
+], CollectionFacets.prototype, "minSelectedDate", void 0);
+__decorate([
+    property({ type: String })
+], CollectionFacets.prototype, "maxSelectedDate", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "facetsLoading", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "fullYearAggregationLoading", void 0);
 __decorate([
     property({ type: Object })
 ], CollectionFacets.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: Boolean })
+], CollectionFacets.prototype, "collapsableFacets", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionFacets.prototype, "collectionNameCache", void 0);
+__decorate([
+    state()
+], CollectionFacets.prototype, "openFacets", void 0);
 CollectionFacets = __decorate([
     customElement('collection-facets')
 ], CollectionFacets);

package/dist/src/collection-facets.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-facets.js","sourceRoot":"","sources":["../../src/collection-facets.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { Aggregation } from '@internetarchive/search-service';\n\ntype FacetOption =\n  | 'subject'\n  | 'mediatype'\n  | 'language'\n  | 'creator'\n  | 'collection'\n  | 'year';\n\nconst facetDisplayOrder: FacetOption[] = [\n  'mediatype',\n  'year',\n  'subject',\n  'collection',\n  'creator',\n  'language',\n];\n\nconst aggregationToFacetOption: Record<string, FacetOption> = {\n  subjectSorter: 'subject',\n  mediatypeSorter: 'mediatype',\n  languageSorter: 'language',\n  creatorSorter: 'creator',\n  collection: 'collection',\n  year: 'year',\n};\n\nconst facetTitles: Record<FacetOption, string> = {\n  subject: 'Subject',\n  mediatype: 'Media Type',\n  language: 'Language',\n  creator: 'Creator',\n  collection: 'Collection',\n  year: 'Year',\n};\n\ninterface FacetBucket {\n  // for some facets, we augment the key with a display value\n  displayText?: string;\n  key: string;\n  count: number;\n  selected: boolean;\n}\n\ninterface FacetGroup {\n  title: string;\n  key: string;\n  buckets: FacetBucket[];\n}\n\n@customElement('collection-facets')\nexport class CollectionFacets extends LitElement {\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) selectedFacets: Record<string, string[]> = {};\n\n  private get hydratedSelectedFacets(): Record<string, string[]> {\n    const { selectedFacets } = this;\n    const hydratedSelectedFacets: Record<string, string[]> = {};\n    Object.entries(selectedFacets).forEach(([key]) => {\n      const values = hydratedSelectedFacets[key];\n      const title = facetTitles[key as FacetOption];\n      hydratedSelectedFacets[title] = values || [];\n      delete hydratedSelectedFacets[key];\n    });\n    return hydratedSelectedFacets;\n  }\n\n  render() {\n    return html`\n      <h1>Facets</h1>\n\n      ${this.mergedFacets.map(facetGroup => this.getFacetTemplate(facetGroup))}\n    `;\n  }\n\n  /**\n   * Combines the selected facets with the aggregations to create a single list of facets\n   */\n  private get mergedFacets(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n\n    facetDisplayOrder.forEach(facetKey => {\n      const selectedFacetGroup = this.selectedFacetGroups.find(\n        group => group.key === facetKey\n      );\n      const aggregateFacetGroup = this.aggregationFacetGroups.find(\n        group => group.key === facetKey\n      );\n\n      // if the user selected a facet, but it's not in the aggregation, we add it as-is\n      if (selectedFacetGroup && !aggregateFacetGroup) {\n        facetGroups.push(selectedFacetGroup);\n        return;\n      }\n\n      // if we don't have an aggregate facet group, don't add this to the list\n      if (!aggregateFacetGroup) return;\n\n      // start with either the selected group if we have one, or the aggregate group\n      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;\n\n      // attach the counts to the selected buckets\n      const bucketsWithCount =\n        selectedFacetGroup?.buckets.map(bucket => {\n          const selectedBucket = aggregateFacetGroup.buckets.find(\n            b => b.key === bucket.key\n          );\n          if (selectedBucket) {\n            return {\n              ...bucket,\n              count: selectedBucket.count,\n            };\n          }\n          return bucket;\n        }) ?? [];\n\n      // append any additional buckets that were not selected\n      aggregateFacetGroup.buckets.forEach(bucket => {\n        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);\n        if (existingBucket) return;\n        bucketsWithCount.push(bucket);\n      });\n      facetGroup.buckets = bucketsWithCount.splice(0, 5);\n\n      if (facetGroup.buckets.length === 0) return;\n\n      facetGroups.push(facetGroup);\n    });\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the raw `selectedFacets` to `FacetGroups`, which are easier to use\n   */\n  private get selectedFacetGroups(): FacetGroup[] {\n    const selectedFacetGroups: FacetGroup[] = [];\n    Object.entries(this.selectedFacets).forEach(([key, buckets]) => {\n      const title = facetTitles[key as FacetOption];\n      const group = {\n        title,\n        key,\n        buckets: buckets.map(bucket => ({\n          key: bucket,\n          count: 0,\n          selected: true,\n        })),\n      };\n      selectedFacetGroups.push(group);\n    });\n    return selectedFacetGroups;\n  }\n\n  /**\n   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use\n   */\n  private get aggregationFacetGroups(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n    Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {\n      if (key === 'year_histogram') return;\n      const option = this.getFacetOptionFromKey(key);\n      const title = facetTitles[option];\n      const facetBuckets: FacetBucket[] = buckets.buckets.map(bucket => ({\n        key: `${bucket.key}`,\n        count: bucket.doc_count,\n        selected: false,\n      }));\n      const group: FacetGroup = {\n        title,\n        key: option,\n        buckets: facetBuckets,\n      };\n      facetGroups.push(group);\n    });\n    return facetGroups;\n  }\n\n  private getFacetTemplate(facetGroup: FacetGroup) {\n    return html`\n      <h2>${facetGroup.title}</h2>\n      ${repeat(\n        facetGroup.buckets,\n        bucket => `${facetGroup.key}:${bucket.key}`,\n        bucket => html`\n          <label class=\"facet-row\">\n            <div class=\"facet-checkbox\">\n              <input\n                type=\"checkbox\"\n                .name=${facetGroup.key}\n                .value=${bucket.key}\n                @click=${this.facetToggled}\n                ?checked=${bucket.selected}\n              />\n            </div>\n            <div class=\"facet-title\">${bucket.key}</div>\n            <div class=\"facet-count\">${bucket.count}</div>\n          </label>\n        `\n      )}\n    `;\n  }\n\n  private facetChecked(name: string, value: string) {\n    const { selectedFacets } = this;\n    const facetClone = { ...selectedFacets };\n    const currentFacetValues = facetClone[name];\n    if (currentFacetValues) {\n      currentFacetValues.push(value);\n      facetClone[name] = currentFacetValues;\n    } else {\n      facetClone[name] = [value];\n    }\n    this.selectedFacets = facetClone;\n  }\n\n  private facetUnchecked(name: string, value: string) {\n    const { selectedFacets } = this;\n    const facetClone = { ...selectedFacets };\n    let currentFacetValues = selectedFacets[name];\n    if (currentFacetValues) {\n      currentFacetValues = currentFacetValues.filter(el => el !== value);\n      facetClone[name] = currentFacetValues;\n      if (currentFacetValues.length === 0) {\n        delete facetClone[name];\n      }\n    }\n    this.selectedFacets = facetClone;\n  }\n\n  private facetToggled(e: Event) {\n    const target = e.target as HTMLInputElement;\n    const { checked, name, value } = target;\n    if (checked) {\n      this.facetChecked(name, value);\n    } else {\n      this.facetUnchecked(name, value);\n    }\n\n    const event = new CustomEvent<Record<string, string[]>>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Parse the aggregate key title into the human readable title\n   *\n   * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type\n   *\n   * @param key\n   * @returns\n   */\n  private getFacetOptionFromKey(key: string): FacetOption {\n    const parts = key.split('__');\n    const fieldNamePart = parts[2];\n    const fieldName = fieldNamePart.split(':')[1];\n    const facetMatch = Object.entries(aggregationToFacetOption).find(([key2]) =>\n      fieldName.includes(key2)\n    );\n    const option = facetMatch?.[1];\n    if (!option) throw new Error(`Could not find facet option for key: ${key}`);\n    return option;\n  }\n\n  static get styles() {\n    return css`\n      .facet-row {\n        display: flex;\n      }\n\n      .facet-title {\n        flex: 1;\n      }\n\n      .facet-count {\n        margin-left: 0.5rem;\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"collection-facets.js","sourceRoot":"","sources":["../../src/collection-facets.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, html, LitElement, PropertyValues, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { Aggregation, Bucket } from '@internetarchive/search-service';\nimport '@internetarchive/histogram-date-range';\nimport '@internetarchive/feature-feedback';\nimport '@internetarchive/collection-name-cache';\nimport { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport eyeIcon from './assets/img/icons/eye';\nimport eyeClosedIcon from './assets/img/icons/eye-closed';\nimport chevronIcon from './assets/img/icons/chevron';\nimport {\n  FacetOption,\n  SelectedFacets,\n  FacetGroup,\n  FacetBucket,\n  defaultSelectedFacets,\n} from './models';\n\nconst facetDisplayOrder: FacetOption[] = [\n  'mediatype',\n  'year',\n  'subject',\n  'collection',\n  'creator',\n  'language',\n];\n\nconst aggregationToFacetOption: Record<string, FacetOption> = {\n  subjectSorter: 'subject',\n  mediatypeSorter: 'mediatype',\n  languageSorter: 'language',\n  creatorSorter: 'creator',\n  collection: 'collection',\n  year: 'year',\n};\n\nconst facetTitles: Record<FacetOption, string> = {\n  subject: 'Subject',\n  mediatype: 'Media Type',\n  language: 'Language',\n  creator: 'Creator',\n  collection: 'Collection',\n  year: 'Year',\n};\n\n@customElement('collection-facets')\nexport class CollectionFacets extends LitElement {\n  @property({ type: Object }) aggregations?: Record<string, Aggregation>;\n\n  @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;\n\n  @property({ type: String }) minSelectedDate?: string;\n\n  @property({ type: String }) maxSelectedDate?: string;\n\n  @property({ type: Boolean }) facetsLoading = false;\n\n  @property({ type: Boolean }) fullYearAggregationLoading = false;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: Boolean }) collapsableFacets = false;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  @state() openFacets: Record<FacetOption, boolean> = {\n    subject: false,\n    mediatype: false,\n    language: false,\n    creator: false,\n    collection: false,\n    year: false,\n  };\n\n  render() {\n    return html`\n      <div id=\"container\" class=\"${this.facetsLoading ? 'loading' : ''}\">\n        <div class=\"facet-group\">\n          <h1>Year Published <feature-feedback></feature-feedback></h1>\n          ${this.histogramTemplate}\n        </div>\n\n        ${this.mergedFacets.map(facetGroup =>\n          this.getFacetGroupTemplate(facetGroup)\n        )}\n      </div>\n    `;\n  }\n\n  updated(changed: PropertyValues) {\n    if (changed.has('selectedFacets')) {\n      this.dispatchFacetsChangedEvent();\n    }\n  }\n\n  private dispatchFacetsChangedEvent() {\n    const event = new CustomEvent<SelectedFacets>('facetsChanged', {\n      detail: this.selectedFacets,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private get currentYearsHistogramAggregation(): Aggregation | undefined {\n    return this.aggregations?.year_histogram;\n  }\n\n  private get histogramTemplate() {\n    const { fullYearsHistogramAggregation } = this;\n    return html`\n      <histogram-date-range\n        .minDate=${fullYearsHistogramAggregation?.first_bucket_key}\n        .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}\n        .minSelectedDate=${this.minSelectedDate}\n        .maxSelectedDate=${this.maxSelectedDate}\n        .updateDelay=${100}\n        missingDataMessage=\"...\"\n        .width=${180}\n        .bins=${fullYearsHistogramAggregation?.buckets as number[]}\n        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}\n      ></histogram-date-range>\n    `;\n  }\n\n  private histogramDateRangeUpdated(\n    e: CustomEvent<{\n      minDate: string;\n      maxDate: string;\n    }>\n  ) {\n    const { minDate, maxDate } = e.detail;\n    const event = new CustomEvent('histogramDateRangeUpdated', {\n      detail: { minDate, maxDate },\n    });\n    this.dispatchEvent(event);\n  }\n\n  /**\n   * Combines the selected facets with the aggregations to create a single list of facets\n   */\n  private get mergedFacets(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n\n    facetDisplayOrder.forEach(facetKey => {\n      const selectedFacetGroup = this.selectedFacetGroups.find(\n        group => group.key === facetKey\n      );\n      const aggregateFacetGroup = this.aggregationFacetGroups.find(\n        group => group.key === facetKey\n      );\n\n      // if the user selected a facet, but it's not in the aggregation, we add it as-is\n      if (selectedFacetGroup && !aggregateFacetGroup) {\n        facetGroups.push(selectedFacetGroup);\n        return;\n      }\n\n      // if we don't have an aggregate facet group, don't add this to the list\n      if (!aggregateFacetGroup) return;\n\n      // start with either the selected group if we have one, or the aggregate group\n      const facetGroup = selectedFacetGroup ?? aggregateFacetGroup;\n\n      // attach the counts to the selected buckets\n      const bucketsWithCount =\n        selectedFacetGroup?.buckets.map(bucket => {\n          const selectedBucket = aggregateFacetGroup.buckets.find(\n            b => b.key === bucket.key\n          );\n          if (selectedBucket) {\n            return {\n              ...bucket,\n              count: selectedBucket.count,\n            };\n          }\n          return bucket;\n        }) ?? [];\n\n      // append any additional buckets that were not selected\n      aggregateFacetGroup.buckets.forEach(bucket => {\n        const existingBucket = bucketsWithCount.find(b => b.key === bucket.key);\n        if (existingBucket) return;\n        bucketsWithCount.push(bucket);\n      });\n      facetGroup.buckets = bucketsWithCount.splice(0, 5);\n\n      facetGroups.push(facetGroup);\n    });\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the selected facets to a `FacetGroup` array,\n   * which is easier to work with\n   */\n  private get selectedFacetGroups(): FacetGroup[] {\n    if (!this.selectedFacets) return [];\n\n    const facetGroups: FacetGroup[] = Object.entries(this.selectedFacets).map(\n      ([key, selectedFacets]) => {\n        const option = key as FacetOption;\n        const title = facetTitles[option];\n\n        const buckets: FacetBucket[] = Object.entries(selectedFacets).map(\n          ([value, facetState]) => ({\n            key: value,\n            count: 0,\n            state: facetState,\n          })\n        );\n\n        return {\n          title,\n          key: option,\n          buckets,\n        };\n      }\n    );\n\n    return facetGroups;\n  }\n\n  /**\n   * Converts the raw `aggregations` to `FacetGroups`, which are easier to use\n   */\n  private get aggregationFacetGroups(): FacetGroup[] {\n    const facetGroups: FacetGroup[] = [];\n    Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {\n      if (key === 'year_histogram') return;\n      const option = this.getFacetOptionFromKey(key);\n      const title = facetTitles[option];\n      const castedBuckets = buckets.buckets as Bucket[];\n      const facetBuckets: FacetBucket[] = castedBuckets.map(bucket => ({\n        key: `${bucket.key}`,\n        count: bucket.doc_count,\n        state: 'none',\n      }));\n      const group: FacetGroup = {\n        title,\n        key: option,\n        buckets: facetBuckets,\n      };\n      facetGroups.push(group);\n    });\n    return facetGroups;\n  }\n\n  private getFacetGroupTemplate(facetGroup: FacetGroup) {\n    const { key } = facetGroup;\n    const isOpen = this.openFacets[key];\n    const collapser = html`\n      <span class=\"collapser ${isOpen ? 'open' : ''}\"> ${chevronIcon} </span>\n    `;\n\n    return html`\n      <div class=\"facet-group ${this.collapsableFacets ? 'mobile' : ''}\">\n        <h1\n          @click=${() => {\n            const newOpenFacets = { ...this.openFacets };\n            newOpenFacets[key] = !isOpen;\n            this.openFacets = newOpenFacets;\n          }}\n          @keyup=${() => {\n            const newOpenFacets = { ...this.openFacets };\n            newOpenFacets[key] = !isOpen;\n            this.openFacets = newOpenFacets;\n          }}\n        >\n          ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}\n        </h1>\n        <div class=\"facet-group-content ${isOpen ? 'open' : ''}\">\n          ${this.getFacetTemplate(facetGroup)}\n        </div>\n      </div>\n    `;\n  }\n\n  private getFacetTemplate(facetGroup: FacetGroup) {\n    return html`\n      <ul class=\"facet-list\">\n        ${repeat(\n          facetGroup.buckets,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket => {\n            const negativeCheckboxId = `${facetGroup.key}:${bucket.key}-negative`;\n            // for collections, we need to asynchronously load the collection name\n            // so we use the `async-collection-name` widget and for the rest, we have\n            // a static value to use\n            const bucketTextDisplay =\n              facetGroup.key === 'collection'\n                ? html`\n                    <async-collection-name\n                      .collectionNameCache=${this.collectionNameCache}\n                      .identifier=${bucket.key}\n                      placeholder=\"-\"\n                    ></async-collection-name>\n                  `\n                : html`${bucket.key}`;\n\n            return html`\n              <li>\n                <label class=\"facet-row\">\n                  <div class=\"facet-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      .name=${facetGroup.key}\n                      .value=${bucket.key}\n                      @click=${(e: Event) => {\n                        this.facetClicked(e, bucket, false);\n                      }}\n                      .checked=${bucket.state === 'selected'}\n                      class=\"select-facet-checkbox\"\n                    />\n                    <input\n                      type=\"checkbox\"\n                      id=${negativeCheckboxId}\n                      .name=${facetGroup.key}\n                      .value=${bucket.key}\n                      @click=${(e: Event) => {\n                        this.facetClicked(e, bucket, true);\n                      }}\n                      .checked=${bucket.state === 'hidden'}\n                      class=\"hide-facet-checkbox\"\n                    />\n                    <label for=${negativeCheckboxId} class=\"hide-facet-icon\">\n                      ${bucket.state === 'hidden' ? eyeClosedIcon : eyeIcon}\n                    </label>\n                  </div>\n                  <div class=\"facet-title\">${bucketTextDisplay}</div>\n                  <div class=\"facet-count\">${bucket.count}</div>\n                </label>\n              </li>\n            `;\n          }\n        )}\n      </ul>\n    `;\n  }\n\n  private facetClicked(e: Event, bucket: FacetBucket, negative: boolean) {\n    const target = e.target as HTMLInputElement;\n    const { checked, name, value } = target;\n    if (checked) {\n      this.facetChecked(name as FacetOption, value, negative);\n    } else {\n      this.facetUnchecked(name as FacetOption, value);\n    }\n  }\n\n  private facetChecked(key: FacetOption, value: string, negative: boolean) {\n    const { selectedFacets } = this;\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = defaultSelectedFacets;\n    }\n    newFacets[key][value] = negative ? 'hidden' : 'selected';\n    this.selectedFacets = newFacets;\n  }\n\n  private facetUnchecked(key: FacetOption, value: string) {\n    const { selectedFacets } = this;\n    let newFacets: SelectedFacets;\n    if (selectedFacets) {\n      newFacets = {\n        ...selectedFacets,\n      };\n    } else {\n      newFacets = defaultSelectedFacets;\n    }\n    delete newFacets[key][value];\n    this.selectedFacets = newFacets;\n  }\n\n  /**\n   * Parse the aggregate key title into the human readable title\n   *\n   * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type\n   *\n   * @param key\n   * @returns\n   */\n  private getFacetOptionFromKey(key: string): FacetOption {\n    const parts = key.split('__');\n    const fieldNamePart = parts[2];\n    const fieldName = fieldNamePart.split(':')[1];\n    const facetMatch = Object.entries(aggregationToFacetOption).find(([key2]) =>\n      fieldName.includes(key2)\n    );\n    const option = facetMatch?.[1];\n    if (!option) throw new Error(`Could not find facet option for key: ${key}`);\n    return option;\n  }\n\n  static get styles() {\n    return css`\n      #container.loading {\n        opacity: 0.5;\n      }\n\n      .collapser {\n        display: inline-block;\n        cursor: pointer;\n        width: 10px;\n        height: 10px;\n      }\n\n      .collapser svg {\n        transition: transform 0.2s ease-in-out;\n      }\n\n      .collapser.open svg {\n        transform: rotate(90deg);\n      }\n\n      .facet-group {\n        margin-bottom: 2rem;\n      }\n\n      .facet-group h1 {\n        margin-bottom: 0.7rem;\n      }\n\n      .facet-group.mobile h1 {\n        cursor: pointer;\n      }\n\n      .facet-group-content {\n        transition: max-height 0.2s ease-in-out;\n      }\n\n      .facet-group.mobile .facet-group-content {\n        max-height: 0;\n        overflow: hidden;\n      }\n\n      .facet-group.mobile .facet-group-content.open {\n        max-height: 2000px;\n      }\n\n      h1 {\n        font-size: 1.4rem;\n        font-weight: 200;\n        border-bottom: 1px solid rgb(232, 232, 232);\n        padding-bottom: 3px;\n        margin: 0;\n      }\n\n      ul.facet-list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul.facet-list li {\n        margin-bottom: 0.2rem;\n      }\n\n      .facet-checkbox {\n        margin-right: 0.5rem;\n        display: flex;\n        align-items: center;\n      }\n\n      .facet-row {\n        display: flex;\n        align-items: center;\n        font-weight: 500;\n        font-size: 1.2rem;\n      }\n\n      .facet-title {\n        flex: 1;\n      }\n\n      .facet-count {\n        margin-left: 0.5rem;\n      }\n\n      .select-facet-checkbox {\n        margin-right: 5px;\n      }\n\n      .hide-facet-checkbox {\n        display: none;\n      }\n\n      .hide-facet-icon {\n        width: 15px;\n        height: 15px;\n        cursor: pointer;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-name-cache.d.ts

@@ -0,0 +1,18 @@
+import { SearchServiceInterface } from '@internetarchive/search-service';
+export interface CollectionNameCacheInterface {
+    collectionNameFor(identifier: string): Promise<string | null>;
+    preloadIdentifiers(identifiers: string[]): Promise<void>;
+}
+export declare class CollectionNameCache implements CollectionNameCacheInterface {
+    collectionNameFor(identifier: string): Promise<string | null>;
+    preloadIdentifiers(identifiers: string[]): Promise<void>;
+    private pendingIdentifierQueue;
+    private pendingPromises;
+    private collectionNameCache;
+    private searchService;
+    constructor(options: {
+        searchService: SearchServiceInterface;
+        loadInterval?: number;
+    });
+    private loadPendingIdentifiers;
+}

package/dist/src/collection-name-cache.js

@@ -0,0 +1,89 @@
+/* eslint-disable camelcase */
+/* eslint-disable no-continue */
+import { SearchParams, } from '@internetarchive/search-service';
+export class CollectionNameCache {
+    constructor(options) {
+        var _a;
+        this.pendingIdentifierQueue = [];
+        this.pendingPromises = {};
+        this.collectionNameCache = {};
+        this.searchService = options.searchService;
+        setInterval(() => {
+            this.loadPendingIdentifiers();
+        }, (_a = options.loadInterval) !== null && _a !== void 0 ? _a : 250);
+    }
+    async collectionNameFor(identifier) {
+        const lowercaseIdentifier = identifier.toLowerCase();
+        const cachedName = this.collectionNameCache[lowercaseIdentifier];
+        // we're specifically looking for `undefined`, because `null`
+        // means we queried the search service and found nothing so
+        // don't query again
+        if (cachedName !== undefined)
+            return cachedName;
+        return new Promise(resolve => {
+            var _a;
+            this.pendingIdentifierQueue.push(lowercaseIdentifier);
+            const currentPromises = (_a = this.pendingPromises[lowercaseIdentifier]) !== null && _a !== void 0 ? _a : [];
+            const resultHandler = async (name) => {
+                resolve(name);
+            };
+            currentPromises.push(resultHandler);
+            this.pendingPromises[lowercaseIdentifier] = currentPromises;
+        });
+    }
+    async preloadIdentifiers(identifiers) {
+        const lowercaseIdentifiers = identifiers.map(identifier => identifier.toLowerCase());
+        for (const identifier of lowercaseIdentifiers) {
+            if (this.collectionNameCache[identifier])
+                continue;
+            this.pendingIdentifierQueue.push(identifier);
+        }
+        await this.loadPendingIdentifiers();
+    }
+    async loadPendingIdentifiers() {
+        var _a, _b, _c;
+        const pendingIdentifiers = this.pendingIdentifierQueue.splice(0, 100);
+        if (pendingIdentifiers.length === 0)
+            return;
+        const searchParams = new SearchParams({
+            query: `identifier:(${pendingIdentifiers.join(' OR ')})`,
+            fields: ['title', 'identifier'],
+            rows: pendingIdentifiers.length,
+        });
+        const results = await this.searchService.search(searchParams);
+        const docs = (_b = (_a = results.success) === null || _a === void 0 ? void 0 : _a.response) === null || _b === void 0 ? void 0 : _b.docs;
+        // first process the identifiers that were received from the search service
+        // and remove them from the pendingIdentifierQueue
+        if (docs && docs.length > 0) {
+            for (const result of docs) {
+                const { identifier, title } = result;
+                if (!identifier)
+                    continue;
+                const lowercaseIdentifier = identifier.toLowerCase();
+                pendingIdentifiers.splice(pendingIdentifiers.indexOf(lowercaseIdentifier), 1);
+                const collectionName = (_c = title === null || title === void 0 ? void 0 : title.value) !== null && _c !== void 0 ? _c : null;
+                this.collectionNameCache[lowercaseIdentifier] = collectionName;
+                const currentPromises = this.pendingPromises[lowercaseIdentifier];
+                if (currentPromises) {
+                    for (const promise of currentPromises) {
+                        promise(collectionName);
+                    }
+                    delete this.pendingPromises[lowercaseIdentifier];
+                }
+            }
+        }
+        // if the search service did not return titles for all of the identifiers,
+        // we still need to complete the promises and just return `null` for the rest
+        for (const identifier of pendingIdentifiers) {
+            this.collectionNameCache[identifier] = null;
+            const currentPromises = this.pendingPromises[identifier];
+            if (currentPromises) {
+                for (const promise of currentPromises) {
+                    promise(null);
+                }
+                delete this.pendingPromises[identifier];
+            }
+        }
+    }
+}
+//# sourceMappingURL=collection-name-cache.js.map