@internetarchive/collection-browser 0.2.15-0 → 0.2.16-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 the number of 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: inherit;
+        border: 0;
+        color: blue;
+        cursor: pointer;
+      }
+      .sorting-icon {
+        cursor: pointer;
+      }
     `;
   }
 }

package/src/models.ts

@@ -47,7 +47,8 @@ export type CollectionBrowserContext = 'collection' | 'search';
  */
 export enum SortField {
   'relevance' = 'relevance',
-  'views' = 'views',
+  'alltimeview' = 'alltimeview',
+  'weeklyview' = 'weeklyview',
   'title' = 'title',
   'datearchived' = 'datearchived',
   'date' = 'date',
@@ -60,6 +61,7 @@ export enum SortField {
  * The metadata fields we sort by that map to the SortFields above
  */
 export type MetadataSortField =
+  | 'downloads'
   | 'week'
   | 'titleSorter'
   | 'date'
@@ -72,7 +74,8 @@ export const SortFieldDisplayName: {
   [key in SortField]: string;
 } = {
   relevance: 'Relevance',
-  views: 'Views',
+  alltimeview: 'All-time Views',
+  weeklyview: 'Weekly Views',
   title: 'Title',
   datearchived: 'Date Archived',
   date: 'Date Published',
@@ -88,7 +91,8 @@ export const SortFieldToMetadataField: {
   [key in SortField]: MetadataSortField | null;
 } = {
   relevance: null,
-  views: 'week',
+  alltimeview: 'downloads',
+  weeklyview: 'week',
   title: 'titleSorter',
   datearchived: 'publicdate',
   date: 'date',
@@ -103,13 +107,14 @@ export const SortFieldToMetadataField: {
 export const MetadataFieldToSortField: {
   [key in MetadataSortField]: SortField;
 } = {
+  week: SortField.weeklyview,
+  downloads: SortField.alltimeview,
   titleSorter: SortField.title,
   date: SortField.date,
   publicdate: SortField.datearchived,
   reviewdate: SortField.datereviewed,
   addeddate: SortField.dateadded,
   creatorSorter: SortField.creator,
-  week: SortField.views,
 };
 
 export type FacetOption =

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -48,6 +48,8 @@ export class SortFilterBar
 
   @state() dateSortSelectorVisible = false;
 
+  @state() viewSortSelectorVisible = false;
+
   @state() desktopSelectorBarWidth = 0;
 
   @state() selectorBarContainerWidth = 0;
@@ -76,6 +78,9 @@ export class SortFilterBar
           <div id="display-style-selector">${this.displayOptionTemplate}</div>
         </div>
 
+        ${this.viewSortSelectorVisible && !this.mobileSelectorVisible
+          ? this.viewSortSelector
+          : nothing}
         ${this.dateSortSelectorVisible && !this.mobileSelectorVisible
           ? this.dateSortSelector
           : nothing}
@@ -103,7 +108,10 @@ export class SortFilterBar
       this.alphaSelectorVisible = 'creator';
     }
 
-    if (changed.has('dateSortSelectorVisible')) {
+    if (
+      changed.has('dateSortSelectorVisible') ||
+      changed.has('viewSortSelectorVisible')
+    ) {
       this.setupEscapeListeners();
     }
 
@@ -117,21 +125,22 @@ export class SortFilterBar
   }
 
   private setupEscapeListeners() {
-    if (this.dateSortSelectorVisible) {
+    if (this.dateSortSelectorVisible || this.viewSortSelectorVisible) {
       document.addEventListener(
         'keydown',
-        this.boundDateSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener
       );
     } else {
       document.removeEventListener(
         'keydown',
-        this.boundDateSelectorEscapeListener
+        this.boundSortBarSelectorEscapeListener
       );
     }
   }
 
-  private boundDateSelectorEscapeListener = (e: KeyboardEvent) => {
+  private boundSortBarSelectorEscapeListener = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
+      this.viewSortSelectorVisible = false;
       this.dateSortSelectorVisible = false;
     }
   };
@@ -235,13 +244,30 @@ export class SortFilterBar
             ? this.getSortDisplayOption(SortField.relevance)
             : nothing}
         </li>
-        <li>${this.getSortDisplayOption(SortField.views)}</li>
+        <li>
+          ${this.getSortDisplayOption(SortField.weeklyview, {
+            clickEvent: () => {
+              if (!this.viewOptionSelected)
+                this.setSelectedSort(SortField.weeklyview);
+              this.viewSortSelectorVisible = !this.viewSortSelectorVisible;
+              this.dateSortSelectorVisible = false;
+              this.alphaSelectorVisible = null;
+              this.selectedTitleFilter = null;
+              this.selectedCreatorFilter = null;
+              this.emitTitleLetterChangedEvent();
+              this.emitCreatorLetterChangedEvent();
+            },
+            displayName: html`${this.viewSortField}`,
+            isSelected: () => this.viewOptionSelected,
+          })}
+        </li>
         <li>
           ${this.getSortDisplayOption(SortField.title, {
             clickEvent: () => {
               this.alphaSelectorVisible = 'title';
               this.selectedCreatorFilter = null;
               this.dateSortSelectorVisible = false;
+              this.viewSortSelectorVisible = false;
               this.setSelectedSort(SortField.title);
               this.emitCreatorLetterChangedEvent();
             },
@@ -253,6 +279,7 @@ export class SortFilterBar
               if (!this.dateOptionSelected)
                 this.setSelectedSort(SortField.date);
               this.dateSortSelectorVisible = !this.dateSortSelectorVisible;
+              this.viewSortSelectorVisible = false;
               this.alphaSelectorVisible = null;
               this.selectedTitleFilter = null;
               this.selectedCreatorFilter = null;
@@ -366,7 +393,7 @@ export class SortFilterBar
         </li>
         <li>
           <button
-            id="grid-button"
+            id="list-detail-button"
             @click=${() => {
               this.displayMode = 'list-detail';
             }}
@@ -378,7 +405,7 @@ export class SortFilterBar
         </li>
         <li>
           <button
-            id="list-button"
+            id="list-compact-button"
             @click=${() => {
               this.displayMode = 'list-compact';
             }}
@@ -414,6 +441,26 @@ export class SortFilterBar
     `;
   }
 
