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);