@internetarchive/collection-browser 1.14.17 → 2.0.0

package/src/data-source/collection-browser-query-state.ts

@@ -0,0 +1,54 @@
+import type {
+  CollectionExtraInfo,
+  PageElementName,
+  SearchServiceInterface,
+  SearchType,
+  SortDirection,
+  SortParam,
+} from '@internetarchive/search-service';
+import type { SelectedFacets, SortField } from '../models';
+import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
+
+/**
+ * Properties of collection browser that affect the overall search query
+ */
+export interface CollectionBrowserQueryState {
+  baseQuery?: string;
+  withinCollection?: string;
+  withinProfile?: string;
+  profileElement?: PageElementName;
+  searchType: SearchType;
+  selectedFacets?: SelectedFacets;
+  minSelectedDate?: string;
+  maxSelectedDate?: string;
+  selectedTitleFilter: string | null;
+  selectedCreatorFilter: string | null;
+  selectedSort?: SortField;
+  sortDirection: SortDirection | null;
+}
+
+/**
+ * Interface representing search-related state and operations required by the
+ * data source on its host component.
+ */
+export interface CollectionBrowserSearchInterface
+  extends CollectionBrowserQueryState {
+  searchService?: SearchServiceInterface;
+  readonly sortParam: SortParam | null;
+  readonly defaultSortParam: SortParam | null;
+  readonly suppressFacets?: boolean;
+  readonly initialPageNumber: number;
+  readonly currentVisiblePageNumbers: number[];
+  readonly clearResultsOnEmptyQuery?: boolean;
+  readonly dataSource?: CollectionBrowserDataSourceInterface;
+
+  getSessionId(): Promise<string>;
+  setSearchResultsLoading(loading: boolean): void;
+  setFacetsLoading(loading: boolean): void;
+  setTotalResultCount(count: number): void;
+  setTileCount(count: number): void;
+  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo): void;
+  emitEmptyResults(): void;
+  emitQueryStateChanged(): void;
+  refreshVisibleResults(): void;
+}

package/src/data-source/models.ts

@@ -0,0 +1,38 @@
+import type {
+  PageElementName,
+  PageType,
+} from '@internetarchive/search-service';
+
+/**
+ * A Map from collection identifiers to their corresponding collection titles.
+ */
+export type CollectionTitles = Map<string, string>;
+
+/**
+ * The subset of search service params that uniquely specify the type of results
+ * that are sought by an instance of collection browser.
+ */
+export type PageSpecifierParams = {
+  /**
+   * What high-level type of page is being fetched for (search results, collection, or profile)
+   */
+  pageType: PageType;
+  /**
+   * The target identifier for collection or profile pages (e.g., "prelinger", "@brewster", ...)
+   */
+  pageTarget: string;
+  /**
+   * Which specific elements of a profile page to fetch. Corresponds to individual tab data
+   * (e.g., "uploads", "reviews", ...)
+   */
+  pageElements?: PageElementName[];
+};
+
+/**
+ * List of profile page elements that do not currently allow faceting
+ */
+export const FACETLESS_PAGE_ELEMENTS: PageElementName[] = [
+  'forum_posts',
+  'lending',
+  'web_archives',
+];

package/src/manage/manage-bar.ts

@@ -6,7 +6,7 @@ import { when } from 'lit/directives/when.js';
 export interface ManageableItem {
   identifier: string;
   title?: string;
-  date?: string;
+  dateStr?: string;
 }
 
 @customElement('manage-bar')

package/src/models.ts

@@ -1,42 +1,193 @@
 import type { MediaType } from '@internetarchive/field-parsers';
 import {
   AggregationSortType,
+  SearchResult,
   SortDirection,
 } from '@internetarchive/search-service';
+import { collapseRepeatedQuotes } from './utils/collapse-repeated-quotes';
+import { resolveMediatype } from './utils/resolve-mediatype';
 
