@internetarchive/collection-browser 0.4.3-alpha.9 → 0.4.4-alpha

package/src/app-root.ts

@@ -113,188 +113,198 @@ export class AppRoot extends LitElement {
     this.collectionBrowser.baseQuery = this.searchQuery;
   }
 
+  private get getClass() {
+    const searchParams = new URLSearchParams(window.location.search);
+
+    return searchParams.get('hide-dev-tools') ? 'hidden' : '';
+  }
+
   render() {
     return html`
-      <div id="dev-tools">
-        <div id="search-and-page-inputs">
-          <form @submit=${this.searchPressed}>
-            Query:
-            <input
-              type="text"
-              id="base-query-field"
-              .value=${this.searchQuery ?? ''}
-            />
-            <input type="submit" value="Search" />
-          </form>
-          <form @submit=${this.changePagePressed}>
-            Page: <input type="number" value="1" id="page-number-input" />
-            <input type="submit" value="Go" />
-          </form>
-        </div>
+      <div class="dev-tool-container">
+        <div id="dev-tools" class=${this.getClass}>
+          <div id="search-and-page-inputs">
+            <form @submit=${this.searchPressed}>
+              Query:
+              <input
+                type="text"
+                id="base-query-field"
+                .value=${this.searchQuery ?? ''}
+              />
+              <input type="submit" value="Search" />
+            </form>
+            <form @submit=${this.changePagePressed}>
+              Page: <input type="number" value="1" id="page-number-input" />
+              <input type="submit" value="Go" />
+            </form>
+          </div>
 
-        <div id="search-types">
-          Search type:
-          <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="search-types">
+            Search type:
+            <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">
-          <button
-            @click=${() => {
-              const cellControls =
-                this.shadowRoot?.getElementById('cell-controls');
-              cellControls?.classList.toggle('hidden');
-              const checkboxControls =
-                this.shadowRoot?.getElementById('checkbox-controls');
-              checkboxControls?.classList.toggle('hidden');
-            }}
-          >
-            Toggle Controls
-          </button>
-          <button
-            @click=${() => {
-              const details = this.shadowRoot?.getElementById(
-                'latest-event-details'
-              );
-              details?.classList.toggle('hidden');
-            }}
-          >
-            Last Event Captured
-          </button>
-        </div>
+          <div id="toggle-controls">
+            <button
+              @click=${() => {
+                const details =
+                  this.shadowRoot?.getElementById('cell-size-control');
+                details?.classList.toggle('hidden');
+                const rowGapControls =
+                  this.shadowRoot?.getElementById('cell-gap-control');
+                rowGapControls?.classList.toggle('hidden');
+              }}
+            >
+              Toggle Cell Controls
+            </button>
+            <button
+              @click=${() => {
+                const details = this.shadowRoot?.getElementById(
+                  'latest-event-details'
+                );
+                details?.classList.toggle('hidden');
+              }}
+            >
+              Last Event Captured
+            </button>
+          </div>
 
-        <div id="last-event">
-          <pre id="latest-event-details" class="hidden">
-            ${JSON.stringify(this.latestAction, null, 2)}
-          </pre
-          >
-        </div>
+          <div id="last-event">
+            <pre id="latest-event-details" class="hidden">
+              ${JSON.stringify(this.latestAction, null, 2)}
+            </pre
+            >
+          </div>
 
-        <div id="cell-controls">
-          <div id="cell-size-control">
-            <div>
-              <label for="cell-width-slider">Min cell width:</label>
+          <div id="cell-controls" class="hidden">
+            <div id="cell-size-control">
+              <div>
+                <label for="cell-width-slider">Min cell width:</label>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  value="18"
+                  step="0.1"
+                  id="cell-width-slider"
+                  @input=${this.widthChanged}
+                />
+                <span>${this.cellWidth}rem</span>
+              </div>
+              <div>
+                <label for="cell-height-slider">Cell height:</label>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  value="29"
+                  step="0.1"
+                  id="cell-height-slider"
+                  @input=${this.heightChanged}
+                />
+                <span>${this.cellHeight}rem</span>
+              </div>
+            </div>
+            <div id="cell-gap-control">
+              <div>
+                <label for="cell-row-gap-slider">Row gap:</label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5"
+                  value="1.7"
+                  step="0.1"
+                  id="cell-row-gap-slider"
+                  @input=${this.rowGapChanged}
+                />
+                <span>${this.rowGap}rem</span>
+              </div>
+              <div>
+                <label for="cell-col-gap-slider">Col gap:</label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5"
+                  value="1.7"
+                  step="0.1"
+                  id="cell-col-gap-slider"
+                  @input=${this.colGapChanged}
+                />
+                <span>${this.colGap}rem</span>
+              </div>
+            </div>
+          </div>
+          <div id="checkbox-controls">
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="10"
-                max="100"
-                value="18"
-                step="0.1"
-                id="cell-width-slider"
-                @input=${this.widthChanged}
+                type="checkbox"
+                id="show-outline-check"
+                @click=${this.outlineChanged}
               />
-              <span>${this.cellWidth}rem</span>
+              <label for="show-outline-check">Show cell outlines</label>
             </div>
-            <div>
-              <label for="cell-height-slider">Cell height:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="10"
-                max="100"
-                value="29"
-                step="0.1"
-                id="cell-height-slider"
-                @input=${this.heightChanged}
+                type="checkbox"
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
               />
-              <span>${this.cellHeight}rem</span>
+              <label for="show-facet-group-outline-check">
+                Show facet group outlines
+              </label>
             </div>
-          </div>
-          <div id="cell-gap-control">
-            <div>
-              <label for="cell-row-gap-slider">Row gap:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-row-gap-slider"
-                @input=${this.rowGapChanged}
+                type="checkbox"
+                id="simulate-login"
+                @click=${this.loginChanged}
               />
-              <span>${this.rowGap}rem</span>
+              <label for="simulate-login">Simulate login</label>
             </div>
-            <div>
-              <label for="cell-col-gap-slider">Col gap:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-col-gap-slider"
-                @input=${this.colGapChanged}
+                type="checkbox"
+                id="show-dummy-snippets"
+                @click=${this.snippetsChanged}
               />
-              <span>${this.colGap}rem</span>
+              <label for="show-dummy-snippets">Show dummy snippets</label>
+            </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-date-picker"
+                checked
+                @click=${this.datePickerChanged}
+              />
+              <label for="enable-date-picker">Enable date picker</label>
             </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 class="checkbox-control">
-            <input
-              type="checkbox"
-              id="enable-date-picker"
-              checked
-              @click=${this.datePickerChanged}
-            />
-            <label for="enable-date-picker">Enable date picker</label>
-          </div>
-        </div>
+        <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
+          Toggle Search Controls
+        </button>
       </div>
-
       <div id="collection-browser-container">
         <collection-browser
           .baseNavigationUrl=${'https://archive.org'}
@@ -319,7 +329,6 @@ export class AppRoot extends LitElement {
 
   private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {
     this.searchQuery = e.detail.baseQuery;
-    this.collectionBrowser.clearFilters();
   }
 
   /** Handler for search type changes coming from collection browser */
@@ -360,6 +369,29 @@ export class AppRoot extends LitElement {
     }
   }
 
+  private toggleDevTools() {
+    const pageUrl = new URL(window.location.href);
+    const { searchParams } = pageUrl;
+
+    if (searchParams.get('hide-dev-tools')) {
+      searchParams.delete('hide-dev-tools');
+    } else {
+      searchParams.set('hide-dev-tools', 'true');
+    }
+
+    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');
+
+    if (window.history.replaceState) {
+      window.history.replaceState(
+        {
+          path: pageUrl.toString(),
+        },
+        '',
+        pageUrl.toString()
+      );
+    }
+  }
+
   private toggleFacetGroupOutline(e: Event) {
     const target = e.target as HTMLInputElement;
     if (target.checked) {
@@ -511,10 +543,6 @@ export class AppRoot extends LitElement {
       font-size: 1.6rem;
     }
 
-    collection-browser {
-      margin-top: 20rem;
-    }
-
     modal-manager.showFacetGroupOutlines,
     collection-browser.showFacetGroupOutlines {
       --facet-row-border-top: 1px solid red;
@@ -525,8 +553,11 @@ export class AppRoot extends LitElement {
       width: 300px;
     }
 
+    .dev-tool-container {
+      position: relative;
+    }
     #dev-tools {
-      position: fixed;
+      position: relative;
       top: 0;
       left: 0;
       z-index: 1;
@@ -535,12 +566,27 @@ export class AppRoot extends LitElement {
       padding: 0.5rem 1rem;
       border: 1px solid black;
       font-size: 1.4rem;
+      width: 75%;
+      background: #ffffffb3;
     }
 
     #dev-tools > * {
       display: flex;
     }
 
+    #toggle-dev-tools-btn {
+      position: fixed;
+      left: 77.4%;
+      top: 0;
+      background: red;
+      padding: 5px;
+      color: white;
+      font-size: 1.4rem;
+      margin: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
+
     #search-and-page-inputs > form {
       margin-right: 1rem;
     }
@@ -585,8 +631,7 @@ export class AppRoot extends LitElement {
     }
 
     .hidden {
-      /* If this class is present, we want the element hidden regardless of specificity */
-      display: none !important;
+      display: none;
     }
 
     #toggle-controls {

package/src/collection-browser.ts

@@ -514,6 +514,10 @@ export class CollectionBrowser
     this.selectedCreatorFilter = e.detail.selectedLetter;
   }
 
+  private get facetDataLoading(): boolean {
+    return this.facetsLoading || this.fullYearAggregationLoading;
+  }
+
   private get mobileFacetsTemplate() {
     return html`
       <div id="mobile-filter-collapse">
@@ -556,8 +560,8 @@ export class CollectionBrowser
         .filterMap=${this.filterMap}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetsLoading}
