@internetarchive/collection-browser 0.2.15 → 0.2.16-alpha1

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

@@ -0,0 +1,393 @@
+/* eslint-disable dot-notation */
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import type {
+  Aggregation,
+  Bucket,
+  SearchServiceInterface,
+  SearchParams,
+} from '@internetarchive/search-service';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
+import { SelectedFacets, defaultSelectedFacets } from '../models';
+import type { LanguageCodeHandlerInterface } from '../language-code-handler/language-code-handler';
+import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
+import './more-facets-pagination';
+
+@customElement('more-facets-content')
+export class MoreFacetsContent extends LitElement {
+  @property({ type: String }) facetKey?: string;
+
+  @property({ type: String }) facetAggregationKey?: string;
+
+  @property({ type: String }) fullQuery?: string;
+
+  @property({ type: Object }) modalManager?: ModalManagerInterface;
+
+  @property({ type: Object }) searchService?: SearchServiceInterface;
+
+  @property({ type: Object })
+  collectionNameCache?: CollectionNameCacheInterface;
+
+  @property({ type: Object })
+  languageCodeHandler?: LanguageCodeHandlerInterface;
+
+  @property({ type: Object }) selectedFacets?: SelectedFacets;
+
+  @state() aggregations?: Record<string, Aggregation>;
+
+  @state() castedBuckets?: Bucket[] = [];
+
+  @state() pageNumber = 1;
+
+  /**
+   * Facets are loading on popup
+   */
+  @state() facetsLoading = true;
+
+  @state() paginationSize = 0;
+
+  private facetsPerPage = 60; // TODO: Q. how many items we want to have on popup view
+
+  updated(changed: PropertyValues) {
+    if (changed.has('facetKey')) {
+      this.facetsLoading = true;
+      this.pageNumber = 1;
+
+      this.updateSpecificFacets();
+    }
+  }
+
+  firstUpdated() {
+    this.setupEscapeListeners();
+  }
+
+  /**
+   * Close more facets modal on Escape click
+   */
+  private setupEscapeListeners() {
+    if (this.modalManager) {
+      document.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          this.modalManager?.closeModal();
+        }
+      });
+    } else {
+      document.removeEventListener('keydown', () => {});
+    }
+  }
+
+  /**
+   * 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.
+   */
+  async updateSpecificFacets(): Promise<void> {
+    const aggregations = {
+      advancedParams: [
+        {
+          field: this.facetAggregationKey as string,
+          size: 1000000, // todo - do we want to have all the records at once?
+        },
+      ],
+    };
+
+    const params: SearchParams = {
+      query: this.fullQuery as string,
+      fields: ['identifier'],
+      aggregations,
+      rows: 1, // todo - do we want server-side pagination with offset/page/limit flag?
+    };
+
+    const results = await this.searchService?.search(params);
+    this.aggregations = results?.success?.response.aggregations as any;
+
+    // filter facets data to be rendered in modal-manager
+    await this.filterFacets();
+    this.facetsLoading = false;
+  }
+
+  /**
+   * Filter facets data stored in this.aggregations, eg.
+   * - we don't want to entertain year_histogram data since we using new date-picker
+   * - name of collections needs to be load inside cache using this.collectionNameCache
+   *
+   * this.castedBuckets - hold filtered facets data which will be render in modal
+   */
+  async filterFacets(): Promise<void> {
+    Object.entries(this.aggregations ?? []).forEach(([key, buckets]) => {
+      if (key === 'year_histogram') return;
+
+      this.castedBuckets = buckets['buckets'] as Bucket[];
+
+      if (this.facetKey === 'collection') {
+        // 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 collectionIds = this.castedBuckets?.map(option => option.key);
+        const collectionIdsArray = Array.from(
+          new Set(collectionIds)
+        ) as string[];
+        this.collectionNameCache?.preloadIdentifiers(collectionIdsArray);
+      }
+    });
+
+    const { length } = Object.keys(this.castedBuckets as []);
+    this.paginationSize = Math.ceil(length / this.facetsPerPage);
+  }
+
+  private pageNumberClicked(e: CustomEvent<{ page: string }>) {
+    const page = e?.detail?.page;
+    if (page) {
+      this.pageNumber = Number(page);
+    }
+  }
+
+  private get getMoreFacetsTemplate() {
+    this.facetsLoading = false;
+
+    // render only items which will be visible as per this.facetsPerPage
+    const currentPageContent = this.castedBuckets?.slice(
+      (this.pageNumber - 1) * this.facetsPerPage,
+      this.pageNumber * this.facetsPerPage
+    );
+
+    return html`<ul class="facet-list">
+      ${currentPageContent?.map(facet => {
+        let displayText = facet.key;
+
+        if (this.facetKey === 'language') {
+          displayText =
+            this.languageCodeHandler?.getLanguageNameFromCodeString(
+              displayText as string
+            ) ?? displayText;
+        }
+
+        return html`
+          <li class="facet-row">
+            <div class="facet-checkbox">
+              <input
+                type="checkbox"
+                class="selected-facets"
+                id="${facet.key}"
+                data-facet="${this.facetKey}"
+                .value="${facet.key}"
+                @click=${(e: Event) => {
+                  this.facetClicked(e);
+                }}
+              />
+            </div>
+            <label
+              class="facet-info-display"
+              for="${facet.key}"
+              title=${facet.key}
+            >
+              <div class="facet-title">
+                ${this.facetKey !== 'collection'
+                  ? html`${displayText}`
+                  : html`<async-collection-name
+                      .collectionNameCache=${this.collectionNameCache}
+                      .identifier=${displayText}
+                      placeholder="-"
+                    ></async-collection-name>`}
+              </div>
+              <div class="facet-count">${facet.doc_count}</div>
+            </label>
+          </li>
+        `;
+      })}
+    </ul>`;
+  }
+
+  private facetClicked(e: Event) {
+    const { selectedFacets } = this;
+
+    const target = e.target as HTMLInputElement;
+    const { checked, value } = target;
+
+    let newFacets: SelectedFacets;
+    if (selectedFacets) {
+      newFacets = {
+        ...selectedFacets,
+      };
+    } else {
+      newFacets = defaultSelectedFacets;
+    }
+
+    if (checked) {
+      newFacets[this.facetKey as keyof typeof newFacets][value] = 'selected';
+    } else {
+      delete newFacets[this.facetKey as keyof typeof newFacets][value];
+    }
+
+    this.selectedFacets = newFacets;
+  }
+
+  private get loaderTemplate() {
+    return this.facetsLoading
+      ? html`<div class="facets-loader">
+          <ia-activity-indicator .mode="processing"></ia-activity-indicator>
+        </div>`
+      : nothing;
+  }
+
+  // render pagination if more then 1 page
+  private get facetsPaginationTemplate() {
+    return this.paginationSize > 1
+      ? html`<more-facets-pagination
+          .size=${this.paginationSize}
+          @pageNumberClicked=${this.pageNumberClicked}
+        ></more-facets-pagination>`
+      : nothing;
+  }
+
+  private get facetsContentTemplate() {
+    return html`
+      <div class="facets-content">${this.getMoreFacetsTemplate}</div>
+      ${this.paginationSize > 0
+        ? html`${this.facetsPaginationTemplate}
+            <div class="footer">
+              <button
+                class="btn btn-cancel"
+                type="button"
+                @click=${this.cancelClick}
+              >
+                Cancel
+              </button>
+              <button
+                class="btn btn-submit"
+                type="button"
+                @click=${this.applySearchFacetsClicked}
+              >
+                Apply filters
+              </button>
+            </div>`
+        : html`No result found. please try again later.`}
+    `;
+  }
+
+  render() {
+    return html`
+      <div id="more-facets-page">
+        <form>
+          ${this.facetsLoading
+            ? this.loaderTemplate
+            : this.facetsContentTemplate}
+        </form>
+      </div>
+    `;
+  }
+
+  private applySearchFacetsClicked() {
+    const event = new CustomEvent<SelectedFacets>('facetsChanged', {
+      detail: this.selectedFacets,
+      bubbles: true,
+      composed: true,
+    });
+    this.dispatchEvent(event);
+    this.modalManager?.closeModal();
+  }
+
+  private cancelClick() {
+    this.modalManager?.closeModal();
+  }
+
+  static get styles(): CSSResultGroup {
+    const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;
+
+    return css`
+      #more-facets-page {
+        margin-bottom: 2rem;
+      }
+
+      .facets-content {
+        -webkit-column-width: 25rem;
+        -moz-column-width: 25rem;
+        column-width: 25rem;
+        font-size: 1.2rem;
+        padding: 0 10px;
+      }
+
+      ul.facet-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      ul.facet-list li {
+        margin-bottom: 2px;
+      }
+
+      .facet-row {
+        text-align: left;
+        display: flex;
+        align-items: start;
+        font-weight: 500;
+        font-size: 1.2rem;
+      }
+      .facet-row input {
+        margin: 1px 5px 1px 0;
+        vertical-align: middle;
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1 1 0%;
+        cursor: pointer;
+      }
+      .facet-title {
+        flex: 1 1 0%;
+      }
+      .facet-count {
+        margin-left: 5px;
+      }
+
+      .page-number {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        border-radius: 100%;
+        width: 25px;
+        height: 25px;
+        margin: 10px;
+        font-size: 1.4rem;
+        vertical-align: middle;
+      }
+      .current-page {
+        background: black;
+        color: white;
+      }
+      .facets-loader {
+        text-align: center;
+        margin-bottom: 2rem;
+        height: 7rem;
+        width: 7rem;
+        display: inline-block;
+      }
+
+      .btn {
+        border: none;
+        padding: 10px;
+        margin-bottom: 10px;
+        width: auto;
+        border-radius: 0.4rem;
+        cursor: pointer;
+      }
+      .btn-cancel {
+        background-color: #000;
+        color: white;
+      }
+      .btn-submit {
+        background-color: ${modalSubmitButton};
+        color: white;
+      }
+
+      .footer {
+        margin-top: 10px;
+      }
+    `;
+  }
+}

