@internetarchive/collection-browser 0.2.21 → 0.2.22

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

@@ -0,0 +1,266 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import eyeIcon from '../assets/img/icons/eye';
+import eyeClosedIcon from '../assets/img/icons/eye-closed';
+import { defaultSelectedFacets, } from '../models';
+let FacetsTemplate = class FacetsTemplate extends LitElement {
+    facetClicked(e, count, negative) {
+        const target = e.target;
+        const { checked, name, value } = target;
+        if (checked) {
+            this.facetChecked(name, value, count, negative);
+        }
+        else {
+            this.facetUnchecked(name, value);
+        }
+    }
+    facetChecked(key, value, count, negative) {
+        const { selectedFacets } = this;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
+        }
+        else {
+            newFacets = defaultSelectedFacets;
+        }
+        newFacets[key][value] = {
+            state: negative ? 'hidden' : 'selected',
+            count,
+        };
+        this.selectedFacets = newFacets;
+        this.dispatchSelectedFacetsChanged();
+    }
+    facetUnchecked(key, value) {
+        const { selectedFacets } = this;
+        let newFacets;
+        if (selectedFacets) {
+            newFacets = {
+                ...selectedFacets,
+            };
+        }
+        else {
+            newFacets = defaultSelectedFacets;
+        }
+        delete newFacets[key][value];
+        this.selectedFacets = newFacets;
+        this.dispatchSelectedFacetsChanged();
+    }
+    dispatchSelectedFacetsChanged() {
+        const event = new CustomEvent('selectedFacetsChanged', {
+            detail: this.selectedFacets,
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+    getFacetsTemplate(facetGroup) {
+        let facetsBucket = facetGroup === null || facetGroup === void 0 ? void 0 : facetGroup.buckets;
+        /**
+         * sorting FacetBucket before render page / modal
+         * - first, selected items should be at top having sorted
+         * - second, suppressed/hidden items should be after selected having sorted
+         * - and then no-selected / not suppressed items should render having sorted
+         */
+        facetsBucket = [
+            ...facetsBucket
+                .filter(x => x.state === 'selected')
+                .sort((a, b) => (a.count < b.count ? 1 : -1)),
+            ...facetsBucket
+                .filter(x => x.state === 'hidden')
+                .sort((a, b) => (a.count < b.count ? 1 : -1)),
+            ...facetsBucket.filter(x => x.state === 'none'),
+        ];
+        return html `
+      <div class="facets-on-${this.renderOn}">
+        ${repeat(facetsBucket, bucket => `${facetGroup.key}:${bucket.key}`, bucket => {
+            var _a, _b;
+            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 `${(_a = bucket.displayText) !== null && _a !== void 0 ? _a : bucket.key}`
+                : html `<a href="/details/${bucket.key}">
+                    <async-collection-name
+                      .collectionNameCache=${this.collectionNameCache}
+                      .identifier=${bucket.key}
+                      placeholder="-"
+                    ></async-collection-name>
+                  </a> `;
+            const facetHidden = bucket.state === 'hidden';
+            const facetSelected = bucket.state === 'selected';
+            const titleText = `${facetGroup.key}: ${(_b = bucket.displayText) !== null && _b !== void 0 ? _b : 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 `
+              <div class="facet-row">
+                <div class="facet-checkbox">
+                  <input
+                    type="checkbox"
+                    .name=${facetGroup.key}
+                    .value=${bucket.key}
+                    @click=${(e) => {
+                this.facetClicked(e, bucket.count, false);
+            }}
+                    .checked=${facetSelected}
+                    class="select-facet-checkbox"
+                    title=${onlyShowText}
+                    id=${showOnlyCheckboxId}
+                  />
+                  <input
+                    type="checkbox"
+                    id=${negativeCheckboxId}
+                    .name=${facetGroup.key}
+                    .value=${bucket.key}
+                    @click=${(e) => {
+                this.facetClicked(e, bucket.count, true);
+            }}
+                    .checked=${facetHidden}
+                    class="hide-facet-checkbox"
+                  />
+                  <label
+                    for=${negativeCheckboxId}
+                    class="hide-facet-icon${facetHidden ? ' active' : ''}"
+                    title=${showHideText}
+                  >
+                    <span class="eye">${eyeIcon}</span>
+                    <span class="eye-closed">${eyeClosedIcon}</span>
+                  </label>
+                </div>
+                <div
+                  for=${showOnlyCheckboxId}
+                  class="facet-info-display"
+                  title=${onlyShowText}
+                >
+                  <div class="facet-title">${bucketTextDisplay}</div>
+                  <div class="facet-count">${bucket.count}</div>
+                </div>
+              </div>
+            `;
+        })}
+      </div>
+    `;
+    }
+    render() {
+        return html `${this.getFacetsTemplate(this.facetGroup)}`;
+    }
+    static get styles() {
+        return css `
+      .facets-on-modal {
+        /* For Chrome, Safari, Opera browsers */
+        -webkit-column-width: 100px;
+        /* For Firefox browser */
+        -moz-column-width: 100px;
+        column-width: 25rem;
+        column-gap: 15px;
+      }
+      .facets-on-page .select-facet-checkbox {
+        margin-left: 0;
+      }
+      async-collection-name {
+        display: contents;
+      }
+      ul.facet-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      ul.facet-list li {
+        margin-bottom: 0.2rem;
+        display: grid;
+      }
+      .facet-checkbox {
+        margin: 0 5px 0 0;
+        display: inline-block;
+        align-items: baseline;
+      }
+      .facet-row {
+        display: flex;
+        font-weight: 500;
+        font-size: 1.2rem;
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1 1 0%;
+        cursor: pointer;
+        flex-wrap: wrap;
+        align-content: center;
+      }
+      .facet-title {
+        word-break: break-word;
+        display: inline-block;
+        flex: 1 1 0%;
+      }
+      .facet-count {
+        text-align: right;
+      }
+      .select-facet-checkbox {
+        cursor: pointer;
+        display: inline-block;
+      }
+      .hide-facet-checkbox {
+        display: none;
+      }
+      .hide-facet-icon {
+        width: 15px;
+        height: 15px;
+        cursor: pointer;
+        opacity: 0.3;
+        display: inline-block;
+      }
+      .hide-facet-icon:hover,
+      .active {
+        opacity: 1;
+      }
+      .hide-facet-icon:hover .eye,
+      .hide-facet-icon .eye-closed {
+        display: none;
+      }
+      .hide-facet-icon:hover .eye-closed,
+      .hide-facet-icon.active .eye-closed {
+        display: inline;
+      }
+      .hide-facet-icon.active .eye {
+        display: none;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
+
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "facetGroup", void 0);
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: String })
+], FacetsTemplate.prototype, "renderOn", void 0);
+__decorate([
+    property({ type: Object })
+], FacetsTemplate.prototype, "collectionNameCache", void 0);
+FacetsTemplate = __decorate([
+    customElement('facets-template')
+], FacetsTemplate);
+export { FacetsTemplate };
+//# sourceMappingURL=facets-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"facets-template.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-template.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, TemplateResult, CSSResultGroup } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';\nimport eyeIcon from '../assets/img/icons/eye';\nimport eyeClosedIcon from '../assets/img/icons/eye-closed';\nimport {\n  FacetGroup,\n  FacetOption,\n  FacetBucket,\n  SelectedFacets,\n  defaultSelectedFacets,\n} from '../models';\n\n@customElement('facets-template')\nexport class FacetsTemplate extends LitElement {\n  @property({ type: Object }) facetGroup?: FacetGroup;\n\n  @property({ type: Object }) selectedFacets?: SelectedFacets;\n\n  @property({ type: String }) renderOn?: string;\n\n  @property({ type: Object })\n  collectionNameCache?: CollectionNameCacheInterface;\n\n  private facetClicked(e: Event, count: number, 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, count, negative);\n    } else {\n      this.facetUnchecked(name as FacetOption, value);\n    }\n  }\n\n  private facetChecked(\n    key: FacetOption,\n    value: string,\n    count: number,\n    negative: boolean\n  ) {\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] = {\n      state: negative ? 'hidden' : 'selected',\n      count,\n    } as FacetBucket;\n\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\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\n    this.selectedFacets = newFacets;\n    this.dispatchSelectedFacetsChanged();\n  }\n\n  private dispatchSelectedFacetsChanged() {\n    const event = new CustomEvent<SelectedFacets>('selectedFacetsChanged', {\n      detail: this.selectedFacets,\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private getFacetsTemplate(facetGroup: FacetGroup): TemplateResult {\n    let facetsBucket = facetGroup?.buckets as FacetBucket[];\n\n    /**\n     * sorting FacetBucket before render page / modal\n     * - first, selected items should be at top having sorted\n     * - second, suppressed/hidden items should be after selected having sorted\n     * - and then no-selected / not suppressed items should render having sorted\n     */\n    facetsBucket = [\n      ...facetsBucket\n        .filter(x => x.state === 'selected')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetsBucket\n        .filter(x => x.state === 'hidden')\n        .sort((a, b) => (a.count < b.count ? 1 : -1)),\n      ...facetsBucket.filter(x => x.state === 'none'),\n    ];\n\n    return html`\n      <div class=\"facets-on-${this.renderOn}\">\n        ${repeat(\n          facetsBucket,\n          bucket => `${facetGroup.key}:${bucket.key}`,\n          bucket => {\n            const showOnlyCheckboxId = `${facetGroup.key}:${bucket.key}-show-only`;\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`${bucket.displayText ?? bucket.key}`\n                : html`<a href=\"/details/${bucket.key}\">\n                    <async-collection-name\n                      .collectionNameCache=${this.collectionNameCache}\n                      .identifier=${bucket.key}\n                      placeholder=\"-\"\n                    ></async-collection-name>\n                  </a> `;\n            const facetHidden = bucket.state === 'hidden';\n            const facetSelected = bucket.state === 'selected';\n            const titleText = `${facetGroup.key}: ${\n              bucket.displayText ?? bucket.key\n            }`;\n            const onlyShowText = facetSelected\n              ? `Show all ${facetGroup.key}s`\n              : `Only show ${titleText}`;\n            const hideText = `Hide ${titleText}`;\n            const unhideText = `Unhide ${titleText}`;\n            const showHideText = facetHidden ? unhideText : hideText;\n            return html`\n              <div 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.count, false);\n                    }}\n                    .checked=${facetSelected}\n                    class=\"select-facet-checkbox\"\n                    title=${onlyShowText}\n                    id=${showOnlyCheckboxId}\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.count, true);\n                    }}\n                    .checked=${facetHidden}\n                    class=\"hide-facet-checkbox\"\n                  />\n                  <label\n                    for=${negativeCheckboxId}\n                    class=\"hide-facet-icon${facetHidden ? ' active' : ''}\"\n                    title=${showHideText}\n                  >\n                    <span class=\"eye\">${eyeIcon}</span>\n                    <span class=\"eye-closed\">${eyeClosedIcon}</span>\n                  </label>\n                </div>\n                <div\n                  for=${showOnlyCheckboxId}\n                  class=\"facet-info-display\"\n                  title=${onlyShowText}\n                >\n                  <div class=\"facet-title\">${bucketTextDisplay}</div>\n                  <div class=\"facet-count\">${bucket.count}</div>\n                </div>\n              </div>\n            `;\n          }\n        )}\n      </div>\n    `;\n  }\n\n  render() {\n    return html`${this.getFacetsTemplate(this.facetGroup as FacetGroup)}`;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      .facets-on-modal {\n        /* For Chrome, Safari, Opera browsers */\n        -webkit-column-width: 100px;\n        /* For Firefox browser */\n        -moz-column-width: 100px;\n        column-width: 25rem;\n        column-gap: 15px;\n      }\n      .facets-on-page .select-facet-checkbox {\n        margin-left: 0;\n      }\n      async-collection-name {\n        display: contents;\n      }\n      ul.facet-list {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n      ul.facet-list li {\n        margin-bottom: 0.2rem;\n        display: grid;\n      }\n      .facet-checkbox {\n        margin: 0 5px 0 0;\n        display: inline-block;\n        align-items: baseline;\n      }\n      .facet-row {\n        display: flex;\n        font-weight: 500;\n        font-size: 1.2rem;\n      }\n      .facet-info-display {\n        display: flex;\n        flex: 1 1 0%;\n        cursor: pointer;\n        flex-wrap: wrap;\n        align-content: center;\n      }\n      .facet-title {\n        word-break: break-word;\n        display: inline-block;\n        flex: 1 1 0%;\n      }\n      .facet-count {\n        text-align: right;\n      }\n      .select-facet-checkbox {\n        cursor: pointer;\n        display: inline-block;\n      }\n      .hide-facet-checkbox {\n        display: none;\n      }\n      .hide-facet-icon {\n        width: 15px;\n        height: 15px;\n        cursor: pointer;\n        opacity: 0.3;\n        display: inline-block;\n      }\n      .hide-facet-icon:hover,\n      .active {\n        opacity: 1;\n      }\n      .hide-facet-icon:hover .eye,\n      .hide-facet-icon .eye-closed {\n        display: none;\n      }\n      .hide-facet-icon:hover .eye-closed,\n      .hide-facet-icon.active .eye-closed {\n        display: inline;\n      }\n      .hide-facet-icon.active .eye {\n        display: none;\n      }\n      .sorting-icon {\n        cursor: pointer;\n      }\n\n      a:link,\n      a:visited {\n        text-decoration: none;\n        color: var(--ia-theme-link-color, #4b64ff);\n      }\n      a:hover {\n        text-decoration: underline;\n      }\n    `;\n  }\n}\n"]}

