@internetarchive/collection-browser 0.4.4-alpha → 0.4.4

package/dist/src/app-root.js

@@ -82,7 +82,7 @@ let AppRoot = class AppRoot extends LitElement {
         <div id="dev-tools" class=${this.getClass}>
           <div id="search-and-page-inputs">
             <form @submit=${this.searchPressed}>
-              Query:
+              <label for="base-query-field"> Query: </label>
               <input
                 type="text"
                 id="base-query-field"
@@ -91,7 +91,8 @@ let AppRoot = class AppRoot extends LitElement {
               <input type="submit" value="Search" />
             </form>
             <form @submit=${this.changePagePressed}>
-              Page: <input type="number" value="1" id="page-number-input" />
+              <label for="page-number-input"> Page: </label>
+              <input type="number" value="1" id="page-number-input" />
               <input type="submit" value="Go" />
             </form>
           </div>
@@ -502,10 +503,24 @@ AppRoot.styles = css `
       cursor: pointer;
     }
 
+    #search-and-page-inputs {
+      flex-wrap: wrap;
+      row-gap: 2px;
+    }
+
     #search-and-page-inputs > form {
       margin-right: 1rem;
     }
 
+    #search-and-page-inputs label {
+      display: inline-block;
+      min-width: 50px;
+    }
+
+    #page-number-input {
+      width: 75px;
+    }
+
     .search-type {
       margin-right: 1rem;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-console */\nimport {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport {\n  SearchService,\n  SearchServiceInterface,\n  SearchType,\n  StringField,\n} from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\n\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { CollectionBrowser } from '../src/collection-browser';\n\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService: SearchServiceInterface =\n    this.initSearchServiceFromUrlParams();\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  @state() private loggedIn: boolean = false;\n\n  @state() private searchType: SearchType = SearchType.METADATA;\n\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\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  @query('modal-manager') private modalManager!: ModalManagerInterface;\n\n  private analyticsManager = new AnalyticsManager();\n\n  private analyticsHandler: AnalyticsManagerInterface = {\n    sendPing: this.sendAnalytics.bind(this),\n    sendEvent: this.sendAnalytics.bind(this),\n    sendEventNoSampling: this.sendAnalytics.bind(this),\n  };\n\n  private sendAnalytics(ae: AnalyticsEvent) {\n    console.log('Analytics Received ----', ae);\n    this.latestAction = ae;\n    this.analyticsManager?.sendEvent(ae);\n  }\n\n  private initSearchServiceFromUrlParams() {\n    const params = new URL(window.location.href).searchParams;\n    return new SearchService({\n      includeCredentials: false,\n      baseUrl: params.get('search_base_url') ?? undefined,\n      servicePath: params.get('search_service_path') ?? undefined,\n      debuggingEnabled: !!params.get('debugging') ?? undefined,\n    });\n  }\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  }\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 override 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  private get getClass() {\n    const searchParams = new URLSearchParams(window.location.search);\n\n    return searchParams.get('hide-dev-tools') ? 'hidden' : '';\n  }\n\n  render() {\n    return html`\n      <div class=\"dev-tool-container\">\n        <div id=\"dev-tools\" class=${this.getClass}>\n          <div id=\"search-and-page-inputs\">\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            <form @submit=${this.changePagePressed}>\n              Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n              <input type=\"submit\" value=\"Go\" />\n            </form>\n          </div>\n\n          <div id=\"search-types\">\n            Search type:\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"metadata-search\"\n                name=\"search-type\"\n                value=\"metadata\"\n                ?checked=${this.searchType === SearchType.METADATA}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"metadata-search\">Metadata</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"fulltext-search\"\n                name=\"search-type\"\n                value=\"fulltext\"\n                ?checked=${this.searchType === SearchType.FULLTEXT}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"fulltext-search\">Full text</label>\n            </span>\n          </div>\n\n          <div id=\"toggle-controls\">\n            <button\n              @click=${() => {\n                const details =\n                  this.shadowRoot?.getElementById('cell-size-control');\n                details?.classList.toggle('hidden');\n                const rowGapControls =\n                  this.shadowRoot?.getElementById('cell-gap-control');\n                rowGapControls?.classList.toggle('hidden');\n              }}\n            >\n              Toggle Cell Controls\n            </button>\n            <button\n              @click=${() => {\n                const details = this.shadowRoot?.getElementById(\n                  'latest-event-details'\n                );\n                details?.classList.toggle('hidden');\n              }}\n            >\n              Last Event Captured\n            </button>\n          </div>\n\n          <div id=\"last-event\">\n            <pre id=\"latest-event-details\" class=\"hidden\">\n              ${JSON.stringify(this.latestAction, null, 2)}\n            </pre\n            >\n          </div>\n\n          <div id=\"cell-controls\" class=\"hidden\">\n            <div id=\"cell-size-control\">\n              <div>\n                <label for=\"cell-width-slider\">Min 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            <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 id=\"checkbox-controls\">\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n              <label for=\"show-outline-check\">Show cell outlines</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-facet-group-outline-check\"\n                @click=${this.toggleFacetGroupOutline}\n              />\n              <label for=\"show-facet-group-outline-check\">\n                Show facet group outlines\n              </label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n              <label for=\"simulate-login\">Simulate login</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-dummy-snippets\"\n                @click=${this.snippetsChanged}\n              />\n              <label for=\"show-dummy-snippets\">Show dummy snippets</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-date-picker\"\n                checked\n                @click=${this.datePickerChanged}\n              />\n              <label for=\"enable-date-picker\">Enable date picker</label>\n            </div>\n          </div>\n        </div>\n        <button id=\"toggle-dev-tools-btn\" @click=${this.toggleDevTools}>\n          Toggle Search Controls\n        </button>\n      </div>\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .searchType=${this.searchType}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          .modalManager=${this.modalManager}\n          .analyticsHandler=${this.analyticsHandler}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n          @searchTypeChanged=${this.searchTypeChanged}\n        >\n        </collection-browser>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  /** Handler for search type changes coming from collection browser */\n  private searchTypeChanged(e: CustomEvent<SearchType>): void {\n    this.searchType = e.detail;\n  }\n\n  /** Handler for user input selecting a search type */\n  private searchTypeSelected(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.searchType =\n      target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;\n\n    // Re-perform the current search with the new search target\n    this.reperformCurrentSearch();\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\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 toggleDevTools() {\n    const pageUrl = new URL(window.location.href);\n    const { searchParams } = pageUrl;\n\n    if (searchParams.get('hide-dev-tools')) {\n      searchParams.delete('hide-dev-tools');\n    } else {\n      searchParams.set('hide-dev-tools', 'true');\n    }\n\n    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');\n\n    if (window.history.replaceState) {\n      window.history.replaceState(\n        {\n          path: pageUrl.toString(),\n        },\n        '',\n        pageUrl.toString()\n      );\n    }\n  }\n\n  private toggleFacetGroupOutline(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.classList.add('showFacetGroupOutlines');\n      this.modalManager.classList.add('showFacetGroupOutlines');\n    } else {\n      this.collectionBrowser.classList.remove('showFacetGroupOutlines');\n      this.modalManager.classList.remove('showFacetGroupOutlines');\n    }\n  }\n\n  private async snippetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      // Decorate the default search service with a wrapper that adds\n      // dummy snippets to any successful searches\n      this.searchService = {\n        async search(params, searchType) {\n          const searchResponse = await SearchService.default.search(\n            params,\n            searchType\n          );\n          searchResponse.success?.response.results.forEach(result => {\n            Object.defineProperty(result, 'highlight', {\n              value: new StringField([\n                'this is a text {{{snippet}}} block with potentially',\n                'multiple {{{snippets}}} and such',\n                'but the {{{snippet}}} block may be quite long perhaps',\n                'depending on how many {{{snippet}}} matches there are',\n                'there may be multiple lines of {{{snippets}}} to show',\n                'but each {{{snippet}}} should be relatively short',\n                'and {{{snippets}}} are each a {{{snippet}}} of text',\n                'but every {{{snippet}}} might have multiple matches',\n                'the {{{snippets}}} should be separated and surrounded by ellipses',\n              ]),\n            });\n          });\n          return searchResponse;\n        },\n      };\n    } else {\n      // Restore the default seach service\n      this.searchService = SearchService.default;\n    }\n\n    // Re-perform the current search to show/hide the snippets immediately\n    this.reperformCurrentSearch();\n  }\n\n  private async reperformCurrentSearch(): Promise<void> {\n    const oldQuery = this.searchQuery;\n    this.searchQuery = ''; // Should just reset to the placeholder\n    await this.updateComplete;\n    // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:\n    await new Promise(res => {\n      setTimeout(res, 0);\n    });\n    this.searchQuery = oldQuery; // Re-apply the original query\n  }\n\n  private datePickerChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.showHistogramDatePicker = target.checked;\n\n    // When disabling the date picker from the demo app, also clear any existing date range params\n    if (!this.collectionBrowser.showHistogramDatePicker) {\n      this.collectionBrowser.minSelectedDate = undefined;\n      this.collectionBrowser.maxSelectedDate = undefined;\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      --primaryButtonBGColor: #194880;\n      --ia-theme-link-color: #4b64ff;\n    }\n\n    /* add the following styles to ensure proper modal visibility */\n    body.modal-manager-open {\n      overflow: hidden;\n    }\n    modal-manager {\n      display: none;\n    }\n    modal-manager[mode='open'] {\n      display: block;\n    }\n    modal-manager.more-search-facets {\n      --modalWidth: 85rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n      --modalCornerRadius: 0;\n      --modalBottomPadding: 0;\n      --modalBottomMargin: 0;\n      --modalScrollOffset: 0;\n      --modalCornerRadius: 0.5rem;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    modal-manager.showFacetGroupOutlines,\n    collection-browser.showFacetGroupOutlines {\n      --facet-row-border-top: 1px solid red;\n      --facet-row-border-bottom: 1px solid blue;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    .dev-tool-container {\n      position: relative;\n    }\n    #dev-tools {\n      position: relative;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n      font-size: 1.4rem;\n      width: 75%;\n      background: #ffffffb3;\n    }\n\n    #dev-tools > * {\n      display: flex;\n    }\n\n    #toggle-dev-tools-btn {\n      position: fixed;\n      left: 77.4%;\n      top: 0;\n      background: red;\n      padding: 5px;\n      color: white;\n      font-size: 1.4rem;\n      margin: 0;\n      z-index: 1;\n      cursor: pointer;\n    }\n\n    #search-and-page-inputs > form {\n      margin-right: 1rem;\n    }\n\n    .search-type {\n      margin-right: 1rem;\n    }\n\n    #cell-controls {\n      display: flex;\n      flex-wrap: wrap;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-size-control,\n    #cell-gap-control {\n      flex-basis: calc(50% - 1rem);\n      flex-grow: 1;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n\n    #checkbox-controls {\n      padding-top: 0.5rem;\n      flex-wrap: wrap;\n    }\n\n    .checkbox-control {\n      flex-basis: 50%;\n    }\n\n    #last-event {\n      background-color: aliceblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    .hidden {\n      display: none;\n    }\n\n    #toggle-controls {\n      background-color: lightskyblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    #search-types {\n      margin: 5px auto;\n      background-color: aliceblue;\n      font-size: 1.6rem;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-console */\nimport {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport {\n  SearchService,\n  SearchServiceInterface,\n  SearchType,\n  StringField,\n} from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\n\nimport type { ModalManagerInterface } from '@internetarchive/modal-manager';\nimport type { AnalyticsManagerInterface } from '@internetarchive/analytics-manager';\nimport type { CollectionBrowser } from '../src/collection-browser';\n\nimport '../src/collection-browser';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n  private searchService: SearchServiceInterface =\n    this.initSearchServiceFromUrlParams();\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  @state() private loggedIn: boolean = false;\n\n  @state() private searchType: SearchType = SearchType.METADATA;\n\n  @property({ type: Object, reflect: false }) latestAction?: AnalyticsEvent;\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  @query('modal-manager') private modalManager!: ModalManagerInterface;\n\n  private analyticsManager = new AnalyticsManager();\n\n  private analyticsHandler: AnalyticsManagerInterface = {\n    sendPing: this.sendAnalytics.bind(this),\n    sendEvent: this.sendAnalytics.bind(this),\n    sendEventNoSampling: this.sendAnalytics.bind(this),\n  };\n\n  private sendAnalytics(ae: AnalyticsEvent) {\n    console.log('Analytics Received ----', ae);\n    this.latestAction = ae;\n    this.analyticsManager?.sendEvent(ae);\n  }\n\n  private initSearchServiceFromUrlParams() {\n    const params = new URL(window.location.href).searchParams;\n    return new SearchService({\n      includeCredentials: false,\n      baseUrl: params.get('search_base_url') ?? undefined,\n      servicePath: params.get('search_service_path') ?? undefined,\n      debuggingEnabled: !!params.get('debugging') ?? undefined,\n    });\n  }\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  }\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 override 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  private get getClass() {\n    const searchParams = new URLSearchParams(window.location.search);\n\n    return searchParams.get('hide-dev-tools') ? 'hidden' : '';\n  }\n\n  render() {\n    return html`\n      <div class=\"dev-tool-container\">\n        <div id=\"dev-tools\" class=${this.getClass}>\n          <div id=\"search-and-page-inputs\">\n            <form @submit=${this.searchPressed}>\n              <label for=\"base-query-field\"> Query: </label>\n              <input\n                type=\"text\"\n                id=\"base-query-field\"\n                .value=${this.searchQuery ?? ''}\n              />\n              <input type=\"submit\" value=\"Search\" />\n            </form>\n            <form @submit=${this.changePagePressed}>\n              <label for=\"page-number-input\"> Page: </label>\n              <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n              <input type=\"submit\" value=\"Go\" />\n            </form>\n          </div>\n\n          <div id=\"search-types\">\n            Search type:\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"metadata-search\"\n                name=\"search-type\"\n                value=\"metadata\"\n                ?checked=${this.searchType === SearchType.METADATA}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"metadata-search\">Metadata</label>\n            </span>\n            <span class=\"search-type\">\n              <input\n                type=\"radio\"\n                id=\"fulltext-search\"\n                name=\"search-type\"\n                value=\"fulltext\"\n                ?checked=${this.searchType === SearchType.FULLTEXT}\n                @click=${this.searchTypeSelected}\n              />\n              <label for=\"fulltext-search\">Full text</label>\n            </span>\n          </div>\n\n          <div id=\"toggle-controls\">\n            <button\n              @click=${() => {\n                const details =\n                  this.shadowRoot?.getElementById('cell-size-control');\n                details?.classList.toggle('hidden');\n                const rowGapControls =\n                  this.shadowRoot?.getElementById('cell-gap-control');\n                rowGapControls?.classList.toggle('hidden');\n              }}\n            >\n              Toggle Cell Controls\n            </button>\n            <button\n              @click=${() => {\n                const details = this.shadowRoot?.getElementById(\n                  'latest-event-details'\n                );\n                details?.classList.toggle('hidden');\n              }}\n            >\n              Last Event Captured\n            </button>\n          </div>\n\n          <div id=\"last-event\">\n            <pre id=\"latest-event-details\" class=\"hidden\">\n              ${JSON.stringify(this.latestAction, null, 2)}\n            </pre\n            >\n          </div>\n\n          <div id=\"cell-controls\" class=\"hidden\">\n            <div id=\"cell-size-control\">\n              <div>\n                <label for=\"cell-width-slider\">Min 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            <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 id=\"checkbox-controls\">\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n              <label for=\"show-outline-check\">Show cell outlines</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-facet-group-outline-check\"\n                @click=${this.toggleFacetGroupOutline}\n              />\n              <label for=\"show-facet-group-outline-check\">\n                Show facet group outlines\n              </label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n              <label for=\"simulate-login\">Simulate login</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"show-dummy-snippets\"\n                @click=${this.snippetsChanged}\n              />\n              <label for=\"show-dummy-snippets\">Show dummy snippets</label>\n            </div>\n            <div class=\"checkbox-control\">\n              <input\n                type=\"checkbox\"\n                id=\"enable-date-picker\"\n                checked\n                @click=${this.datePickerChanged}\n              />\n              <label for=\"enable-date-picker\">Enable date picker</label>\n            </div>\n          </div>\n        </div>\n        <button id=\"toggle-dev-tools-btn\" @click=${this.toggleDevTools}>\n          Toggle Search Controls\n        </button>\n      </div>\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .searchType=${this.searchType}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          .modalManager=${this.modalManager}\n          .analyticsHandler=${this.analyticsHandler}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n          @searchTypeChanged=${this.searchTypeChanged}\n        >\n        </collection-browser>\n      </div>\n      <modal-manager></modal-manager>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>): void {\n    this.searchQuery = e.detail.baseQuery;\n  }\n\n  /** Handler for search type changes coming from collection browser */\n  private searchTypeChanged(e: CustomEvent<SearchType>): void {\n    this.searchType = e.detail;\n  }\n\n  /** Handler for user input selecting a search type */\n  private searchTypeSelected(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.searchType =\n      target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;\n\n    // Re-perform the current search with the new search target\n    this.reperformCurrentSearch();\n  }\n\n  private loginChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.loggedIn = true;\n    } else {\n      this.loggedIn = false;\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 toggleDevTools() {\n    const pageUrl = new URL(window.location.href);\n    const { searchParams } = pageUrl;\n\n    if (searchParams.get('hide-dev-tools')) {\n      searchParams.delete('hide-dev-tools');\n    } else {\n      searchParams.set('hide-dev-tools', 'true');\n    }\n\n    this.shadowRoot?.getElementById('dev-tools')?.classList.toggle('hidden');\n\n    if (window.history.replaceState) {\n      window.history.replaceState(\n        {\n          path: pageUrl.toString(),\n        },\n        '',\n        pageUrl.toString()\n      );\n    }\n  }\n\n  private toggleFacetGroupOutline(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      this.collectionBrowser.classList.add('showFacetGroupOutlines');\n      this.modalManager.classList.add('showFacetGroupOutlines');\n    } else {\n      this.collectionBrowser.classList.remove('showFacetGroupOutlines');\n      this.modalManager.classList.remove('showFacetGroupOutlines');\n    }\n  }\n\n  private async snippetsChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    if (target.checked) {\n      // Decorate the default search service with a wrapper that adds\n      // dummy snippets to any successful searches\n      this.searchService = {\n        async search(params, searchType) {\n          const searchResponse = await SearchService.default.search(\n            params,\n            searchType\n          );\n          searchResponse.success?.response.results.forEach(result => {\n            Object.defineProperty(result, 'highlight', {\n              value: new StringField([\n                'this is a text {{{snippet}}} block with potentially',\n                'multiple {{{snippets}}} and such',\n                'but the {{{snippet}}} block may be quite long perhaps',\n                'depending on how many {{{snippet}}} matches there are',\n                'there may be multiple lines of {{{snippets}}} to show',\n                'but each {{{snippet}}} should be relatively short',\n                'and {{{snippets}}} are each a {{{snippet}}} of text',\n                'but every {{{snippet}}} might have multiple matches',\n                'the {{{snippets}}} should be separated and surrounded by ellipses',\n              ]),\n            });\n          });\n          return searchResponse;\n        },\n      };\n    } else {\n      // Restore the default seach service\n      this.searchService = SearchService.default;\n    }\n\n    // Re-perform the current search to show/hide the snippets immediately\n    this.reperformCurrentSearch();\n  }\n\n  private async reperformCurrentSearch(): Promise<void> {\n    const oldQuery = this.searchQuery;\n    this.searchQuery = ''; // Should just reset to the placeholder\n    await this.updateComplete;\n    // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:\n    await new Promise(res => {\n      setTimeout(res, 0);\n    });\n    this.searchQuery = oldQuery; // Re-apply the original query\n  }\n\n  private datePickerChanged(e: Event) {\n    const target = e.target as HTMLInputElement;\n    this.collectionBrowser.showHistogramDatePicker = target.checked;\n\n    // When disabling the date picker from the demo app, also clear any existing date range params\n    if (!this.collectionBrowser.showHistogramDatePicker) {\n      this.collectionBrowser.minSelectedDate = undefined;\n      this.collectionBrowser.maxSelectedDate = undefined;\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      --primaryButtonBGColor: #194880;\n      --ia-theme-link-color: #4b64ff;\n    }\n\n    /* add the following styles to ensure proper modal visibility */\n    body.modal-manager-open {\n      overflow: hidden;\n    }\n    modal-manager {\n      display: none;\n    }\n    modal-manager[mode='open'] {\n      display: block;\n    }\n    modal-manager.more-search-facets {\n      --modalWidth: 85rem;\n      --modalBorder: 2px solid var(--primaryButtonBGColor, #194880);\n      --modalTitleLineHeight: 4rem;\n      --modalTitleFontSize: 1.8rem;\n      --modalCornerRadius: 0;\n      --modalBottomPadding: 0;\n      --modalBottomMargin: 0;\n      --modalScrollOffset: 0;\n      --modalCornerRadius: 0.5rem;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    modal-manager.showFacetGroupOutlines,\n    collection-browser.showFacetGroupOutlines {\n      --facet-row-border-top: 1px solid red;\n      --facet-row-border-bottom: 1px solid blue;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    .dev-tool-container {\n      position: relative;\n    }\n    #dev-tools {\n      position: relative;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n      font-size: 1.4rem;\n      width: 75%;\n      background: #ffffffb3;\n    }\n\n    #dev-tools > * {\n      display: flex;\n    }\n\n    #toggle-dev-tools-btn {\n      position: fixed;\n      left: 77.4%;\n      top: 0;\n      background: red;\n      padding: 5px;\n      color: white;\n      font-size: 1.4rem;\n      margin: 0;\n      z-index: 1;\n      cursor: pointer;\n    }\n\n    #search-and-page-inputs {\n      flex-wrap: wrap;\n      row-gap: 2px;\n    }\n\n    #search-and-page-inputs > form {\n      margin-right: 1rem;\n    }\n\n    #search-and-page-inputs label {\n      display: inline-block;\n      min-width: 50px;\n    }\n\n    #page-number-input {\n      width: 75px;\n    }\n\n    .search-type {\n      margin-right: 1rem;\n    }\n\n    #cell-controls {\n      display: flex;\n      flex-wrap: wrap;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-size-control,\n    #cell-gap-control {\n      flex-basis: calc(50% - 1rem);\n      flex-grow: 1;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n\n    #checkbox-controls {\n      padding-top: 0.5rem;\n      flex-wrap: wrap;\n    }\n\n    .checkbox-control {\n      flex-basis: 50%;\n    }\n\n    #last-event {\n      background-color: aliceblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    .hidden {\n      display: none;\n    }\n\n    #toggle-controls {\n      background-color: lightskyblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    #search-types {\n      margin: 5px auto;\n      background-color: aliceblue;\n      font-size: 1.6rem;\n    }\n  `;\n}\n"]}

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

