From d12c4df9af30d2c49eb0f4eccc8e0e52bcad791e Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Fri, 8 Sep 2017 03:55:54 -0700
Subject: [PATCH] color by gene expression

---
 src/components/graph/drawGraph.js | 24 ++++++++++---
 src/components/graph/graph.js     |  9 +++--
 src/components/home.js            | 57 +++++++++++++++++++++++--------
 3 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/components/graph/drawGraph.js b/src/components/graph/drawGraph.js
index fc098ed4..2e3827ac 100644
--- a/src/components/graph/drawGraph.js
+++ b/src/components/graph/drawGraph.js
@@ -11,8 +11,6 @@ const x = d3.scaleLinear()
 const y = d3.scaleLinear()
   .range([height, 0]);
 
-const cellFillColor = "rgba(0,0,0,.5)";
-
 /******************************************
 *******************************************
           put svg & canvas in DOM
@@ -52,15 +50,20 @@ export const setupGraphElements = (data) => {
 *******************************************
 ******************************************/
 
-export const drawGraph = (data, context) => {
+export const drawGraph = (data, context, expressionsCountsMap) => {
 
   /* clear canvas */
   context.clearRect(0, 0, width, height);
 
+  /* ! create a scale to map between expression values and colors, remove to somewhere else */
+  const expressionToColorScale = d3.scaleLog()
+    .domain([0, expressionsCountsMap.maxValue])
+    .range([1,0])
+
   /* shuffle the data to overcome render order hiding cells */
   data = d3.shuffle(data);
 
-  /* loop! */
+  /* loop */
   data.forEach((p, i) => {
     context.beginPath();
     /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
@@ -72,6 +75,17 @@ export const drawGraph = (data, context) => {
       2 * Math.PI         /* eAngle */
     );
     context.fill();
-    context.fillStyle = cellFillColor;
+
+    if (i < 20) {
+      console.log(
+        '0 to 1 scale', expressionToColorScale(expressionsCountsMap[p[0]]),
+        'color', d3.interpolateViridis(expressionToColorScale(
+          expressionsCountsMap[p[0]]
+        ))
+      )
+    }
+    context.fillStyle = d3.interpolateViridis(expressionToColorScale(
+      expressionsCountsMap[p[0]]
+    ));
   });
 }
diff --git a/src/components/graph/graph.js b/src/components/graph/graph.js
index 4d629670..beb92949 100644
--- a/src/components/graph/graph.js
+++ b/src/components/graph/graph.js
@@ -17,12 +17,15 @@ class Graph extends React.Component {
   componentWillReceiveProps(nextProps) {
     /* maybe should do a check here to confirm ref exists and pass it? */
     if (
-      nextProps.data &&
+      nextProps.vertices &&
+      nextProps.expressions &&
+      nextProps.expressionsCountsMap &&
       this.state.context
     ) {
       drawGraph(
-        nextProps.data.data,
-        this.state.context
+        nextProps.vertices.data,
+        this.state.context,
+        nextProps.expressionsCountsMap
       );
     }
   }
diff --git a/src/components/home.js b/src/components/home.js
index 3229f1c1..374c4814 100644
--- a/src/components/home.js
+++ b/src/components/home.js
@@ -14,15 +14,13 @@ class Home extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      showClustersPlaceholderImage: false,
-      heatmap: null,
-      graph: null,
+      expressions: null,
+      vertices: null,
+      coloring: null,
+      metadata: null,
     };
   }
   componentDidMount() {
-    // d3.csv("http://ec2-34-234-75-156.compute-1.amazonaws.com/api/v0.1/metadata", (d) => {
-    //   console.log("from ec2",d)
-    // })
 
     const prefix = "http://ec2-34-234-75-156.compute-1.amazonaws.com/api/";
     const version = "v0.1/";
@@ -39,16 +37,45 @@ class Home extends React.Component {
     })
     // const expressions = fetch(`${prefix}${version}${expression}`)
       .then((res) => res.json())
-      .then((data) => { this.setState({heatmap: data}) })
-
+      .then((data) => { this.setState({expressions: data}) })
 
     const graph = fetch(`${prefix}${version}graph`)
       .then((res) => res.json())
-      .then((data) => { this.setState({graph: data}) })
+      .then((data) => { this.setState({vertices: data}) })
 
+    const metadata = d3.csv(`${prefix}${version}metadata`, (data) => {
+      this.setState({metadata: data})
+    })
   }
+
+  createExpressionsCountsMap () {
+
+    const CHANGE_ME_MAGIC_GENE_INDEX = 3;
+
+    const expressionsCountsMap = {};
+
+    /* currently selected gene */
+    expressionsCountsMap.geneName = this.state.expressions.data.genes[3];
+
+    let maxExpressionValue = 0;
+
+    /* create map of expressions for every cell */
+    this.state.expressions.data.cells.map((c) => {
+      /* cellname = 234 */
+      expressionsCountsMap[c.cellname] = c["e"][CHANGE_ME_MAGIC_GENE_INDEX];
+      /* collect the maximum value as we iterate */
+      if (c["e"][CHANGE_ME_MAGIC_GENE_INDEX] > maxExpressionValue) {
+        maxExpressionValue = c["e"][CHANGE_ME_MAGIC_GENE_INDEX]
+      }
+    })
+
+    expressionsCountsMap.maxValue = maxExpressionValue;
+
+    return expressionsCountsMap;
+  }
+
   render() {
-    console.log('heatmap', this.state.heatmap)
+
     return (
       <Container>
         <Helmet title="cellxgene" />
@@ -59,18 +86,20 @@ class Home extends React.Component {
            Refresh.
         </button>
         <h3 style={{marginTop: 50}}> Gene selection criteria </h3>
-        {false ? <Joy data={this.state.heatmap && this.state.heatmap.data}/> : ""}
+        {false ? <Joy data={this.state.expressions && this.state.expressions.data}/> : ""}
 
         <Categorical/>
         <Continuous/>
         <button
-          onClick={() => { this.setState({showClustersPlaceholderImage: true}) }}
           style={{marginBottom: 20}}
           className={buttonStyles.primaryButton}>
           Compute clustering using [n] cells in current metadata selection
         </button>
-        <Graph data={this.state.graph}/>
-        {this.state.showClustersPlaceholderImage ? <img width={750} src="https://s10.postimg.org/s6z3zbcvt/tsne.png"></img> : null}
+        <Graph
+          vertices={this.state.vertices}
+          expressions={this.state.expressions}
+          expressionsCountsMap={this.state.expressions && this.state.expressions ? this.createExpressionsCountsMap() : null}
+          />
       </Container>
     )
   }