@internetarchive/collection-browser 1.14.17-alpha.2 → 1.14.17-alpha.21

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 =

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

@@ -216,28 +216,37 @@ export class SortFilterBar
   private disconnectResizeObserver(
     resizeObserver: SharedResizeObserverInterface
   ) {
-    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;
-    this.resizeObserver.addObserver({
-      target: this.sortSelectorContainer,
-      handler: this,
-    });
 
-    this.resizeObserver.addObserver({
-      target: this.desktopSortContainer,
-      handler: this,
-    });
+    if (this.sortSelectorContainer) {
+      this.resizeObserver.addObserver({
+        target: this.sortSelectorContainer,
+        handler: this,
+      });
+    }
+
+    if (this.desktopSortContainer) {
+      this.resizeObserver.addObserver({
+        target: this.desktopSortContainer,
+        handler: this,
+      });
+    }
   }
 
   handleResize(entry: ResizeObserverEntry): void {
@@ -1107,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';
 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/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
     );
   }
 

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
@@ -96,11 +97,28 @@ export class TileDisplayValueProvider {
    * item is specified to be a collection (default false).
    */
   itemPageUrl(
-    identifier: string,
+    identifier?: string,
     isCollection = false
   ): string | typeof nothing {
     if (!identifier || this.baseNavigationUrl == null) return nothing;
     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/src/utils/collapse-repeated-quotes.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns the input string, but removing one set of quotes from all instances of
+ * ""clauses wrapped in two sets of quotes"". This assumes the quotes are already
+ * URL-encoded.
+ *
+ * This should be a temporary measure to address the fact that the __href__ field
+ * sometimes acquires extra quotation marks during query rewriting. Once there is a
+ * full Lucene parser in place that handles quoted queries correctly, this can likely
+ * be removed.
+ */
+export function collapseRepeatedQuotes(str?: string): string | undefined {
+  return str?.replace(/%22%22(?!%22%22)(.+?)%22%22/g, '%22$1%22');
+}

package/src/utils/resolve-mediatype.ts

@@ -0,0 +1,26 @@
+import type { MediaType } from '@internetarchive/field-parsers';
+import type { SearchResult } from '@internetarchive/search-service';
+
+/**
+ * Returns the mediatype string for the given search result, taking into account
+ * the special `favorited_search` hit type.
+ * @param result The search result to extract a mediatype from
+ */
+export function resolveMediatype(result: SearchResult): MediaType {
+  /**
+   * hit_type == 'favorited_search' is basically a new hit_type
+   * - we are getting from PPS.
+   * - which gives response for fav- collection
+   * - having favorited items like account/collection/item etc..
+   * - as user can also favorite a search result (a search page)
+   * - so we need to have response (having fav- items and fav- search results)
+   *
+   * if backend hit_type == 'favorited_search'
+   * - let's assume a "search" as new mediatype
+   */
+  if (result?.rawMetadata?.hit_type === 'favorited_search') {
+    return 'search';
+  }
+
+  return result.mediatype?.value ?? 'data';
+}