@internetarchive/collection-browser 1.14.17-beta.5 → 1.14.18-alpha.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

@@ -1,12 +1,7 @@
 import type {
-  CollectionExtraInfo,
+  PageElementName,
   PageType,
-  SearchServiceInterface,
-  SearchType,
-  SortDirection,
-  SortParam,
 } from '@internetarchive/search-service';
-import type { SelectedFacets, SortField } from '../models';
 
 /**
  * A Map from collection identifiers to their corresponding collection titles.
@@ -30,46 +25,14 @@ export type PageSpecifierParams = {
    * Which specific elements of a profile page to fetch. Corresponds to individual tab data
    * (e.g., "uploads", "reviews", ...)
    */
-  pageElements?: string[];
+  pageElements?: PageElementName[];
 };
 
 /**
- * Properties of collection browser that affect the overall search query
+ * List of profile page elements that do not currently allow faceting
  */
-export interface CollectionBrowserQueryState {
-  baseQuery?: string;
-  withinCollection?: string;
-  withinProfile?: string;
-  profileElement?: string;
-  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;
-  queryErrorMessage?: string;
-  readonly sortParam: SortParam | null;
-  readonly suppressFacets?: boolean;
-  readonly initialPageNumber: number;
-  readonly currentVisiblePageNumbers: number[];
-
-  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;
-  refreshVisibleResults(): void;
-}
+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;
@@ -1116,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/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
    */

package/src/tiles/list/tile-list-compact.ts

@@ -167,7 +167,7 @@ export class TileListCompact extends BaseTileComponent {
         align-items: center;
         line-height: 20px;
         padding-top: 5px;
-        padding-bottom: 5px;
+        margin-bottom: -5px;
       }
 
       #list-line.mobile {

package/src/tiles/list/tile-list.ts

@@ -37,7 +37,7 @@ export class TileList extends BaseTileComponent {
   @property({ type: Object })
   collectionTitles?: CollectionTitles;
 
-  @state() private collectionLinks: TemplateResult[] = [];
+  @state() private collectionLinks: (TemplateResult | typeof nothing)[] = [];
 
   render() {
     return html`
@@ -107,6 +107,7 @@ export class TileList extends BaseTileComponent {
       ${this.itemLineTemplate} ${this.creatorTemplate}
       <div id="dates-line">
         ${this.datePublishedTemplate} ${this.dateSortByTemplate}
+        ${this.webArchivesCaptureDatesTemplate}
       </div>
       <div id="views-line">
         ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
@@ -238,6 +239,7 @@ export class TileList extends BaseTileComponent {
       this.sortParam?.field === 'week'
         ? this.model?.weeklyViewCount // weekly views
         : this.model?.viewCount; // all-time views
+    if (viewCount == null) return nothing;
 
     // when its a search-tile, we don't have any stats to show
     if (this.model?.mediatype === 'search') {
@@ -245,7 +247,7 @@ export class TileList extends BaseTileComponent {
     }
 
     return this.metadataTemplate(
-      `${formatCount(viewCount ?? 0, this.formatSize)}`,
+      `${formatCount(viewCount, this.formatSize)}`,
       msg('Views')
     );
   }
@@ -309,6 +311,26 @@ export class TileList extends BaseTileComponent {
     return !!this.model?.snippets?.length;
   }
 
+  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>
+    `;
+  }
+
   // Utility functions
   // eslint-disable-next-line default-param-last
   private metadataTemplate(text: any, label = '', id?: string) {
@@ -345,10 +367,12 @@ export class TileList extends BaseTileComponent {
   }
 
   private detailsLink(
-    identifier: string,
+    identifier?: string,
     text?: string,
     isCollection = false
-  ): TemplateResult {
+  ): TemplateResult | typeof nothing {
+    if (!identifier) return nothing;
+
     const linkText = text ?? identifier;
     const linkHref = this.displayValueProvider.itemPageUrl(
       identifier,
@@ -392,7 +416,7 @@ export class TileList extends BaseTileComponent {
     // Note: quirk of Lit: need to replace collectionLinks array,
     // otherwise it will not re-render. Can't simply alter the array.
     this.collectionLinks = [];
-    const newCollectionLinks: TemplateResult[] = [];
+    const newCollectionLinks: (TemplateResult | typeof nothing)[] = [];
     for (const collection of this.model.collections) {
       // Don't include favorites or collections that are meant to be suppressed
       if (
@@ -622,6 +646,20 @@ export class TileList extends BaseTileComponent {
       #views-line {
         flex-wrap: wrap;
       }
+
+      .capture-dates {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+      }
+
+      .capture-dates a:link {
+        text-decoration: none;
+        color: var(--ia-theme-link-color, #4b64ff);
+      }
+      .capture-dates a:hover {
+        text-decoration: underline;
+      }
     `;
   }
 }

package/src/tiles/tile-dispatcher.ts

@@ -184,7 +184,8 @@ export class TileDispatcher
       this.enableHoverPane &&
       !!this.tileDisplayMode &&
       TileDispatcher.HOVER_PANE_DISPLAY_MODES[this.tileDisplayMode] &&
-      this.model?.mediatype !== 'search' // don't show hover panes on search tiles
+      this.model?.mediatype !== 'search' && // don't show hover panes on search tiles
+      !this.model?.captureDates // don't show hover panes on web archive tiles
     );
   }