@internetarchive/collection-browser 0.3.7 → 0.3.8

package/dist/src/app-root.js

@@ -1,77 +1,78 @@
-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({
-            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;
+    }
+    render() {
+        var _a;
         return html `
       <div id="dev-tools">
         <div id="search-and-page-inputs">
@@ -118,21 +119,21 @@ let AppRoot = class AppRoot extends LitElement {
 
         <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');
+            @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');
         }}
           >
-            Toggle Cell Controls
+            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');
+            @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
@@ -146,7 +147,7 @@ let AppRoot = class AppRoot extends LitElement {
           >
         </div>
 
-        <div id="cell-controls" class="hidden">
+        <div id="cell-controls">
           <div id="cell-size-control">
             <div>
               <label for="cell-width-slider">Min cell width:</label>
@@ -239,6 +240,15 @@ let AppRoot = class AppRoot extends LitElement {
             />
             <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>
 
@@ -261,125 +271,135 @@ let AppRoot = class AppRoot extends LitElement {
         </collection-browser>
       </div>
       <modal-manager></modal-manager>
-    `;
-    }
-    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');
-        }
-    }
-    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
-    }
-    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');
+        }
+    }
+    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;
+            this.collectionBrowser.dateRangeQueryClause = 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;
@@ -488,7 +508,8 @@ AppRoot.styles = css `
     }
 
     .hidden {
-      display: none;
+      /* If this class is present, we want the element hidden regardless of specificity */
+      display: none !important;
     }
 
     #toggle-controls {
@@ -502,48 +523,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