Refresh query when parameters update

client/app/pages/queries/view.js

@@ -1,4 +1,4 @@
-import { pick, some, find, minBy, map, intersection, isArray, isObject } from 'lodash';
+import { debounce, pick, some, isEmpty, find, filter, minBy, map, intersection, isArray, isObject } from 'lodash';
 import { SCHEMA_NOT_SUPPORTED, SCHEMA_LOAD_ERROR } from '@/services/data-source';
 import getTags from '@/services/getTags';
 import { policy } from '@/services/policy';
@@ -27,7 +27,7 @@ function QueryViewCtrl(
   DataSource,
   Visualization,
 ) {
-  function getQueryResult(maxAge, selectedQueryText) {
+  function getQueryResult(maxAge, selectedQueryText, parameters) {
     if (maxAge === undefined) {
       maxAge = $location.search().maxAge;
     }
@@ -38,12 +38,13 @@ function QueryViewCtrl(
 
     $scope.showLog = false;
     if ($scope.isDirty) {
-      $scope.queryResult = $scope.query.getQueryResultByText(maxAge, selectedQueryText);
+      $scope.queryResult = $scope.query.getQueryResultByText(maxAge, selectedQueryText, parameters);
     } else {
-      $scope.queryResult = $scope.query.getQueryResult(maxAge);
+      $scope.queryResult = $scope.query.getQueryResult(maxAge, parameters);
     }
   }
 
+  const getQueryResultDebounced = debounce(getQueryResult, 1000);
 
   function getDataSourceId() {
     // Try to get the query's data source id
@@ -124,6 +125,7 @@ function QueryViewCtrl(
       return;
     }
 
+    getQueryResultDebounced.cancel();
     getQueryResult(0, $scope.selectedQueryText);
     $scope.lockButton(true);
     $scope.cancelling = false;
@@ -422,6 +424,16 @@ function QueryViewCtrl(
     }
   });
 
+  $scope.$watch('query.getParametersDefs()', (parameters) => {
+    const touchedParameters = filter(parameters, { touched: true });
+
+    if (!isEmpty(touchedParameters)) {
+      getQueryResultDebounced(0, $scope.selectedQueryText);
+    } else {
+      getQueryResultDebounced.cancel();
+    }
+  }, true);
+
   function getVisualization(visId) {
     // eslint-disable-next-line eqeqeq
     return find($scope.query.visualizations, item => item.id == visId);

client/app/services/query.js

@@ -66,6 +66,10 @@ export class Parameter {
     // validate value and init internal state
     this.setValue(parameter.value);
 
+    // define touch state based on last query result value
+    this.lastQueryResultValue = parameter.value;
+    Object.defineProperty(this, 'touched', { get: () => this.value !== this.lastQueryResultValue });
+
     // Used for URL serialization
     Object.defineProperty(this, 'urlPrefix', {
       configurable: true,
@@ -527,14 +531,29 @@ function QueryResource(
     return this.queryResult;
   };
 
-  QueryService.prototype.getQueryResult = function getQueryResult(maxAge) {
-    const execute = () => QueryResult.getByQueryId(this.id, this.getParameters().getValues(), maxAge);
+  QueryService.prototype.getQueryResult = function getQueryResult(maxAge, parameters) {
+    if (parameters === undefined) {
+      parameters = this.getParameters().getValues();
+    }
+
+    this.getParametersDefs().forEach((param) => {
+      param.lastQueryResultValue = parameters[param.name];
+    });
+
+    const execute = () => QueryResult.getByQueryId(this.id, parameters, maxAge);
     return this.prepareQueryResultExecution(execute, maxAge);
   };
 
-  QueryService.prototype.getQueryResultByText = function getQueryResultByText(maxAge, selectedQueryText) {
+  QueryService.prototype.getQueryResultByText = function getQueryResultByText(maxAge, selectedQueryText, parameters) {
+    if (parameters === undefined) {
+      parameters = this.getParameters().getValues();
+    }
+
+    this.getParametersDefs().forEach((param) => {
+      param.lastQueryResultValue = parameters[param.name];
+    });
+
     const queryText = selectedQueryText || this.query;
-    const parameters = this.getParameters().getValues();
     const execute = () => QueryResult.get(this.data_source_id, queryText, parameters, maxAge, this.id);
     return this.prepareQueryResultExecution(execute, maxAge);
   };