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

package/src/app-root.ts

@@ -395,6 +395,31 @@ export class AppRoot extends LitElement {
               </label>
             </div>
           </fieldset>
+
+          <fieldset class="user-profile-controls">
+            <legend>Set Placeholder Types</legend>
+            <div class="checkbox-control">
+              <input
+                id="enable-loading-placeholder"
+                type="radio"
+                @click=${() => this.setPlaceholderType('loading-placeholder')}
+                name="placeholder-radio"
+              />
+              <label for="enable-loading-placeholder"
+                >Loading Placeholder</label
+              >
+            </div>
+            <div class="checkbox-control">
+              <input
+                id="enable-empty-placeholder"
+                type="radio"
+                @click=${() => this.setPlaceholderType('error-placeholder')}
+                value="empty-placeholder"
+                name="placeholder-radio"
+              />
+              <label for="enable-empty-placeholder">Empty Placeholder</label>
+            </div>
+          </fieldset>
         </div>
         <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
           Toggle Search Controls
@@ -427,6 +452,20 @@ export class AppRoot extends LitElement {
     `;
   }
 
+  private async setPlaceholderType(type: String) {
+    switch (type) {
+      case 'loading-placeholder':
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.suppressPlaceholders = true;
+        this.collectionBrowser.clearResultsOnEmptyQuery = true;
+        this.requestUpdate();
+        await this.collectionBrowser.updateComplete;
+        break;
+      default:
+        break;
+    }
+  }
+
   private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {
     this.searchQuery = e.detail.baseQuery;
   }

package/src/collection-browser.ts

@@ -18,6 +18,7 @@ import type {
 } from '@internetarchive/infinite-scroller';
 import {
   CollectionExtraInfo,
+  PageElementName,
   SearchServiceInterface,
   SearchType,
   SortDirection,
@@ -97,7 +98,7 @@ export class CollectionBrowser
 
   @property({ type: String }) withinProfile?: string;
 
-  @property({ type: String }) profileElement?: string;
+  @property({ type: String }) profileElement?: PageElementName;
 
   @property({ type: String }) baseQuery?: string;
 
@@ -236,11 +237,6 @@ export class CollectionBrowser
    */
   private isScrollingToCell = false;
 
-  /**
-   * When we've reached the end of the data, stop trying to fetch more
-   */
-  private endOfDataReached = false;
-
   /**
    * When page width resizes from desktop to mobile, set true to
    * disable expand/collapse transition when loading.
@@ -332,6 +328,7 @@ export class CollectionBrowser
    * Sets the state for whether the initial set of search results is loading in.
    */
   setSearchResultsLoading(loading: boolean): void {
+    console.log('setting search results loading to', loading);
     this.searchResultsLoading = loading;
   }
 
@@ -339,6 +336,7 @@ export class CollectionBrowser
    * Sets the state for whether facet data is loading in
    */
   setFacetsLoading(loading: boolean): void {
+    console.log('setting facets loading to', loading);
     this.facetsLoading = loading;
   }
 
@@ -645,8 +643,8 @@ export class CollectionBrowser
         showSelectAll
         showUnselectAll
         @removeItems=${this.handleRemoveItems}
-        @selectAll=${this.dataSource.checkAllTiles}
-        @unselectAll=${this.dataSource.uncheckAllTiles}
+        @selectAll=${() => this.dataSource.checkAllTiles()}
+        @unselectAll=${() => this.dataSource.uncheckAllTiles()}
         @cancel=${() => {
           this.isManageView = false;
           this.dataSource.uncheckAllTiles();
@@ -663,10 +661,11 @@ export class CollectionBrowser
     this.dispatchEvent(
       new CustomEvent<{ items: ManageableItem[] }>('itemRemovalRequested', {
         detail: {
-          items: this.dataSource.checkedTileModels.map(model => ({
-            ...model,
-            date: formatDate(model.datePublished, 'long'),
-          })),
+          items: this.dataSource.checkedTileModels.map(model => {
+            const cloned = model.clone();
+            cloned.dateStr = formatDate(model.datePublished, 'long');
+            return cloned as ManageableItem;
+          }),
         },
       })
     );
@@ -1048,6 +1047,12 @@ export class CollectionBrowser
       }
     }
 
+    // Ensure obsolete data sources do not linger as reactive controllers indefinitely
+    if (changed.has('dataSource')) {
+      const oldDataSource = changed.get('dataSource');
+      if (oldDataSource) this.removeController(oldDataSource);
+    }
+
     if (changed.has('baseQuery')) {
       this.emitBaseQueryChanged();
     }
@@ -1119,7 +1124,7 @@ export class CollectionBrowser
     }
 
     if (changed.has('pagesToRender')) {
-      if (!this.endOfDataReached && this.infiniteScroller) {
+      if (!this.dataSource.endOfDataReached && this.infiniteScroller) {
         this.infiniteScroller.itemCount = this.estimatedTileCount;
       }
     }
@@ -1334,19 +1339,6 @@ export class CollectionBrowser
   // this lets us store the query key so we know if it's actually changed or not
   private previousQueryKey?: string;
 
-  /**
-   * Internal property to store the `resolve` function for the most recent
-   * `initialSearchComplete` promise, allowing us to resolve it at the appropriate time.
-   */
-  private _initialSearchCompleteResolver!: (val: boolean) => void;
-
-  /**
-   * Internal property to store the private value backing the `initialSearchComplete` getter.
-   */
-  private _initialSearchCompletePromise: Promise<boolean> = new Promise(res => {
-    this._initialSearchCompleteResolver = res;
-  });
-
   /**
    * A Promise which, after each query change, resolves once the fetches for the initial
    * search have completed. Waits for *both* the hits and aggregations fetches to finish.
@@ -1355,7 +1347,7 @@ export class CollectionBrowser
    * one, to ensure you do not await an obsolete promise from the previous update.
    */
   get initialSearchComplete(): Promise<boolean> {
-    return this._initialSearchCompletePromise;
+    return this.dataSource.initialSearchComplete;
   }
 
   private async handleQueryChange() {
@@ -1389,7 +1381,6 @@ export class CollectionBrowser
 
     this.tileModelOffset = 0;
     this.totalResults = undefined;
-    this.endOfDataReached = false;
     this.pagesToRender =
       this.initialPageNumber === 1
         ? 2 // First two pages are batched into one request when starting from page 1
@@ -1420,16 +1411,8 @@ export class CollectionBrowser
     }
     this.historyPopOccurred = false;
 
-    // Reset the `initialSearchComplete` promise with a new value for the imminent search
-    this._initialSearchCompletePromise = new Promise(res => {
-      this._initialSearchCompleteResolver = res;
-    });
-
     // Fire the initial page and facets requests
-    await this.dataSource.handleQueryChange();
-
-    // Resolve the `initialSearchComplete` promise for this search
-    this._initialSearchCompleteResolver(true);
+    //await this.dataSource.handleQueryChange();
   }
 
   private setupStateRestorationObserver() {
@@ -1554,6 +1537,7 @@ export class CollectionBrowser
    * Sets the total number of tiles displayed in the infinite scroller.
    */
   setTileCount(count: number): void {
+    console.log('Setting scroller tile count to', count);
     if (this.infiniteScroller) {
       this.infiniteScroller.itemCount = count;
     }
@@ -1716,7 +1700,7 @@ export class CollectionBrowser
    * increase the number of pages to render and start fetching data for the new page
    */
   private scrollThresholdReached() {
-    if (!this.endOfDataReached) {
+    if (!this.dataSource.endOfDataReached) {
       this.pagesToRender += 1;
       this.dataSource.fetchPage(this.pagesToRender);
     }
@@ -2040,9 +2024,9 @@ export class CollectionBrowser
             --collectionBrowserCellMinWidth,
             100%
           );
-          --infiniteScrollerCellMinHeight: 34px; /* override infinite scroller component */
+          --infiniteScrollerCellMinHeight: 45px; /* override infinite scroller component */
           --infiniteScrollerCellMaxHeight: 56px;
-          --infiniteScrollerRowGap: 0px;
+          --infiniteScrollerRowGap: 10px;
         }
 
         infinite-scroller.list-detail {