Allow execution of highlighted subquery

client/app/components/QueryEditor.css

@@ -0,0 +1,8 @@
+@keyframes fadeIt {
+    0%   { background-color: rgba(255, 121, 100, 0.557); }
+    100% { background-color: transparent; }
+}
+
+.ace_editor.highlightedText .ace_marker-layer .ace_selection {
+    animation: fadeIt 0.5s ease-out;
+}

client/app/components/QueryEditor.jsx

@@ -19,6 +19,8 @@ import AutocompleteToggle from '@/components/AutocompleteToggle';
 import keywordBuilder from './keywordBuilder';
 import { DataSource, Schema } from './proptypes';
 
+import './QueryEditor.css';
+
 const langTools = ace.acequire('ace/ext/language_tools');
 const snippetsModule = ace.acequire('ace/snippets');
 
@@ -51,6 +53,7 @@ class QueryEditor extends React.Component {
     queryExecuting: PropTypes.bool.isRequired,
     saveQuery: PropTypes.func.isRequired,
     updateQuery: PropTypes.func.isRequired,
+    updateHighlightedQuery: PropTypes.func.isRequired,
     listenForResize: PropTypes.func.isRequired,
     listenForEditorCommand: PropTypes.func.isRequired,
   };
@@ -64,6 +67,8 @@ class QueryEditor extends React.Component {
   constructor(props) {
     super(props);
 
+    this.refEditor = React.createRef();
+
     this.state = {
       schema: null, // eslint-disable-line react/no-unused-state
       keywords: {
@@ -75,6 +80,7 @@ class QueryEditor extends React.Component {
       liveAutocompleteDisabled: false,
       // XXX temporary while interfacing with angular
       queryText: props.queryText,
+      highlightedQueryText: null,
     };
 
     const schemaCompleter = {
@@ -181,6 +187,15 @@ class QueryEditor extends React.Component {
     });
   };
 
+  updateSelectedQuery = (selection) => {
+    const { editor } = this.refEditor.current;
+    const doc = editor.getSession().doc;
+    const rawHighlightedQueryText = doc.getTextRange(selection.getRange());
+    const highlightedQueryText = (rawHighlightedQueryText.length > 1) ? rawHighlightedQueryText : null;
+    this.setState({ highlightedQueryText });
+    this.props.updateHighlightedQuery(highlightedQueryText);
+  }
+
   updateQuery = (queryText) => {
     this.props.updateQuery(queryText);
     this.setState({ queryText });
@@ -210,6 +225,7 @@ class QueryEditor extends React.Component {
         <div className="container p-15 m-b-10" style={{ height: '100%' }}>
           <div style={{ height: 'calc(100% - 40px)', marginBottom: '0px' }} className="editor__container">
             <AceEditor
+              className={(this.props.queryExecuting) ? 'highlightedText' : ''}
               ref={this.refEditor}
               theme="textmate"
               mode={this.props.dataSource.syntax || 'sql'}
@@ -229,6 +245,7 @@ class QueryEditor extends React.Component {
               onLoad={this.onLoad}
               onPaste={this.onPaste}
               onChange={this.updateQuery}
+              onSelectionChange={this.updateSelectedQuery}
             />
           </div>
 
@@ -292,7 +309,7 @@ class QueryEditor extends React.Component {
                   data-test="ExecuteButton"
                 >
                   <span className="zmdi zmdi-play" />
-                  <span className="hidden-xs m-l-5">Execute</span>
+                  <span className="hidden-xs m-l-5">{ (this.state.highlightedQueryText == null) ? 'Execute' : 'Execute Selected' }</span>
                 </button>
               </Tooltip>
             </div>

client/app/pages/queries/query.html

@@ -164,6 +164,7 @@ <h3>
               listen-for-editor-command="listenForEditorCommand"
               save-query="saveQuery"
               update-query="updateQuery"
+              update-highlighted-query="updateHighlightedQuery"
               add-new-parameter="addNewParameter"
               data-data-source="dataSource"
               data-data-sources="dataSources"></query-editor>

client/app/pages/queries/view.js

@@ -26,7 +26,7 @@ function QueryViewCtrl(
   DataSource,
   Visualization,
 ) {
-  function getQueryResult(maxAge) {
+  function getQueryResult(maxAge, highlightedQueryText) {
     if (maxAge === undefined) {
       maxAge = $location.search().maxAge;
     }
@@ -36,7 +36,7 @@ function QueryViewCtrl(
     }
 
     $scope.showLog = false;
-    $scope.queryResult = $scope.query.getQueryResult(maxAge);
+    $scope.queryResult = $scope.query.getQueryResult(maxAge, highlightedQueryText);
   }
 
   function getDataSourceId() {
@@ -105,6 +105,10 @@ function QueryViewCtrl(
     getSchema();
   }
 
+  $scope.updateHighlightedQuery = (highlightedQueryText) => {
+    $scope.highlightedQueryText = highlightedQueryText;
+  };
+
   $scope.executeQuery = () => {
     if (!$scope.canExecuteQuery()) {
       return;
@@ -114,7 +118,7 @@ function QueryViewCtrl(
       return;
     }
 
-    getQueryResult(0);
+    getQueryResult(0, $scope.highlightedQueryText);
     $scope.lockButton(true);
     $scope.cancelling = false;
     Events.record('execute', 'query', $scope.query.id);
@@ -372,8 +376,11 @@ function QueryViewCtrl(
     }
 
     if (status === 'done') {
-      $scope.query.latest_query_data_id = $scope.queryResult.getId();
-      $scope.query.queryResult = $scope.queryResult;
+      const ranSelectedQuery = $scope.query.query !== $scope.queryResult.query;
+      if (!ranSelectedQuery) {
+        $scope.query.latest_query_data_id = $scope.queryResult.getId();
+        $scope.query.queryResult = $scope.queryResult;
+      }
 
       Notifications.showNotification('Redash', `${$scope.query.name} updated.`);
     } else if (status === 'failed') {

client/app/services/query.js

@@ -426,12 +426,12 @@ function QueryResource(
     return this.getParameters().isRequired();
   };
 
-  Query.prototype.getQueryResult = function getQueryResult(maxAge) {
+  Query.prototype.getQueryResult = function getQueryResult(maxAge, highlightedQueryText) {
     if (!this.query) {
       return new QueryResultError("Can't execute empty query.");
     }
-    const queryText = this.query;
 
+    const queryText = highlightedQueryText || this.query;
     const parameters = this.getParameters();
     const missingParams = parameters.getMissing();