From 7e07a183fe4e7185d7363e7ef84611f6130bee15 Mon Sep 17 00:00:00 2001
From: OganM <ogan.mancarcii@gmail.com>
Date: Fri, 4 Oct 2024 14:08:38 -0700
Subject: [PATCH] immediate execution on enter. closes #98

---
 src/components/SearchSettings.vue |  4 +++
 src/views/Browser.vue             | 48 +++++++++++++++++--------------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/SearchSettings.vue b/src/components/SearchSettings.vue
index ec9fde5..c78e8cd 100644
--- a/src/components/SearchSettings.vue
+++ b/src/components/SearchSettings.vue
@@ -23,6 +23,7 @@
         <v-text-field
                 v-model="searchSettings.query"
                 :disabled="queryDisabled"
+                v-on:keyup.enter="flush"
                 label="Search"
                 prepend-inner-icon="mdi-magnify"
                 outlined
@@ -137,6 +138,9 @@ export default {
     })
   },
   methods: {
+    flush(){
+      this.$emit('flush')
+    },
     clearAllSelections() {
       this.selectedTech = []
       this.searchSettings.annotations = [];
diff --git a/src/views/Browser.vue b/src/views/Browser.vue
index 3e1a105..2b24ed7 100644
--- a/src/views/Browser.vue
+++ b/src/views/Browser.vue
@@ -3,6 +3,7 @@
         <v-navigation-drawer v-model="drawer" app width="400">
             <SearchSettings v-model="searchSettings"
                             class="py-3 px-3"
+                            @flush="flush"
                             :taxon-disabled="loadingTaxa"
                             :query-disabled="loadingDatasets"
                             :annotation-disabled="loadingAnnotation"
@@ -231,7 +232,29 @@ export default {
       downloadProgress: null,
       expansionToggle: [],
       tableWidth: "",
-      inferredTermLabelsByCategory:{}
+      inferredTermLabelsByCategory:{},
+      /**
+     * Basically a browse with a debounce when the user is actively typing a query.
+     * @return {Promise|undefined} initially undefined, then a promise once the function has been invoked at least once
+     */
+    search: debounce(function(browsingOptions) {
+      // had to move search into data to be able to flush debounce
+      // https://stackoverflow.com/questions/52987115/using-vue-js-how-to-you-flush-a-method-that-is-debounced-with-lodash
+      return this.browse(browsingOptions, true).then(() => {
+        let location = browsingOptions.query ? "/q/" + encodeURIComponent(browsingOptions.query) : "/";
+        // because this is debounced, it's possible that two consecutive searches are performed with the same query
+        // i.e. user types "brain" and obtain results, then deletes one char "brai" and add one char back to "brain"
+        // in less than 1s
+        if (location !== this.$router.currentRoute.fullPath) {
+          return this.$router.push(location);
+        }
+      }).catch(swallowCancellation)
+        .catch(err => {
+          // because the function is debounced, the caller might never get resulting promise and ability to handle the error
+          console.error("Error while searching: " + err.message + ".", err);
+          this.setLastError(err);
+        });
+    }, 1000)
     };
   },
   computed: {
@@ -421,28 +444,11 @@ export default {
     }
   },
   methods: {
+    flush: function(){
+      this.search.flush()
+    },
     formatDecimal,
     formatPercent,
-    /**
-     * Basically a browse with a debounce when the user is actively typing a query.
-     * @return {Promise|undefined} initially undefined, then a promise once the function has been invoked at least once
-     */
-    search: debounce(function(browsingOptions) {
-      return this.browse(browsingOptions, true).then(() => {
-        let location = browsingOptions.query ? "/q/" + encodeURIComponent(browsingOptions.query) : "/";
-        // because this is debounced, it's possible that two consecutive searches are performed with the same query
-        // i.e. user types "brain" and obtain results, then deletes one char "brai" and add one char back to "brain"
-        // in less than 1s
-        if (location !== this.$router.currentRoute.fullPath) {
-          return this.$router.push(location);
-        }
-      }).catch(swallowCancellation)
-        .catch(err => {
-          // because the function is debounced, the caller might never get resulting promise and ability to handle the error
-          console.error("Error while searching: " + err.message + ".", err);
-          this.setLastError(err);
-        });
-    }, 1000),
     browse(browsingOptions, updateEverything) {
       // update available annotations and number of datasets
       let updateDatasetsPromise = this.updateDatasets(browsingOptions.query, browsingOptions.filter, browsingOptions.offset, browsingOptions.limit, browsingOptions.sort);