+  private get viewSortSelector() {
+    return html`
+      <div
+        id="view-sort-selector-backdrop"
+        @keyup=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+        @click=${() => {
+          this.viewSortSelectorVisible = false;
+        }}
+      ></div>
+      <div id="view-sort-selector">
+        <ul>
+          <li>${this.getDateSortButton(SortField.alltimeview)}</li>
+          <li>${this.getDateSortButton(SortField.weeklyview)}</li>
+        </ul>
+      </div>
+    `;
+  }
+
   private getDateSortButton(sortField: SortField) {
     return html`
       <button
@@ -429,6 +476,7 @@ export class SortFilterBar
 
   private selectDateSort(sortField: SortField) {
     this.dateSortSelectorVisible = false;
+    this.viewSortSelectorVisible = false;
     this.setSelectedSort(sortField);
   }
 
@@ -462,6 +510,24 @@ export class SortFilterBar
     return dateSortFields.includes(this.selectedSort);
   }
 
+  /**
+   * There are two view sort options.
+   *
+   * This checks to see if the current sort is one of them.
+   *
+   * @readonly
+   * @private
+   * @type {boolean}
+   * @memberof SortFilterBar
+   */
+  private get viewOptionSelected(): boolean {
+    const viewSortFields: SortField[] = [
+      SortField.alltimeview,
+      SortField.weeklyview,
+    ];
+    return viewSortFields.includes(this.selectedSort);
+  }
+
   /**
    * The display name of the current date field
    *
@@ -478,6 +544,22 @@ export class SortFilterBar
     return name;
   }
 
+  /**
+   * The display name of the current view field
+   *
+   * @readonly
+   * @private
+   * @type {string}
+   * @memberof SortFilterBar
+   */
+  private get viewSortField(): string {
+    const defaultSort = SortFieldDisplayName[SortField.weeklyview];
+    const name = this.viewOptionSelected
+      ? SortFieldDisplayName[this.selectedSort] ?? defaultSort
+      : defaultSort;
+    return name;
+  }
+
   private get titleSelectorBar() {
     return html` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
@@ -607,7 +689,8 @@ export class SortFilterBar
       cursor: default;
     }
 
-    #date-sort-selector {
+    #date-sort-selector,
+    #view-sort-selector {
       position: absolute;
       left: 150px;
       top: 45px;
@@ -619,7 +702,8 @@ export class SortFilterBar
       border: 1px solid #404142;
     }
 
-    #date-sort-selector button {
+    #date-sort-selector button,
+    #view-sort-selector button {
       background: none;
       border-radius: 15px;
       color: #404142;
@@ -632,7 +716,8 @@ export class SortFilterBar
       padding: 0.5rem 1.2rem;
     }
 
-    #date-sort-selector button.selected {
+    #date-sort-selector button.selected,
+    #view-sort-selector button.selected {
       background-color: #404142;
       color: white;
     }
@@ -679,7 +764,8 @@ export class SortFilterBar
       display: none;
     }
 
-    #date-sort-selector-backdrop {
+    #date-sort-selector-backdrop,
+    #view-sort-selector-backdrop {
       position: fixed;
       top: 0;
       left: 0;

package/test/collection-browser.test.ts

@@ -1,6 +1,8 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
+import sinon from 'sinon';
+import type { InfiniteScroller } from '@internetarchive/infinite-scroller';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 import { MockSearchService } from './mocks/mock-search-service';
@@ -59,4 +61,45 @@ describe('Collection Browser', () => {
       'boop',
     ]);
   });
+  it('refreshes when certain properties change', async () => {
+    const searchService = new MockSearchService();
+    const collectionNameCache = new MockCollectionNameCache();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .collectionNameCache=${collectionNameCache}
+      ></collection-browser>`
+    );
+    const infiniteScrollerRefreshSpy = sinon.spy();
+
+    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
+    (infiniteScroller as InfiniteScroller).reload = infiniteScrollerRefreshSpy;
+    expect(infiniteScrollerRefreshSpy.called).to.be.false;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(0);
+
+    // testing: `loggedIn`
+    el.loggedIn = true;
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.called).to.be.true;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(1);
+
+    el.loggedIn = false;
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(2);
+
+    // testing: `displayMode`
+    el.displayMode = 'list-compact';
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(3);
+
+    // testing: `baseNavigationUrl`
+    el.baseNavigationUrl = 'https://funtestsite.com';
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(4);
+
+    // testing: `baseImageUrl`
+    el.baseImageUrl = 'https://funtestsiteforimages.com';
+    await el.updateComplete;
+    expect(infiniteScrollerRefreshSpy.callCount).to.equal(5);
+  });
 });

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);
+  });
+});