@@ -110,7 +110,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      *
      * @param pageNumber
      */
-    goToPage(pageNumber: number): void;
+    goToPage(pageNumber: number): Promise<void>;
     clearFilters(): void;
     /**
      * Manually requests to perform a search, which will only be executed if one of
@@ -122,6 +122,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private get emptyPlaceholderTemplate();
     private get collectionBrowserTemplate();
     private get infiniteScrollerTemplate();
+    private get infiniteScrollerClasses();
     private get sortFilterBarTemplate();
     private userChangedSort;
     private sendSortByAnalytics;
@@ -139,7 +140,6 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private selectedCreatorLetterChanged;
     private titleLetterSelected;
     private creatorLetterSelected;
-    private get facetDataLoading();
     private get mobileFacetsTemplate();
     private get facetsTemplate();
     private get loadingTemplate();
@@ -179,20 +179,12 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private get fullQuery();
     /** The full query without any title/creator letter filters */
     private get fullQueryWithoutAlphaFilters();
-    /** The full query without any year facets or date range clauses */
-    private get fullQueryWithoutDates();
     /**
      * Generates a query string for the given facets
      *
      * Example: `mediatype:("collection" OR "audio" OR -"etree") AND year:("2000" OR "2001")`
      */
     private get facetQuery();
-    /**
-     * 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();
     /**
      * Builds an OR-joined facet clause for the given facet name and values.
      *
@@ -221,36 +213,6 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     facetsChanged(e: CustomEvent<SelectedFacets>): void;
     facetClickHandler(name: FacetOption, facetSelected: boolean, negative: boolean): void;
     private fetchFacets;
-    /**
-     * If we haven't changed the query, we don't need to fetch the full year histogram
-     *
-     * @private
-     * @type {string}
-     * @memberof CollectionBrowser
-     */
-    private previousFullQueryNoDate?;
-    /**
-     * 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();
-    /**
-     * 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 fetchFullYearHistogram;
-    /**
-     * 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();
     private scrollToPage;
     /**
      * The query key is a string that uniquely identifies the current search.

package/dist/src/collection-browser.js

@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
 /* eslint-disable import/no-duplicates */
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { FilterConstraint, FilterMapBuilder, SearchType, } from '@internetarchive/search-service';
 import '@internetarchive/infinite-scroller';
 import './tiles/tile-dispatcher';