-        ?fullYearAggregationLoading=${this.facetsLoading}
+        ?facetsLoading=${this.facetDataLoading}
+        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
         .onFacetClick=${this.facetClickHandler}
         .analyticsHandler=${this.analyticsHandler}
       >
@@ -808,7 +812,12 @@ export class CollectionBrowser
       this.historyPopOccurred = false;
     }
 
-    await Promise.all([this.doInitialPageFetch(), this.fetchFacets()]);
+    await Promise.all([
+      this.doInitialPageFetch(),
+      this.fetchFacets(),
+      // Only fetch histogram data separately if we need it b/c of date filters
+      this.shouldRequestYearHistogram && this.fetchFullYearHistogram(),
+    ]);
   }
 
   private setupStateRestorationObserver() {
@@ -986,6 +995,22 @@ export class CollectionBrowser
     return fullQuery;
   }
 
+  /** The full query without any year facets or date range clauses */
+  private get fullQueryWithoutDates(): string | undefined {
+    if (!this.baseQuery) return undefined;
+    let fullQuery = this.baseQuery;
+
+    const { facetQueryWithoutYear, sortFilterQueries } = this;
+
+    if (facetQueryWithoutYear) {
+      fullQuery += ` AND ${facetQueryWithoutYear}`;
+    }
+    if (sortFilterQueries) {
+      fullQuery += ` AND ${sortFilterQueries}`;
+    }
+    return fullQuery;
+  }
+
   /**
    * Generates a query string for the given facets
    *
@@ -1002,6 +1027,24 @@ export class CollectionBrowser
     return this.joinFacetClauses(facetClauses);
   }
 
+  /**
+   * Generates a query string for the currently selected facets, excluding 'year' facets.
+   *
+   * Example: `mediatype:("collection" OR "audio" OR -"etree") AND subject:("foo" OR -"bar")`
+   */
+  private get facetQueryWithoutYear(): string | undefined {
+    if (!this.selectedFacets) return undefined;
+    const facetClauses = [];
+    for (const [facetName, facetValues] of Object.entries(
+      this.selectedFacets
+    )) {
+      if (facetName !== 'year') {
+        facetClauses.push(this.buildFacetClause(facetName, facetValues));
+      }
+    }
+    return this.joinFacetClauses(facetClauses);
+  }
+
   /**
    * Builds an OR-joined facet clause for the given facet name and values.
    *
@@ -1131,11 +1174,83 @@ export class CollectionBrowser
 
     this.aggregations = results?.success?.response.aggregations;
 
+    // If we're not fetching year histogram data separately, set it from the newly-fetched aggregations
+    if (!this.shouldRequestYearHistogram) {
+      this.fullYearsHistogramAggregation =
+        results?.success?.response?.aggregations?.year_histogram ??
+        results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
+    }
+  }
+
+  /**
+   * If we haven't changed the query, we don't need to fetch the full year histogram
+   *
+   * @private
+   * @type {string}
+   * @memberof CollectionBrowser
+   */
+  private previousFullQueryNoDate?: string;
+
+  /**
+   * The query key is a string that uniquely identifies the current query
+   * without the date range.
+   *
+   * If this doesn't change, we don't need to re-fetch the histogram date range
+   */
+  private get fullQueryNoDateKey() {
+    return `${this.fullQueryWithoutDates}-${this.searchType}-${this.sortParam?.field}-${this.sortParam?.direction}`;
+  }
+
+  /**
+   * This method is similar to fetching the facets above,
+   * but only fetching the year histogram. There is a subtle difference
+   * in how you have to fetch the year histogram where you can't use the
+   * advanced JSON syntax like the other aggregations. It's a special
+   * case that @ximm put it place.
+   */
+  private async fetchFullYearHistogram(): Promise<void> {
+    const { fullQueryNoDateKey } = this;
+    if (
+      !this.fullQueryWithoutDates ||
+      fullQueryNoDateKey === this.previousFullQueryNoDate
+    ) {
+      return;
+    }
+    this.previousFullQueryNoDate = fullQueryNoDateKey;
+
+    const aggregations = {
+      simpleParams: ['year'],
+    };
+
+    const params = {
+      query: this.fullQueryWithoutDates,
+      aggregations,
+      rows: 0,
+    };
+
+    this.fullYearAggregationLoading = true;
+    const results = await this.searchService?.search(params, this.searchType);
+    this.fullYearAggregationLoading = false;
+
     this.fullYearsHistogramAggregation =
       results?.success?.response?.aggregations?.year_histogram ??
       results?.success?.response?.aggregations?.['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
   }
 
+  /**
+   * We only want to send a separate request for the year_histogram data
+   * if (a) the date picker component is enabled and (b) there is a year facet or date-range filter applied.
+   *
+   * Otherwise, we should just be using the histogram data supplied by the "normal" facet request.
+   */
+  private get shouldRequestYearHistogram() {
+    const datePickerEnabled = this.showHistogramDatePicker;
+    const hasDateRange = !!this.dateRangeQueryClause;
+    const hasYearFacet =
+      Object.keys(this.selectedFacets?.year ?? {}).length > 0;
+    return datePickerEnabled && (hasDateRange || hasYearFacet);
+  }
+
   private scrollToPage(pageNumber: number) {
     const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
     // without this setTimeout, Safari just pauses until the `fetchPage` is complete
@@ -1315,6 +1430,8 @@ export class CollectionBrowser
       tiles.push({
         averageRating: result.avg_rating?.value,
         collections: result.collection?.values ?? [],
+        collectionFilesCount: result.collection_files_count?.value ?? 0,
+        collectionSize: result.collection_size?.value ?? 0,
         commentCount: result.num_reviews?.value ?? 0,
         creator: result.creator?.value,
         creators: result.creator?.values ?? [],
@@ -1542,11 +1659,13 @@ export class CollectionBrowser
       position: relative;
       border-left: 1px solid rgb(232, 232, 232);
       padding-left: 1rem;
+      margin-bottom: 1.5rem; // add space in the bottom of infinite scroller
     }
 
     .mobile #right-column {
       border-left: none;
       padding: 0;
+      margin-bottom: 1.5rem;
     }
 
     #left-column {

package/src/models.ts

@@ -4,7 +4,9 @@ export interface TileModel {
   averageRating?: number;
   collectionIdentifier?: string;
   collectionName?: string;
+  collectionFilesCount: number;
   collections: string[];
+  collectionSize: number;
   commentCount: number;
   creator?: string;
   creators: string[];