colorscales working in continuous metadata

src/components/continuous/continuous.js

@@ -36,6 +36,7 @@ import {
     initializeRanges,
     initializeMetadata,
     colorAccessor: state.controls.colorAccessor,
+    colorScale: state.controls.colorScale,
     graphBrushSelection: state.controls.graphBrushSelection,
     continuousSelection: state.controls.continuousSelection,
     axesHaveBeenDrawn: state.controls.axesHaveBeenDrawn,
@@ -66,7 +67,7 @@ class Continuous extends React.Component {
   maybeDrawAxes(nextProps) {
     if (
       !this.state.axes &&
-      nextProps.initializeRanges /* we assume if this is present, everything else is too */
+      nextProps.initializeRanges /* axes are created on full range of data */
     ) {
       const dimensions = createDimensions(nextProps.initializeRanges);
       const xscale = d3.scalePoint()
@@ -109,29 +110,30 @@ class Continuous extends React.Component {
     if (
       nextProps.ranges &&
       nextProps.continuousSelection &&
-      nextProps.axesHaveBeenDrawn /* this may cause things to never render :/ forceUpdate? */
+      nextProps.axesHaveBeenDrawn
     ) {
 
-      if (this.state._drawLinesCanvas) {
-        this.state._drawLinesCanvas.invalidate();
-      }
+      // if (this.state._drawLinesCanvas) {
+      //   this.state._drawLinesCanvas.invalidate(); /* this is only necessary if the internals of drawLinesCanvas are using the render queue */
+      // }
 
-      this.state.ctx.clearRect(0,0,width,height);
+      this.state.ctx.clearRect(0, 0, width, height);
 
       const _drawLinesCanvas = drawLinesCanvas(
         _.filter(this.state.processedMetadata, (d) => {
-          return nextProps.continuousSelection.indexOf(d.CellName) > -1
+          return nextProps.continuousSelection.indexOf(d.CellName) > -1 /* perf */
         }),
         this.state.processedDimensions,
         this.state.xscale,
         this.state.ctx,
-        this.props.colorAccessor,
+        nextProps.colorAccessor,
+        nextProps.colorScale,
       );
 
-      this.setState({
-        // dimensions,
-        _drawLinesCanvas,
-      })
+      // this.setState({
+      //   // dimensions,
+      //   _drawLinesCanvas, /* this will only exist if the internals of drawLinesCanvas are using the render queue */
+      // })
     }
   }
 

src/components/continuous/drawLinesCanvas.js

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import {
   project
 } from "./util";
@@ -14,12 +15,15 @@ const drawLinesCanvas = (
   ctx,
   dimensions,
   xscale,
-  color,
+  colorAccessor,
+  colorScale,
 ) => {
   return (d) => {
-
-    // ctx.strokeStyle = d["Sample.name.color"];
-    ctx.strokeStyle = "rgba(0,0,0,1)";
+    if (colorAccessor && colorScale) {
+      ctx.strokeStyle = d3.interpolateViridis(colorScale(d[colorAccessor]));
+    } else {
+      ctx.strokeStyle = "rgba(0,0,0,1)";
+    }
     ctx.beginPath();
     var coords = project(d, dimensions, xscale);
     coords.forEach((p,i) => {
@@ -59,7 +63,8 @@ const drawCellLinesUsingRenderQueue = (
   dimensions,
   xscale,
   ctx,
-  color,
+  colorAccessor,
+  colorScale,
 ) => {
 
   const _renderLinesWithQueue = renderQueue(
@@ -67,7 +72,8 @@ const drawCellLinesUsingRenderQueue = (
       ctx,
       dimensions,
       xscale,
-      color
+      colorAccessor,
+      colorScale,
     )
   ).rate(50);
 
@@ -77,4 +83,23 @@ const drawCellLinesUsingRenderQueue = (
 
 }
 
-export default drawCellLinesUsingRenderQueue;
+const drawCellLinesSync = (
+  metadata,
+  dimensions,
+  xscale,
+  ctx,
+  colorAccessor,
+  colorScale,
+) => {
+  const _draw = drawLinesCanvas(
+    ctx,
+    dimensions,
+    xscale,
+    colorAccessor,
+    colorScale,
+  )
+  _.each(metadata, _draw)
+}
+
+export default _.debounce(drawCellLinesSync, 100);
+// export default drawCellLinesUsingRenderQueue;