@@ -133,7 +133,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     goToPage(pageNumber) {
         this.initialPageNumber = pageNumber;
         this.pagesToRender = pageNumber;
-        this.scrollToPage(pageNumber);
+        return this.scrollToPage(pageNumber);
     }
     clearFilters() {
         this.selectedFacets = defaultSelectedFacets;
@@ -181,6 +181,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .placeholderType=${this.placeholderType}
         ?isMobileView=${this.mobileView}
       ></empty-placeholder>
+      ${this.infiniteScrollerTemplate}
     `;
     }
     get collectionBrowserTemplate() {
@@ -222,13 +223,21 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     }
     get infiniteScrollerTemplate() {
         return html `<infinite-scroller
-      class="${ifDefined(this.displayMode)}"
+      class=${this.infiniteScrollerClasses}
+      itemCount=${this.placeholderType ? 0 : nothing}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
       @visibleCellsChanged=${this.visibleCellsChanged}
     ></infinite-scroller>`;
     }
+    get infiniteScrollerClasses() {
+        var _a;
+        return classMap({
+            [(_a = this.displayMode) !== null && _a !== void 0 ? _a : '']: !!this.displayMode,
+            hidden: !!this.placeholderType,
+        });
+    }
     get sortFilterBarTemplate() {
         return html `
       <sort-filter-bar
@@ -341,9 +350,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.selectedTitleFilter = null;
         this.selectedCreatorFilter = e.detail.selectedLetter;
     }
