[sql-lab] improve table select performance (#2457)

* use fast filter for tables select

* react-virtualized needs this package, throws error otherwise...

* continue to use async select and this.getTableNamesBySubStr when a schema is not selected

* import styles in same place as react-select css import

superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx

@@ -1,9 +1,10 @@
 const $ = window.$ = require('jquery');
 import React from 'react';
-import Select from 'react-select';
 import { Label, Button } from 'react-bootstrap';
 import TableElement from './TableElement';
 import AsyncSelect from '../../components/AsyncSelect';
+import Select from 'react-virtualized-select';
+import createFilterOptions from 'react-select-fast-filter-options';
 
 const propTypes = {
   queryEditor: React.PropTypes.object.isRequired,
@@ -62,8 +63,8 @@ class SqlEditorLeftBar extends React.PureComponent {
     if (!this.props.queryEditor.dbId || !input) {
       return Promise.resolve({ options: [] });
     }
-    const url = `/superset/tables/${this.props.queryEditor.dbId}/\
-${this.props.queryEditor.schema}/${input}`;
+    const url = `/superset/tables/${this.props.queryEditor.dbId}/` +
+                `${this.props.queryEditor.schema}/${input}`;
     return $.get(url).then((data) => ({ options: data.options }));
   }
   // TODO: move fetching methods to the actions.
@@ -129,6 +130,8 @@ ${this.props.queryEditor.schema}/${input}`;
       networkAlert = <p><Label bsStyle="danger">OFFLINE</Label></p>;
     }
     const shouldShowReset = window.location.search === '?reset=1';
+    const options = this.state.tableOptions;
+    const filterOptions = createFilterOptions({ options });
     return (
       <div className="scrollbar-container">
         <div className="clearfix sql-toolbar scrollbar-content">
@@ -148,6 +151,8 @@ ${this.props.queryEditor.schema}/${input}`;
               mutator={this.dbMutator.bind(this)}
               placeholder="Select a database"
             />
+          </div>
+          <div className="m-t-5">
             <Select
               name="select-schema"
               placeholder={`Select a schema (${this.state.schemaOptions.length})`}
@@ -173,11 +178,13 @@ ${this.props.queryEditor.schema}/${input}`;
                 placeholder={`Add a table (${this.state.tableOptions.length})`}
                 autosize={false}
                 onChange={this.changeTable.bind(this)}
+                filterOptions={filterOptions}
                 options={this.state.tableOptions}
               />
             }
             {!this.props.queryEditor.schema &&
-              <Select.Async
+              <Select
+                async
                 name="async-select-table"
                 ref="selectTable"
                 value={this.state.tableName}