Demo: add placeholder views

index.ts

@@ -1,6 +1,11 @@
 export { CollectionBrowser } from './src/collection-browser';
+export {
+  CollectionBrowserDataSource,
+  CollectionBrowserDataSourceInterface,
+} from './src/data-source/collection-browser-data-source';
+export { CollectionBrowserQueryState } from './src/data-source/models';
 export { SortFilterBar } from './src/sort-filter-bar/sort-filter-bar';
-export { CollectionDisplayMode, SortField } from './src/models';
+export { CollectionDisplayMode, SortField, TileModel } from './src/models';
 export { CollectionBrowserLoadingTile } from './src/tiles/collection-browser-loading-tile';
 export { CollectionTile } from './src/tiles/grid/collection-tile';
 export { AccountTile } from './src/tiles/grid/account-tile';

package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "1.14.15",
+  "version": "1.14.17-beta.5",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -14,6 +14,7 @@
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "circular": "madge --circular --extensions ts .",
     "test": "tsc && yarn run lint && yarn run circular && wtr --coverage",
+    "test:fast": "tsc && wtr --coverage",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
     "deploy": "yarn run deploy:run -e $(git branch --show-current)",
     "deploy:run": "yarn run prepare:ghpages && touch ghpages/.nojekyll && yarn run deploy:gh",
@@ -23,7 +24,6 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@internetarchive/analytics-manager": "^0.1.2",
-    "@internetarchive/collection-name-cache": "^0.2.16",
     "@internetarchive/feature-feedback": "^0.1.4",
     "@internetarchive/field-parsers": "^0.1.4",
     "@internetarchive/histogram-date-range": "^1.2.0",
@@ -32,7 +32,7 @@
     "@internetarchive/infinite-scroller": "1.0.1",
     "@internetarchive/local-cache": "^0.2.1",
     "@internetarchive/modal-manager": "^0.2.8",
-    "@internetarchive/search-service": "^1.2.4",
+    "@internetarchive/search-service": "^1.2.5-alpha.10",
     "@internetarchive/shared-resize-observer": "^0.2.0",
     "@lit/localize": "^0.11.2",
     "dompurify": "^2.3.6",

src/app-root.ts

@@ -9,11 +9,9 @@ import {
   SearchType,
   StringField,
 } from '@internetarchive/search-service';
-import { LocalCache } from '@internetarchive/local-cache';
 import { html, css, LitElement, PropertyValues, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import { CollectionNameCache } from '@internetarchive/collection-name-cache';
 
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';
@@ -28,13 +26,6 @@ export class AppRoot extends LitElement {
 
   private resizeObserver = new SharedResizeObserver();
 
-  private localCache = new LocalCache();
-
-  private collectionNameCache = new CollectionNameCache({
-    searchService: this.searchService,
-    localCache: this.localCache,
-  });
-
   @state() private toggleSlots: boolean = false;
 
   @state() private currentPage?: number;
@@ -404,6 +395,55 @@ export class AppRoot extends LitElement {
               </label>
             </div>
           </fieldset>
+          <fieldset class="Placeholder-type">
+            <legend>Placeholder type</legend>
+            <div class="checkbox-control">
+              <input
+                type="button"
+                id="placeholder-empty-query"
+                @click=${() => this.showEmptyPlaceholder('empty query')}
+                value="empty query"
+              />
+            </div>
+            ${this.withinCollection
+              ? html`
+                  <div class="checkbox-control">
+                    <input
+                      type="button"
+                      id="placeholder-collection-err"
+                      @click=${() =>
+                        this.showEmptyPlaceholder('collection error')}
+                      value="collection error"
+                    />
+                  </div>
+                  <div class="checkbox-control">
+                    <input
+                      type="button"
+                      id="placeholder-no-results"
+                      @click=${() =>
+                        this.showEmptyPlaceholder('empty collection')}
+                      value="empty collection"
+                    />
+                  </div>
+                `
+              : nothing}
+            <div class="checkbox-control">
+              <input
+                type="button"
+                id="placeholder-query-err"
+                @click=${() => this.showEmptyPlaceholder('query error')}
+                value="query error"
+              />
+            </div>
+            <div class="checkbox-control">
+              <input
+                type="button"
+                id="placeholder-loading"
+                @click=${() => this.showEmptyPlaceholder('placeholder loading')}
+                value="placeholder loading"
+              />
+            </div>
+          </fieldset>
         </div>
         <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
           Toggle Search Controls
@@ -415,7 +455,6 @@ export class AppRoot extends LitElement {
           .baseImageUrl=${'https://archive.org'}
           .searchService=${this.searchService}
           .resizeObserver=${this.resizeObserver}
-          .collectionNameCache=${this.collectionNameCache}
           .showHistogramDatePicker=${true}
           .loggedIn=${this.loggedIn}
           .modalManager=${this.modalManager}
@@ -499,6 +538,50 @@ export class AppRoot extends LitElement {
     }
   }
 
+  private async showEmptyPlaceholder(placeholderType: string) {
+    switch (placeholderType) {
+      case 'empty query':
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.withinCollection = '';
+        this.collectionBrowser.withinProfile = '';
+        break;
+      case 'empty collection':
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.withinProfile = '';
+        await this.collectionBrowser.updateComplete;
+
+        break;
+      case 'empty profile':
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.withinCollection = '';
+        this.collectionBrowser.withinProfile = '@brewster';
+        break;
+      case 'collection error':
+        this.collectionBrowser.withinCollection = 'acdc';
+        await this.collectionBrowser.updateComplete;
+
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.queryErrorMessage = 'foo message';
+        break;
+      case 'query error':
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.withinCollection = '';
+        this.collectionBrowser.queryErrorMessage = 'foo message';
+        break;
+      case 'placeholder loading':
+        this.collectionBrowser.baseQuery = '';
+        this.collectionBrowser.setSearchResultsLoading(true);
+        this.collectionBrowser.setFacetsLoading(true);
+        this.collectionBrowser.suppressPlaceholders = true;
+        this.collectionBrowser.clearResultsOnEmptyQuery = true;
+        this.requestUpdate();
+        await this.collectionBrowser.updateComplete;
+        break;
+      default:
+        break;
+    }
+  }
+
   private toggleFacetGroupOutline(e: Event) {
     const target = e.target as HTMLInputElement;
     if (target.checked) {
@@ -552,6 +635,7 @@ export class AppRoot extends LitElement {
     const oldQuery = this.searchQuery;
     this.searchQuery = ''; // Should just reset to the placeholder
     await this.updateComplete;
+    this.collectionBrowser.suppressPlaceholders = false;
     // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:
     await new Promise(res => {
       setTimeout(res, 0);