-    get facetDataLoading() {
-        return this.facetsLoading || this.fullYearAggregationLoading;
-    }
     get mobileFacetsTemplate() {
         return html `
       <div id="mobile-filter-collapse">
@@ -385,8 +391,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .filterMap=${this.filterMap}
         .modalManager=${this.modalManager}
         ?collapsableFacets=${this.mobileView}
-        ?facetsLoading=${this.facetDataLoading}
-        ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+        ?facetsLoading=${this.facetsLoading}
+        ?fullYearAggregationLoading=${this.facetsLoading}
         .onFacetClick=${this.facetClickHandler}
         .analyticsHandler=${this.analyticsHandler}
       >
@@ -587,12 +593,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.persistState();
             this.historyPopOccurred = false;
         }
-        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(),
-        ]);
+        await Promise.all([this.doInitialPageFetch(), this.fetchFacets()]);
     }
     setupStateRestorationObserver() {
         if (this.boundNavigationHandler)
@@ -741,20 +742,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         return fullQuery;
     }
-    /** The full query without any year facets or date range clauses */
-    get fullQueryWithoutDates() {
-        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
      *
@@ -769,22 +756,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         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")`
-     */
-    get facetQueryWithoutYear() {
-        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.
      *
@@ -889,80 +860,30 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const results = await ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
         this.facetsLoading = false;
         this.aggregations = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response.aggregations;
-        // If we're not fetching year histogram data separately, set it from the newly-fetched aggregations
-        if (!this.shouldRequestYearHistogram) {
-            this.fullYearsHistogramAggregation =
-                (_f = (_e = (_d = (_c = results === null || results === void 0 ? void 0 : results.success) === null || _c === void 0 ? void 0 : _c.response) === null || _d === void 0 ? void 0 : _d.aggregations) === null || _e === void 0 ? void 0 : _e.year_histogram) !== null && _f !== void 0 ? _f : (_j = (_h = (_g = results === null || results === void 0 ? void 0 : results.success) === null || _g === void 0 ? void 0 : _g.response) === null || _h === void 0 ? void 0 : _h.aggregations) === null || _j === void 0 ? void 0 : _j['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
-        }
-    }
-    /**
-     * 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
-     */
-    get fullQueryNoDateKey() {
-        var _a, _b;
-        return `${this.fullQueryWithoutDates}-${this.searchType}-${(_a = this.sortParam) === null || _a === void 0 ? void 0 : _a.field}-${(_b = this.sortParam) === null || _b === void 0 ? void 0 : _b.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.
-     */
-    async fetchFullYearHistogram() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        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 ((_a = this.searchService) === null || _a === void 0 ? void 0 : _a.search(params, this.searchType));
-        this.fullYearAggregationLoading = false;
         this.fullYearsHistogramAggregation =
-            (_e = (_d = (_c = (_b = results === null || results === void 0 ? void 0 : results.success) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.aggregations) === null || _d === void 0 ? void 0 : _d.year_histogram) !== null && _e !== void 0 ? _e : (_h = (_g = (_f = results === null || results === void 0 ? void 0 : results.success) === null || _f === void 0 ? void 0 : _f.response) === null || _g === void 0 ? void 0 : _g.aggregations) === null || _h === void 0 ? void 0 : _h['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.
-     */
-    get shouldRequestYearHistogram() {
-        var _a, _b;
-        const datePickerEnabled = this.showHistogramDatePicker;
-        const hasDateRange = !!this.dateRangeQueryClause;
-        const hasYearFacet = Object.keys((_b = (_a = this.selectedFacets) === null || _a === void 0 ? void 0 : _a.year) !== null && _b !== void 0 ? _b : {}).length > 0;
-        return datePickerEnabled && (hasDateRange || hasYearFacet);
+            (_f = (_e = (_d = (_c = results === null || results === void 0 ? void 0 : results.success) === null || _c === void 0 ? void 0 : _c.response) === null || _d === void 0 ? void 0 : _d.aggregations) === null || _e === void 0 ? void 0 : _e.year_histogram) !== null && _f !== void 0 ? _f : (_j = (_h = (_g = results === null || results === void 0 ? void 0 : results.success) === null || _g === void 0 ? void 0 : _g.response) === null || _h === void 0 ? void 0 : _h.aggregations) === null || _j === void 0 ? void 0 : _j['year-histogram']; // Temp fix until PPS FTS key is fixed to use underscore
     }
     scrollToPage(pageNumber) {
-        const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
-        // without this setTimeout, Safari just pauses until the `fetchPage` is complete
-        // then scrolls to the cell
-        setTimeout(() => {
-            this.isScrollingToCell = true;
-            this.infiniteScroller.scrollToCell(cellIndexToScrollTo, true);
-            // This timeout is to give the scroll animation time to finish
-            // then updating the infinite scroller once we're done scrolling
-            // There's no scroll animation completion callback so we're
-            // giving it 0.5s to finish.
+        return new Promise(resolve => {
+            const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
+            // without this setTimeout, Safari just pauses until the `fetchPage` is complete
+            // then scrolls to the cell
             setTimeout(() => {
-                this.isScrollingToCell = false;
-                this.infiniteScroller.reload();
-            }, 500);
-        }, 0);
+                var _a;
+                this.isScrollingToCell = true;
+                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.scrollToCell(cellIndexToScrollTo, true);
+                // This timeout is to give the scroll animation time to finish
+                // then updating the infinite scroller once we're done scrolling
+                // There's no scroll animation completion callback so we're
+                // giving it 0.5s to finish.
+                setTimeout(() => {
+                    var _a;
+                    this.isScrollingToCell = false;
+                    (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
+                    resolve();
+                }, 500);
+            }, 0);
+        });
     }
     /**
      * The query key is a string that uniquely identifies the current search.
@@ -1047,7 +968,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         // temporary estimates based on pages rendered so far).
         if (results.length < this.pageSize) {
             this.endOfDataReached = true;
-            this.infiniteScroller.itemCount = this.totalResults;
+            if (this.infiniteScroller) {
+                this.infiniteScroller.itemCount = this.totalResults;
+            }
         }
         (_e = this.pageFetchesInProgress[pageFetchQueryKey]) === null || _e === void 0 ? void 0 : _e.delete(pageNumber);
         this.searchResultsLoading = false;
@@ -1083,6 +1006,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * @param results
      */
     updateDataSource(pageNumber, results) {
+        var _a;
         // copy our existing datasource so when we set it below, it gets set
         // instead of modifying the existing dataSource since object changes
         // don't trigger a re-render
@@ -1144,7 +1068,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const visiblePages = this.currentVisiblePageNumbers;
         const needsReload = visiblePages.includes(pageNumber);
         if (needsReload) {
-            this.infiniteScroller.reload();
+            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
         }
     }
     /** Fetches the aggregation buckets for the given prefix filter type. */
@@ -1245,6 +1169,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .sortParam=${this.sortParam}
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
+        ?enableHoverPane=${true}
         @resultSelected=${(e) => this.resultSelected(e)}
       >
       </tile-dispatcher>
@@ -1313,13 +1238,11 @@ CollectionBrowser.styles = css `
       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 {
@@ -1460,6 +1383,10 @@ CollectionBrowser.styles = css `
       );
       --infiniteScrollerCellMaxWidth: var(--collectionBrowserCellMaxWidth, 1fr);
     }
+
+    infinite-scroller.hidden {
+      display: none;
+    }
   `;
 __decorate([
     property({ type: String })