@internetarchive/collection-browser 1.11.1-alpha.2 → 1.12.0

package/src/collection-facets.ts

@@ -10,6 +10,7 @@ import {
 import { customElement, property, state } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { ref } from 'lit/directives/ref.js';
+import { msg } from '@lit/localize';
 import type {
   Aggregation,
   AggregationSortType,
@@ -88,9 +89,13 @@ export class CollectionFacets extends LitElement {
 
   @property({ type: String }) query?: string;
 
+  @property({ type: String }) withinCollection?: string;
+
+  @property({ type: Array }) parentCollections: string[] = [];
+
   @property({ type: Object }) filterMap?: FilterMap;
 
-  @property({ type: String }) withinCollection?: string;
+  @property({ type: String }) baseNavigationUrl?: string;
 
   @property({ type: String }) collectionPagePath: string = '/details/';
 
@@ -143,6 +148,7 @@ export class CollectionFacets extends LitElement {
               </section>
             `
           : nothing}
+        ${this.collectionPartOfTemplate}
         ${this.mergedFacets.map(facetGroup =>
           this.getFacetGroupTemplate(facetGroup)
         )}
@@ -150,6 +156,51 @@ export class CollectionFacets extends LitElement {
     `;
   }
 
+  private get collectionPartOfTemplate(): TemplateResult | typeof nothing {
+    // We only display the "Part Of" section on collection pages
+    if (!this.withinCollection || this.parentCollections.length === 0)
+      return nothing;
+
+    const headingId = 'partof-heading';
+    return html`
+      <section
+        class="facet-group partof-collections"
+        aria-labelledby=${headingId}
+      >
+        <div class="facet-group-header">
+          <h3 id=${headingId}>${msg('Part Of')}</h3>
+        </div>
+        <ul>
+          ${map(this.parentCollections, collxn => {
+            const collectionURL = `${this.baseNavigationUrl}${this.collectionPagePath}${collxn}`;
+
+            return html` <li>
+              <a
+                href=${collectionURL}
+                data-id=${collxn}
+                @click=${this.partOfCollectionClicked}
+              >
+                <async-collection-name
+                  .collectionNameCache=${this.collectionNameCache}
+                  .identifier=${collxn}
+                  placeholder=${collxn}
+                ></async-collection-name>
+              </a>
+            </li>`;
+          })}
+        </ul>
+      </section>
+    `;
+  }
+
+  private partOfCollectionClicked(e: Event): void {
+    this.analyticsHandler?.sendEvent({
+      category: analyticsCategories.default,
+      action: analyticsActions.partOfCollectionClicked,
+      label: (e.target as HTMLElement).dataset.id,
+    });
+  }
+
   /**
    * Opens a modal dialog containing an enlarged version of the date picker.
    */
@@ -652,6 +703,14 @@ export class CollectionFacets extends LitElement {
     return [
       srOnlyStyle,
       css`
+        a:link {
+          text-decoration: none;
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+        a:link:hover {
+          text-decoration: underline;
+        }
+
         #container.loading {
           opacity: 0.5;
         }
@@ -711,6 +770,12 @@ export class CollectionFacets extends LitElement {
           max-height: 2000px;
         }
 
+        .partof-collections ul {
+          list-style-type: none;
+          padding: 0;
+          font-size: 1.2rem;
+        }
+
         h3 {
           font-size: 1.4rem;
           font-weight: 200

package/src/empty-placeholder.ts

@@ -18,7 +18,6 @@ export type PlaceholderType =
   | 'empty-collection'
   | 'no-results'
   | 'query-error'
-  | 'collection-error'
   | null;
 @customElement('empty-placeholder')
 export class EmptyPlaceholder extends LitElement {
@@ -48,11 +47,6 @@ export class EmptyPlaceholder extends LitElement {
       Tips for constructing search queries.
     </a> `);
 
-  private static readonly MESSAGE_COLLECTION_ERROR = msg(html` The search engine
-    encountered an error fetching details for this collection. If the problem
-    persists, please let us know at
-    <a href="mailto:info@archive.org">info@archive.org</a>.`);
-
   private static readonly QUERY_ERROR_DETAILS_MESSAGE = msg('Error details:');
 
   @property({ type: String }) placeholderType: PlaceholderType = null;
@@ -79,7 +73,6 @@ export class EmptyPlaceholder extends LitElement {
           ['empty-collection', () => this.emptyCollectionTemplate],
           ['no-results', () => this.noResultsTemplate],
           ['query-error', () => this.queryErrorTemplate],
-          ['collection-error', () => this.collectionErrorTemplate],
         ])}
       </div>
     `;
@@ -120,16 +113,6 @@ export class EmptyPlaceholder extends LitElement {
     `;
   }
 
-  private get collectionErrorTemplate(): TemplateResult {
-    return html`
-      <h2 class="title">${EmptyPlaceholder.MESSAGE_COLLECTION_ERROR}</h2>
-      <div>${nullResultIcon}</div>
-      <p class="error-details">
-        ${EmptyPlaceholder.QUERY_ERROR_DETAILS_MESSAGE} ${this.detailMessage}
-      </p>
-    `;
-  }
-
   static get styles(): CSSResultGroup {
     return css`
       :host {

package/src/utils/analytics-events.ts

@@ -14,6 +14,7 @@ export enum analyticsActions {
   facetDeselected = 'facetDeselected',
   facetNegativeSelected = 'facetNegativeSelected',
   facetNegativeDeselected = 'facetNegativeDeselected',
+  partOfCollectionClicked = 'partOfCollectionClicked',
   histogramChanged = 'histogramChanged',
   histogramChangedFromModal = 'histogramChangedFromModal',
   histogramExpanded = 'histogramExpanded',

package/test/collection-browser.test.ts

@@ -1153,6 +1153,23 @@ describe('Collection Browser', () => {
     expect(mobileFacets).to.exist;
   });
 
+  it('sets parent collections to prop when searching a collection', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        .withinCollection=${'fake'}
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'parent-collections';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+    await aTimeout(0);
+
+    expect(el.parentCollections).to.deep.equal(['foo', 'bar']);
+  });
+
   it('refreshes when certain properties change - with some analytics event sampling', async () => {
     const mockAnalyticsHandler = new MockAnalyticsHandler();
     const searchService = new MockSearchService();

package/test/collection-facets.test.ts

@@ -16,6 +16,7 @@ import {
   getDefaultSelectedFacets,
 } from '../src/models';
 import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
+import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';
 
 describe('Collection Facets', () => {
   it('has loader', async () => {
@@ -814,6 +815,41 @@ describe('Collection Facets', () => {
     expect(mockAnalyticsHandler.callLabel).to.equal('subject');
   });
 
+  it('includes Part Of section for collections', async () => {
+    const mockCollectionNameCache = new MockCollectionNameCache();
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets
+        .baseNavigationUrl=${''}
+        .withinCollection=${'foo'}
+        .parentCollections=${['bar', 'baz']}
+        .collectionNameCache=${mockCollectionNameCache}
+      ></collection-facets>`
+    );
+
+    const partOfSection = el.shadowRoot?.querySelector('.partof-collections');
+    expect(partOfSection).to.exist;
+
+    const partOfLinks = partOfSection?.querySelectorAll('a[href]');
+    expect(partOfLinks?.length).to.equal(2);
+
+    expect(partOfLinks?.[0]?.textContent?.trim()).to.equal('bar-name');
+    expect(partOfLinks?.[0]?.getAttribute('href')).to.equal('/details/bar');
+    expect(partOfLinks?.[1]?.textContent?.trim()).to.equal('baz-name');
+    expect(partOfLinks?.[1]?.getAttribute('href')).to.equal('/details/baz');
+  });
+
+  it('does not include Part Of section outside of collections', async () => {
+    // No withinCollection prop
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets
+        .parentCollections=${['bar', 'baz']}
+      ></collection-facets>`
+    );
+
+    const partOfSection = el.shadowRoot?.querySelector('.partof-collections');
+    expect(partOfSection).not.to.exist;
+  });
+
   it('fires analytics on expanding date picker', async () => {
     const mockAnalyticsHandler = new MockAnalyticsHandler();
 
@@ -846,4 +882,34 @@ describe('Collection Facets', () => {
     expect(mockAnalyticsHandler.callAction).to.equal('histogramExpanded');
     expect(mockAnalyticsHandler.callLabel).to.equal(window.location.href);
   });
+
+  it('fires analytics on clicking Part Of collection link', async () => {
+    const mockCollectionNameCache = new MockCollectionNameCache();
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
+
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets
+        .baseNavigationUrl=${''}
+        .withinCollection=${'foo'}
+        .parentCollections=${['bar']}
+        .collectionNameCache=${mockCollectionNameCache}
+        .analyticsHandler=${mockAnalyticsHandler}
+      ></collection-facets>`
+    );
+
+    const partOfLinks = el.shadowRoot?.querySelectorAll(
+      '.partof-collections a[href]'
+    );
+    expect(partOfLinks?.length).to.equal(1);
+
+    // Click the expand button to open the modal
+    const link = partOfLinks?.[0] as HTMLAnchorElement;
+    link?.addEventListener('click', e => e.preventDefault());
+    link?.click();
+    await el.updateComplete;
+
+    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callAction).to.equal('partOfCollectionClicked');
+    expect(mockAnalyticsHandler.callLabel).to.equal('bar');
+  });
 });

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

