Change in architecture: query options should be computed on backend

app/services/query_service.rb

@@ -21,8 +21,44 @@ class QueryService
                             end
     end if  data_source
 
+    parsed_query_options = getQueryOptions(data_query.options)
+
     service_class = "#{data_query.kind.capitalize}QueryService".constantize
-    service = service_class.new data_query, options, parsed_options, current_user
+    service = service_class.new data_query, parsed_query_options, parsed_options, current_user
     service.process
   end
+
+  private 
+    def getQueryOptions(object)
+      
+      if object.class.name === "Hash"
+
+        object.keys.each do |key|
+          object[key] = getQueryOptions(object[key])
+        end
+
+      elsif object.class.name === "String"
+        if object.start_with?('{{') && object.end_with?('}}')
+          object = options[object]
+        else
+          variables = object.scan(/\{\{(.*?)\}\}/).to_a
+
+          if variables.size > 0
+            variables.each do |variable|
+              object = object.gsub("{{#{variable[0]}}}", options["{{#{variable[0]}}}"])
+            end
+          else 
+            object = object
+          end
+        end
+      elsif object.class.name === "Array"
+
+        object.each_with_index do |element, index|
+          object[index] = getQueryOptions(element)
+        end
+
+      end
+
+      object
+    end
 end

frontend/src/Editor/Editor.jsx

@@ -609,6 +609,7 @@ class Editor extends React.Component {
                     }
                     currentState={this.state.currentState}
                     configHandleClicked={this.configHandleClicked}
+                    removeComponent={this.removeComponent}
                     onComponentClick={(id, component) => {
                       // this.setState({ selectedComponent: { id, component } });
                       // this.switchSidebarTab(1);

frontend/src/_helpers/appUtils.js

@@ -1,5 +1,5 @@
 import { toast } from 'react-toastify';
-import { resolveReferences } from '@/_helpers/utils';
+import { getDynamicVariables, resolveReferences } from '@/_helpers/utils';
 import { dataqueryService } from '@/_services';
 import _ from 'lodash';
 import moment from 'moment';
@@ -11,8 +11,6 @@ function setStateAsync(_ref, state) {
 }
 
 export function onComponentOptionsChanged(_ref, component, options) {
-  console.log('changeset', options);
-
   const componentName = component.name;
   const components = _ref.state.currentState.components;
   let componentData = components[componentName];
@@ -203,6 +201,28 @@ export function onEvent(_ref, eventName, options) {
   }
 }
 
+function getQueryVariables(options, state) { 
+
+  let queryVariables = {};
+
+  if( typeof options === 'string' ) {
+    const dynamicVariables = getDynamicVariables(options) || [];
+    dynamicVariables.forEach((variable) => { 
+      queryVariables[variable] = resolveReferences(variable, state);
+    });
+  } else if(Array.isArray(options)) { 
+    options.forEach((element) => { 
+      _.merge(queryVariables, getQueryVariables(element, state))
+    })
+  } else if(typeof options ==="object") {
+    Object.keys(options).forEach((key) => {
+      _.merge(queryVariables, getQueryVariables(options[key], state))
+    })
+  }
+
+  return queryVariables;
+}
+
 export function runQuery(_ref, queryId, queryName, confirmed = undefined) {
   const query = _ref.state.app.data_queries.find(query => query.id === queryId);
   let dataQuery = {};
@@ -214,7 +234,7 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined) {
     return;
   }
 
-  const options = resolveReferences(dataQuery.options, _ref.state.currentState);
+  const options = getQueryVariables(dataQuery.options, _ref.state.currentState);
 
   if (options.requestConfirmation) {
     if (confirmed === undefined) {