@internetarchive/collection-browser 0.3.4 → 0.3.5

package/src/app-root.ts

@@ -5,6 +5,7 @@ import {
 } from '@internetarchive/analytics-manager';
 import {
   SearchService,
+  SearchServiceInterface,
   SearchType,
   StringField,
 } from '@internetarchive/search-service';
@@ -22,7 +23,8 @@ import '../src/collection-browser';
 
 @customElement('app-root')
 export class AppRoot extends LitElement {
-  private searchService = SearchService.default;
+  private searchService: SearchServiceInterface =
+    this.initSearchServiceFromUrlParams();
 
   private resizeObserver = new SharedResizeObserver();
 
@@ -73,6 +75,15 @@ export class AppRoot extends LitElement {
     this.analyticsManager?.sendEventNoSampling(ae);
   }
 
+  private initSearchServiceFromUrlParams() {
+    const params = new URL(window.location.href).searchParams;
+    return new SearchService({
+      baseUrl: params.get('search_base_url') ?? undefined,
+      servicePath: params.get('search_service_path') ?? undefined,
+      debuggingEnabled: !!params.get('debugging') ?? undefined,
+    });
+  }
+
   private searchPressed(e: Event) {
     e.preventDefault();
     this.searchQuery = this.baseQueryField.value;
@@ -122,23 +133,28 @@ export class AppRoot extends LitElement {
 
         <div id="search-types">
           Search type:
-          <input
-            type="radio"
-            id="metadata-search"
-            name="search-type"
-            value="metadata"
-            checked
-            @click=${this.searchTypeChanged}
-          />
-          <label for="metadata-search">Metadata</label>
-          <input
-            type="radio"
-            id="fulltext-search"
-            name="search-type"
-            value="fulltext"
-            @click=${this.searchTypeChanged}
-          />
-          <label for="fulltext-search">Full text</label>
+          <span class="search-type">
+            <input
+              type="radio"
+              id="metadata-search"
+              name="search-type"
+              value="metadata"
+              ?checked=${this.searchType === SearchType.METADATA}
+              @click=${this.searchTypeSelected}
+            />
+            <label for="metadata-search">Metadata</label>
+          </span>
+          <span class="search-type">
+            <input
+              type="radio"
+              id="fulltext-search"
+              name="search-type"
+              value="fulltext"
+              ?checked=${this.searchType === SearchType.FULLTEXT}
+              @click=${this.searchTypeSelected}
+            />
+            <label for="fulltext-search">Full text</label>
+          </span>
         </div>
 
         <div id="toggle-controls">
@@ -176,7 +192,7 @@ export class AppRoot extends LitElement {
         <div id="cell-controls" class="hidden">
           <div id="cell-size-control">
             <div>
-              <label for="cell-width-slider">Minimum cell width:</label>
+              <label for="cell-width-slider">Min cell width:</label>
               <input
                 type="range"
                 min="10"
@@ -201,40 +217,6 @@ export class AppRoot extends LitElement {
               />
               <span>${this.cellHeight}rem</span>
             </div>
-            <div>
-              <label for="show-outline-check">Show outlines:</label>
-              <input
-                type="checkbox"
-                id="show-outline-check"
-                @click=${this.outlineChanged}
-              />
-            </div>
-            <div>
-              <label for="show-facet-group-outline-check"
-                >Show Facet Group Outlines:</label
-              >
-              <input
-                type="checkbox"
-                id="show-facet-group-outline-check"
-                @click=${this.toggleFacetGroupOutline}
-              />
-            </div>
-            <div>
-              <label for="simulate-login">Simulate Login:</label>
-              <input
-                type="checkbox"
-                id="simulate-login"
-                @click=${this.loginChanged}
-              />
-            </div>
-            <div>
-              <label for="show-dummy-snippets">Show dummy snippets:</label>
-              <input
-                type="checkbox"
-                id="show-dummy-snippets"
-                @click=${this.snippetsChanged}
-              />
-            </div>
           </div>
           <div id="cell-gap-control">
             <div>
@@ -265,6 +247,42 @@ export class AppRoot extends LitElement {
             </div>
           </div>
         </div>
+        <div id="checkbox-controls">
+          <div class="checkbox-control">
+            <input
+              type="checkbox"
+              id="show-outline-check"
+              @click=${this.outlineChanged}
+            />
+            <label for="show-outline-check">Show cell outlines</label>
+          </div>
+          <div class="checkbox-control">
+            <input
+              type="checkbox"
+              id="show-facet-group-outline-check"
+              @click=${this.toggleFacetGroupOutline}
+            />
+            <label for="show-facet-group-outline-check">
+              Show facet group outlines
+            </label>
+          </div>
+          <div class="checkbox-control">
+            <input
+              type="checkbox"
+              id="simulate-login"
+              @click=${this.loginChanged}
+            />
+            <label for="simulate-login">Simulate login</label>
+          </div>
+          <div class="checkbox-control">
+            <input
+              type="checkbox"
+              id="show-dummy-snippets"
+              @click=${this.snippetsChanged}
+            />
+            <label for="show-dummy-snippets">Show dummy snippets</label>
+          </div>
+        </div>
       </div>
 
       <div id="collection-browser-container">
@@ -281,6 +299,7 @@ export class AppRoot extends LitElement {
           .analyticsHandler=${this.analyticsHandler}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
+          @searchTypeChanged=${this.searchTypeChanged}
         >
         </collection-browser>
       </div>
@@ -288,11 +307,17 @@ export class AppRoot extends LitElement {
     `;
   }
 
-  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {
+  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {
     this.searchQuery = e.detail.baseQuery;
   }
 
-  private searchTypeChanged(e: Event) {
+  /** Handler for search type changes coming from collection browser */
+  private searchTypeChanged(e: CustomEvent<SearchType>): void {
+    this.searchType = e.detail;
+  }
+
+  /** Handler for user input selecting a search type */
+  private searchTypeSelected(e: Event) {
     const target = e.target as HTMLInputElement;
     this.searchType =
       target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;
@@ -494,8 +519,17 @@ export class AppRoot extends LitElement {
       display: flex;
     }
 
+    #search-and-page-inputs > form {
+      margin-right: 1rem;
+    }
+
+    .search-type {
+      margin-right: 1rem;
+    }
+
     #cell-controls {
       display: flex;
+      flex-wrap: wrap;
     }
 
     #cell-controls label {
@@ -503,10 +537,25 @@ export class AppRoot extends LitElement {
       width: 10rem;
     }
 
+    #cell-size-control,
+    #cell-gap-control {
+      flex-basis: calc(50% - 1rem);
+      flex-grow: 1;
+    }
+
     #cell-gap-control {
       margin-left: 1rem;
     }
 
+    #checkbox-controls {
+      padding-top: 0.5rem;
+      flex-wrap: wrap;
+    }
+
+    .checkbox-control {
+      flex-basis: 50%;
+    }
+
     #last-event {
       background-color: aliceblue;
       padding: 5px;

package/src/collection-browser.ts

@@ -155,8 +155,6 @@ export class CollectionBrowser
 
   @state() private facetsLoading = false;
 
-  @state() private lendingFacetLoading = false;
-
   @state() private fullYearAggregationLoading = false;
 
   @state() private aggregations?: Record<string, Aggregation>;
@@ -306,7 +304,10 @@ export class CollectionBrowser
       this.placeholderType = 'empty-query';
     }
 
-    if (!this.searchResultsLoading && this.totalResults === 0) {
+    if (
+      (!this.searchResultsLoading && this.totalResults === 0) ||
+      !this.searchService
+    ) {
       this.placeholderType = 'null-result';
     }
   }
@@ -348,7 +349,6 @@ export class CollectionBrowser
         </div>
       </div>
       <div id="right-column" class="column">
-        ${this.searchResultsLoading ? this.loadingTemplate : nothing}
         ${this.sortFilterBarTemplate}
         ${this.displayMode === `list-compact`
           ? this.listHeaderTemplate
@@ -499,11 +499,7 @@ export class CollectionBrowser
   }
 
   private get facetDataLoading(): boolean {
-    return (
-      this.facetsLoading ||
-      this.lendingFacetLoading ||
-      this.fullYearAggregationLoading
-    );
+    return this.facetsLoading || this.fullYearAggregationLoading;
   }
 
   private get mobileFacetsTemplate() {
@@ -530,7 +526,6 @@ export class CollectionBrowser
 
   private get facetsTemplate() {
     return html`
-      ${this.facetsLoading ? this.loadingTemplate : nothing}
       <collection-facets
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
@@ -630,6 +625,9 @@ export class CollectionBrowser
     if (changed.has('baseQuery')) {
       this.emitBaseQueryChanged();
     }
+    if (changed.has('searchType')) {
+      this.emitSearchTypeChanged();
+    }
     if (changed.has('currentPage') || changed.has('displayMode')) {
       this.persistState();
     }
@@ -705,6 +703,14 @@ export class CollectionBrowser
     );
   }
 
+  private emitSearchTypeChanged() {
+    this.dispatchEvent(
+      new CustomEvent<SearchType>('searchTypeChanged', {
+        detail: this.searchType,
+      })
+    );
+  }
+
   private disconnectResizeObserver(
     resizeObserver: SharedResizeObserverInterface
   ) {
@@ -775,20 +781,15 @@ export class CollectionBrowser
     this.initialQueryChangeHappened = true;
     // if the query changed as part of a window.history pop event, we don't want to
     // persist the state because it overwrites the forward history
+
     if (!this.historyPopOccurred) {
       this.persistState();
       this.historyPopOccurred = false;
     }
 
-    // Ensure lending aggregations don't carry over to non-metadata searches
-    if (this.searchType !== SearchType.METADATA) {
-      delete this.aggregations?.lending;
-    }
-
     await Promise.all([
       this.doInitialPageFetch(),
       this.fetchFacets(),
-      this.fetchLendingFacet(),
       this.fetchFullYearHistogram(),
     ]);
   }
@@ -810,6 +811,8 @@ export class CollectionBrowser
   private restoreState() {
     const restorationState = this.restorationStateHandler.getRestorationState();
     this.displayMode = restorationState.displayMode;
+    if (restorationState.searchType != null)
+      this.searchType = restorationState.searchType;
     this.selectedSort = restorationState.selectedSort ?? SortField.relevance;
     this.sortDirection = restorationState.sortDirection ?? null;
     this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
@@ -831,6 +834,7 @@ export class CollectionBrowser
   private persistState() {
     const restorationState: RestorationState = {
       displayMode: this.displayMode,
+      searchType: this.searchType,
       sortParam: this.sortParam ?? undefined,
       selectedSort: this.selectedSort,
       sortDirection: this.sortDirection ?? undefined,
@@ -957,34 +961,7 @@ export class CollectionBrowser
     const results = await this.searchService?.search(params, this.searchType);
     this.facetsLoading = false;
 
-    this.aggregations = {
-      ...this.aggregations,
-      ...results?.success?.response.aggregations,
-    };
-  }
-
-  private async fetchLendingFacet() {
-    // Only retrieve lending facet for metadata searches
-    if (this.searchType !== SearchType.METADATA) return;
-    if (!this.fullQuery) return;
-
-    const params: SearchParams = {
-      query: this.fullQuery,
-      rows: 0,
-      aggregations: {
-        simpleParams: ['lending___status'],
-      },
-      aggregationsSize: 10, // Larger size to ensure we get all possible statuses
-    };
-
-    this.lendingFacetLoading = true;
-    const results = await this.searchService?.search(params, this.searchType);
-    this.lendingFacetLoading = false;
-
-    this.aggregations = {
-      ...this.aggregations,
-      ...results?.success?.response.aggregations,
-    };
+    this.aggregations = results?.success?.response.aggregations;
   }
 
   /**
@@ -1037,7 +1014,8 @@ export class CollectionBrowser
     this.fullYearAggregationLoading = false;
 
     this.fullYearsHistogramAggregation =
-      results?.success?.response?.aggregations?.year_histogram;
+      results?.success?.response?.aggregations?.year_histogram ??
+      results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
   }
 
   private scrollToPage(pageNumber: number) {
@@ -1233,6 +1211,7 @@ export class CollectionBrowser
         ),
         volume: result.volume?.value,
         viewCount: result.downloads?.value ?? 0,
+        weeklyViewCount: result.week?.value,
         loginRequired,
         contentWarning,
       });
@@ -1423,7 +1402,7 @@ export class CollectionBrowser
 
     #results-total {
       display: flex;
-      align-items: center;
+      align-items: baseline;
       margin-bottom: 5rem;
     }
 
@@ -1438,9 +1417,8 @@ export class CollectionBrowser
     }
 
     #big-results-label {
-      font-size: 1rem;
+      font-size: 1.4rem;
       font-weight: 200;
-      text-transform: uppercase;
     }
 
     #list-header {

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

@@ -0,0 +1,40 @@
+import { css, html, LitElement, CSSResultGroup } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('facet-tombstone-row')
+export class FacetTombstoneRow extends LitElement {
+  render() {
+    return html`
+      <div id="row">
+        <input type="checkbox" disabled />
+        <div class="tombstone-line"></div>
+        <div class="tombstone-line"></div>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      #row {
+        display: grid;
+        grid-template-columns: 15px 1fr 36px;
+        grid-gap: 9px 6px;
+        align-items: center;
+        margin: 2.5px auto;
+        border: 1px solid transparent;
+      }
+
+      .tombstone-line {
+        background: #ddd;
+        height: 6px;
+        border-radius: 50px;
+      }
+
+      input[type='checkbox'] {
+        width: 15px;
+        height: 15px;
+        margin: 0;
+      }
+    `;
+  }
+}

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

@@ -168,14 +168,16 @@ export class FacetsTemplate extends LitElement {
                     <span class="eye-closed">${eyeClosedIcon}</span>
                   </label>
                 </div>
-                <div
+                <label
                   for=${showOnlyCheckboxId}
                   class="facet-info-display"
                   title=${onlyShowText}
                 >
                   <div class="facet-title">${bucketTextDisplay}</div>
-                  <div class="facet-count">${bucket.count}</div>
-                </div>
+                  <div class="facet-count">
+                    ${bucket.count.toLocaleString()}
+                  </div>
+                </label>
               </div>
             `;
           }

package/src/collection-facets.ts

@@ -8,6 +8,7 @@ import {
   TemplateResult,
 } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import type {
   Aggregation,
   Bucket,
@@ -39,6 +40,7 @@ import {
 import type { LanguageCodeHandlerInterface } from './language-code-handler/language-code-handler';
 import './collection-facets/more-facets-content';
 import './collection-facets/facets-template';
+import './collection-facets/facet-tombstone-row';
 import {
   analyticsActions,
   analyticsCategories,
@@ -111,7 +113,9 @@ export class CollectionFacets extends LitElement {
   render() {
     return html`
       <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
-        ${this.showHistogramDatePicker && this.fullYearsHistogramAggregation
+        ${(this.showHistogramDatePicker &&
+          this.fullYearsHistogramAggregation) ||
+        this.fullYearAggregationLoading
           ? html`
               <div class="facet-group">
                 <h1>Year Published <feature-feedback></feature-feedback></h1>
@@ -146,19 +150,21 @@ export class CollectionFacets extends LitElement {
 
   private get histogramTemplate() {
     const { fullYearsHistogramAggregation } = this;
-    return html`
-      <histogram-date-range
-        .minDate=${fullYearsHistogramAggregation?.first_bucket_key}
-        .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}
-        .minSelectedDate=${this.minSelectedDate}
-        .maxSelectedDate=${this.maxSelectedDate}
-        .updateDelay=${100}
-        missingDataMessage="..."
-        .width=${180}
-        .bins=${fullYearsHistogramAggregation?.buckets as number[]}
-        @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
-      ></histogram-date-range>
-    `;
+    return this.fullYearAggregationLoading
+      ? html`<div class="histogram-loading-indicator">&hellip;</div>` // Ellipsis block
+      : html`
+          <histogram-date-range
+            .minDate=${fullYearsHistogramAggregation?.first_bucket_key}
+            .maxDate=${fullYearsHistogramAggregation?.last_bucket_key}
+            .minSelectedDate=${this.minSelectedDate}
+            .maxSelectedDate=${this.maxSelectedDate}
+            .updateDelay=${100}
+            missingDataMessage="..."
+            .width=${180}
+            .bins=${fullYearsHistogramAggregation?.buckets as number[]}
+            @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
+          ></histogram-date-range>
+        `;
   }
 
   private histogramDateRangeUpdated(
@@ -366,7 +372,8 @@ export class CollectionFacets extends LitElement {
   private getFacetGroupTemplate(
     facetGroup: FacetGroup
   ): TemplateResult | typeof nothing {
-    if (facetGroup.buckets.length === 0) return nothing;
+    if (!this.facetsLoading && facetGroup.buckets.length === 0) return nothing;
+
     const { key } = facetGroup;
     const isOpen = this.openFacets[key];
     const collapser = html`
@@ -390,16 +397,32 @@ export class CollectionFacets extends LitElement {
           >
             ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
           </h1>
-          ${this.moreFacetsSortingIcon(facetGroup)}
+          ${this.facetsLoading
+            ? nothing
+            : this.moreFacetsSortingIcon(facetGroup)}
         </div>
         <div class="facet-group-content ${isOpen ? 'open' : ''}">
-          ${this.getFacetTemplate(facetGroup)}
-          ${this.searchMoreFacetsLink(facetGroup)}
+          ${this.facetsLoading
+            ? this.getTombstoneFacetGroupTemplate()
+            : html`
+                ${this.getFacetTemplate(facetGroup)}
+                ${this.searchMoreFacetsLink(facetGroup)}
+              `}
         </div>
       </div>
     `;
   }
 
+  private getTombstoneFacetGroupTemplate(): TemplateResult {
+    // Render five tombstone rows
+    return html`
+      ${map(
+        Array(5).fill(null),
+        () => html`<facet-tombstone-row></facet-tombstone-row>`
+      )}
+    `;
+  }
+
   private moreFacetsSortingIcon(
     facetGroup: FacetGroup
   ): TemplateResult | typeof nothing {
@@ -531,6 +554,14 @@ export class CollectionFacets extends LitElement {
         opacity: 0.5;
       }
 
+      .histogram-loading-indicator {
+        width: 100%;
+        height: 2.25rem;
+        margin-top: 1.75rem;
+        font-size: 1.4rem;
+        text-align: center;
+      }
+
       .collapser {
         display: inline-block;
         cursor: pointer;

package/src/models.ts

@@ -24,6 +24,7 @@ export interface TileModel {
   title: string;
   viewCount: number;
   volume?: string;
+  weeklyViewCount?: number;
   loginRequired: boolean;
   contentWarning: boolean;
 }

package/src/restoration-state-handler.ts

@@ -1,4 +1,8 @@
-import type { SortDirection, SortParam } from '@internetarchive/search-service';
+import {
+  SearchType,
+  SortDirection,
+  SortParam,
+} from '@internetarchive/search-service';
 import { getCookie, setCookie } from 'typescript-cookie';
 import {
   MetadataFieldToSortField,
@@ -14,6 +18,7 @@ import {
 
 export interface RestorationState {
   displayMode?: CollectionDisplayMode;
+  searchType?: SearchType;
   sortParam?: SortParam;
   selectedSort?: SortField;
   sortDirection?: SortDirection;
@@ -87,12 +92,20 @@ export class RestorationStateHandler
   private persistQueryStateToUrl(state: RestorationState) {
     const url = new URL(window.location.href);
     const { searchParams } = url;
+    searchParams.delete('sin');
     searchParams.delete('sort');
     searchParams.delete('query');
     searchParams.delete('page');
     searchParams.delete('and[]');
     searchParams.delete('not[]');
 
+    if (state.searchType) {
+      searchParams.set(
+        'sin',
+        state.searchType === SearchType.FULLTEXT ? 'TXT' : ''
+      );
+    }
+
     if (state.sortParam) {
       const prefix = state.sortParam.direction === 'desc' ? '-' : '';
       searchParams.set('sort', `${prefix}${state.sortParam.field}`);
@@ -155,6 +168,7 @@ export class RestorationStateHandler
 
   private loadQueryStateFromUrl(): RestorationState {
     const url = new URL(window.location.href);
+    const searchInside = url.searchParams.get('sin');
     const pageNumber = url.searchParams.get('page');
     const searchQuery = url.searchParams.get('query');
     const sortQuery = url.searchParams.get('sort');
@@ -173,6 +187,10 @@ export class RestorationStateHandler
       },
     };
 
+    if (searchInside) {
+      restorationState.searchType =
+        searchInside === 'TXT' ? SearchType.FULLTEXT : SearchType.METADATA;
+    }
     if (pageNumber) {
       const parsed = parseInt(pageNumber, 10);
       restorationState.currentPage = parsed;