Add autocomplete

package.json

@@ -31,6 +31,7 @@
     "luma.gl": "^4.0.3",
     "query-string": "^5.0.0",
     "react": "^15.3.0",
+    "react-autocomplete": "^1.7.2",
     "react-dom": "^15.3.0",
     "react-helmet": "^5.2.0",
     "react-hot-loader": "^3.0.0-beta.7",

src/components/expression/expression.js

@@ -5,13 +5,22 @@ import * as globals from "../../globals";
 import styles from "./expression.css";
 import SectionHeader from "../framework/sectionHeader"
 import actions from "../../actions";
+import ReactAutocomplete from "react-autocomplete";
+
 
 @connect((state) => {
   return {
-    differential: state.differential
+    differential: state.differential,
+    allGeneNames: state.controls.allGeneNames
   }
 })
 class DiffExp extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      value: '',
+    }
+  }
   handleGeneColorScaleClick(gene) {
     return () => {
       this.props.dispatch(actions.requestSingleGeneExpressionCountsForColoringPOST(gene))
@@ -34,15 +43,32 @@ class DiffExp extends React.Component {
       )
     )
 
-    console.log('diffexp', this.props)
-    console.log('extent', extent)
-
     const greyColorScale = d3.scaleSequential()
         .domain(extent)
         .interpolator(d3.interpolateGreys);
 
     return (
       <div>
+      Color by any gene:
+      <ReactAutocomplete
+        items={this.props.allGeneNames}
+        shouldItemRender={(item, value) => item.toLowerCase().indexOf(value.toLowerCase()) > -1}
+        getItemValue={item => item}
+        renderItem={(item, highlighted) =>
+          <div
+            key={item}
+            style={{ backgroundColor: highlighted ? '#eee' : 'transparent'}}
+          >
+            {item}
+          </div>
+        }
+        value={this.state.value}
+        onChange={e => this.setState({ value: e.target.value })}
+        onSelect={(value) => {
+          this.setState({ value });
+          this.props.dispatch(actions.requestSingleGeneExpressionCountsForColoringPOST(value))
+        }}
+      />
       <div style={{
         display: "flex",
         justifyContent: "space-between",

src/reducers/controls.js

@@ -2,6 +2,7 @@ import _ from "lodash";
 
 const Controls = (state = {
   _ranges: null, /* this comes from initialize, this is universe */
+  allGeneNames: null,
   allCellsOnClient: null, /* this comes from cells endpoint, this is world */
   currentCellSelection: null, /* this comes from user actions, all draw components use this, it is created by middleware */
   graphMap: null,
@@ -21,7 +22,8 @@ const Controls = (state = {
   ***********************************/
   case "initialize success":
     return Object.assign({}, state, {
-      _ranges: action.data.data.ranges
+      _ranges: action.data.data.ranges,
+      allGeneNames: action.data.data.genes
     });
   case "request cells success":
     const graphMap = {};