@internetarchive/collection-browser 0.0.1-alpha.21 → 0.0.1-alpha.24

package/demo/app-root.ts

@@ -1,7 +1,9 @@
 import { SearchService } from '@internetarchive/search-service';
+import { LocalCache } from '@internetarchive/local-cache';
 import { html, css, LitElement, PropertyValues } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { CollectionNameCache } from '@internetarchive/collection-name-cache';
 import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 
@@ -11,6 +13,13 @@ 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 currentPage?: number;
 
   @state() private searchQuery?: string;
@@ -158,6 +167,7 @@ export class AppRoot extends LitElement {
           .baseNavigationUrl=${'https://archive.org'}
           .searchService=${this.searchService}
           .resizeObserver=${this.resizeObserver}
+          .collectionNameCache=${this.collectionNameCache}
           @visiblePageChanged=${this.visiblePageChanged}
         >
         </collection-browser>

package/dist/demo/app-root.d.ts

@@ -3,6 +3,8 @@ import '../src/collection-browser';
 export declare class AppRoot extends LitElement {
     private searchService;
     private resizeObserver;
+    private localCache;
+    private collectionNameCache;
     private currentPage?;
     private searchQuery?;
     private cellWidth;

package/dist/demo/app-root.js

@@ -1,14 +1,21 @@
 import { __decorate } from "tslib";
 import { SearchService } from '@internetarchive/search-service';
+import { LocalCache } from '@internetarchive/local-cache';
 import { html, css, LitElement } from 'lit';
 import { customElement, query, state } from 'lit/decorators.js';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { CollectionNameCache } from '@internetarchive/collection-name-cache';
 import '../src/collection-browser';
 let AppRoot = class AppRoot extends LitElement {
     constructor() {
         super(...arguments);
         this.searchService = SearchService.default;
         this.resizeObserver = new SharedResizeObserver();
+        this.localCache = new LocalCache();
+        this.collectionNameCache = new CollectionNameCache({
+            searchService: this.searchService,
+            localCache: this.localCache,
+        });
         this.cellWidth = 18;
         this.cellHeight = 29;
         this.rowGap = 1.7;
@@ -140,6 +147,7 @@ let AppRoot = class AppRoot extends LitElement {
           .baseNavigationUrl=${'https://archive.org'}
           .searchService=${this.searchService}
           .resizeObserver=${this.resizeObserver}
+          .collectionNameCache=${this.collectionNameCache}
           @visiblePageChanged=${this.visiblePageChanged}
         >
         </collection-browser>

package/dist/demo/app-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(this.currentPage ?? 1);\n    }\n    this.currentPage = 1;\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <button\n          @click=${() => {\n            this.collectionBrowser.showDeleteButtons =\n              !this.collectionBrowser.showDeleteButtons;\n          }}\n        >\n          Toggle Delete Mode\n        </button>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          @visiblePageChanged=${this.visiblePageChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF'\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline'\n      );\n    }\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../demo/app-root.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAE7E,OAAO,2BAA2B,CAAC;AAGnC,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;QACU,kBAAa,GAAG,aAAa,CAAC,OAAO,CAAC;QAEtC,mBAAc,GAAG,IAAI,oBAAoB,EAAE,CAAC;QAE5C,eAAU,GAAG,IAAI,UAAU,EAAE,CAAC;QAE9B,wBAAmB,GAAG,IAAI,mBAAmB,CAAC;YACpD,aAAa,EAAE,IAAI,CAAC,aAAa;YACjC,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;QAMc,cAAS,GAAW,EAAE,CAAC;QAEvB,eAAU,GAAW,EAAE,CAAC;QAExB,WAAM,GAAW,GAAG,CAAC;QAErB,WAAM,GAAW,GAAG,CAAC;IAuPxC,CAAC;IA/OS,aAAa,CAAC,CAAQ;;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QAC7C,IAAI,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,GAAG,CAAC,EAAE;YAC/B,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,CAAC,CAAC,CAAC;SACxD;QACD,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACvB,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC;QACtD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpD,CAAC;IAES,OAAO,CAAC,OAAuB;QACvC,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,CAAC;SAC1D;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,iBAAiB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;IACtD,CAAC;IAED,MAAM;;QACJ,OAAO,IAAI,CAAA;;wBAES,IAAI,CAAC,aAAa;;;;;qBAKrB,MAAA,IAAI,CAAC,WAAW,mCAAI,EAAE;;;;;wBAKnB,IAAI,CAAC,iBAAiB;;;;;;mBAM3B,GAAG,EAAE;YACZ,IAAI,CAAC,iBAAiB,CAAC,iBAAiB;gBACtC,CAAC,IAAI,CAAC,iBAAiB,CAAC,iBAAiB,CAAC;QAC9C,CAAC;;;;;;;;;;;;;;;;yBAgBc,IAAI,CAAC,YAAY;;sBAEpB,IAAI,CAAC,SAAS;;;;;;;;;;;yBAWX,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,UAAU;;;;;;;yBAOZ,IAAI,CAAC,cAAc;;;;;;;;;;;;;;yBAcnB,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;;;;;yBAWR,IAAI,CAAC,aAAa;;sBAErB,IAAI,CAAC,MAAM;;;;;;;;+BAQF,qBAAqB;2BACzB,IAAI,CAAC,aAAa;4BACjB,IAAI,CAAC,cAAc;iCACd,IAAI,CAAC,mBAAmB;gCACzB,IAAI,CAAC,kBAAkB;;;;KAIlD,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,OAAO,EAAE;YAClB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,+BAA+B,EAC/B,mBAAmB,CACpB,CAAC;SACH;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CACzC,+BAA+B,CAChC,CAAC;SACH;IACH,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,2BAA2B,EAC3B,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,2BAA2B,EAC3B,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,iCAAiC,EACjC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,aAAa,CAAC,CAAQ;QAC5B,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC1C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,kCAAkC,EAClC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;QACF,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,WAAW,CACtC,kCAAkC,EAClC,GAAG,KAAK,CAAC,KAAK,KAAK,CACpB,CAAC;IACJ,CAAC;IAEO,kBAAkB,CAAC,CAAsC;QAC/D,MAAM,EAAE,UAAU,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAChC,IAAI,UAAU,KAAK,IAAI,CAAC,WAAW;YAAE,OAAO;QAC5C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAChC,CAAC;CA4CF,CAAA;AA1CQ,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyClB,CAAC;AAhQO;IAAR,KAAK,EAAE;4CAA8B;AAE7B;IAAR,KAAK,EAAE;4CAA8B;AAE7B;IAAR,KAAK,EAAE;0CAAgC;AAE/B;IAAR,KAAK,EAAE;2CAAiC;AAEhC;IAAR,KAAK,EAAE;uCAA8B;AAE7B;IAAR,KAAK,EAAE;uCAA8B;AAEV;IAA3B,KAAK,CAAC,mBAAmB,CAAC;+CAA2C;AAEzC;IAA5B,KAAK,CAAC,oBAAoB,CAAC;gDAA4C;AAE3C;IAA5B,KAAK,CAAC,oBAAoB,CAAC;kDAA+C;AA5BhE,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA6QnB;SA7QY,OAAO","sourcesContent":["import { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\nimport type { CollectionBrowser } from '../src/collection-browser';\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  private searchPressed(e: Event) {\n    e.preventDefault();\n    this.searchQuery = this.baseQueryField.value;\n    if ((this.currentPage ?? 1) > 1) {\n      this.collectionBrowser.goToPage(this.currentPage ?? 1);\n    }\n    this.currentPage = 1;\n  }\n\n  private changePagePressed(e: Event) {\n    e.preventDefault();\n    this.currentPage = this.pageNumberInput.valueAsNumber;\n    this.collectionBrowser.goToPage(this.currentPage);\n  }\n\n  protected updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <button\n          @click=${() => {\n            this.collectionBrowser.showDeleteButtons =\n              !this.collectionBrowser.showDeleteButtons;\n          }}\n        >\n          Toggle Delete Mode\n        </button>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          @visiblePageChanged=${this.visiblePageChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private outlineChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.style.setProperty(\n        '--infiniteScrollerCellOutline',\n        '1px solid #33D1FF'\n      );\n    } else {\n      this.collectionBrowser.style.removeProperty(\n        '--infiniteScrollerCellOutline'\n      );\n    }\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n  `;\n}\n"]}

package/dist/src/async-collection-name.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, PropertyValues } from "lit";
+import { CollectionNameCacheInterface } from "./collection-name-cache";
+export declare class AsyncCollectionName extends LitElement {
+    collectionNameCache?: CollectionNameCacheInterface;
+    identifier?: string;
+    name?: string | null;
+    render(): import("lit-html").TemplateResult<1>;
+    protected createRenderRoot(): Element | ShadowRoot;
+    updated(changed: PropertyValues): void;
+    private fetchName;
+}

package/dist/src/async-collection-name.js

@@ -0,0 +1,38 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+let AsyncCollectionName = class AsyncCollectionName extends LitElement {
+    render() {
+        return html `
+      ${this.name ? this.name : this.identifier}
+    `;
+    }
+    // disable the shadowRoot for this component so consumers can style it as they need
+    createRenderRoot() {
+        return this;
+    }
+    updated(changed) {
+        if (changed.has("identifier") || changed.has("collectionNameCache")) {
+            this.fetchName();
+        }
+    }
+    async fetchName() {
+        if (!this.identifier || !this.collectionNameCache)
+            return;
+        this.name = await this.collectionNameCache.collectionNameFor(this.identifier);
+    }
+};
+__decorate([
+    property({ type: Object })
+], AsyncCollectionName.prototype, "collectionNameCache", void 0);
+__decorate([
+    property({ type: String })
+], AsyncCollectionName.prototype, "identifier", void 0);
+__decorate([
+    state()
+], AsyncCollectionName.prototype, "name", void 0);
+AsyncCollectionName = __decorate([
+    customElement('async-collection-name')
+], AsyncCollectionName);
+export { AsyncCollectionName };
+//# sourceMappingURL=async-collection-name.js.map

package/dist/src/async-collection-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-collection-name.js","sourceRoot":"","sources":["../../src/async-collection-name.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAInE,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAOjD,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;KAC1C,CAAC;IACJ,CAAC;IAED,mFAAmF;IACzE,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CAAC,OAAuB;QAC7B,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE;YACnE,IAAI,CAAC,SAAS,EAAE,CAAC;SAClB;IACH,CAAC;IAEO,KAAK,CAAC,SAAS;QACrB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE,OAAO;QAC1D,IAAI,CAAC,IAAI,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChF,CAAC;CACF,CAAA;AA3B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAoD;AAEnD;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAqB;AAEvC;IAAR,KAAK,EAAE;iDAAsB;AALnB,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA4B/B;SA5BY,mBAAmB","sourcesContent":["import { html, LitElement, PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { CollectionNameCacheInterface } from \"./collection-name-cache\";\n\n@customElement('async-collection-name')\nexport class AsyncCollectionName extends LitElement {\n  @property({ type: Object }) collectionNameCache?: CollectionNameCacheInterface;\n\n  @property({ type: String }) identifier?: string;\n\n  @state() name?: string | null;\n\n  render() {\n    return html`\n      ${this.name ? this.name : this.identifier}\n    `;\n  }\n\n  // disable the shadowRoot for this component so consumers can style it as they need\n  protected createRenderRoot(): Element | ShadowRoot {\n    return this;\n  }\n\n  updated(changed: PropertyValues): void {\n    if (changed.has(\"identifier\") || changed.has(\"collectionNameCache\")) {\n      this.fetchName();\n    }\n  }\n\n  private async fetchName(): Promise<void> {\n    if (!this.identifier || !this.collectionNameCache) return;\n    this.name = await this.collectionNameCache.collectionNameFor(this.identifier);\n  }\n}\n"]}

package/dist/src/collection-browser.d.ts

@@ -3,15 +3,15 @@ import type { InfiniteScrollerCellProviderInterface } from '@internetarchive/inf
 import { SearchServiceInterface, SortDirection } from '@internetarchive/search-service';
 import { SortParam } from '@internetarchive/search-service';
 import { SharedResizeObserverInterface, SharedResizeObserverResizeHandlerInterface } from '@internetarchive/shared-resize-observer';
-import type { CollectionDisplayMode } from './models';
 import '@internetarchive/infinite-scroller';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 import './tiles/tile-dispatcher';
 import './tiles/loading-tile';
 import './sort-filter-bar/sort-filter-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './sort-filter-bar/sort-filter-bar';
-import { SelectedFacets, SortField, CollectionBrowserContext } from './models';
+import { SelectedFacets, SortField, CollectionBrowserContext, CollectionDisplayMode } from './models';
 import { RestorationStateHandlerInterface } from './restoration-state-handler';
 export declare class CollectionBrowser extends LitElement implements InfiniteScrollerCellProviderInterface, SharedResizeObserverResizeHandlerInterface {
     baseNavigationUrl?: string;
@@ -33,6 +33,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     minSelectedDate?: string;
     maxSelectedDate?: string;
     selectedFacets?: SelectedFacets;
+    collectionNameCache?: CollectionNameCacheInterface;
     pageContext: CollectionBrowserContext;
     restorationStateHandler: RestorationStateHandlerInterface;
     mobileBreakpoint: number;
@@ -162,6 +163,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private get pageFetchQueryKey();
     private pageFetchesInProgress;
     fetchPage(pageNumber: number): Promise<void>;
+    private preloadCollectionNames;
     /**
      * This is useful for determining whether we need to reload the scroller.
      *

package/dist/src/collection-browser.js

@@ -244,6 +244,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .minSelectedDate=${this.minSelectedDate}
         .maxSelectedDate=${this.maxSelectedDate}
         .selectedFacets=${this.selectedFacets}
+        .collectionNameCache=${this.collectionNameCache}
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetDataLoading}
         ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
@@ -629,6 +630,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 'description',
                 'downloads',
                 'identifier',
+                'issue',
                 'item_count',
                 'mediatype',
                 'num_favorites',
@@ -638,6 +640,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 'source',
                 'subject',
                 'title',
+                'volume',
             ],
             page: pageNumber,
             rows: this.pageSize,
@@ -658,6 +661,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             return;
         const { docs } = success.response;
         if (docs && docs.length > 0) {
+            this.preloadCollectionNames(docs);
             this.updateDataSource(pageNumber, docs);
         }
         if (docs.length < this.pageSize) {
@@ -668,6 +672,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         (_d = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _d === void 0 ? void 0 : _d.delete(pageNumber);
         this.searchResultsLoading = false;
     }
+    preloadCollectionNames(docs) {
+        var _a;
+        const collectionIds = docs.map(doc => { var _a; return (_a = doc.collections_raw) === null || _a === void 0 ? void 0 : _a.values; }).flat();
+        const collectionIdsArray = Array.from(new Set(collectionIds));
+        (_a = this.collectionNameCache) === null || _a === void 0 ? void 0 : _a.preloadIdentifiers(collectionIdsArray);
+    }
     /**
      * This is useful for determining whether we need to reload the scroller.
      *
@@ -696,7 +706,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const datasource = { ...this.dataSource };
         const tiles = [];
         docs === null || docs === void 0 ? void 0 : docs.forEach(doc => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
             if (!doc.identifier)
                 return;
             tiles.push({
@@ -704,19 +714,22 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 collections: (_c = (_b = doc.collections_raw) === null || _b === void 0 ? void 0 : _b.values) !== null && _c !== void 0 ? _c : [],
                 commentCount: (_e = (_d = doc.num_reviews) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : 0,
                 creator: (_f = doc.creator) === null || _f === void 0 ? void 0 : _f.value,
-                dateAdded: (_g = doc.addeddate) === null || _g === void 0 ? void 0 : _g.value,
-                dateArchived: (_h = doc.publicdate) === null || _h === void 0 ? void 0 : _h.value,
-                datePublished: (_j = doc.date) === null || _j === void 0 ? void 0 : _j.value,
-                dateReviewed: (_k = doc.reviewdate) === null || _k === void 0 ? void 0 : _k.value,
-                description: (_l = doc.description) === null || _l === void 0 ? void 0 : _l.value,
-                favCount: (_o = (_m = doc.num_favorites) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : 0,
+                creators: (_h = (_g = doc.creator) === null || _g === void 0 ? void 0 : _g.values) !== null && _h !== void 0 ? _h : [],
+                dateAdded: (_j = doc.addeddate) === null || _j === void 0 ? void 0 : _j.value,
+                dateArchived: (_k = doc.publicdate) === null || _k === void 0 ? void 0 : _k.value,
+                datePublished: (_l = doc.date) === null || _l === void 0 ? void 0 : _l.value,
+                dateReviewed: (_m = doc.reviewdate) === null || _m === void 0 ? void 0 : _m.value,
+                description: (_o = doc.description) === null || _o === void 0 ? void 0 : _o.value,
+                favCount: (_q = (_p = doc.num_favorites) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 0,
                 identifier: doc.identifier,
-                itemCount: (_q = (_p = doc.item_count) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 0,
-                mediatype: (_s = (_r = doc.mediatype) === null || _r === void 0 ? void 0 : _r.value) !== null && _s !== void 0 ? _s : 'data',
-                source: (_t = doc.source) === null || _t === void 0 ? void 0 : _t.value,
-                subjects: (_v = (_u = doc.subject) === null || _u === void 0 ? void 0 : _u.values) !== null && _v !== void 0 ? _v : [],
-                title: (_x = (_w = doc.title) === null || _w === void 0 ? void 0 : _w.value) !== null && _x !== void 0 ? _x : '',
-                viewCount: (_z = (_y = doc.downloads) === null || _y === void 0 ? void 0 : _y.value) !== null && _z !== void 0 ? _z : 0,
+                issue: (_r = doc.issue) === null || _r === void 0 ? void 0 : _r.value,
+                itemCount: (_t = (_s = doc.item_count) === null || _s === void 0 ? void 0 : _s.value) !== null && _t !== void 0 ? _t : 0,
+                mediatype: (_v = (_u = doc.mediatype) === null || _u === void 0 ? void 0 : _u.value) !== null && _v !== void 0 ? _v : 'data',
+                source: (_w = doc.source) === null || _w === void 0 ? void 0 : _w.value,
+                subjects: (_y = (_x = doc.subject) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [],
+                title: this.etreeTitle((_z = doc.title) === null || _z === void 0 ? void 0 : _z.value, (_0 = doc.mediatype) === null || _0 === void 0 ? void 0 : _0.value, (_1 = doc.collection) === null || _1 === void 0 ? void 0 : _1.values),
+                volume: (_2 = doc.volume) === null || _2 === void 0 ? void 0 : _2.value,
+                viewCount: (_4 = (_3 = doc.downloads) === null || _3 === void 0 ? void 0 : _3.value) !== null && _4 !== void 0 ? _4 : 0,
             });
         });
         datasource[pageNumber] = tiles;
@@ -754,6 +767,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       .displayMode=${this.displayMode}
       .resizeObserver=${this.resizeObserver}
       .sortParam=${this.sortParam}
+      .collectionNameCache=${this.collectionNameCache}
       ?showDeleteButton=${this.showDeleteButtons}
     ></tile-dispatcher>`;
     }
@@ -833,6 +847,10 @@ CollectionBrowser.styles = css `
       position: relative;
       max-height: 0;
       transition: max-height 0.2s ease-in-out;
+      z-index: 1;
+    }
+
+    .mobile #facets-container {
       overflow: hidden;
     }
 
@@ -913,6 +931,8 @@ CollectionBrowser.styles = css `
         --collectionBrowserCellMinHeight,
         5rem
       );
+      /* 30px, but compensating for a -5px margin */
+      --infiniteScrollerRowGap: 35px;
     }
 
     infinite-scroller.grid {
@@ -988,6 +1008,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], CollectionBrowser.prototype, "selectedFacets", void 0);
+__decorate([
+    property({ type: Object })
+], CollectionBrowser.prototype, "collectionNameCache", void 0);
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "pageContext", void 0);