@internetarchive/collection-browser 1.14.17-alpha.4 → 1.14.17-alpha.41

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

@@ -0,0 +1,53 @@
+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 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,13 +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.
@@ -33,44 +27,3 @@ export type PageSpecifierParams = {
    */
   pageElements?: PageElementName[];
 };
-
-/**
- * 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;
-  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;
-}

package/src/models.ts

@@ -21,6 +21,8 @@ interface TileFlags {
 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;
@@ -71,7 +73,7 @@ export class TileModel {
 
   title: string;
 
-  viewCount: number;
+  viewCount?: number;
 
   volume?: string;
 
@@ -85,6 +87,7 @@ export class TileModel {
     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;
@@ -108,18 +111,19 @@ export class TileModel {
     this.subjects = result.subject?.values ?? [];
     this.title = result.title?.value ?? '';
     this.volume = result.volume?.value;
-    this.viewCount = result.downloads?.value ?? 0;
+    this.viewCount = result.downloads?.value;
     this.weeklyViewCount = result.week?.value;
     this.loginRequired = flags.loginRequired;
     this.contentWarning = flags.contentWarning;
   }
 
   /**
-   * Clones the contents of this TileModel onto a new instance
+   * 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;

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

@@ -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.ts

@@ -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) {
@@ -624,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
     );
   }
 

package/src/tiles/tile-display-value-provider.ts

@@ -1,7 +1,8 @@
-import { nothing } from 'lit';
+import { TemplateResult, html, nothing } from 'lit';
 import { msg, str } from '@lit/localize';
 import type { SortParam } from '@internetarchive/search-service';
 import type { TileModel } from '../models';
+import { formatDate } from '../utils/format-date';
 
 /**
  * A class encapsulating shared logic for converting model values into display values
@@ -103,4 +104,21 @@ export class TileDisplayValueProvider {
     const basePath = isCollection ? this.collectionPagePath : '/details/';
     return `${this.baseNavigationUrl}${basePath}${identifier}`;
   }
+
+  /**
+   * Produces a template for a link to a single web capture of the given URL and date
+   */
+  webArchivesCaptureLink(url: string, date: Date): TemplateResult {
+    // Convert the date into the format used to identify wayback captures (e.g., '20150102124550')
+    const captureDateStr = date
+      .toISOString()
+      .replace(/[TZ:-]/g, '')
+      .replace(/\..*/, '');
+    const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(
+      url
+    )}`;
+    const captureText = formatDate(date, 'long');
+
+    return html` <a href=${captureHref}> ${captureText} </a> `;
+  }
 }

package/test/collection-browser.test.ts

@@ -917,7 +917,7 @@ describe('Collection Browser', () => {
     el.sortDirection = 'asc';
     el.selectedCreatorFilter = 'X';
     await el.updateComplete;
-    await el.initialSearchComplete;
+    await nextTick();
 
     expect(searchService.searchParams?.query).to.equal('first-creator');
     expect(searchService.searchParams?.filters?.firstCreator?.X).to.equal(
@@ -926,7 +926,7 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
-    await el.initialSearchComplete;
+    await nextTick();
 
     expect(searchService.searchParams?.query).to.equal('collection:foo');
     expect(searchService.searchParams?.filters?.firstCreator).not.to.exist;
@@ -1446,9 +1446,6 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    await el.initialSearchComplete;
-    await el.updateComplete;
-
     el.baseQuery = 'bar';
     await el.updateComplete;
 
@@ -1484,9 +1481,6 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    await el.initialSearchComplete;
-    await el.updateComplete;
-
     el.withinCollection = 'bar';
     await el.updateComplete;