From 11f6ee77991363c12d5536095c56a8370ea626d9 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Sat, 20 Jan 2018 00:22:29 -0800
Subject: [PATCH] Add autocomplete

---
 package.json                            |  1 +
 src/components/expression/expression.js | 34 ++++++++++++++++++++++---
 src/reducers/controls.js                |  4 ++-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ee41b922..4268dae3 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/expression/expression.js b/src/components/expression/expression.js
index 3ed1556a..e46799ad 100644
--- a/src/components/expression/expression.js
+++ b/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",
diff --git a/src/reducers/controls.js b/src/reducers/controls.js
index b05e5dc8..1019c236 100644
--- a/src/reducers/controls.js
+++ b/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 = {};