graph now renders from global cell selection, significant perf boost

src/components/graph/drawGraph.js

@@ -60,15 +60,15 @@ export const setupGraphElements = (
 ******************************************/
 
 export const drawGraph = (
-  data,
   context,
   expressionsCountsMap,
   colorAccessor,
   ranges,
   metadata,
-  continuousSelection,
+  currentCellSelection,
   graphBrushSelection,
   colorScale,
+  graphMap, /* tmp remove when structure exists on server */
 ) => {
 
   /* clear canvas */
@@ -81,12 +81,20 @@ export const drawGraph = (
   //   .domain([0, expressionsCountsMap.maxValue])
   //   .range([1,0])
 
-  if (continuousSelection) {
-    data = _.filter(data, (d) => {return continuousSelection.indexOf(d[0]) > -1 })
-  }
+  const data = [];
+
+  _.each(currentCellSelection, (metadata, i) => {
+    if (graphMap[metadata["CellName"]]) { /* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the metadata array, check in reducer */
+      data.push([
+        metadata["CellName"],
+        graphMap[metadata["CellName"]][0],
+        graphMap[metadata["CellName"]][1]
+      ])
+    }
+  })
 
   /* shuffle the data to overcome render order hiding cells, & filter first */
-  data = d3.shuffle(data); /* make me a control */
+  // data = d3.shuffle(data); /* make me a control */
 
   const _metadata = _.keyBy(metadata, "CellName"); /* move me to the reducer */
 

src/components/graph/graph.js

@@ -19,6 +19,8 @@ import ColorControl from "../controls/color";
     colorAccessor: state.controls.colorAccessor,
     colorScale: state.controls.colorScale,
     continuousSelection: state.controls.continuousSelection,
+    graphMap: state.controls.graphMap,
+    currentCellSelection: state.controls.currentCellSelection,
     graphBrushSelection: state.controls.graphBrushSelection
   }
 })
@@ -79,15 +81,15 @@ class Graph extends React.Component {
       // nextProps.expressionsCountsMap &&
     ) {
       drawGraph(
-        nextProps.vertices,
         this.state.ctx,
         nextProps.expressionsCountsMap,
         nextProps.colorAccessor,
         nextProps.ranges, /* assumption that this exists if vertices does both are on cells */
         nextProps.metadata,
-        nextProps.continuousSelection, /* continuousSelected should probably inform a global 'is active' array rather than be consumed so specifically here */
+        nextProps.currentCellSelection, /* continuousSelected should probably inform a global 'is active' array rather than be consumed so specifically here */
         nextProps.graphBrushSelection,
         nextProps.colorScale,
+        nextProps.graphMap,
       )
     }
   }
@@ -102,7 +104,7 @@ class Graph extends React.Component {
 
   render() {
     return (
-      <div id="graphWrapper">
+      <div id="graphWrapper" style={{height: 600 /* move this to globals */}}>
         <SectionHeader text="Graph"/>
         <ColorControl/>
         <div id="graphAttachPoint"> </div>

src/reducers/controls.js

@@ -48,6 +48,13 @@ const Controls = (state = {
     return Object.assign({}, state, {
       graphBrushSelection: null
     })
+  case "color changed":
+    return Object.assign({}, state, {
+      colorAccessor: action.colorAccessor,
+      colorScale: d3.scaleLinear()
+        .domain([0, action.rangeMaxForColorAccessor])
+        .range([1,0])
+    });
   default:
     return state;
   }