diff --git a/src/components/continuous/continuous.js b/src/components/continuous/continuous.js index 05158cc6..df68afdf 100644 --- a/src/components/continuous/continuous.js +++ b/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 */ + // }) } } diff --git a/src/components/continuous/drawLinesCanvas.js b/src/components/continuous/drawLinesCanvas.js index 19d63030..05724a91 100644 --- a/src/components/continuous/drawLinesCanvas.js +++ b/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;