color scales in graph

src/components/graph/drawGraph.js

@@ -1,5 +1,6 @@
 import styles from "./graph.css";
 import renderQueue from "../continuous/renderQueue";
+import _ from "lodash";
 
 const margin = {top: 20, right: 10, bottom: 30, left: 40},
     width = 960 - margin.left - margin.right,
@@ -50,11 +51,22 @@ export const setupGraphElements = (data) => {
 *******************************************
 ******************************************/
 
-export const drawGraph = (data, context, expressionsCountsMap) => {
+export const drawGraph = (data, context, expressionsCountsMap, color, ranges, metadata) => {
 
   /* clear canvas */
   context.clearRect(0, 0, width, height);
 
+  let scale = null; /* it could be 'by expression' and that's a special case */
+
+  if (
+    color &&
+    ranges[color].range /* set up a continuous scale */
+  ) {
+    scale = d3.scaleLinear()
+      .domain([0, ranges[color].range.max])
+      .range([1,0])
+  }
+
   /* ! create a scale to map between expression values and colors, remove to somewhere else */
   // const expressionToColorScale = d3.scaleLinear()
   //   .domain([0, expressionsCountsMap.maxValue])
@@ -63,8 +75,6 @@ export const drawGraph = (data, context, expressionsCountsMap) => {
   /* shuffle the data to overcome render order hiding cells */
   data = d3.shuffle(data);
 
-  console.log('drawing', data, context, expressionsCountsMap)
-
   /* loop */
   data.forEach((p, i) => {
     context.beginPath();
@@ -78,16 +88,22 @@ export const drawGraph = (data, context, expressionsCountsMap) => {
     );
     context.fill();
 
-    // if (i < 20) {
-    //   console.log(
-    //     '0 to 1 scale', expressionToColorScale(expressionsCountsMap[p[0]]),
-    //     'color', d3.interpolateViridis(expressionToColorScale(
-    //       expressionsCountsMap[p[0]]
-    //     ))
-    //   )
-    // }
+    if (i < 20) {
+      // console.log(
+      //   '0 to 1 scale', expressionToColorScale(expressionsCountsMap[p[0]]),
+      //   'color', d3.interpolateViridis(expressionToColorScale(
+      //     expressionsCountsMap[p[0]]
+      //   ))
+      // )
+      // console.log('meta', _.find(metadata, {CellName: p[0]}), color, p)
+    }
     // context.fillStyle = d3.interpolateViridis(expressionToColorScale(
     //   expressionsCountsMap[p[0]]
     // ));
+    if (color) {
+      context.fillStyle = d3.interpolateViridis(scale(
+        _.find(metadata, {CellName: p[0]})[color] /* this.state.cells.metadata["23452345325"]["ERCC_reads"] = 20000 */
+      ));
+    }
   });
 }

src/components/graph/graph.js

@@ -4,13 +4,19 @@ import styles from "./graph.css";
 import {setupGraphElements, drawGraph} from "./drawGraph";
 import SectionHeader from "../framework/sectionHeader";
 import { connect } from "react-redux";
+import ColorControl from "../controls/color";
 
 @connect((state) => {
 
   const vertices = state.cells.cells && state.cells.cells.data.graph ? state.cells.cells.data.graph : null;
+  const ranges = state.cells.cells && state.cells.cells.data.ranges ? state.cells.cells.data.ranges : null;
+  const metadata = state.cells.cells && state.cells.cells.data.metadata ? state.cells.cells.data.metadata : null;
 
   return {
-    vertices
+    ranges,
+    vertices,
+    metadata,
+    color: state.controls.color,
   }
 })
 class Graph extends React.Component {
@@ -21,11 +27,11 @@ class Graph extends React.Component {
       drawn: false,
       svg: null,
       context: null,
+      shimmer: false,
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('le grpah', nextProps)
     /* maybe should do a check here to confirm ref exists and pass it? */
     if (
       this.state.context &&
@@ -33,11 +39,29 @@ class Graph extends React.Component {
       // nextProps.expressions &&
       // nextProps.expressionsCountsMap &&
     ) {
-      drawGraph(
-        nextProps.vertices,
-        this.state.context,
-        nextProps.expressionsCountsMap
-      );
+      if (this.state.shimmer) {
+        if (this.state.interval) { window.clearInterval(this.state.interval) }
+        const interval = window.setInterval(() => {
+          drawGraph(
+            nextProps.vertices,
+            this.state.context,
+            nextProps.expressionsCountsMap,
+            nextProps.color,
+            nextProps.ranges, /* assumption that this exists if vertices does both are on cells */
+            nextProps.metadata,
+          )
+        }, 100)
+        this.setState({interval})
+      } else {
+        drawGraph(
+          nextProps.vertices,
+          this.state.context,
+          nextProps.expressionsCountsMap,
+          nextProps.color,
+          nextProps.ranges, /* assumption that this exists if vertices does both are on cells */
+          nextProps.metadata,
+        )
+      }
     }
   }
 
@@ -50,6 +74,7 @@ class Graph extends React.Component {
     return (
       <div id="graphWrapper">
         <SectionHeader text="Graph"/>
+        <ColorControl/>
         <div id="graphAttachPoint"> </div>
       </div>
     )