[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}

superset/assets/package.json

@@ -66,6 +66,7 @@
     "nvd3": "1.8.5",
     "react": "^15.3.2",
     "react-ace": "^4.1.5",
+    "react-addons-shallow-compare": "^15.4.2",
     "react-bootstrap": "^0.30.3",
     "react-bootstrap-table": "^2.3.8",
     "react-dom": "^15.3.2",
@@ -76,7 +77,9 @@
     "react-redux": "^5.0.2",
     "react-resizable": "^1.3.3",
     "react-select": "^1.0.0-rc.2",
+    "react-select-fast-filter-options": "^0.2.1",
     "react-syntax-highlighter": "^5.0.0",
+    "react-virtualized-select": "^2.4.0",
     "reactable": "^0.14.0",
     "redux": "^3.5.2",
     "redux-localstorage": "^0.4.1",

superset/assets/stylesheets/react-select/select.less

@@ -91,3 +91,31 @@
 @import "../../node_modules/react-select/less/mixins.less";
 @import "../../node_modules/react-select/less/multi.less";
 @import "../../node_modules/react-select/less/spinner.less";
+@import "../../node_modules/react-virtualized/styles.css";
+
+// importing css from "../../node_modules/react-virtualized-select/styles.css";
+// so the background color of a selected option matches the other selects
+.VirtualSelectGrid {
+  z-index: 1;
+}
+.VirtualizedSelectOption {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 .5rem;
+}
+.VirtualizedSelectFocusedOption {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.VirtualizedSelectFocusedOption:hover {
+  cursor: pointer;
+}
+.VirtualizedSelectDisabledOption {
+  opacity: 0.5;
+}
+.VirtualizedSelectSelectedOption {
+  font-weight: bold;
+}