package/dist/src/collection-facets/facets-util.d.ts

@@ -0,0 +1,10 @@
+import { FacetOption } from '../models';
+/**
+ * Parse the aggregate key title into the human readable title
+ *
+ * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
+ *
+ * @param key
+ * @returns
+ */
+export declare function getFacetOptionFromKey(key: string): FacetOption;

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

@@ -0,0 +1,20 @@
+import { aggregationToFacetOption } from '../models';
+/**
+ * Parse the aggregate key title into the human readable title
+ *
+ * Example: user_aggs__terms__field:mediatypeSorter__size:6 => Media Type
+ *
+ * @param key
+ * @returns
+ */
+export function getFacetOptionFromKey(key) {
+    const parts = key.split('__');
+    const fieldNamePart = parts[2];
+    const fieldName = fieldNamePart.split(':')[1];
+    const facetMatch = Object.entries(aggregationToFacetOption).find(([key2]) => fieldName.includes(key2));
+    const option = facetMatch === null || facetMatch === void 0 ? void 0 : facetMatch[1];
+    if (!option)
+        throw new Error(`Could not find facet option for key: ${key}`);
+    return option;
+}
+//# sourceMappingURL=facets-util.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"facets-util.js","sourceRoot":"","sources":["../../../src/collection-facets/facets-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAe,MAAM,WAAW,CAAC;AAElE;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB,CAAC,GAAW;IAC/C,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC9B,MAAM,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAC1E,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CACzB,CAAC;IAEF,MAAM,MAAM,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,CAAC,CAAC,CAAC;IAC/B,IAAI,CAAC,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,wCAAwC,GAAG,EAAE,CAAC,CAAC;IAC5E,OAAO,MAAM,CAAC;AAChB,CAAC","sourcesContent":["import { aggregationToFacetOption, FacetOption } from '../models';\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 */\nexport function 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\n  const option = facetMatch?.[1];\n  if (!option) throw new Error(`Could not find facet option for key: ${key}`);\n  return option;\n}\n"]}

