@internetarchive/collection-browser 0.4.3-alpha.9 → 0.4.4-alpha

package/dist/src/app-root.js

@@ -1,257 +1,265 @@
-import { __decorate } from "tslib";
-/* eslint-disable no-console */
-import { AnalyticsManager, } from '@internetarchive/analytics-manager';
-import { SearchService, SearchType, StringField, } from '@internetarchive/search-service';
-import { LocalCache } from '@internetarchive/local-cache';
-import { html, css, LitElement } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
-import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
-import { CollectionNameCache } from '@internetarchive/collection-name-cache';
-import '../src/collection-browser';
-let AppRoot = class AppRoot extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.searchService = this.initSearchServiceFromUrlParams();
-        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;
-        this.colGap = 1.7;
-        this.loggedIn = false;
-        this.searchType = SearchType.METADATA;
-        this.analyticsManager = new AnalyticsManager();
-        this.analyticsHandler = {
-            sendPing: this.sendAnalytics.bind(this),
-            sendEvent: this.sendAnalytics.bind(this),
-            sendEventNoSampling: this.sendAnalytics.bind(this),
-        };
-    }
-    sendAnalytics(ae) {
-        var _a;
-        console.log('Analytics Received ----', ae);
-        this.latestAction = ae;
-        (_a = this.analyticsManager) === null || _a === void 0 ? void 0 : _a.sendEvent(ae);
-    }
-    initSearchServiceFromUrlParams() {
-        var _a, _b, _c;
-        const params = new URL(window.location.href).searchParams;
-        return new SearchService({
-            includeCredentials: false,
-            baseUrl: (_a = params.get('search_base_url')) !== null && _a !== void 0 ? _a : undefined,
-            servicePath: (_b = params.get('search_service_path')) !== null && _b !== void 0 ? _b : undefined,
-            debuggingEnabled: (_c = !!params.get('debugging')) !== null && _c !== void 0 ? _c : undefined,
-        });
-    }
-    searchPressed(e) {
-        var _a, _b;
-        e.preventDefault();
-        this.searchQuery = this.baseQueryField.value;
-        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
-            this.collectionBrowser.goToPage((_b = this.currentPage) !== null && _b !== void 0 ? _b : 1);
-        }
-    }
-    changePagePressed(e) {
-        e.preventDefault();
-        this.currentPage = this.pageNumberInput.valueAsNumber;
-        this.collectionBrowser.goToPage(this.currentPage);
-    }
-    updated(changed) {
-        if (changed.has('currentPage') && this.currentPage) {
-            this.pageNumberInput.value = this.currentPage.toString();
-        }
-        if (changed.has('searchQuery')) {
-            this.queryUpdated();
-        }
-    }
-    queryUpdated() {
-        this.collectionBrowser.baseQuery = this.searchQuery;
-    }
-    render() {
-        var _a;
+import { __decorate } from "tslib";
+/* eslint-disable no-console */
+import { AnalyticsManager, } from '@internetarchive/analytics-manager';
+import { SearchService, SearchType, StringField, } from '@internetarchive/search-service';
+import { LocalCache } from '@internetarchive/local-cache';
+import { html, css, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
+import { CollectionNameCache } from '@internetarchive/collection-name-cache';
+import '../src/collection-browser';
+let AppRoot = class AppRoot extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.searchService = this.initSearchServiceFromUrlParams();
+        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;
+        this.colGap = 1.7;
+        this.loggedIn = false;
+        this.searchType = SearchType.METADATA;
+        this.analyticsManager = new AnalyticsManager();
+        this.analyticsHandler = {
+            sendPing: this.sendAnalytics.bind(this),
+            sendEvent: this.sendAnalytics.bind(this),
+            sendEventNoSampling: this.sendAnalytics.bind(this),
+        };
+    }
+    sendAnalytics(ae) {
+        var _a;
+        console.log('Analytics Received ----', ae);
+        this.latestAction = ae;
+        (_a = this.analyticsManager) === null || _a === void 0 ? void 0 : _a.sendEvent(ae);
+    }
+    initSearchServiceFromUrlParams() {
+        var _a, _b, _c;
+        const params = new URL(window.location.href).searchParams;
+        return new SearchService({
+            includeCredentials: false,
+            baseUrl: (_a = params.get('search_base_url')) !== null && _a !== void 0 ? _a : undefined,
+            servicePath: (_b = params.get('search_service_path')) !== null && _b !== void 0 ? _b : undefined,
+            debuggingEnabled: (_c = !!params.get('debugging')) !== null && _c !== void 0 ? _c : undefined,
+        });
+    }
+    searchPressed(e) {
+        var _a, _b;
+        e.preventDefault();
+        this.searchQuery = this.baseQueryField.value;
+        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
+            this.collectionBrowser.goToPage((_b = this.currentPage) !== null && _b !== void 0 ? _b : 1);
+        }
+    }
+    changePagePressed(e) {
+        e.preventDefault();
+        this.currentPage = this.pageNumberInput.valueAsNumber;
+        this.collectionBrowser.goToPage(this.currentPage);
+    }
+    updated(changed) {
+        if (changed.has('currentPage') && this.currentPage) {
+            this.pageNumberInput.value = this.currentPage.toString();
+        }
+        if (changed.has('searchQuery')) {
+            this.queryUpdated();
+        }
+    }
+    queryUpdated() {
+        this.collectionBrowser.baseQuery = this.searchQuery;
+    }
+    get getClass() {
+        const searchParams = new URLSearchParams(window.location.search);
+        return searchParams.get('hide-dev-tools') ? 'hidden' : '';
+    }
+    render() {
+        var _a;
         return html `
-      <div id="dev-tools">
-        <div id="search-and-page-inputs">
-          <form @submit=${this.searchPressed}>
-            Query:
-            <input
-              type="text"
-              id="base-query-field"
-              .value=${(_a = this.searchQuery) !== null && _a !== void 0 ? _a : ''}
-            />
-            <input type="submit" value="Search" />
-          </form>
-          <form @submit=${this.changePagePressed}>
-            Page: <input type="number" value="1" id="page-number-input" />
-            <input type="submit" value="Go" />
-          </form>
-        </div>
+      <div class="dev-tool-container">
+        <div id="dev-tools" class=${this.getClass}>
+          <div id="search-and-page-inputs">
+            <form @submit=${this.searchPressed}>
+              Query:
+              <input
+                type="text"
+                id="base-query-field"
+                .value=${(_a = this.searchQuery) !== null && _a !== void 0 ? _a : ''}
+              />
+              <input type="submit" value="Search" />
+            </form>
+            <form @submit=${this.changePagePressed}>
+              Page: <input type="number" value="1" id="page-number-input" />
+              <input type="submit" value="Go" />
+            </form>
+          </div>
 
-        <div id="search-types">
-          Search type:
-          <span class="search-type">
-            <input
-              type="radio"
-              id="metadata-search"
-              name="search-type"
-              value="metadata"
-              ?checked=${this.searchType === SearchType.METADATA}
-              @click=${this.searchTypeSelected}
-            />
-            <label for="metadata-search">Metadata</label>
-          </span>
-          <span class="search-type">
-            <input
-              type="radio"
-              id="fulltext-search"
-              name="search-type"
-              value="fulltext"
-              ?checked=${this.searchType === SearchType.FULLTEXT}
-              @click=${this.searchTypeSelected}
-            />
-            <label for="fulltext-search">Full text</label>
-          </span>
-        </div>
+          <div id="search-types">
+            Search type:
+            <span class="search-type">
+              <input
+                type="radio"
+                id="metadata-search"
+                name="search-type"
+                value="metadata"
+                ?checked=${this.searchType === SearchType.METADATA}
+                @click=${this.searchTypeSelected}
+              />
+              <label for="metadata-search">Metadata</label>
+            </span>
+            <span class="search-type">
+              <input
+                type="radio"
+                id="fulltext-search"
+                name="search-type"
+                value="fulltext"
+                ?checked=${this.searchType === SearchType.FULLTEXT}
+                @click=${this.searchTypeSelected}
+              />
+              <label for="fulltext-search">Full text</label>
+            </span>
+          </div>
 
-        <div id="toggle-controls">
-          <button
-            @click=${() => {
-            var _a, _b;
-            const cellControls = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cell-controls');
-            cellControls === null || cellControls === void 0 ? void 0 : cellControls.classList.toggle('hidden');
-            const checkboxControls = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('checkbox-controls');
-            checkboxControls === null || checkboxControls === void 0 ? void 0 : checkboxControls.classList.toggle('hidden');
+          <div id="toggle-controls">
+            <button
+              @click=${() => {
+            var _a, _b;
+            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('cell-size-control');
+            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
+            const rowGapControls = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('cell-gap-control');
+            rowGapControls === null || rowGapControls === void 0 ? void 0 : rowGapControls.classList.toggle('hidden');
         }}
-          >
-            Toggle Controls
-          </button>
-          <button
-            @click=${() => {
-            var _a;
-            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('latest-event-details');
-            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
+            >
+              Toggle Cell Controls
+            </button>
+            <button
+              @click=${() => {
+            var _a;
+            const details = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('latest-event-details');
+            details === null || details === void 0 ? void 0 : details.classList.toggle('hidden');
         }}
-          >
-            Last Event Captured
-          </button>
-        </div>
+            >
+              Last Event Captured
+            </button>
+          </div>
 
-        <div id="last-event">
-          <pre id="latest-event-details" class="hidden">
-            ${JSON.stringify(this.latestAction, null, 2)}
-          </pre
-          >
-        </div>
+          <div id="last-event">
+            <pre id="latest-event-details" class="hidden">
+              ${JSON.stringify(this.latestAction, null, 2)}
+            </pre
+            >
+          </div>
 
-        <div id="cell-controls">
-          <div id="cell-size-control">
-            <div>
-              <label for="cell-width-slider">Min cell width:</label>
+          <div id="cell-controls" class="hidden">
+            <div id="cell-size-control">
+              <div>
+                <label for="cell-width-slider">Min cell width:</label>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  value="18"
+                  step="0.1"
+                  id="cell-width-slider"
+                  @input=${this.widthChanged}
+                />
+                <span>${this.cellWidth}rem</span>
+              </div>
+              <div>
+                <label for="cell-height-slider">Cell height:</label>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  value="29"
+                  step="0.1"
+                  id="cell-height-slider"
+                  @input=${this.heightChanged}
+                />
+                <span>${this.cellHeight}rem</span>
+              </div>
+            </div>
+            <div id="cell-gap-control">
+              <div>
+                <label for="cell-row-gap-slider">Row gap:</label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5"
+                  value="1.7"
+                  step="0.1"
+                  id="cell-row-gap-slider"
+                  @input=${this.rowGapChanged}
+                />
+                <span>${this.rowGap}rem</span>
+              </div>
+              <div>
+                <label for="cell-col-gap-slider">Col gap:</label>
+                <input
+                  type="range"
+                  min="0"
+                  max="5"
+                  value="1.7"
+                  step="0.1"
+                  id="cell-col-gap-slider"
+                  @input=${this.colGapChanged}
+                />
+                <span>${this.colGap}rem</span>
+              </div>
+            </div>
+          </div>
+          <div id="checkbox-controls">
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="10"
-                max="100"
-                value="18"
-                step="0.1"
-                id="cell-width-slider"
-                @input=${this.widthChanged}
+                type="checkbox"
+                id="show-outline-check"
+                @click=${this.outlineChanged}
               />
-              <span>${this.cellWidth}rem</span>
+              <label for="show-outline-check">Show cell outlines</label>
             </div>
-            <div>
-              <label for="cell-height-slider">Cell height:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="10"
-                max="100"
-                value="29"
-                step="0.1"
-                id="cell-height-slider"
-                @input=${this.heightChanged}
+                type="checkbox"
+                id="show-facet-group-outline-check"
+                @click=${this.toggleFacetGroupOutline}
               />
-              <span>${this.cellHeight}rem</span>
+              <label for="show-facet-group-outline-check">
+                Show facet group outlines
+              </label>
             </div>
-          </div>
-          <div id="cell-gap-control">
-            <div>
-              <label for="cell-row-gap-slider">Row gap:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-row-gap-slider"
-                @input=${this.rowGapChanged}
+                type="checkbox"
+                id="simulate-login"
+                @click=${this.loginChanged}
               />
-              <span>${this.rowGap}rem</span>
+              <label for="simulate-login">Simulate login</label>
             </div>
-            <div>
-              <label for="cell-col-gap-slider">Col gap:</label>
+            <div class="checkbox-control">
               <input
-                type="range"
-                min="0"
-                max="5"
-                value="1.7"
-                step="0.1"
-                id="cell-col-gap-slider"
-                @input=${this.colGapChanged}
+                type="checkbox"
+                id="show-dummy-snippets"
+                @click=${this.snippetsChanged}
               />
-              <span>${this.colGap}rem</span>
+              <label for="show-dummy-snippets">Show dummy snippets</label>
+            </div>
+            <div class="checkbox-control">
+              <input
+                type="checkbox"
+                id="enable-date-picker"
+                checked
+                @click=${this.datePickerChanged}
+              />
+              <label for="enable-date-picker">Enable date picker</label>
             </div>
           </div>
         </div>
-        <div id="checkbox-controls">
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="show-outline-check"
-              @click=${this.outlineChanged}
-            />
-            <label for="show-outline-check">Show cell outlines</label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="show-facet-group-outline-check"
-              @click=${this.toggleFacetGroupOutline}
-            />
-            <label for="show-facet-group-outline-check">
-              Show facet group outlines
-            </label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="simulate-login"
-              @click=${this.loginChanged}
-            />
-            <label for="simulate-login">Simulate login</label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="show-dummy-snippets"
-              @click=${this.snippetsChanged}
-            />
-            <label for="show-dummy-snippets">Show dummy snippets</label>
-          </div>
-          <div class="checkbox-control">
-            <input
-              type="checkbox"
-              id="enable-date-picker"
-              checked
-              @click=${this.datePickerChanged}
-            />
-            <label for="enable-date-picker">Enable date picker</label>
-          </div>
-        </div>
+        <button id="toggle-dev-tools-btn" @click=${this.toggleDevTools}>
+          Toggle Search Controls
+        </button>
       </div>
-
       <div id="collection-browser-container">
         <collection-browser
           .baseNavigationUrl=${'https://archive.org'}
@@ -271,135 +279,151 @@ let AppRoot = class AppRoot extends LitElement {
         </collection-browser>
       </div>
       <modal-manager></modal-manager>
-    `;
-    }
-    baseQueryChanged(e) {
-        this.searchQuery = e.detail.baseQuery;
-        this.collectionBrowser.clearFilters();
-    }
-    /** Handler for search type changes coming from collection browser */
-    searchTypeChanged(e) {
-        this.searchType = e.detail;
-    }
-    /** Handler for user input selecting a search type */
-    searchTypeSelected(e) {
-        const target = e.target;
-        this.searchType =
-            target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;
-        // Re-perform the current search with the new search target
-        this.reperformCurrentSearch();
-    }
-    loginChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.loggedIn = true;
-        }
-        else {
-            this.loggedIn = false;
-        }
-    }
-    outlineChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.collectionBrowser.style.setProperty('--infiniteScrollerCellOutline', '1px solid #33D1FF');
-        }
-        else {
-            this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
-        }
-    }
-    toggleFacetGroupOutline(e) {
-        const target = e.target;
-        if (target.checked) {
-            this.collectionBrowser.classList.add('showFacetGroupOutlines');
-            this.modalManager.classList.add('showFacetGroupOutlines');
-        }
-        else {
-            this.collectionBrowser.classList.remove('showFacetGroupOutlines');
-            this.modalManager.classList.remove('showFacetGroupOutlines');
-        }
-    }
-    async snippetsChanged(e) {
-        const target = e.target;
-        if (target.checked) {
-            // Decorate the default search service with a wrapper that adds
-            // dummy snippets to any successful searches
-            this.searchService = {
-                async search(params, searchType) {
-                    var _a;
-                    const searchResponse = await SearchService.default.search(params, searchType);
-                    (_a = searchResponse.success) === null || _a === void 0 ? void 0 : _a.response.results.forEach(result => {
-                        Object.defineProperty(result, 'highlight', {
-                            value: new StringField([
-                                'this is a text {{{snippet}}} block with potentially',
-                                'multiple {{{snippets}}} and such',
-                                'but the {{{snippet}}} block may be quite long perhaps',
-                                'depending on how many {{{snippet}}} matches there are',
-                                'there may be multiple lines of {{{snippets}}} to show',
-                                'but each {{{snippet}}} should be relatively short',
-                                'and {{{snippets}}} are each a {{{snippet}}} of text',
-                                'but every {{{snippet}}} might have multiple matches',
-                                'the {{{snippets}}} should be separated and surrounded by ellipses',
-                            ]),
-                        });
-                    });
-                    return searchResponse;
-                },
-            };
-        }
-        else {
-            // Restore the default seach service
-            this.searchService = SearchService.default;
-        }
-        // Re-perform the current search to show/hide the snippets immediately
-        this.reperformCurrentSearch();
-    }
-    async reperformCurrentSearch() {
-        const oldQuery = this.searchQuery;
-        this.searchQuery = ''; // Should just reset to the placeholder
-        await this.updateComplete;
-        // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:
-        await new Promise(res => {
-            setTimeout(res, 0);
-        });
-        this.searchQuery = oldQuery; // Re-apply the original query
-    }
-    datePickerChanged(e) {
-        const target = e.target;
-        this.collectionBrowser.showHistogramDatePicker = target.checked;
-        // When disabling the date picker from the demo app, also clear any existing date range params
-        if (!this.collectionBrowser.showHistogramDatePicker) {
-            this.collectionBrowser.minSelectedDate = undefined;
-            this.collectionBrowser.maxSelectedDate = undefined;
-        }
-    }
-    rowGapChanged(e) {
-        const input = e.target;
-        this.rowGap = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserRowGap', `${input.value}rem`);
-    }
-    colGapChanged(e) {
-        const input = e.target;
-        this.colGap = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserColGap', `${input.value}rem`);
-    }
-    widthChanged(e) {
-        const input = e.target;
-        this.cellWidth = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinWidth', `${input.value}rem`);
-    }
-    heightChanged(e) {
-        const input = e.target;
-        this.cellHeight = parseFloat(input.value);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinHeight', `${input.value}rem`);
-        this.collectionBrowser.style.setProperty('--collectionBrowserCellMaxHeight', `${input.value}rem`);
-    }
-    visiblePageChanged(e) {
-        const { pageNumber } = e.detail;
-        if (pageNumber === this.currentPage)
-            return;
-        this.currentPage = pageNumber;
-    }
-};
+    `;
+    }
+    baseQueryChanged(e) {
+        this.searchQuery = e.detail.baseQuery;
+    }
+    /** Handler for search type changes coming from collection browser */
+    searchTypeChanged(e) {
+        this.searchType = e.detail;
+    }
+    /** Handler for user input selecting a search type */
+    searchTypeSelected(e) {
+        const target = e.target;
+        this.searchType =
+            target.value === 'fulltext' ? SearchType.FULLTEXT : SearchType.METADATA;
+        // Re-perform the current search with the new search target
+        this.reperformCurrentSearch();
+    }
+    loginChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.loggedIn = true;
+        }
+        else {
+            this.loggedIn = false;
+        }
+    }
+    outlineChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.collectionBrowser.style.setProperty('--infiniteScrollerCellOutline', '1px solid #33D1FF');
+        }
+        else {
+            this.collectionBrowser.style.removeProperty('--infiniteScrollerCellOutline');
+        }
+    }
+    toggleDevTools() {
+        var _a, _b;
+        const pageUrl = new URL(window.location.href);
+        const { searchParams } = pageUrl;
+        if (searchParams.get('hide-dev-tools')) {
+            searchParams.delete('hide-dev-tools');
+        }
+        else {
+            searchParams.set('hide-dev-tools', 'true');
+        }
+        (_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('dev-tools')) === null || _b === void 0 ? void 0 : _b.classList.toggle('hidden');
+        if (window.history.replaceState) {
+            window.history.replaceState({
+                path: pageUrl.toString(),
+            }, '', pageUrl.toString());
+        }
+    }
+    toggleFacetGroupOutline(e) {
+        const target = e.target;
+        if (target.checked) {
+            this.collectionBrowser.classList.add('showFacetGroupOutlines');
+            this.modalManager.classList.add('showFacetGroupOutlines');
+        }
+        else {
+            this.collectionBrowser.classList.remove('showFacetGroupOutlines');
+            this.modalManager.classList.remove('showFacetGroupOutlines');
+        }
+    }
+    async snippetsChanged(e) {
+        const target = e.target;
+        if (target.checked) {
+            // Decorate the default search service with a wrapper that adds
+            // dummy snippets to any successful searches
+            this.searchService = {
+                async search(params, searchType) {
+                    var _a;
+                    const searchResponse = await SearchService.default.search(params, searchType);
+                    (_a = searchResponse.success) === null || _a === void 0 ? void 0 : _a.response.results.forEach(result => {
+                        Object.defineProperty(result, 'highlight', {
+                            value: new StringField([
+                                'this is a text {{{snippet}}} block with potentially',
+                                'multiple {{{snippets}}} and such',
+                                'but the {{{snippet}}} block may be quite long perhaps',
+                                'depending on how many {{{snippet}}} matches there are',
+                                'there may be multiple lines of {{{snippets}}} to show',
+                                'but each {{{snippet}}} should be relatively short',
+                                'and {{{snippets}}} are each a {{{snippet}}} of text',
+                                'but every {{{snippet}}} might have multiple matches',
+                                'the {{{snippets}}} should be separated and surrounded by ellipses',
+                            ]),
+                        });
+                    });
+                    return searchResponse;
+                },
+            };
+        }
+        else {
+            // Restore the default seach service
+            this.searchService = SearchService.default;
+        }
+        // Re-perform the current search to show/hide the snippets immediately
+        this.reperformCurrentSearch();
+    }
+    async reperformCurrentSearch() {
+        const oldQuery = this.searchQuery;
+        this.searchQuery = ''; // Should just reset to the placeholder
+        await this.updateComplete;
+        // For unclear reasons, Safari refuses to re-apply the old query until the next tick, hence:
+        await new Promise(res => {
+            setTimeout(res, 0);
+        });
+        this.searchQuery = oldQuery; // Re-apply the original query
+    }
+    datePickerChanged(e) {
+        const target = e.target;
+        this.collectionBrowser.showHistogramDatePicker = target.checked;
+        // When disabling the date picker from the demo app, also clear any existing date range params
+        if (!this.collectionBrowser.showHistogramDatePicker) {
+            this.collectionBrowser.minSelectedDate = undefined;
+            this.collectionBrowser.maxSelectedDate = undefined;
+        }
+    }
+    rowGapChanged(e) {
+        const input = e.target;
+        this.rowGap = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserRowGap', `${input.value}rem`);
+    }
+    colGapChanged(e) {
+        const input = e.target;
+        this.colGap = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserColGap', `${input.value}rem`);
+    }
+    widthChanged(e) {
+        const input = e.target;
+        this.cellWidth = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinWidth', `${input.value}rem`);
+    }
+    heightChanged(e) {
+        const input = e.target;
+        this.cellHeight = parseFloat(input.value);
+        this.collectionBrowser.style.setProperty('--collectionBrowserCellMinHeight', `${input.value}rem`);
+        this.collectionBrowser.style.setProperty('--collectionBrowserCellMaxHeight', `${input.value}rem`);
+    }
+    visiblePageChanged(e) {
+        const { pageNumber } = e.detail;
+        if (pageNumber === this.currentPage)
+            return;
+        this.currentPage = pageNumber;
+    }
+};
 AppRoot.styles = css `
     :host {
       display: block;
@@ -434,10 +458,6 @@ AppRoot.styles = css `
       font-size: 1.6rem;
     }
 
-    collection-browser {
-      margin-top: 20rem;
-    }
-
     modal-manager.showFacetGroupOutlines,
     collection-browser.showFacetGroupOutlines {
       --facet-row-border-top: 1px solid red;
@@ -448,8 +468,11 @@ AppRoot.styles = css `
       width: 300px;
     }
 
