@internetarchive/collection-browser 0.3.10-alpha.1 → 0.4.1

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

@@ -1,10 +1,13 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import type { PrefixFilterCounts } from '../models';
 
 @customElement('alpha-bar')
 export class AlphaBar extends LitElement {
   @property({ type: String }) selectedLetter: string | null = null;
 
+  @property({ type: Object }) letterCounts?: PrefixFilterCounts;
+
   private get selectedUppercaseLetter(): string | undefined {
     return this.selectedLetter?.toUpperCase();
   }
@@ -21,15 +24,9 @@ export class AlphaBar extends LitElement {
                     ? 'selected'
                     : ''}
                 >
-                  <a
-                    href="#"
-                    @click=${(e: Event) => {
-                      e.preventDefault();
-                      this.letterClicked(letter);
-                    }}
-                  >
-                    ${letter}
-                  </a>
+                  ${this.letterCounts?.[letter]
+                    ? this.letterLinkTemplate(letter)
+                    : html`<span>${letter}</span>`}
                 </li>
               `
           )}
@@ -38,6 +35,20 @@ export class AlphaBar extends LitElement {
     `;
   }
 
+  private letterLinkTemplate(letter: string) {
+    return html`
+      <a
+        href="#"
+        @click=${(e: Event) => {
+          e.preventDefault();
+          this.letterClicked(letter);
+        }}
+      >
+        ${letter}
+      </a>
+    `;
+  }
+
   private letterClicked(letter: string) {
     if (letter === this.selectedUppercaseLetter) {
       this.selectedLetter = null;
@@ -85,6 +96,12 @@ export class AlphaBar extends LitElement {
       display: block;
     }
 
+    span {
+      color: #aaa;
+      padding: 0.5rem 0;
+      display: block;
+    }
+
     .selected {
       background-color: darkgray;
     }

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

@@ -13,6 +13,8 @@ import type {
 } from '@internetarchive/shared-resize-observer';
 import {
   CollectionDisplayMode,
+  PrefixFilterCounts,
+  PrefixFilterType,
   SortField,
   SortFieldDisplayName,
 } from '../models';
@@ -42,6 +44,11 @@ export class SortFilterBar
 
   @property({ type: Boolean }) showRelevance: boolean = true;
 
+  @property({ type: Object }) prefixFilterCountMap?: Record<
+    PrefixFilterType,
+    PrefixFilterCounts
+  >;
+
   @property({ type: Object }) resizeObserver?: SharedResizeObserverInterface;
 
   @state() alphaSelectorVisible: AlphaSelector | null = null;
@@ -563,6 +570,7 @@ export class SortFilterBar
   private get titleSelectorBar() {
     return html` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
+      .letterCounts=${this.prefixFilterCountMap?.title}
       @letterChanged=${this.titleLetterChanged}
     ></alpha-bar>`;
   }
@@ -570,6 +578,7 @@ export class SortFilterBar
   private get creatorSelectorBar() {
     return html` <alpha-bar
       .selectedLetter=${this.selectedCreatorFilter}
+      .letterCounts=${this.prefixFilterCountMap?.creator}
       @letterChanged=${this.creatorLetterChanged}
     ></alpha-bar>`;
   }

package/src/styles/item-image-styles.ts

@@ -11,18 +11,14 @@ export const baseItemImageStyles = css`
   }
 
   .list-box {
-    width: 100%;
-    height: 100%;
     overflow: hidden;
     box-sizing: border-box;
-    display: flex;
+    display: inline-block;
     position: relative;
-    max-width: 100px;
   }
 
   .contain {
     object-fit: contain;
-    object-position: top;
     height: 100%;
     width: 100%;
   }
@@ -32,7 +28,8 @@ export const baseItemImageStyles = css`
   }
 
   .blur {
-    filter: blur(5px);
+    filter: blur(15px);
+    box-shadow: 1px 1px 2px 0px;
   }
 `;
 

package/src/tiles/grid/item-tile.ts

@@ -169,6 +169,8 @@ export class ItemTile extends LitElement {
       image-block {
         display: block;
         margin-bottom: 5px;
+        position: relative;
+        text-align: center;
       }
 
       image-block.has-snippets {

package/src/tiles/image-block.ts

@@ -58,6 +58,7 @@ export class ImageBlock extends LitElement {
       <icon-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${this.model?.loginRequired}
+        .isCompactTile=${this.isCompactTile}
       >
       </icon-overlay>
     `;
@@ -73,6 +74,7 @@ export class ImageBlock extends LitElement {
       <text-overlay
         .loggedIn=${this.loggedIn}
         .loginRequired=${this.model?.loginRequired}
+        ?iconRequired=${true}
       >
       </text-overlay>
     `;
@@ -89,12 +91,17 @@ export class ImageBlock extends LitElement {
       .grid {
         height: var(--imgBlockHeight, 16rem);
         flex: 1;
+        display: inline-block;
+        position: initial;
       }
 
       /** tile-list view */
       .list.desktop {
         width: 100px;
         height: 100px;
+        display: inline-block;
+        position: relative;
+        text-align: center;
       }
 
       .list.mobile {
@@ -105,6 +112,7 @@ export class ImageBlock extends LitElement {
       /** tile-list-compact view */
       .list-compact {
         display: block;
+        text-align: center;
       }
 
       .list-compact.desktop {

package/src/tiles/overlay/icon-overlay.ts

@@ -10,7 +10,19 @@ export class IconOverlay extends LitElement {
 
   @property({ type: Boolean }) loginRequired = false;
 
+  @property({ type: Boolean }) isCompactTile = false;
+
   render() {
+    return html`<div class="icon-overlay ${this.getClass}">
+      ${this.iconDisplay}
+    </div>`;
+  }
+
+  private get getClass() {
+    return this.isCompactTile ? 'list-compact' : 'list-detail';
+  }
+
+  private get iconDisplay() {
     return this.loginRequired && !this.loggedIn
       ? html`${loginRequiredIcon}`
       : html`${restrictedIcon}`;
@@ -23,10 +35,28 @@ export class IconOverlay extends LitElement {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        -ms-transform: translate(-50%, -50%);
-        width: 50%;
-        height: 50%;
+        width: 100%;
         z-index: 2;
+        background-color: rgb(255, 254, 203);
+        display: flex;
+        justify-content: center;
+        border: 1px solid #2c2c2c;
+      }
+
+      .icon-overlay {
+        height: 20px;
+        width: 20px;
+        padding: 2px;
+        padding: 2px;
+      }
+
+      .list-detail {
+        height: 20px;
+        width: 20px;
+      }
+      .list-compact {
+        height: 15px;
+        width: 15px;
       }
     `;
   }

package/src/tiles/overlay/icon-text-overlay.ts

@@ -0,0 +1,75 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
+
+@customElement('icon-text-overlay')
+export class IconTextOverlay extends LitElement {
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) loginRequired = false;
+
+  render() {
+    return html`
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+  }
+
+  private get iconDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? html`${loginRequiredIcon}`
+      : html`${restrictedIcon}`;
+  }
+
+  private get textDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? 'Log in\nto view this item'
+      : 'Content may be inappropriate';
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        align-items: center;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
+        text-align: center;
+      }
+
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        border: 1px solid #2c2c2c;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+      }
+    `;
+  }
+}

