@internetarchive/collection-browser 1.14.14-alpha.1 → 1.14.16-alpha.1

package/src/collection-facets/facet-row.ts

@@ -7,7 +7,6 @@ import {
   nothing,
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import eyeIcon from '../assets/img/icons/eye';
 import eyeClosedIcon from '../assets/img/icons/eye-closed';
 import type {
@@ -16,6 +15,7 @@ import type {
   FacetEventDetails,
   FacetState,
 } from '../models';
+import type { CollectionTitles } from '../data-source/models';
 
 @customElement('facet-row')
 export class FacetRow extends LitElement {
@@ -31,7 +31,7 @@ export class FacetRow extends LitElement {
 
   /** The collection name cache for converting collection identifiers to titles */
   @property({ type: Object })
-  collectionNameCache?: CollectionNameCacheInterface;
+  collectionTitles?: CollectionTitles;
 
   //
   // COMPONENT LIFECYCLE METHODS
@@ -56,18 +56,13 @@ export class FacetRow extends LitElement {
     const showOnlyCheckboxId = `${facetType}:${bucket.key}-show-only`;
     const negativeCheckboxId = `${facetType}:${bucket.key}-negative`;
 
-    // For collections, we need to asynchronously load the collection name
-    // so we use the `async-collection-name` widget.
+    // For collections, we render the collection title as a link.
     // For other facet types, we just have a static value to use.
     const bucketTextDisplay =
       facetType !== 'collection'
         ? html`${bucket.displayText ?? bucket.key}`
         : html`<a href="/details/${bucket.key}">
-            <async-collection-name
-              .collectionNameCache=${this.collectionNameCache}
-              .identifier=${bucket.key}
-              placeholder="-"
-            ></async-collection-name>
+            ${this.collectionTitles?.get(bucket.key) ?? bucket.key}
           </a> `;
 
     const facetHidden = bucket.state === 'hidden';

package/src/collection-facets/facets-template.ts

@@ -8,7 +8,6 @@ import {
 } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import {
   FacetGroup,
   FacetBucket,
@@ -16,6 +15,7 @@ import {
   getDefaultSelectedFacets,
   FacetEventDetails,
 } from '../models';
+import type { CollectionTitles } from '../data-source/models';
 import { FacetRow } from './facet-row';
 
 @customElement('facets-template')
@@ -27,7 +27,7 @@ export class FacetsTemplate extends LitElement {
   @property({ type: String }) renderOn?: string;
 
   @property({ type: Object })
-  collectionNameCache?: CollectionNameCacheInterface;
+  collectionTitles?: CollectionTitles;
 
   private facetClicked(e: CustomEvent<FacetEventDetails>) {
     const { bucket, negative } = e.detail;
@@ -126,7 +126,7 @@ export class FacetsTemplate extends LitElement {
           bucket => html`<facet-row
             .facetType=${facetGroup.key}
             .bucket=${bucket}
-            .collectionNameCache=${this.collectionNameCache}
+            .collectionTitles=${this.collectionTitles}
             @facetClick=${this.facetClicked}
           ></facet-row>`
         )}

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

@@ -13,13 +13,13 @@ import { customElement, property, state } from 'lit/decorators.js';
 import {
   Aggregation,
   Bucket,
+  PageType,
   SearchServiceInterface,
   SearchParams,
   SearchType,
   AggregationSortType,
   FilterMap,
 } from '@internetarchive/search-service';
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
 import {
@@ -32,6 +32,7 @@ import {
   valueFacetSort,
   defaultFacetSort,
 } from '../models';
+import type { CollectionTitles } from '../data-source/models';
 import '@internetarchive/ia-activity-indicator/ia-activity-indicator';
 import './more-facets-pagination';
 import './facets-template';
@@ -61,7 +62,7 @@ export class MoreFacetsContent extends LitElement {
   @property({ type: String }) withinCollection?: string;
 
   @property({ type: Object })
-  collectionNameCache?: CollectionNameCacheInterface;
+  collectionTitles?: CollectionTitles;
 
   @property({ type: Object }) selectedFacets?: SelectedFacets;
 
@@ -142,7 +143,10 @@ export class MoreFacetsContent extends LitElement {
     const aggregationsSize = 65535; // todo - do we want to have all the records at once?
 
     const collectionParams = this.withinCollection
-      ? { pageType: 'collection_details', pageTarget: this.withinCollection }
+      ? {
+          pageType: 'collection_details' as PageType,
+          pageTarget: this.withinCollection,
+        }
       : null;
 
     const params: SearchParams = {
@@ -159,6 +163,13 @@ export class MoreFacetsContent extends LitElement {
 
     this.facetGroup = this.aggregationFacetGroups;
     this.facetsLoading = false;
+
+    const collectionTitles = results?.success?.response?.collectionTitles;
+    if (collectionTitles) {
+      for (const [id, title] of Object.entries(collectionTitles)) {
+        this.collectionTitles?.set(id, title);
+      }
+    }
   }
 
   private pageNumberClicked(e: CustomEvent<{ page: number }>) {
@@ -285,9 +296,6 @@ export class MoreFacetsContent extends LitElement {
             !suppressedCollections[bucketKey] && !bucketKey?.startsWith('fav-')
           );
         });
-
-        // asynchronously load the collection name
-        this.preloadCollectionNames(castedBuckets);
       }
 
       // find length and pagination size for modal pagination
@@ -320,26 +328,13 @@ export class MoreFacetsContent extends LitElement {
     return facetGroups;
   }
 
-  /**
-   * 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
-   *
-   * @param castedBuckets
-   */
-  private preloadCollectionNames(castedBuckets: any[]) {
-    const collectionIds = castedBuckets?.map(option => option.key);
-    const collectionIdsArray = Array.from(new Set(collectionIds)) as string[];
-
-    this.collectionNameCache?.preloadIdentifiers(collectionIdsArray);
-  }
-
   private get getMoreFacetsTemplate(): TemplateResult {
     return html`
       <facets-template
         .facetGroup=${this.mergedFacets?.shift()}
         .selectedFacets=${this.selectedFacets}
         .renderOn=${'modal'}
-        .collectionNameCache=${this.collectionNameCache}
+        .collectionTitles=${this.collectionTitles}
         @selectedFacetsChanged=${(e: CustomEvent) => {
           this.selectedFacets = e.detail;
         }}

package/src/collection-facets.ts

@@ -22,8 +22,6 @@ import type {
 } 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,
@@ -47,6 +45,7 @@ import {
   suppressedCollections,
   defaultFacetSort,
 } from './models';
+import type { CollectionTitles } from './data-source/models';
 import './collection-facets/more-facets-content';
 import './collection-facets/facets-template';
 import './collection-facets/facet-tombstone-row';
@@ -118,7 +117,7 @@ export class CollectionFacets extends LitElement {
   analyticsHandler?: AnalyticsManagerInterface;
 
   @property({ type: Object, attribute: false })
-  collectionNameCache?: CollectionNameCacheInterface;
+  collectionTitles?: CollectionTitles;
 
   @state() openFacets: Record<FacetOption, boolean> = {
     subject: false,
@@ -188,11 +187,7 @@ export class CollectionFacets extends LitElement {
                 data-id=${collxn}
                 @click=${this.partOfCollectionClicked}
               >
-                <async-collection-name
-                  .collectionNameCache=${this.collectionNameCache}
-                  .identifier=${collxn}
-                  placeholder=${collxn}
-                ></async-collection-name>
+                ${this.collectionTitles?.get(collxn) ?? collxn}
               </a>
             </li>`;
           })}
@@ -652,7 +647,7 @@ export class CollectionFacets extends LitElement {
         .modalManager=${this.modalManager}
         .searchService=${this.searchService}
         .searchType=${this.searchType}
-        .collectionNameCache=${this.collectionNameCache}
+        .collectionTitles=${this.collectionTitles}
         .selectedFacets=${this.selectedFacets}
         .sortedBy=${sortedBy}
         @facetsChanged=${(e: CustomEvent) => {
@@ -694,7 +689,7 @@ export class CollectionFacets extends LitElement {
         .facetGroup=${facetGroup}
         .selectedFacets=${this.selectedFacets}
         .renderOn=${'page'}
-        .collectionNameCache=${this.collectionNameCache}
+        .collectionTitles=${this.collectionTitles}
         @selectedFacetsChanged=${(e: CustomEvent) => {
           const event = new CustomEvent<SelectedFacets>('facetsChanged', {
             detail: e.detail,