[sqllab] run only the part of the query that is selected (#1479)

caravel/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx

@@ -4,13 +4,16 @@ import 'brace/mode/sql';
 import 'brace/theme/github';
 import 'brace/ext/language_tools';
 import ace from 'brace';
+import { areArraysShallowEqual } from '../../reduxUtils';
 
 const langTools = ace.acequire('ace/ext/language_tools');
 
 const propTypes = {
+  actions: React.PropTypes.object.isRequired,
   onBlur: React.PropTypes.func,
   sql: React.PropTypes.string.isRequired,
   tables: React.PropTypes.array,
+  queryEditor: React.PropTypes.object.isRequired,
 };
 
 const defaultProps = {
@@ -25,6 +28,16 @@ class AceEditorWrapper extends React.PureComponent {
       sql: props.sql,
     };
   }
+  componentDidMount() {
+    // Making sure no text is selected from previous mount
+    this.props.actions.queryEditorSetSelectedText(this.props.queryEditor, null);
+    this.setAutoCompleter();
+  }
+  componentWillReceiveProps(nextProps) {
+    if (!areArraysShallowEqual(this.props.tables, nextProps.tables)) {
+      this.setAutoCompleter();
+    }
+  }
   textChange(text) {
     this.setState({ sql: text });
   }
@@ -32,22 +45,31 @@ class AceEditorWrapper extends React.PureComponent {
     this.props.onBlur(this.state.sql);
   }
   getCompletions(aceEditor, session, pos, prefix, callback) {
+    callback(null, this.state.words);
+  }
+  onEditorLoad(editor) {
+    editor.$blockScrolling = Infinity; // eslint-disable-line no-param-reassign
+    editor.selection.on('changeSelection', () => {
+      this.props.actions.queryEditorSetSelectedText(
+        this.props.queryEditor, editor.getSelectedText());
+    });
+  }
+  setAutoCompleter() {
+    // Loading table and column names as auto-completable words
     let words = [];
     const columns = {};
     const tables = this.props.tables || [];
     tables.forEach(t => {
       words.push({ name: t.name, value: t.name, score: 55, meta: 'table' });
-      t.columns.forEach(col => {
+      const cols = t.columns || [];
+      cols.forEach(col => {
         columns[col.name] = null;  // using an object as a unique set
       });
     });
     words = words.concat(Object.keys(columns).map(col => (
       { name: col, value: col, score: 50, meta: 'column' }
     )));
-    callback(null, words);
-  }
-  setAutoCompleter() {
-    // Loading table and column names as auto-completable words
+    this.setState({ words });
     const completer = {
       getCompletions: this.getCompletions.bind(this),
     };
@@ -56,11 +78,11 @@ class AceEditorWrapper extends React.PureComponent {
     }
   }
   render() {
-    this.setAutoCompleter();
     return (
       <AceEditor
         mode="sql"
         theme="github"
+        onLoad={this.onEditorLoad.bind(this)}
         onBlur={this.onBlur.bind(this)}
         minLines={8}
         maxLines={30}
@@ -68,7 +90,7 @@ class AceEditorWrapper extends React.PureComponent {
         height="200px"
         width="100%"
         editorProps={{ $blockScrolling: true }}
-        enableBasicAutocompletion
+        enableLiveAutocompletion
         value={this.state.sql}
       />
     );