package/src/tiles/overlay/text-overlay.ts

@@ -1,5 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+import { restrictedIcon } from '../../assets/img/icons/restricted';
 
 @customElement('text-overlay')
 export class TextOverlay extends LitElement {
@@ -7,14 +9,27 @@ export class TextOverlay extends LitElement {
 
   @property({ type: Boolean }) loginRequired = false;
 
+  @property({ type: Boolean }) iconRequired = false;
+
   render() {
-    return html` <div class="overlay no-preview">${this.textDisplay}</div> `;
+    return html`
+      <div class="overlay no-preview">
+        <div class="icon-overlay">${this.iconDisplay}</div>
+        <p class="text-overlay">${this.textDisplay}</p>
+      </div>
+    `;
+  }
+
+  private get iconDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? html`${loginRequiredIcon}`
+      : html`${restrictedIcon}`;
   }
 
   private get textDisplay() {
     return this.loginRequired && !this.loggedIn
-      ? 'Log in\nto view this item'
-      : 'Content may be inappropriate';
+      ? html`Log in to view this item`
+      : html`Content may be inappropriate`;
   }
 
   static get styles(): CSSResultGroup {
@@ -30,18 +45,30 @@ export class TextOverlay extends LitElement {
         position: absolute;
         right: 0;
         left: 0;
+        top: 50%;
+        transform: translate(0px, -50%);
         width: auto;
         height: auto;
         padding: 5px;
+        background-color: #fffecb;
+        display: flex;
+        align-items: center;
+        border-radius: 1px;
       }
 
-      .no-preview {
-        background-color: #fffecb;
+      .icon-overlay {
+        width: 40px;
+        height: 40px;
+        display: inherit;
+      }
+      .text-overlay {
+        margin: 0;
+        vertical-align: bottom;
+        padding-left: 5px;
+        text-align: center;
         color: #2c2c2c;
         font-size: 1.4rem;
         line-height: 2rem;
-        text-align: center;
-        white-space: pre-wrap; // for the newline character
       }
     `;
   }

package/test/collection-browser.test.ts

@@ -20,6 +20,20 @@ import { analyticsCategories } from '../src/utils/analytics-events';
 import type { TileDispatcher } from '../src/tiles/tile-dispatcher';
 import type { CollectionFacets } from '../src/collection-facets';
 
+/**
+ * Wait for the next tick of the event loop.
+ *
+ * This is necessary in some of the tests because certain collection browser
+ * updates take more than one tick to render (e.g., date picker & query changes).
+ * These delays are non-ideal and should eventually be investigated and fixed,
+ * but they are minor enough that waiting for the next tick is a reasonable
+ * testing solution for now.
+ */
+const nextTick = () =>
+  new Promise(resolve => {
+    setTimeout(resolve, 0);
+  });
+
 describe('Collection Browser', () => {
   beforeEach(async () => {
     // Apparently query params set by one test can bleed into other tests.
@@ -61,6 +75,8 @@ describe('Collection Browser', () => {
     );
 
     el.searchContext = 'betaSearchService';
+    el.selectedSort = 'creator' as SortField;
+    el.sortDirection = 'asc';
     el.selectedCreatorFilter = 'A';
     await el.updateComplete;
 
@@ -86,6 +102,7 @@ describe('Collection Browser', () => {
 
     el.searchContext = 'beta-search-service';
     el.selectedSort = 'title' as SortField;
+    el.sortDirection = 'asc';
     el.selectedTitleFilter = 'A';
     await el.updateComplete;
 
@@ -199,6 +216,7 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
+    await nextTick();
 
     expect(searchService.searchParams?.query).to.equal('collection:foo');
     expect(
@@ -219,6 +237,7 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
+    await nextTick();
 
     expect(searchService.searchParams?.query).to.equal('collection:foo');
     expect(searchService.searchType).to.equal(SearchType.METADATA);
@@ -240,6 +259,7 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
+    await nextTick();
 
     expect(searchService.searchParams?.query).to.equal('collection:foo');
     expect(searchService.searchType).to.equal(SearchType.FULLTEXT);
@@ -286,9 +306,16 @@ describe('Collection Browser', () => {
     el.selectedFacets = selectedFacets;
     await el.updateComplete;
 
-    expect(searchService.searchParams?.query).to.equal(
-      'collection:foo AND (subject:("foo" OR -"bar") AND language:("en"))'
-    );
+    expect(searchService.searchParams?.query).to.equal('collection:foo');
+    expect(searchService.searchParams?.filters).to.deep.equal({
+      subject: {
+        foo: 'inc',
+        bar: 'exc',
+      },
+      language: {
+        en: 'inc',
+      },
+    });
   });
 
   it('fires a separate date histogram query when year facets are applied', async () => {
@@ -337,7 +364,8 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'collection:foo';
     el.showHistogramDatePicker = true;
-    el.dateRangeQueryClause = 'year:[1995 TO 2005]';
+    el.minSelectedDate = '1995';
+    el.maxSelectedDate = '2005';
     await el.updateComplete;
 
     expect(
@@ -375,7 +403,8 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'collection:foo';
     el.showHistogramDatePicker = false;
-    el.dateRangeQueryClause = 'year:[1995 TO 2005]';
+    el.minSelectedDate = '1995';
+    el.maxSelectedDate = '2005';
     await el.updateComplete;
 
     expect(searchService.searchParams?.aggregations?.simpleParams).to.satisfy(
@@ -675,7 +704,9 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    el.baseQuery = 'collection:foo';
+    el.baseQuery = 'first-title';
+    el.selectedSort = 'title' as SortField;
+    el.sortDirection = 'asc';
     el.selectedTitleFilter = 'X';
     await el.updateComplete;
 
@@ -685,7 +716,7 @@ describe('Collection Browser', () => {
     });
 
     expect(searchService.searchParams?.query).to.equal(
-      'collection:foo AND firstTitle:X'
+      'first-title AND firstTitle:X'
     );
   });
 
@@ -696,7 +727,9 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    el.baseQuery = 'collection:foo';
+    el.baseQuery = 'first-creator';
+    el.selectedSort = 'creator' as SortField;
+    el.sortDirection = 'asc';
     el.selectedCreatorFilter = 'X';
     await el.updateComplete;
 
@@ -706,10 +739,55 @@ describe('Collection Browser', () => {
     });
 
     expect(searchService.searchParams?.query).to.equal(
-      'collection:foo AND firstCreator:X'
+      'first-creator AND firstCreator:X'
     );
   });
 
+  it('sets sort filter properties simultaneous with facets and date range', async () => {
+    const searchService = new MockSearchService();
+    const selectedFacets: SelectedFacets = {
+      collection: { foo: { key: 'foo', state: 'selected', count: 1 } },
+      creator: {},
+      language: {},
+      lending: {},
+      mediatype: {},
+      subject: {},
+      year: {},
+    };
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'first-creator';
+    el.selectedSort = 'creator' as SortField;
+    el.selectedFacets = selectedFacets;
+    el.minSelectedDate = '1950';
+    el.maxSelectedDate = '1970';
+    el.sortDirection = 'asc';
+    el.selectedCreatorFilter = 'X';
+    await el.updateComplete;
+
+    // Wait an extra tick
+    await new Promise(res => {
+      setTimeout(res, 0);
+    });
+
+    expect(searchService.searchParams?.query).to.equal(
+      'first-creator AND firstCreator:X'
+    );
+    expect(searchService.searchParams?.filters).to.deep.equal({
+      collection: {
+        foo: 'inc',
+      },
+      year: {
+        '1950': 'gte',
+        '1970': 'lte',
+      },
+    });
+  });
+
   it('sets date range query when date picker selection changed', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
@@ -756,7 +834,8 @@ describe('Collection Browser', () => {
     // Ensure that the histogram change propagated to the collection browser's
     // date query correctly.
     await el.updateComplete;
-    expect(el.dateRangeQueryClause).to.equal('year:[1960 TO 2000]');
+    expect(el.minSelectedDate).to.equal('1960');
+    expect(el.maxSelectedDate).to.equal('2000');
   });
 
   it('scrolls to page', async () => {
@@ -862,6 +941,7 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'single-result';
     await el.updateComplete;
+    await nextTick();
 
     expect(
       el.shadowRoot?.querySelector('#big-results-label')?.textContent

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

@@ -80,7 +80,7 @@ describe('More facets content', () => {
     );
 
     el.facetKey = 'collection';
-    el.fullQuery = 'title:hello';
+    el.query = 'title:hello';
     await el.updateComplete;
 
     expect(searchService.searchParams?.query).to.equal('title:hello');
@@ -97,7 +97,7 @@ describe('More facets content', () => {
     );
 
     el.facetKey = 'collection';
-    el.fullQuery = 'title:hello';
+    el.query = 'title:hello';
     await el.updateComplete;
 
     expect(searchService.searchParams?.query).to.equal('title:hello');

package/test/item-image.test.ts

@@ -106,7 +106,7 @@ describe('ItemImage component', () => {
       </item-image>
     `);
 
-    // Doesn't set the image src if base url is undefined
+    // Doesn't set the image src if model is not present
     const img = el.shadowRoot?.querySelector('img');
     expect(img).to.exist;
     expect(img?.getAttribute('src')).not.to.exist;
@@ -123,7 +123,7 @@ describe('ItemImage component', () => {
       </item-image>
     `);
 
-    // Doesn't set the image src if base url is undefined
+    // Doesn't set the image src if identifier is not present
     const img = el.shadowRoot?.querySelector('img');
     expect(img).to.exist;
     expect(img?.getAttribute('src')).not.to.exist;