-export interface TileModel {
+/**
+ * Flags that can affect the visibility of content on a tile
+ */
+interface TileFlags {
+  loginRequired: boolean;
+  contentWarning: boolean;
+}
+
+/**
+ * Class for converting & storing raw search results in the correct format for UI tiles.
+ */
+export class TileModel {
   averageRating?: number;
+
+  captureDates?: Date[]; // List of capture dates for a URL, used on profile Web Archives tiles
+
   checked: boolean; // Whether this tile is currently checked for item management functions
+
   collectionIdentifier?: string;
+
   collectionName?: string;
+
   collectionFilesCount: number;
+
   collections: string[];
+
   collectionSize: number;
+
   commentCount: number;
+
   creator?: string;
+
   creators: string[];
+
+  dateStr?: string; // A string representation of the publication date, used strictly for passing preformatted dates to the parent
+
   dateAdded?: Date; // Date added to public search (software-defined) [from: addeddate]
+
   dateArchived?: Date; // Date archived (software-defined) item created on archive.org [from: publicdate]
+
   datePublished?: Date; // Date work published in the world (user-defined) [from: date]
+
   dateReviewed?: Date; // Date reviewed (user-created) most recent review [from: reviewdate]
+
   description?: string;
+
   favCount: number;
+
   href?: string;
-  identifier: string;
+
+  identifier?: string;
+
   issue?: string;
+
   itemCount: number;
+
   mediatype: MediaType;
+
   source?: string;
+
   snippets?: string[];
+
   subjects: string[];
+
   title: string;
-  viewCount: number;
+
+  viewCount?: number;
+
   volume?: string;
+
   weeklyViewCount?: number;
+
   loginRequired: boolean;
+
   contentWarning: boolean;
+
+  constructor(result: SearchResult) {
+    const flags = this.getFlags(result);
+
+    this.averageRating = result.avg_rating?.value;
+    this.captureDates = result.capture_dates?.values;
+    this.checked = false;
+    this.collections = result.collection?.values ?? [];
+    this.collectionFilesCount = result.collection_files_count?.value ?? 0;
+    this.collectionSize = result.collection_size?.value ?? 0;
+    this.commentCount = result.num_reviews?.value ?? 0;
+    this.creator = result.creator?.value;
+    this.creators = result.creator?.values ?? [];
+    this.dateAdded = result.addeddate?.value;
+    this.dateArchived = result.publicdate?.value;
+    this.datePublished = result.date?.value;
+    this.dateReviewed = result.reviewdate?.value;
+    this.description = result.description?.values.join('\n');
+    this.favCount = result.num_favorites?.value ?? 0;
+    this.href = collapseRepeatedQuotes(result.__href__?.value);
+    this.identifier = result.identifier;
+    this.issue = result.issue?.value;
+    this.itemCount = result.item_count?.value ?? 0;
+    this.mediatype = resolveMediatype(result);
+    this.snippets = result.highlight?.values ?? [];
+    this.source = result.source?.value;
+    this.subjects = result.subject?.values ?? [];
+    this.title = result.title?.value ?? '';
+    this.volume = result.volume?.value;
+    this.viewCount = result.downloads?.value;
+    this.weeklyViewCount = result.week?.value;
+    this.loginRequired = flags.loginRequired;
+    this.contentWarning = flags.contentWarning;
+  }
+
+  /**
+   * Copies the contents of this TileModel onto a new instance
+   */
+  clone(): TileModel {
+    const cloned = new TileModel({});
+    cloned.averageRating = this.averageRating;
+    cloned.captureDates = this.captureDates;
+    cloned.checked = this.checked;
+    cloned.collections = this.collections;
+    cloned.collectionFilesCount = this.collectionFilesCount;
+    cloned.collectionSize = this.collectionSize;
+    cloned.commentCount = this.commentCount;
+    cloned.creator = this.creator;
+    cloned.creators = this.creators;
+    cloned.dateStr = this.dateStr;
+    cloned.dateAdded = this.dateAdded;
+    cloned.dateArchived = this.dateArchived;
+    cloned.datePublished = this.datePublished;
+    cloned.dateReviewed = this.dateReviewed;
+    cloned.description = this.description;
+    cloned.favCount = this.favCount;
+    cloned.href = this.href;
+    cloned.identifier = this.identifier;
+    cloned.issue = this.issue;
+    cloned.itemCount = this.itemCount;
+    cloned.mediatype = this.mediatype;
+    cloned.snippets = this.snippets;
+    cloned.source = this.source;
+    cloned.subjects = this.subjects;
+    cloned.title = this.title;
+    cloned.volume = this.volume;
+    cloned.viewCount = this.viewCount;
+    cloned.weeklyViewCount = this.weeklyViewCount;
+    cloned.loginRequired = this.loginRequired;
+    cloned.contentWarning = this.contentWarning;
+    return cloned;
+  }
+
+  /**
+   * Determines the appropriate tile flags for the given search result
+   * (login required and/or content warning)
+   */
+  private getFlags(result: SearchResult): TileFlags {
+    const flags: TileFlags = {
+      loginRequired: false,
+      contentWarning: false,
+    };
+
+    // Check if item and item in "modifying" collection, setting above flags
+    if (
+      result.collection?.values.length &&
+      result.mediatype?.value !== 'collection'
+    ) {
+      for (const collection of result.collection?.values ?? []) {
+        if (collection === 'loggedin') {
+          flags.loginRequired = true;
+          if (flags.contentWarning) break;
+        }
+        if (collection === 'no-preview') {
+          flags.contentWarning = true;
+          if (flags.loginRequired) break;
+        }
+      }
+    }
+
+    return flags;
+  }
 }
 
+export type RequestKind = 'full' | 'hits' | 'aggregations';
+
 export type CollectionDisplayMode = 'grid' | 'list-compact' | 'list-detail';
 
 export type TileDisplayMode =
@@ -280,6 +431,16 @@ export function sortOptionFromAPIString(sortName?: string | null): SortOption {
   );
 }
 
