@internetarchive/collection-browser 0.2.20-alpha.0 → 0.2.20

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

@@ -1,3 +1,4 @@
+import { AnalyticsEvent } from '@internetarchive/analytics-manager';
 import { LitElement, PropertyValues } from 'lit';
 import '../src/collection-browser';
 export declare class AppRoot extends LitElement {
@@ -12,7 +13,7 @@ export declare class AppRoot extends LitElement {
     private rowGap;
     private colGap;
     private loggedIn;
-    private actionBlob?;
+    latestAction?: AnalyticsEvent;
     private baseQueryField;
     private pageNumberInput;
     private collectionBrowser;

package/dist/src/app-root.js

@@ -3,7 +3,7 @@ import { AnalyticsManager, } from '@internetarchive/analytics-manager';
 import { SearchService } from '@internetarchive/search-service';
 import { LocalCache } from '@internetarchive/local-cache';
 import { html, css, LitElement } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import { 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';
@@ -24,15 +24,15 @@ let AppRoot = class AppRoot extends LitElement {
         this.loggedIn = false;
         this.analyticsManager = new AnalyticsManager();
         this.analyticsHandler = {
-            sendPing: this.sendAnalytics,
-            sendEvent: this.sendAnalytics,
-            sendEventNoSampling: this.sendAnalytics,
+            sendPing: this.sendAnalytics.bind(this),
+            sendEvent: this.sendAnalytics.bind(this),
+            sendEventNoSampling: this.sendAnalytics.bind(this),
         };
     }
     sendAnalytics(ae) {
         var _a;
-        this.actionBlob = `{category: ${ae.category}, action: ${ae.action}, label: ${ae.label}}`;
-        console.log('actionBlob: ', this.actionBlob);
+        console.log('Analytics Received ----', ae);
+        this.latestAction = ae;
         (_a = this.analyticsManager) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling(ae);
     }
     searchPressed(e) {
@@ -78,7 +78,21 @@ let AppRoot = class AppRoot extends LitElement {
           <input type="submit" value="Go" />
         </form>
 
-        <h3>Last Event Captured:: ${this.actionBlob}</h3>
+        <div id="last-event">
+          <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>
+          <pre id="latest-event-details">
+            ${JSON.stringify(this.latestAction, null, 2)}
+          </pre
+          >
+        </div>
 
         <div id="cell-controls">
           <div id="cell-size-control">
@@ -275,6 +289,7 @@ let AppRoot = class AppRoot extends LitElement {
 AppRoot.styles = css `
     :host {
       display: block;
+      --ia-theme-link-color: #4b64ff;
     }
 
     input,
@@ -313,6 +328,16 @@ AppRoot.styles = css `
     #cell-gap-control {
       margin-left: 1rem;
     }
+
+    #last-event {
+      background-color: aliceblue;
+      padding: 5px;
+      margin: 5px auto;
+    }
+
+    .hidden {
+      display: none;
+    }
   `;
 __decorate([
     state()
@@ -336,8 +361,8 @@ __decorate([
     state()
 ], AppRoot.prototype, "loggedIn", void 0);
 __decorate([
-    state()
-], AppRoot.prototype, "actionBlob", void 0);
+    property({ type: Object, reflect: false })
+], AppRoot.prototype, "latestAction", void 0);
 __decorate([
     query('#base-query-field')
 ], AppRoot.prototype, "baseQueryField", void 0);

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":["import {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport { SearchService } from '@internetarchive/search-service';\nimport { LocalCache } from '@internetarchive/local-cache';\nimport { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, query, state } from 'lit/decorators.js';\nimport { SharedResizeObserver } from '@internetarchive/shared-resize-observer';\nimport { CollectionNameCache } from '@internetarchive/collection-name-cache';\n\nimport type { AnalyticsHandlerInterface } from './analytics/analytics-handler-interface';\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 = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private loggedIn: boolean = false;\n\n  @state() private actionBlob?: string;\n\n  @query('#base-query-field') private baseQueryField!: HTMLInputElement;\n\n  @query('#page-number-input') private pageNumberInput!: HTMLInputElement;\n\n  @query('collection-browser') private collectionBrowser!: CollectionBrowser;\n\n  private analyticsManager = new AnalyticsManager();\n\n  private analyticsHandler: AnalyticsHandlerInterface = {\n    sendPing: this.sendAnalytics,\n    sendEvent: this.sendAnalytics,\n    sendEventNoSampling: this.sendAnalytics,\n  };\n\n  private sendAnalytics(ae: AnalyticsEvent) {\n    this.actionBlob = `{category: ${ae.category}, action: ${ae.action}, label: ${ae.label}}`;\n    console.log('actionBlob: ', this.actionBlob);\n    this.analyticsManager?.sendEventNoSampling(ae);\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 updated(changed: PropertyValues): void {\n    if (changed.has('currentPage') && this.currentPage) {\n      this.pageNumberInput.value = this.currentPage.toString();\n    }\n\n    if (changed.has('searchQuery')) {\n      this.queryUpdated();\n    }\n  }\n\n  private queryUpdated() {\n    this.collectionBrowser.baseQuery = this.searchQuery;\n  }\n\n  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <h3>Last Event Captured:: ${this.actionBlob}</h3>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n            <div>\n              <label for=\"simulate-login\">Simulate Login:</label>\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n            </div>\n            <div>\n              <label for=\"show-dummy-snippets\">Show dummy snippets:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-dummy-snippets\"\n                @click=${this.snippetsChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          .analyticsHandler=${this.analyticsHandler}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n    this.searchQuery = e.detail.baseQuery;\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 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        ...SearchService.default,\n        async search(params) {\n          const result = await SearchService.default.search(params);\n          result.success?.response.docs.forEach(doc => {\n            const metadata = doc.rawMetadata;\n            if (metadata) {\n              metadata.snippets = [\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 result;\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    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 => setTimeout(res, 0));\n    this.searchQuery = oldQuery; // Re-apply the original query\n  }\n\n  private rowGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.rowGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserRowGap',\n      `${input.value}rem`\n    );\n  }\n\n  private colGapChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.colGap = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserColGap',\n      `${input.value}rem`\n    );\n  }\n\n  private widthChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellWidth = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinWidth',\n      `${input.value}rem`\n    );\n  }\n\n  private heightChanged(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.cellHeight = parseFloat(input.value);\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMinHeight',\n      `${input.value}rem`\n    );\n    this.collectionBrowser.style.setProperty(\n      '--collectionBrowserCellMaxHeight',\n      `${input.value}rem`\n    );\n  }\n\n  private visiblePageChanged(e: CustomEvent<{ pageNumber: number }>) {\n    const { pageNumber } = e.detail;\n    if (pageNumber === this.currentPage) return;\n    this.currentPage = pageNumber;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n  `;\n}\n"]}
+{"version":3,"file":"app-root.js","sourceRoot":"","sources":["../../src/app-root.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AnalyticsEvent,\n  AnalyticsManager,\n} from '@internetarchive/analytics-manager';\nimport { SearchService } 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 { 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 = SearchService.default;\n\n  private resizeObserver = new SharedResizeObserver();\n\n  private localCache = new LocalCache();\n\n  private collectionNameCache = new CollectionNameCache({\n    searchService: this.searchService,\n    localCache: this.localCache,\n  });\n\n  @state() private currentPage?: number;\n\n  @state() private searchQuery?: string;\n\n  @state() private cellWidth: number = 18;\n\n  @state() private cellHeight: number = 29;\n\n  @state() private rowGap: number = 1.7;\n\n  @state() private colGap: number = 1.7;\n\n  @state() private loggedIn: boolean = false;\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  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?.sendEventNoSampling(ae);\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  render() {\n    return html`\n      <div id=\"dev-tools\">\n        <form @submit=${this.searchPressed}>\n          Query:\n          <input\n            type=\"text\"\n            id=\"base-query-field\"\n            .value=${this.searchQuery ?? ''}\n          />\n          <input type=\"submit\" value=\"Search\" />\n        </form>\n\n        <form @submit=${this.changePagePressed}>\n          Page: <input type=\"number\" value=\"1\" id=\"page-number-input\" />\n          <input type=\"submit\" value=\"Go\" />\n        </form>\n\n        <div id=\"last-event\">\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          <pre id=\"latest-event-details\">\n            ${JSON.stringify(this.latestAction, null, 2)}\n          </pre\n          >\n        </div>\n\n        <div id=\"cell-controls\">\n          <div id=\"cell-size-control\">\n            <div>\n              <label for=\"cell-width-slider\">Minimum cell width:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"18\"\n                step=\"0.1\"\n                id=\"cell-width-slider\"\n                @input=${this.widthChanged}\n              />\n              <span>${this.cellWidth}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-height-slider\">Cell height:</label>\n              <input\n                type=\"range\"\n                min=\"10\"\n                max=\"100\"\n                value=\"29\"\n                step=\"0.1\"\n                id=\"cell-height-slider\"\n                @input=${this.heightChanged}\n              />\n              <span>${this.cellHeight}rem</span>\n            </div>\n            <div>\n              <label for=\"show-outline-check\">Show outlines:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-outline-check\"\n                @click=${this.outlineChanged}\n              />\n            </div>\n            <div>\n              <label for=\"simulate-login\">Simulate Login:</label>\n              <input\n                type=\"checkbox\"\n                id=\"simulate-login\"\n                @click=${this.loginChanged}\n              />\n            </div>\n            <div>\n              <label for=\"show-dummy-snippets\">Show dummy snippets:</label>\n              <input\n                type=\"checkbox\"\n                id=\"show-dummy-snippets\"\n                @click=${this.snippetsChanged}\n              />\n            </div>\n          </div>\n          <div id=\"cell-gap-control\">\n            <div>\n              <label for=\"cell-row-gap-slider\">Row gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-row-gap-slider\"\n                @input=${this.rowGapChanged}\n              />\n              <span>${this.rowGap}rem</span>\n            </div>\n            <div>\n              <label for=\"cell-col-gap-slider\">Col gap:</label>\n              <input\n                type=\"range\"\n                min=\"0\"\n                max=\"5\"\n                value=\"1.7\"\n                step=\"0.1\"\n                id=\"cell-col-gap-slider\"\n                @input=${this.colGapChanged}\n              />\n              <span>${this.colGap}rem</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"collection-browser-container\">\n        <collection-browser\n          .baseNavigationUrl=${'https://archive.org'}\n          .baseImageUrl=${'https://archive.org'}\n          .searchService=${this.searchService}\n          .resizeObserver=${this.resizeObserver}\n          .collectionNameCache=${this.collectionNameCache}\n          .showHistogramDatePicker=${true}\n          .loggedIn=${this.loggedIn}\n          .analyticsHandler=${this.analyticsHandler}\n          @visiblePageChanged=${this.visiblePageChanged}\n          @baseQueryChanged=${this.baseQueryChanged}\n        >\n        </collection-browser>\n      </div>\n    `;\n  }\n\n  private baseQueryChanged(e: CustomEvent<{ baseQuery?: string }>) {\n    this.searchQuery = e.detail.baseQuery;\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 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        ...SearchService.default,\n        async search(params) {\n          const result = await SearchService.default.search(params);\n          result.success?.response.docs.forEach(doc => {\n            const metadata = doc.rawMetadata;\n            if (metadata) {\n              metadata.snippets = [\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 result;\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    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 => setTimeout(res, 0));\n    this.searchQuery = oldQuery; // Re-apply the original query\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      --ia-theme-link-color: #4b64ff;\n    }\n\n    input,\n    button {\n      font-size: 1.6rem;\n    }\n\n    collection-browser {\n      margin-top: 30rem;\n    }\n\n    #base-query-field {\n      width: 300px;\n    }\n\n    #dev-tools {\n      position: fixed;\n      top: 0;\n      left: 0;\n      z-index: 10;\n      -webkit-backdrop-filter: blur(10px);\n      backdrop-filter: blur(10px);\n      padding: 0.5rem 1rem;\n      border: 1px solid black;\n    }\n\n    #cell-controls {\n      display: flex;\n    }\n\n    #cell-controls label {\n      display: inline-block;\n      width: 10rem;\n    }\n\n    #cell-gap-control {\n      margin-left: 1rem;\n    }\n\n    #last-event {\n      background-color: aliceblue;\n      padding: 5px;\n      margin: 5px auto;\n    }\n\n    .hidden {\n      display: none;\n    }\n  `;\n}\n"]}

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

@@ -10,7 +10,7 @@ import './sort-filter-bar/sort-filter-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './sort-filter-bar/sort-filter-bar';
-import { SelectedFacets, SortField, CollectionBrowserContext, CollectionDisplayMode } from './models';
+import { SelectedFacets, SortField, CollectionBrowserContext, TileModel, CollectionDisplayMode, FacetOption } from './models';
 import { RestorationStateHandlerInterface } from './restoration-state-handler';
 import './empty-placeholder';
 export declare class CollectionBrowser extends LitElement implements InfiniteScrollerCellProviderInterface, SharedResizeObserverResizeHandlerInterface {
@@ -94,8 +94,6 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      */
     private dataSource;
     private infiniteScroller;
-    private analyticsCategories;
-    private analyticsActions;
     /**
      * Go to the given page of results
      *
@@ -110,9 +108,18 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     private get infiniteScrollerTemplate();
     private get sortFilterBarTemplate();
     private userChangedSort;
+    private sendSortByAnalytics;
     private selectedSortChanged;
     private displayModeChanged;
+    /** Send Analytics when sorting by title's first letter
+     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
+     * */
+    private sendFilterByTitleAnalytics;
     private selectedTitleLetterChanged;
+    /** Send Analytics when filtering by creator's first letter
+     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
+     * */
+    private sendFilterByCreatorAnalytics;
     private selectedCreatorLetterChanged;
     private titleLetterSelected;
     private creatorLetterSelected;
@@ -157,6 +164,7 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      */
     private get facetQuery();
     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
@@ -207,6 +215,10 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      */
     private updateDataSource;
     private etreeTitle;
+    /**
+     * Callback when a result is selected
+     */
+    resultSelected(event: CustomEvent<TileModel>): void;
     cellForIndex(index: number): TemplateResult | undefined;
     /**
      * When the user scrolls near to the bottom of the page, fetch the next page

package/dist/src/collection-browser.js

@@ -15,7 +15,7 @@ import { RestorationStateHandler, } from './restoration-state-handler';
 import chevronIcon from './assets/img/icons/chevron';
 import { LanguageCodeHandler } from './language-code-handler/language-code-handler';
 import './empty-placeholder';
-import { analyticsActions, analyticsCategories, } from './utils/analytics-category-event';
+import { analyticsActions, analyticsCategories, } from './utils/analytics-events';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     constructor() {
         super(...arguments);
@@ -78,8 +78,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * for the previous/next page, we'll fetch the next/previous page to populate it
          */
         this.dataSource = {};
-        this.analyticsCategories = analyticsCategories;
-        this.analyticsActions = analyticsActions;
         // we only want to scroll on the very first query change
         // so this keeps track of whether we've already set the initial query
         this.initialQueryChangeHappened = false;
@@ -243,8 +241,16 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         this.currentPage = 1;
     }
-    selectedSortChanged() {
+    sendSortByAnalytics(prevSortDirection) {
         var _a;
+        const directionCleared = prevSortDirection && !this.sortDirection;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+            category: analyticsCategories.default,
+            action: analyticsActions.sortBy,
+            label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
+        });
+    }
+    selectedSortChanged() {
         if (this.selectedSort === 'relevance' || this.sortDirection === null) {
             this.sortParam = null;
             return;
@@ -253,42 +259,61 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (!sortField)
             return;
         this.sortParam = { field: sortField, direction: this.sortDirection };
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.analyticsCategories.default,
-            action: this.analyticsActions.sortBy,
-            label: `${sortField} - ${this.sortDirection}`,
-        });
     }
     displayModeChanged(e) {
         var _a;
         this.displayMode = e.detail.displayMode;
+        if (this.displayMode) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+                category: analyticsCategories.default,
+                action: analyticsActions.displayMode,
+                label: this.displayMode,
+            });
+        }
+    }
+    /** Send Analytics when sorting by title's first letter
+     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
+     * */
+    sendFilterByTitleAnalytics(prevSelectedLetter) {
+        var _a;
+        if (!prevSelectedLetter && !this.selectedTitleFilter) {
+            return;
+        }
+        const cleared = prevSelectedLetter && this.selectedTitleFilter === null;
         (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.analyticsCategories.default,
-            action: this.analyticsActions.displayMode,
-            label: this.displayMode,
+            category: analyticsCategories.default,
+            action: analyticsActions.filterByTitle,
+            label: cleared
+                ? `clear-${prevSelectedLetter}`
+                : `${prevSelectedLetter || 'start'}-${this.selectedTitleFilter}`,
         });
     }
     selectedTitleLetterChanged() {
-        var _a;
         this.titleQuery = this.selectedTitleFilter
             ? `firstTitle:${this.selectedTitleFilter}`
             : undefined;
+    }
+    /** Send Analytics when filtering by creator's first letter
+     * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
+     * */
+    sendFilterByCreatorAnalytics(prevSelectedLetter) {
+        var _a;
+        if (!prevSelectedLetter && !this.selectedCreatorFilter) {
+            return;
+        }
+        const cleared = prevSelectedLetter && this.selectedCreatorFilter === null;
         (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.analyticsCategories.default,
-            action: this.analyticsActions.sortByTitle,
-            label: `${this.titleQuery}`,
+            category: analyticsCategories.default,
+            action: analyticsActions.filterByCreator,
+            label: cleared
+                ? `clear-${prevSelectedLetter}`
+                : `${prevSelectedLetter || 'start'}-${this.selectedCreatorFilter}`,
         });
     }
     selectedCreatorLetterChanged() {
-        var _a;
         this.creatorQuery = this.selectedCreatorFilter
             ? `firstCreator:${this.selectedCreatorFilter}`
             : undefined;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.analyticsCategories.default,
-            action: this.analyticsActions.sortByCreator,
-            label: `${this.creatorQuery}`,
-        });
     }
     titleLetterSelected(e) {
         this.selectedCreatorFilter = null;
@@ -339,9 +364,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         ?collapsableFacets=${this.mobileView}
         ?facetsLoading=${this.facetDataLoading}
         ?fullYearAggregationLoading=${this.fullYearAggregationLoading}
+        .onFacetClick=${this.facetClickHandler}
         .analyticsHandler=${this.analyticsHandler}
-        .analyticsCategories=${this.analyticsCategories}
-        .analyticsActions=${this.analyticsActions}
       >
       </collection-facets>
     `;
@@ -386,11 +410,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         var _a;
         const { minDate, maxDate } = e.detail;
         this.dateRangeQueryClause = `year:[${minDate} TO ${maxDate}]`;
-        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
-            category: this.analyticsCategories.default,
-            action: this.analyticsActions.histogramChanged,
-            label: this.dateRangeQueryClause,
-        });
+        if (this.dateRangeQueryClause) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+                category: analyticsCategories.default,
+                action: analyticsActions.histogramChanged,
+                label: this.dateRangeQueryClause,
+            });
+        }
     }
     firstUpdated() {
         this.setupStateRestorationObserver();
@@ -420,12 +446,16 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.handleQueryChange();
         }
         if (changed.has('selectedSort') || changed.has('sortDirection')) {
+            const prevSortDirection = changed.get('sortDirection');
+            this.sendSortByAnalytics(prevSortDirection);
             this.selectedSortChanged();
         }
         if (changed.has('selectedTitleFilter')) {
+            this.sendFilterByTitleAnalytics(changed.get('selectedTitleFilter'));
             this.selectedTitleLetterChanged();
         }
         if (changed.has('selectedCreatorFilter')) {
+            this.sendFilterByCreatorAnalytics(changed.get('selectedCreatorFilter'));
             this.selectedCreatorLetterChanged();
         }
         if (changed.has('pagesToRender')) {
@@ -642,6 +672,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     facetsChanged(e) {
         this.selectedFacets = e.detail;
     }
+    facetClickHandler(name, facetSelected, negative) {
+        var _a, _b;
+        if (negative) {
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+                category: analyticsCategories.default,
+                action: facetSelected
+                    ? analyticsActions.facetNegativeSelected
+                    : analyticsActions.facetNegativeDeselected,
+                label: name,
+            });
+        }
+        else {
+            (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
+                category: analyticsCategories.default,
+                action: facetSelected
+                    ? analyticsActions.facetSelected
+                    : analyticsActions.facetDeselected,
+                label: name,
+            });
+        }
+    }
     async fetchFacets() {
         var _a, _b;
         if (!this.fullQuery)
@@ -948,6 +999,22 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         return title !== null && title !== void 0 ? title : '';
     }
+    /**
+     * Callback when a result is selected
+     */
+    resultSelected(event) {
+        var _a, _b;
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEventNoSampling({
+            category: analyticsCategories.default,
+            action: analyticsActions.resultSelected,
+            label: event.detail.mediatype,
+        });
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEventNoSampling({
+            category: analyticsCategories.default,
+            action: analyticsActions.resultSelected,
+            label: `page-${this.currentPage}`,
+        });
+    }
     cellForIndex(index) {
         const model = this.tileModelAtCellIndex(index);
         if (!model)
@@ -963,6 +1030,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         .sortParam=${this.sortParam}
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
+        @resultSelected=${(e) => this.resultSelected(e)}
       >
       </tile-dispatcher>
     `;