@@ -728,6 +728,52 @@ export const getMockSuccessWithDefaultFavSort: () => Result<
   },
 });
 
+export const getMockSuccessWithParentCollections: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  success: {
+    request: {
+      kind: 'hits',
+      clientParameters: {
+        user_query: 'parent-collections',
+        sort: [],
+      },
+      backendRequests: {
+        primary: {
+          kind: 'hits',
+          finalized_parameters: {
+            user_query: 'parent-collections',
+            sort: [],
+          },
+        },
+      },
+    },
+    rawResponse: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new ItemHit({
+          fields: {
+            identifier: 'foo',
+            title: 'Foo',
+          },
+        }),
+      ],
+      collectionExtraInfo: {
+        public_metadata: {
+          collection: ['foo', 'bar'],
+        },
+      },
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+});
+
 export const getMockErrorResult: () => Result<
   SearchResponse,
   SearchServiceError

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

@@ -25,6 +25,7 @@ import {
   getMockSuccessWithDefaultSort,
   getMockSuccessWithConciseDefaultSort,
   getMockSuccessWithDefaultFavSort,
+  getMockSuccessWithParentCollections,
 } from './mock-search-responses';
 
 const responses: Record<
@@ -45,6 +46,7 @@ const responses: Record<
   'default-sort': getMockSuccessWithDefaultSort,
   'default-sort-concise': getMockSuccessWithConciseDefaultSort,
   'fav-sort': getMockSuccessWithDefaultFavSort,
+  'parent-collections': getMockSuccessWithParentCollections,
   error: getMockErrorResult,
   malformed: getMockMalformedResult,
 };