package/src/collection-facets/more-facets-pagination.ts

@@ -0,0 +1,201 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import arrowLeftIcon from '../assets/img/icons/arrow-left';
+import arrowRightIcon from '../assets/img/icons/arrow-right';
+
+@customElement('more-facets-pagination')
+export class MoreFacetsPagination extends LitElement {
+  /**
+   * Total number of pages
+   */
+  @property({ type: Number }) size?: any | undefined;
+
+  /**
+   * Number of pages can be moved in back/forward
+   */
+  @property({ type: Number }) step = 2;
+
+  @state() pages?: number[] = [];
+
+  @state() currentPage = 1;
+
+  firstUpdated() {
+    this.observePageCount();
+  }
+
+  observePageCount() {
+    this.pages = [];
+    let startPage = this.currentPage - this.step;
+    let endPage = this.currentPage + this.step;
+
+    if (startPage <= 0) {
+      endPage += -startPage + 1;
+      startPage = 1;
+    }
+
+    if (endPage >= this.size) {
+      startPage = Math.max(startPage - (endPage - this.size), 1);
+      endPage = this.size;
+    }
+
+    // create first page node
+    this.createFirstNode(startPage);
+
+    // create middle pages node
+    this.createMiddelNode(startPage, endPage);
+
+    // create last page node
+    this.createLastNode(endPage);
+  }
+
+  private createFirstNode(startPage: number) {
+    if (startPage > 1) {
+      this.pages?.push(1);
+      this.pages?.push(0); // let's asssume 0 is for ellipsis template
+    }
+  }
+
+  private createMiddelNode(startPage: number, endPage: number) {
+    for (let page = startPage; page <= endPage; page += 1) {
+      this.pages?.push(page);
+    }
+  }
+
+  private createLastNode(endPage: number) {
+    if (endPage < this.size) {
+      this.pages?.push(0); // let's asssume 0 is for ellipsis template
+      this.pages?.push(this.size);
+    }
+  }
+
+  private get getEllipsisTemplate() {
+    return html`<i>...</i>`;
+  }
+
+  private emitPageClick() {
+    this.dispatchEvent(
+      new CustomEvent('pageNumberClicked', {
+        detail: { page: this.currentPage },
+      })
+    );
+  }
+
+  private onRewind() {
+    this.currentPage -= 1;
+    if (this.currentPage < 1) {
+      this.currentPage = 1;
+    }
+    this.observePageCount();
+    this.emitPageClick();
+  }
+
+  private onForward() {
+    this.currentPage += 1;
+    if (this.currentPage > this.size) {
+      this.currentPage = this.size;
+    }
+    this.observePageCount();
+    this.emitPageClick();
+  }
+
+  private onChange(page: number) {
+    this.currentPage = page;
+    this.observePageCount();
+    this.emitPageClick();
+  }
+
+  private getPageTemplate(page: number) {
+    return html`
+      <button
+        @click="${() => this.onChange(page)}"
+        class="${this.currentPage === page ? 'current' : nothing}"
+      >
+        ${page}
+      </button>
+    `;
+  }
+
+  private get getPagesTemplate() {
+    return html`
+      ${this.pages?.map(
+        page =>
+          html`${page !== 0
+            ? this.getPageTemplate(page)
+            : this.getEllipsisTemplate}`
+      )}
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="facets-pagination">
+        <button class="arrow-icon" @click=${this.onRewind}>
+          <span class="sr-only">Rewind pagination:</span>
+          ${arrowLeftIcon}
+        </button>
+        <div class="page-numbers">${this.getPagesTemplate}</div>
+        <button class="arrow-icon" @click=${this.onForward}>
+          <span class="sr-only">Forward pagination:</span>
+          ${arrowRightIcon}
+        </button>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .facets-pagination {
+        user-select: none;
+        margin-top: 10px;
+        background-color: #eee;
+        text-align: center;
+        font-size: 3.2rem;
+      }
+      .facets-pagination button {
+        border: none;
+        background: none;
+      }
+      .facets-pagination .arrow-icon {
+        width: 2.5rem;
+        vertical-align: initial;
+      }
+
+      .facets-pagination button,
+      .facets-pagination i {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        border-radius: 100%;
+        margin: 10px;
+        padding: 5px;
+        font-size: 1.4rem;
+        vertical-align: middle;
+        display: inline-block;
+        min-width: 2.5rem;
+      }
+      .facets-pagination i {
+        cursor: auto;
+        display: inline;
+      }
+      .facets-pagination button.current {
+        background: black;
+        color: white;
+      }
+
+      .page-numbers {
+        display: inline-block;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+    `;
+  }
+}