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

package/src/collection-facets.ts

@@ -9,11 +9,19 @@ import {
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import type { Aggregation, Bucket } from '@internetarchive/search-service';
+import type {
+  Aggregation,
+  Bucket,
+  SearchServiceInterface,
+} from '@internetarchive/search-service';
 import '@internetarchive/histogram-date-range';
 import '@internetarchive/feature-feedback';
 import '@internetarchive/collection-name-cache';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import {
+  ModalConfig,
+  ModalManagerInterface,
+} from '@internetarchive/modal-manager';
 import eyeIcon from './assets/img/icons/eye';
 import eyeClosedIcon from './assets/img/icons/eye-closed';
 import chevronIcon from './assets/img/icons/chevron';
@@ -25,6 +33,7 @@ import {
   defaultSelectedFacets,
 } from './models';
 import type { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
+import './collection-facets/more-facets-content';
 
 const facetDisplayOrder: FacetOption[] = [
   'mediatype',
@@ -55,6 +64,8 @@ const facetTitles: Record<FacetOption, string> = {
 
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
+  @property({ type: Object }) searchService?: SearchServiceInterface;
+
   @property({ type: Object }) aggregations?: Record<string, Aggregation>;
 
   @property({ type: Object }) fullYearsHistogramAggregation?: Aggregation;
@@ -73,6 +84,10 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: Boolean }) showHistogramDatePicker = false;
 
+  @property({ type: String }) fullQuery?: string;
+
+  @property({ type: Object }) modalManager?: ModalManagerInterface;
+
   @property({ type: Object })
   languageCodeHandler?: LanguageCodeHandlerInterface;
 
@@ -88,6 +103,12 @@ export class CollectionFacets extends LitElement {
     year: false,
   };
 
+  /**
+   * If listed facets on page more then this number,
+   * - show the more link button just below the facets group
+   */
+  private moreLinkEligibilityCount = 5;
+
   render() {
     return html`
       <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
@@ -112,6 +133,7 @@ export class CollectionFacets extends LitElement {
     }
   }
 
+  // TODO: want to fire analytics?
   private dispatchFacetsChangedEvent() {
     const event = new CustomEvent<SelectedFacets>('facetsChanged', {
       detail: this.selectedFacets,
@@ -322,11 +344,92 @@ export class CollectionFacets extends LitElement {
         </h1>
         <div class="facet-group-content ${isOpen ? 'open' : ''}">
           ${this.getFacetTemplate(facetGroup)}
+          ${this.searchMoreFacetsLink(facetGroup)}
         </div>
       </div>
     `;
   }
 
+  /**
+   * Generate the More... link button just below the facets group
+   *
+   * TODO: want to fire analytics?
+   */
+  private searchMoreFacetsLink(
+    facetGroup: FacetGroup
+  ): TemplateResult | typeof nothing {
+    // don't render More... link if you facets is < this.moreLinkEligibilityCount
+    if (Object.keys(facetGroup.buckets).length < this.moreLinkEligibilityCount)
+      return nothing;
+
+    return html`<button
+      class="more-link"
+      @click=${() => {
+        this.showMoreFacetsModal(facetGroup);
+      }}
+    >
+      More...
+    </button>`;
+  }
+
+  async showMoreFacetsModal(facetGroup: FacetGroup): Promise<void> {
+    const facetAggrKey = Object.keys(aggregationToFacetOption).find(
+      value => aggregationToFacetOption[value] === facetGroup.key
+    );
+
+    // TODO - lets move sr-only style into modal-manager component as well
+    const headline = html`
+      <span
+        style="display:block;text-align:left;font-size:1.8rem;padding:0 10px;"
+      >
+        <span
+          style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip: rect(0,0,0,0);border:0;"
+          >More facets for:
+        </span>
+        ${facetTitles[facetGroup.key]}
+        <img
+          src="https://archive.org/images/filter-count.png"
+          style="height: 1.5rem;vertical-align: baseline;"
+          alt=""
+        />
+      </span>
+    `;
+
+    const message = html`
+      <more-facets-content
+        @facetsChanged=${(e: CustomEvent) => {
+          const event = new CustomEvent<SelectedFacets>('facetsChanged', {
+            detail: e.detail,
+            bubbles: true,
+            composed: true,
+          });
+          this.dispatchEvent(event);
+        }}
+        .facetKey=${facetGroup.key}
+        .facetAggregationKey=${facetAggrKey}
+        .fullQuery=${this.fullQuery}
+        .modalManager=${this.modalManager}
+        .searchService=${this.searchService}
+        .collectionNameCache=${this.collectionNameCache}
+        .languageCodeHandler=${this.languageCodeHandler}
+        .selectedFacets=${this.selectedFacets}
+      >
+      </more-facets-content>
+    `;
+
+    const config = new ModalConfig({
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true, // TODO: want to fire analytics
+      title: html`Select filters`,
+      headline,
+      message,
+    });
+    this.modalManager?.classList.add('more-search-facets');
+    this.modalManager?.showModal({ config });
+  }
+
   /**
    * Generate the list template for each bucket in a facet group
    */
@@ -605,6 +708,19 @@ export class CollectionFacets extends LitElement {
       .hide-facet-icon.active .eye {
         display: none;
       }
+
+      .more-link {
+        font-size: 1.2rem;
+        text-decoration: none;
+        padding: 0px 4px;
+        background: white;
+        border: 0;
+        color: blue;
+        cursor: pointer;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
     `;
   }
 }

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

@@ -0,0 +1,113 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';
+import '../../src/collection-facets/more-facets-content';
+import { MockSearchService } from '../mocks/mock-search-service';
+
+describe('More facets content', () => {
+  it('should render more facets template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = false;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;
+  });
+
+  it('should render more facets loader template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;
+  });
+
+  it('should render more facets empty template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = false;
+    el.paginationSize = 0;
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot?.querySelector('#more-facets-page')?.textContent
+    ).to.contains('No result found. please try again later.');
+  });
+
+  it('should render pagination for more facets', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'mediatype';
+    el.facetsLoading = false;
+    el.paginationSize = 6;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;
+  });
+
+  it('query for more facets content using search service', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'collection';
+    el.fullQuery = 'title:hello';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('title:hello');
+  });
+
+  it('query for specific facets data', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'language';
+    el.facetsLoading = false;
+    await el.updateComplete;
+
+    expect(el.paginationSize).to.equal(1);
+    expect(el.shadowRoot?.querySelector('.facet-list')).to.exist;
+    expect(Object.keys(el.castedBuckets as []).length).to.equal(7);
+  });
+
+  it('page number clicked event', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    setTimeout(() =>
+      el.dispatchEvent(
+        new CustomEvent('pageNumberClicked', { detail: { page: 15 } })
+      )
+    );
+    const { detail } = await oneEvent(el, 'pageNumberClicked');
+    expect(detail?.page).to.equal(15);
+  });
+});

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

@@ -0,0 +1,70 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';
+import '../../src/collection-facets/more-facets-pagination';
+
+describe('More facets pagination', () => {
+  it('should render pagination container', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination></more-facets-pagination>`
+    );
+
+    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;
+  });
+
+  it('should render pagination arrow icon', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination></more-facets-pagination>`
+    );
+
+    expect(
+      el.shadowRoot
+        ?.querySelectorAll('.arrow-icon')[0]
+        ?.querySelector('svg')
+        ?.querySelector('title')?.textContent
+    ).to.equal('Go left icon');
+  });
+
+  it('should render pagination right arrow icon', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination></more-facets-pagination>`
+    );
+
+    expect(
+      el.shadowRoot
+        ?.querySelectorAll('.arrow-icon')[1]
+        ?.querySelector('svg')
+        ?.querySelector('title')?.textContent
+    ).to.equal('Go right icon');
+  });
+
+  it('should render pagination pages', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination></more-facets-pagination>`
+    );
+
+    el.size = 2;
+    await el.updateComplete;
+
+    // at a time we render 5 pages
+    expect(
+      el.shadowRoot?.querySelector('.page-numbers')?.children.length
+    ).to.equal(5);
+  });
+
+  it('should render current page as active page', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination></more-facets-pagination>`
+    );
+
+    el.size = 2;
+    el.currentPage = 3;
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot?.querySelector('.page-numbers')?.querySelector('.current')
+        ?.textContent
+    ).to.contains(3);
+  });
+});

package/test/mocks/mock-search-responses.ts

@@ -21,6 +21,19 @@ export const mockSuccessResponse: Result<SearchResponse, SearchServiceError> = {
         }),
       ],
       start: 0,
+      aggregations: {
+        'user_aggs__terms__field:mediatypeSorter__size:100': {
+          buckets: [
+            { key: 'audio', doc_count: 121 },
+            { key: 'movies', doc_count: 2195 },
+            { key: 'texts', doc_count: 1392 },
+            { key: 'data', doc_count: 605 },
+            { key: 'web', doc_count: 301 },
+            { key: 'collection', doc_count: 167 },
+            { key: 'account', doc_count: 167 },
+          ],
+        },
+      },
     },
     responseHeader: {
       status: 0,