package/dist/src/collection-facets/more-facets-content.d.ts

@@ -0,0 +1,83 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+import type { Aggregation, SearchServiceInterface } from '@internetarchive/search-service';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { SelectedFacets, FacetGroup } from '../models';
+import type { LanguageCodeHandlerInterface } from '../language-code-handler/language-code-handler';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+import './facets-template';
+export declare class MoreFacetsContent extends LitElement {
+    facetKey?: string;
+    facetAggregationKey?: string;
+    fullQuery?: string;
+    modalManager?: ModalManagerInterface;
+    searchService?: SearchServiceInterface;
+    collectionNameCache?: CollectionNameCacheInterface;
+    languageCodeHandler?: LanguageCodeHandlerInterface;
+    selectedFacets?: SelectedFacets;
+    sortedBy: string;
+    aggregations?: Record<string, Aggregation>;
+    facetGroup?: FacetGroup[];
+    facetGroupTitle?: String;
+    pageNumber: number;
+    /**
+     * Facets are loading on popup
+     */
+    facetsLoading: boolean;
+    paginationSize: number;
+    facetsType: string;
+    private facetsPerPage;
+    updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    /**
+     * Close more facets modal on Escape click
+     */
+    private setupEscapeListeners;
+    /**
+     * Get specific facets data from search-service API based of currently query params
+     * - this.aggregations - hold result of search service and being used for further processing.
+     */
+    updateSpecificFacets(): Promise<void>;
+    private pageNumberClicked;
+    /**
+     * Combines the selected facets with the aggregations to create a single list of facets
+     */
+    private get mergedFacets();
+    /**
+     * Converts the selected facets to a `FacetGroup` array,
+     * which is easier to work with
+     */
+    private get selectedFacetGroups();
+    /**
+     * Converts the raw `aggregations` to `FacetGroups`, which are easier to use
+     */
+    private get aggregationFacetGroups();
+    /**
+     * 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
+     *
+     * @param castedBuckets
+     */
+    private preloadCollectionNames;
+    /**
+     * sort the facets on modal
+     * - alpha sort perform in ascending order
+     * - count/frequency sort perform in descending order
+     *
+     * @param facetBucket as Bucket[]
+     *
+     * @return sortedFacetBucket as Bucket
+     */
+    private sortedFacets;
+    private get getMoreFacetsTemplate();
+    private get loaderTemplate();
+    private get facetsPaginationTemplate();
+    private get footerTemplate();
+    private sortFacetAggregation;
+    private get getModalHeaderTemplate();
+    render(): TemplateResult<1>;
+    private applySearchFacetsClicked;
+    private cancelClick;
+    static get styles(): CSSResultGroup;
+}