From 13a76f3c27145741ee8e883e3e9d077882b0233c Mon Sep 17 00:00:00 2001
From: alanna scott <alanna.scott@airbnb.com>
Date: Wed, 22 Mar 2017 13:55:26 -0700
Subject: [PATCH 1/4] use fast filter for tables select

---
 .../SqlLab/components/SqlEditorLeftBar.jsx    | 45 +++++++++----------
 superset/assets/package.json                  |  2 +
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
index 13f0f865b0bc..b3ecab4011e9 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -1,9 +1,14 @@
 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';
+
+import 'react-select/dist/react-select.css';
+import 'react-virtualized/styles.css';
+import 'react-virtualized-select/styles.css';
 
 const propTypes = {
   queryEditor: React.PropTypes.object.isRequired,
@@ -129,6 +134,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 +155,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})`}
@@ -164,29 +173,17 @@ ${this.props.queryEditor.schema}/${input}`;
             />
           </div>
           <div className="m-t-5">
-            {this.props.queryEditor.schema &&
-              <Select
-                name="select-table"
-                ref="selectTable"
-                isLoading={this.state.tableLoading}
-                value={this.state.tableName}
-                placeholder={`Add a table (${this.state.tableOptions.length})`}
-                autosize={false}
-                onChange={this.changeTable.bind(this)}
-                options={this.state.tableOptions}
-              />
-            }
-            {!this.props.queryEditor.schema &&
-              <Select.Async
-                name="async-select-table"
-                ref="selectTable"
-                value={this.state.tableName}
-                placeholder={"Type to search ..."}
-                autosize={false}
-                onChange={this.changeTable.bind(this)}
-                loadOptions={this.getTableNamesBySubStr.bind(this)}
-              />
-            }
+            <Select
+              name="select-table"
+              ref="selectTable"
+              isLoading={this.state.tableLoading}
+              value={this.state.tableName}
+              placeholder={`Add a table (${this.state.tableOptions.length})`}
+              autosize={false}
+              onChange={this.changeTable.bind(this)}
+              filterOptions={filterOptions}
+              options={this.state.tableOptions}
+            />
           </div>
           <hr />
           <div className="m-t-5">
diff --git a/superset/assets/package.json b/superset/assets/package.json
index 7ae6ef3d1b6f..1a435aa91247 100644
--- a/superset/assets/package.json
+++ b/superset/assets/package.json
@@ -76,7 +76,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",

From 2e93f4ca742dd19bc9c43477ab9e6f5e2955b134 Mon Sep 17 00:00:00 2001
From: alanna scott <alanna.scott@airbnb.com>
Date: Wed, 22 Mar 2017 19:42:12 -0700
Subject: [PATCH 2/4] react-virtualized needs this package, throws error
 otherwise...

---
 superset/assets/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/superset/assets/package.json b/superset/assets/package.json
index 1a435aa91247..2ad3d63bb895 100644
--- a/superset/assets/package.json
+++ b/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",

From f4d8597a845af2224f7d95be66cb16e1ba429a6d Mon Sep 17 00:00:00 2001
From: alanna scott <alanna.scott@airbnb.com>
Date: Thu, 23 Mar 2017 12:20:48 -0700
Subject: [PATCH 3/4] continue to use async select and
 this.getTableNamesBySubStr when a schema is not selected

---
 .../SqlLab/components/SqlEditorLeftBar.jsx    | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
index b3ecab4011e9..2cc91f6967d2 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -67,8 +67,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.
@@ -173,17 +173,31 @@ ${this.props.queryEditor.schema}/${input}`;
             />
           </div>
           <div className="m-t-5">
-            <Select
-              name="select-table"
-              ref="selectTable"
-              isLoading={this.state.tableLoading}
-              value={this.state.tableName}
-              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
+                name="select-table"
+                ref="selectTable"
+                isLoading={this.state.tableLoading}
+                value={this.state.tableName}
+                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
+                name="async-select-table"
+                ref="selectTable"
+                value={this.state.tableName}
+                placeholder={"Type to search ..."}
+                autosize={false}
+                onChange={this.changeTable.bind(this)}
+                loadOptions={this.getTableNamesBySubStr.bind(this)}
+              />
+            }
           </div>
           <hr />
           <div className="m-t-5">

From f6abb808212260a255d47752a8ddbe33fcced1b1 Mon Sep 17 00:00:00 2001
From: alanna scott <alanna.scott@airbnb.com>
Date: Thu, 23 Mar 2017 12:47:52 -0700
Subject: [PATCH 4/4] import styles in same place as react-select css import

---
 .../SqlLab/components/SqlEditorLeftBar.jsx    |  4 ---
 .../stylesheets/react-select/select.less      | 28 +++++++++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
index 2cc91f6967d2..5a2c2d312ee5 100644
--- a/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
+++ b/superset/assets/javascripts/SqlLab/components/SqlEditorLeftBar.jsx
@@ -6,10 +6,6 @@ import AsyncSelect from '../../components/AsyncSelect';
 import Select from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
 
-import 'react-select/dist/react-select.css';
-import 'react-virtualized/styles.css';
-import 'react-virtualized-select/styles.css';
-
 const propTypes = {
   queryEditor: React.PropTypes.object.isRequired,
   tables: React.PropTypes.array,
diff --git a/superset/assets/stylesheets/react-select/select.less b/superset/assets/stylesheets/react-select/select.less
index 9fe319e1e340..4cc94dc1790d 100644
--- a/superset/assets/stylesheets/react-select/select.less
+++ b/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;
+}