@internetarchive/collection-browser 0.3.5-alpha.1 → 0.3.5

package/dist/src/app-root.js

@@ -1,68 +1,77 @@
-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 = SearchService.default;
-        this.resizeObserver = new SharedResizeObserver();
-        this.localCache = new LocalCache();
-        this.collectionNameCache = new CollectionNameCache({
-            searchService: this.searchService,
-            localCache: this.localCache,
-        });
-        this.cellWidth = 18;
-        this.cellHeight = 29;
-        this.rowGap = 1.7;
-        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.sendEventNoSampling(ae);
-    }
-    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.sendEventNoSampling(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;
         return html `
       <div id="dev-tools">
         <div id="search-and-page-inputs">
@@ -83,42 +92,47 @@ let AppRoot = class AppRoot extends LitElement {
 
         <div id="search-types">
           Search type:
-          <input
-            type="radio"
-            id="metadata-search"
-            name="search-type"
-            value="metadata"
-            checked
-            @click=${this.searchTypeChanged}
-          />
-          <label for="metadata-search">Metadata</label>
-          <input
-            type="radio"
-            id="fulltext-search"
-            name="search-type"
-            value="fulltext"
-            @click=${this.searchTypeChanged}
-          />
-          <label for="fulltext-search">Full text</label>
+          <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 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 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 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');
+            @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
@@ -135,7 +149,7 @@ let AppRoot = class AppRoot extends LitElement {
         <div id="cell-controls" class="hidden">
           <div id="cell-size-control">
             <div>
-              <label for="cell-width-slider">Minimum cell width:</label>
+              <label for="cell-width-slider">Min cell width:</label>
               <input
                 type="range"
                 min="10"
@@ -160,40 +174,6 @@ let AppRoot = class AppRoot extends LitElement {
               />
               <span>${this.cellHeight}rem</span>
             </div>
-            <div>
-              <label for="show-outline-check">Show outlines:</label>
-              <input
-                type="checkbox"
-                id="show-outline-check"
-                @click=${this.outlineChanged}
-              />
-            </div>
-            <div>
-              <label for="show-facet-group-outline-check"
-                >Show Facet Group Outlines:</label
-              >
-              <input
-                type="checkbox"
-                id="show-facet-group-outline-check"
-                @click=${this.toggleFacetGroupOutline}
-              />
-            </div>
-            <div>
-              <label for="simulate-login">Simulate Login:</label>
-              <input
-                type="checkbox"
-                id="simulate-login"
-                @click=${this.loginChanged}
-              />
-            </div>
-            <div>
-              <label for="show-dummy-snippets">Show dummy snippets:</label>
-              <input
-                type="checkbox"
-                id="show-dummy-snippets"
-                @click=${this.snippetsChanged}
-              />
-            </div>
           </div>
           <div id="cell-gap-control">
             <div>
@@ -224,6 +204,42 @@ let AppRoot = class AppRoot extends LitElement {
             </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>
       </div>
 
       <div id="collection-browser-container">
@@ -240,124 +256,130 @@ let AppRoot = class AppRoot extends LitElement {
           .analyticsHandler=${this.analyticsHandler}
           @visiblePageChanged=${this.visiblePageChanged}
           @baseQueryChanged=${this.baseQueryChanged}
+          @searchTypeChanged=${this.searchTypeChanged}
         >
         </collection-browser>
       </div>
       <modal-manager></modal-manager>
-    `;
-    }
-    baseQueryChanged(e) {
-        this.searchQuery = e.detail.baseQuery;
-    }
-    searchTypeChanged(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
+    }
+    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;
@@ -422,8 +444,17 @@ AppRoot.styles = css `
       display: flex;
     }
 
+    #search-and-page-inputs > form {
+      margin-right: 1rem;
+    }
+
+    .search-type {
+      margin-right: 1rem;
+    }
+
     #cell-controls {
       display: flex;
+      flex-wrap: wrap;
     }
 
     #cell-controls label {
@@ -431,10 +462,25 @@ AppRoot.styles = css `
       width: 10rem;
     }
 
+    #cell-size-control,
+    #cell-gap-control {
+      flex-basis: calc(50% - 1rem);
+      flex-grow: 1;
+    }
+
     #cell-gap-control {
       margin-left: 1rem;
     }
 
+    #checkbox-controls {
+      padding-top: 0.5rem;
+      flex-wrap: wrap;
+    }
+
+    .checkbox-control {
+      flex-basis: 50%;
+    }
+
     #last-event {
       background-color: aliceblue;
       padding: 5px;
@@ -456,48 +502,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