+export const defaultProfileElementSorts: Record<
+  string,
+  Exclude<SortField, SortField.default>
+> = {
+  uploads: SortField.datearchived,
+  reviews: SortField.datereviewed,
+  collections: SortField.datearchived,
+  web_archives: SortField.datearchived,
+};
+
 /** A union of the fields that permit prefix filtering (e.g., alphabetical filtering) */
 export type PrefixFilterType = 'title' | 'creator';
 

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

@@ -178,7 +178,7 @@ export class SortFilterBar
       this.setupEscapeListeners();
     }
 
-    if (changed.has('resizeObserver')) {
+    if (changed.has('resizeObserver') || changed.has('showLoansTopBar')) {
       const oldObserver = changed.get(
         'resizeObserver'
       ) as SharedResizeObserverInterface;
@@ -216,35 +216,37 @@ export class SortFilterBar
   private disconnectResizeObserver(
     resizeObserver: SharedResizeObserverInterface
   ) {
-    // return if element not defined
-    if (!this.sortSelectorContainer || !this.desktopSortContainer) return;
-
-    resizeObserver.removeObserver({
-      target: this.sortSelectorContainer,
-      handler: this,
-    });
+    if (this.sortSelectorContainer) {
+      resizeObserver.removeObserver({
+        target: this.sortSelectorContainer,
+        handler: this,
+      });
+    }
 
-    resizeObserver.removeObserver({
-      target: this.desktopSortContainer,
-      handler: this,
-    });
+    if (this.desktopSortContainer) {
+      resizeObserver.removeObserver({
+        target: this.desktopSortContainer,
+        handler: this,
+      });
+    }
   }
 
   private setupResizeObserver() {
     if (!this.resizeObserver) return;
 
-    // return if element not defined
-    if (!this.sortSelectorContainer || !this.desktopSortContainer) return;
-
-    this.resizeObserver.addObserver({
-      target: this.sortSelectorContainer,
-      handler: this,
-    });
+    if (this.sortSelectorContainer) {
+      this.resizeObserver.addObserver({
+        target: this.sortSelectorContainer,
+        handler: this,
+      });
+    }
 
-    this.resizeObserver.addObserver({
-      target: this.desktopSortContainer,
-      handler: this,
-    });
+    if (this.desktopSortContainer) {
+      this.resizeObserver.addObserver({
+        target: this.desktopSortContainer,
+        handler: this,
+      });
+    }
   }
 
   handleResize(entry: ResizeObserverEntry): void {
@@ -1114,6 +1116,7 @@ export class SortFilterBar
           height: 100%;
           padding-left: 5px;
           font-size: 1.4rem;
+          font-family: var(--ia-theme-base-font-family);
           line-height: 2;
           color: var(--ia-theme-primary-text-color, #2c2c2c);
           white-space: nowrap;

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

@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { msg } from '@lit/localize';
 
+import { map } from 'lit/directives/map.js';
 import { DateFormat, formatDate } from '../../utils/format-date';
 import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import { BaseTileComponent } from '../base-tile-component';
@@ -57,7 +58,7 @@ export class ItemTile extends BaseTileComponent {
             ${this.isSortedByDate
               ? this.sortedDateInfoTemplate
               : this.creatorTemplate}
-            ${this.textSnippetsTemplate}
+            ${this.webArchivesCaptureDatesTemplate} ${this.textSnippetsTemplate}
           </div>
 
           <tile-stats
@@ -172,6 +173,26 @@ export class ItemTile extends BaseTileComponent {
     `;
   }
 
+  private get webArchivesCaptureDatesTemplate():
+    | TemplateResult
+    | typeof nothing {
+    if (!this.model?.captureDates || !this.model.title) return nothing;
+
+    return html`
+      <ul class="capture-dates">
+        ${map(
+          this.model.captureDates,
+          date => html`<li>
+            ${this.displayValueProvider.webArchivesCaptureLink(
+              this.model!.title,
+              date
+            )}
+          </li>`
+        )}
+      </ul>
+    `;
+  }
+
   private get isSortedByDate(): boolean {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
       this.sortParam?.field as string
@@ -200,10 +221,24 @@ export class ItemTile extends BaseTileComponent {
     return [
       baseTileStyles,
       css`
+        a:link {
+          text-decoration: none;
+          color: var(--ia-theme-link-color, #4b64ff);
+        }
+        a:hover {
+          text-decoration: underline;
+        }
+
         .container {
           border: 1px solid ${tileBorderColor};
         }
 
+        .capture-dates {
+          margin: 0;
+          padding: 0 5px;
+          list-style-type: none;
+        }
+
         text-snippet-block {
           --containerLeftMargin: 5px;
           --containerTopMargin: 5px;

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

@@ -1,6 +1,7 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
+import { msg } from '@lit/localize';
 import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
 import { reviewsIcon } from '../../assets/img/icons/reviews';
 import { uploadIcon } from '../../assets/img/icons/upload';
@@ -33,8 +34,8 @@ export class TileStats extends LitElement {
 
     const uploadsOrViewsTitle =
       this.mediatype === 'account'
-        ? `${this.itemCount} uploads`
-        : `${this.viewCount} ${this.viewLabel ?? 'all-time views'}`;
+        ? `${this.itemCount ?? 0} uploads`
+        : `${this.viewCount ?? 0} ${this.viewLabel ?? 'all-time views'}`;
 
     return html`
       <div class="item-stats">
@@ -43,17 +44,21 @@ export class TileStats extends LitElement {
         </p>
         <ul id="stats-row">
           <li class="col">
-            <p class="sr-only">Mediatype:</p>
+            <p class="sr-only">${msg('Mediatype:')}</p>
             <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
           </li>
           <li class="col" title="${uploadsOrViewsTitle}">
             ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
             <p class="status-text">
               <span class="sr-only">
-                ${this.mediatype === 'account' ? 'Uploads:' : 'Views:'}
+                ${this.mediatype === 'account'
+                  ? msg('Uploads:')
+                  : msg('Views:')}
               </span>
               ${formatCount(
-                this.mediatype === 'account' ? this.itemCount : this.viewCount,
+                this.mediatype === 'account'
+                  ? this.itemCount ?? 0
+                  : this.viewCount ?? 0,
                 'short',
                 'short'
               )}
@@ -62,14 +67,14 @@ export class TileStats extends LitElement {
           <li class="col" title="${formattedFavCount} favorites">
             ${favoriteFilledIcon}
             <p class="status-text">
-              <span class="sr-only">Favorites:</span>
+              <span class="sr-only">${msg('Favorites:')}</span>
               ${formattedFavCount}
             </p>
           </li>
           <li class="col reviews" title="${formattedReviewCount} reviews">
             ${reviewsIcon}
             <p class="status-text">
-              <span class="sr-only">Reviews:</span>
+              <span class="sr-only">${msg('Reviews:')}</span>
               ${formattedReviewCount}
             </p>
           </li>

package/src/tiles/hover/hover-pane-controller.ts

@@ -1,4 +1,3 @@
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { SortParam } from '@internetarchive/search-service';
 import {
   html,
@@ -8,6 +7,7 @@ import {
   ReactiveControllerHost,
 } from 'lit';
 import type { TileModel } from '../../models';
+import type { CollectionTitles } from '../../data-source/models';
 
 type HoverPaneState = 'hidden' | 'shown' | 'fading-out';
 
@@ -17,7 +17,7 @@ export interface HoverPaneProperties {
   baseImageUrl?: string;
   loggedIn: boolean;
   sortParam: SortParam | null;
-  collectionNameCache?: CollectionNameCacheInterface;
+  collectionTitles?: CollectionTitles;
 }
 
 export interface HoverPaneControllerOptions {
@@ -187,7 +187,7 @@ export class HoverPaneController implements HoverPaneControllerInterface {
             .baseImageUrl=${this.hoverPaneProps?.baseImageUrl}
             .loggedIn=${this.hoverPaneProps?.loggedIn}
             .sortParam=${this.hoverPaneProps?.sortParam}
-            .collectionNameCache=${this.hoverPaneProps?.collectionNameCache}
+            .collectionTitles=${this.hoverPaneProps?.collectionTitles}
           ></tile-hover-pane>`
       : nothing;
   }

package/src/tiles/hover/tile-hover-pane.ts

@@ -1,8 +1,8 @@
-import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import type { SortParam } from '@internetarchive/search-service';
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { TileModel } from '../../models';
+import type { CollectionTitles } from '../../data-source/models';
 import '../list/tile-list';
 
 @customElement('tile-hover-pane')
@@ -18,7 +18,7 @@ export class TileHoverPane extends LitElement {
   @property({ type: Object }) sortParam?: SortParam;
 
   @property({ type: Object })
-  collectionNameCache?: CollectionNameCacheInterface;
+  collectionTitles?: CollectionTitles;
 
   protected render(): TemplateResult {
     return html`
@@ -29,7 +29,7 @@ export class TileHoverPane extends LitElement {
           .baseImageUrl=${this.baseImageUrl}
           .loggedIn=${this.loggedIn}
           .sortParam=${this.sortParam}
-          .collectionNameCache=${this.collectionNameCache}
+          .collectionTitles=${this.collectionTitles}
         ></tile-list>
       </div>
     `;

package/src/tiles/item-image.ts

@@ -24,6 +24,8 @@ export class ItemImage extends LitElement {
 
   @state() private isWaveform = false;
 
+  @state() private isNotFound = false;
+
   @query('img') private baseImage!: HTMLImageElement;
 
   render() {
@@ -43,6 +45,7 @@ export class ItemImage extends LitElement {
         src="${this.imageSrc}"
         alt=""
         @load=${this.onLoad}
+        @error=${this.onError}
       />
     `;
   }
@@ -51,12 +54,33 @@ export class ItemImage extends LitElement {
    * Helpers
    */
   private get imageSrc() {
+    if (this.isNotFound) return this.notFoundSrc;
+
+    // Use the correct image for web capture tiles, if possible
+    if (this.model?.captureDates && this.model.identifier) {
+      try {
+        const url = new URL(this.model.identifier);
+        const domain = encodeURIComponent(url.hostname);
+        return this.baseImageUrl
+          ? `https://web.archive.org/thumb/${domain}?generate=1`
+          : nothing;
+      } catch (err) {
+        return `${this.baseImageUrl}/images/notfound.png`;
+      }
+    }
+
     // Don't try to load invalid image URLs
     return this.baseImageUrl && this.model?.identifier
       ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
       : nothing;
   }
 
+  private get notFoundSrc() {
+    return this.baseImageUrl
+      ? `${this.baseImageUrl}/images/notfound.png`
+      : nothing;
+  }
+
   private get hashBasedGradient() {
     if (!this.model?.identifier) {
       return 'waveform-grad0';
@@ -120,6 +144,10 @@ export class ItemImage extends LitElement {
     }
   }
 
+  private onError() {
+    this.isNotFound = true;
+  }
+
   /**
    * CSS
    */