@internetarchive/collection-browser 0.2.14-a1 → 0.2.14-alpha1

package/src/app-root.ts

@@ -4,6 +4,7 @@ import { html, css, LitElement, PropertyValues } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
 import { CollectionNameCache } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 
@@ -40,6 +41,8 @@ export class AppRoot extends LitElement {
 
   @query('collection-browser') private collectionBrowser!: CollectionBrowser;
 
+  @query('modal-manager') private modalManager!: ModalManagerInterface;
+
   private searchPressed(e: Event) {
     e.preventDefault();
     this.searchQuery = this.baseQueryField.value;
@@ -171,11 +174,13 @@ export class AppRoot extends LitElement {
           .collectionNameCache=${this.collectionNameCache}
           .showHistogramDatePicker=${true}
           .loggedIn=${this.loggedIn}
+          .modalManager=${this.modalManager}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
         >
         </collection-browser>
       </div>
+      <modal-manager></modal-manager>
     `;
   }
 
@@ -257,13 +262,34 @@ export class AppRoot extends LitElement {
       display: block;
     }
 
+    /* add the following styles to ensure proper modal visibility */
+    body.modal-manager-open {
+      overflow: hidden;
+    }
+    modal-manager {
+      display: none;
+    }
+    modal-manager[mode='open'] {
+      display: block;
+    }
+    modal-manager.more-search-facets {
+      --modalWidth: 85rem;
+      --modalBorder: 2px solid #194880;
+      --modalTitleLineHeight: 4rem;
+      --modalTitleFontSize: 1.8rem;
+      --modalCornerRadius: 0;
+      --modalBottomPadding: 0;
+      --modalScrollOffset: 0;
+      --modalCornerRadius: 0.5rem;
+    }
+
     input,
     button {
       font-size: 1.6rem;
     }
 
     collection-browser {
-      margin-top: 30rem;
+      margin-top: 20rem;
     }
 
     #base-query-field {
@@ -274,7 +300,7 @@ export class AppRoot extends LitElement {
       position: fixed;
       top: 0;
       left: 0;
-      z-index: 10;
+      z-index: 1;
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
       padding: 0.5rem 1rem;

package/src/assets/img/icons/arrow-left.ts

@@ -0,0 +1,10 @@
+import { svg } from 'lit';
+
+export default svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path 
+      d="m20.1116715 50.0035012-.1116715-.1085359 43.1159942-46.61088155c2.401537-2.18938917 4.6902018-3.28408375 6.8659943-3.28408375s4.1642651.63837733 5.9654178 1.91513199c1.8011528 1.27675467 3.1520173 2.97248092 4.0525937 5.08717877l-39.4020173 42.99768924 39.4020173 42.9976892c-.9005764 2.1146979-2.2514409 3.8104241-4.0525937 5.0871788-1.8011527 1.2767547-3.7896253 1.915132-5.9654178 1.915132-2.1013449 0-4.3900096-1.0573489-6.8659943-3.1720468l-43.1159942-46.7194174z"
+    />
+    <title>Go left icon</title>
+  </svg>
+`;

package/src/assets/img/icons/arrow-right.ts

@@ -0,0 +1,10 @@
+import { svg } from 'lit';
+
+export default svg`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path 
+      d="m79.8883285 50.0035012.1116715-.1085359-43.1159942-46.61088155c-2.401537-2.18938917-4.6902018-3.28408375-6.8659943-3.28408375s-4.1642651.63837733-5.9654178 1.91513199c-1.8011528 1.27675467-3.1520173 2.97248092-4.0525937 5.08717877l39.4020173 42.99768924-39.4020173 42.9976892c.9005764 2.1146979 2.2514409 3.8104241 4.0525937 5.0871788 1.8011527 1.2767547 3.7896253 1.915132 5.9654178 1.915132 2.1013449 0 4.3900096-1.0573489 6.8659943-3.1720468l43.1159942-46.7194174z"
+    />
+    <title>Go right icon</title>
+  </svg>
+`;

package/src/collection-browser.ts

@@ -27,6 +27,7 @@ import type {
 } from '@internetarchive/shared-resize-observer';
 import '@internetarchive/infinite-scroller';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
 import './sort-filter-bar/sort-filter-bar';
@@ -115,6 +116,8 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) loggedIn = false;
 
+  @property({ type: Object }) modalManager?: ModalManagerInterface = undefined;
+
   /**
    * If item management UI active
    */
@@ -425,6 +428,7 @@ export class CollectionBrowser
       <collection-facets
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+        .searchService=${this.searchService}
         .aggregations=${this.aggregations}
         .fullYearsHistogramAggregation=${this.fullYearsHistogramAggregation}
         .minSelectedDate=${this.minSelectedDate}
@@ -433,6 +437,8 @@ export class CollectionBrowser
         .collectionNameCache=${this.collectionNameCache}
         .languageCodeHandler=${this.languageCodeHandler}
         .showHistogramDatePicker=${this.showHistogramDatePicker}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetDataLoading}
         ?fullYearAggregationLoading=${this.fullYearAggregationLoading}

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

@@ -0,0 +1,371 @@
+/* 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 { 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?: any;
+
+  @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; // 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();
+    }
+  }
+
+  /**
+   * 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">
+            <label class="facet-info-display" title=${facet.key}>
+              <input
+                type="checkbox"
+                class="selected-facets"
+                .value="${facet.key}"
+                data-facet="${this.facetKey}"
+                @click=${(e: Event) => {
+                  this.facetClicked(e);
+                }}
+              />
+              <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>`
+      : '';
+  }
+
+  // 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 {
+    return css`
+      #more-facets-page {
+        margin-bottom: 2rem;
+      }
+      .modal-content {
+        background-color: #fefefe;
+        margin: auto;
+        padding: 0;
+        border: 1px solid #888;
+        width: 80%;
+      }
+
+      .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;
+      }
+      .facet-row {
+        align-items: start;
+        font-weight: 500;
+        font-size: 1.2rem;
+      }
+      .facet-row input {
+        margin: 1px 5px 1px 0;
+      }
+      .facet-info-display {
+        display: flex;
+        flex: 1;
+        cursor: pointer;
+      }
+      .facet-title {
+        flex: 1;
+      }
+      .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: #194880;
+        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: rgb(239, 239, 239);
+        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;
+      }
+    `;
+  }
+}