@nanoporetech-digital/components 5.9.6 → 5.10.0

package/dist/components/nano-global-nav.js

@@ -222,6 +222,11 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.searchLoading = true;
       }
     };
+    /**
+     * Called whenever the search input value changes.
+     * Performs Algolia search and shows autocomplete results.
+     * @param ev optional input change event
+     */
     this.onSearchChange = async (ev) => {
       this.searchValInternal = this.searchValue = ev
         ? ev.detail.value
@@ -237,64 +242,43 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
       if (!this.currentIndex)
         this.currentSelectedIndex();
-      try {
-        this.autocompleteResults = this.processSearchResults((await this.currentIndex.alogliaIndex.search(this.searchValInternal, {
-          attributesToSnippet: ['body:5', 'title:8'],
-          hitsPerPage: 5,
-          filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
-        })));
-      }
-      catch (e) {
-        console.error(e);
-      }
+      // start search
+      this.searchLoading = true;
+      const algoliaHits = await this.doAlgoliaSearch();
       this.scopeSearch = null;
-      this.scopeSearch = await this.onSearchSubmit(null, false);
-      this.searchLoading = false;
+      this.scopeSearch = algoliaHits;
+      // set / show autocomplete results
+      this.autocompleteResults = algoliaHits.results.find((res) => res.selected);
       this.showAutocompleteResults();
+      this.searchLoading = false;
     };
-    this.onSearchSubmit = async (ev, emit = true) => {
+    /**
+     * Called whenever the search form is submitted (but can also be called manually).
+     * Fires event which will activate / display `nano-global-search-results`
+     * @param ev optional form submit event
+     */
+    this.onSearchSubmit = async (ev) => {
       if (ev)
         ev.preventDefault();
       if (!this.isSearchValSet())
         return;
-      this.searchLoading = true;
-      this.algoliaSearchResults = null;
       if (!this.currentIndex)
         this.currentSelectedIndex();
-      const queries = this.internalSearchIndeces.map((index) => {
-        return {
-          indexName: index.index,
-          query: this.searchValInternal,
-          facets: index.filters,
-          hitsPerPage: 10,
-          filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
-        };
-      });
-      try {
-        this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
-      }
-      catch (e) {
-        this.nanoSearchError.emit(e);
-      }
-      this.searchLoading = false;
       if (!this.algoliaSearchResults)
-        return;
-      this.algoliaSearchResults.results.map((result, i) => {
-        result.indexName = this.internalSearchIndeces[i].name;
-        result.selected =
-          this.currentIndex.name === this.internalSearchIndeces[i].name;
-        result.domain = this.currentIndex.domain || null;
-        result.domains = this.myAccData.domains || null;
-        result.allGroup = !!this.internalSearchIndeces[i].allGroup;
-        result.filters = this.internalSearchIndeces[i].filters;
+        await this.doAlgoliaSearch();
+      const activeIndex = this.algoliaSearchResults.results.find((res) => res.selected);
+      const { index, domain, filters, query } = activeIndex;
+      this.nanoSearchResult.emit({
+        meta: {
+          indexTitle: activeIndex.indexName,
+          index,
+          domain,
+          filters,
+          query,
+        },
+        client: { apiKey: this.searchApiKey, appId: this.searchAppId },
       });
-      if (emit) {
-        this.nanoSearchResult.emit({
-          results: this.algoliaSearchResults.results,
-          client: { apiKey: this.searchApiKey, appId: this.searchAppId },
-        });
-        this.showAutocomplete = false;
-      }
+      this.showAutocomplete = false;
       return this.algoliaSearchResults;
     };
     this.onSearchIndexChange = async (index) => {
@@ -787,6 +771,44 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return hit.title;
   }
+  /**
+   * Constructs a multi-search query for all set search indices
+   * (which are normally controlled via the myAccount payload) then sends to Algolia.
+   * Post-processes results, adding correct domains to url fields.
+   * @returns formatted algolia results
+   */
+  async doAlgoliaSearch() {
+    this.algoliaSearchResults = null;
+    const queries = this.internalSearchIndeces.map((index) => {
+      return {
+        attributesToSnippet: ['body:5', 'title:8'],
+        indexName: index.index,
+        query: this.searchValInternal,
+        facets: index.filters,
+        hitsPerPage: 5,
+        filters: 'created > ' + Math.floor((Date.now() - 63115200000) / 1000), // only get last 2 years
+      };
+    });
+    try {
+      this.algoliaSearchResults = this.processSearchResults((await this.algoliaClient.search(queries)));
+    }
+    catch (e) {
+      this.nanoSearchError.emit(e);
+    }
+    this.searchLoading = false;
+    if (!this.algoliaSearchResults)
+      return;
+    this.algoliaSearchResults.results.map((result, i) => {
+      result.indexName = this.internalSearchIndeces[i].name;
+      result.selected =
+        this.currentIndex.name === this.internalSearchIndeces[i].name;
+      result.domain = this.currentIndex.domain || null;
+      result.domains = this.myAccData.domains || null;
+      result.allGroup = !!this.internalSearchIndeces[i].allGroup;
+      result.filters = this.internalSearchIndeces[i].filters;
+    });
+    return this.algoliaSearchResults;
+  }
   isSearchValSet() {
     if (this.searchValInternal.length < 3)
       return false;
@@ -908,7 +930,7 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           'search-icon--show': !!this.searchValue && !this.searchLoading,
         }, slot: "end", onMouseDown: (e) => {
           this.searchValInternal = this.searchInput.value;
-          this.onSearchSubmit(e, true);
+          this.onSearchSubmit(e);
         } }, h("nano-icon", { name: "light/search" })), h("span", { class: {
           'search-icon': true,
           'search-icon--loader': true,
@@ -1040,12 +1062,21 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, onClick: this.menuClose, onTouchEnd: this.menuClose }))), h("div", { class: "site-content" }, h("slot", null))));
   }
   // Data processing
+  /**
+   * Finds a correct domain (as defined by myAccount data) for a given origin
+   * @returns a domain string for this origin
+   */
   domainFor(origin) {
     if (!this.myAccData)
       return '';
     const domain = this.myAccData.domains.find((dm) => dm.origin === origin);
     return domain ? domain.domain : '';
   }
+  /**
+   * process a set, or multiple sets of algolia results
+   * and applies correct domain names / http protocol to each result's url
+   * @returns results where partial paths are turned to full urls
+   */
   processSearchResults(results) {
     const multiResults = results;
     const singleResult = results;
@@ -1064,6 +1095,9 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return singleResult;
     }
   }
+  /**
+   * Ingests the data blob from myAccount; turns prescient fields to internal state
+   */
   processMyAccData() {
     if (!this.myAccData || !this.myAccData.search.indeces.length)
       return;
@@ -1086,6 +1120,9 @@ const GlobalNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (this.myAccData.urls.messages && !this.msgUrl)
       this.msgUrl = this.myAccData.urls.messages;
   }
+  /**
+   * Ingests the data blob from myAccount links; applies prescient fields to internal state
+   */
   processMyAccLinks() {
     if (!this.myAccData.links || !this.myAccData.links.length)
       return;