Skip to content

Commit

Permalink
immediate execution on enter. closes #98
Browse files Browse the repository at this point in the history
  • Loading branch information
oganm committed Oct 4, 2024
1 parent c66b392 commit 7e07a18
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 21 deletions.
4 changes: 4 additions & 0 deletions src/components/SearchSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -137,6 +138,9 @@ export default {
})
},
methods: {
flush(){
this.$emit('flush')
},
clearAllSelections() {
this.selectedTech = []
this.searchSettings.annotations = [];
Expand Down
48 changes: 27 additions & 21 deletions src/views/Browser.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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);
Expand Down

0 comments on commit 7e07a18

Please sign in to comment.