+    .dev-tool-container {
+      position: relative;
+    }
     #dev-tools {
-      position: fixed;
+      position: relative;
       top: 0;
       left: 0;
       z-index: 1;
@@ -458,12 +481,27 @@ AppRoot.styles = css `
       padding: 0.5rem 1rem;
       border: 1px solid black;
       font-size: 1.4rem;
+      width: 75%;
+      background: #ffffffb3;
     }
 
     #dev-tools > * {
       display: flex;
     }
 
+    #toggle-dev-tools-btn {
+      position: fixed;
+      left: 77.4%;
+      top: 0;
+      background: red;
+      padding: 5px;
+      color: white;
+      font-size: 1.4rem;
+      margin: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
+
     #search-and-page-inputs > form {
       margin-right: 1rem;
     }
@@ -508,8 +546,7 @@ AppRoot.styles = css `
     }
 
     .hidden {
-      /* If this class is present, we want the element hidden regardless of specificity */
-      display: none !important;
+      display: none;
     }
 
     #toggle-controls {
@@ -523,48 +560,48 @@ AppRoot.styles = css `
       background-color: aliceblue;
       font-size: 1.6rem;
     }
-  `;
-__decorate([
-    state()
-], AppRoot.prototype, "currentPage", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "searchQuery", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "cellWidth", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "cellHeight", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "rowGap", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "colGap", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "loggedIn", void 0);
-__decorate([
-    state()
-], AppRoot.prototype, "searchType", void 0);
-__decorate([
-    property({ type: Object, reflect: false })
-], AppRoot.prototype, "latestAction", void 0);
-__decorate([
-    query('#base-query-field')
-], AppRoot.prototype, "baseQueryField", void 0);
-__decorate([
-    query('#page-number-input')
-], AppRoot.prototype, "pageNumberInput", void 0);
-__decorate([
-    query('collection-browser')
-], AppRoot.prototype, "collectionBrowser", void 0);
-__decorate([
-    query('modal-manager')
-], AppRoot.prototype, "modalManager", void 0);
-AppRoot = __decorate([
-    customElement('app-root')
-], AppRoot);
-export { AppRoot };
+  `;
+__decorate([
+    state()
+], AppRoot.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "searchQuery", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "cellWidth", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "cellHeight", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "rowGap", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "colGap", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "loggedIn", void 0);
+__decorate([
+    state()
+], AppRoot.prototype, "searchType", void 0);
+__decorate([
+    property({ type: Object, reflect: false })
+], AppRoot.prototype, "latestAction", void 0);
+__decorate([
+    query('#base-query-field')
+], AppRoot.prototype, "baseQueryField", void 0);
+__decorate([
+    query('#page-number-input')
+], AppRoot.prototype, "pageNumberInput", void 0);
+__decorate([
+    query('collection-browser')
+], AppRoot.prototype, "collectionBrowser", void 0);
+__decorate([
+    query('modal-manager')
+], AppRoot.prototype, "modalManager", void 0);
+AppRoot = __decorate([
+    customElement('app-root')
+], AppRoot);
+export { AppRoot };
 //# sourceMappingURL=app-root.js.map