diff --git a/src/components/continuous/continuous.js b/src/components/continuous/continuous.js index e5f9507f..2844ac30 100644 --- a/src/components/continuous/continuous.js +++ b/src/components/continuous/continuous.js @@ -5,8 +5,6 @@ import { connect } from "react-redux"; import styles from './parallelCoordinates.css'; import SectionHeader from "../framework/sectionHeader"; -import renderQueue from "./renderQueue"; - import setupParallelCoordinates from "./setupParallelCoordinates"; import drawAxes from "./drawAxes"; import drawLinesCanvas from "./drawLinesCanvas"; @@ -111,30 +109,33 @@ class Continuous extends React.Component { nextProps.continuousSelection && this.state.axes /* this may cause things to never render :/ forceUpdate? */ ) { - if (this.state._drawCellLines) { - - this.state._drawCellLines.invalidate(); + if (this.state._drawLinesCanvas) { + this.state._drawLinesCanvas.invalidate(); + this.state.ctx.clearRect(0,0,width,height); + this.state.ctx.globalAlpha = d3.min([ + 0.85 / Math.pow(this.props.initializeMetadata.length, 0.3), + 1 + ]); } - const dimensions = createDimensions(nextProps.ranges); - const { - processedMetadata, - processedDimensions - } = processData( - nextProps.metadata, - dimensions - ) + console.log( _.filter(this.state.processedMetadata, (d) => { + return nextProps.continuousSelection.indexOf(d.CellName) > -1 + })) - console.log('draw cell lines', processedMetadata, processedDimensions) - const _drawCellLines = this.drawCellLines( - _.filter(processedMetadata, (d) => { return nextProps.continuousSelection.indexOf(d.CellName) > -1 }), - processedDimensions, - this.state.xscale + const _drawLinesCanvas = drawLinesCanvas( + _.filter(this.state.processedMetadata, (d) => { + return nextProps.continuousSelection.indexOf(d.CellName) > -1 + }), + this.state.processedDimensions, + this.state.xscale, + this.state.ctx, + width, + height ); this.setState({ - dimensions, - _drawCellLines, + // dimensions, + _drawLinesCanvas, }) } } @@ -146,20 +147,6 @@ class Continuous extends React.Component { }) } - drawCellLines (metadata, dimensions, xscale) { - const _drawCellLines = renderQueue( - drawLinesCanvas(this.state.ctx, dimensions, this.state.xscale) - ).rate(50); - - this.state.ctx.clearRect(0,0,width,height); - this.state.ctx.globalAlpha = d3.min([0.85/Math.pow(metadata.length,0.3),1]); - - _drawCellLines(metadata); - - return _drawCellLines; - - } - render() { return ( diff --git a/src/components/continuous/drawAxes.js b/src/components/continuous/drawAxes.js index 7cf33795..84aff1a0 100644 --- a/src/components/continuous/drawAxes.js +++ b/src/components/continuous/drawAxes.js @@ -84,11 +84,12 @@ const drawAxes = ( axes.append("g") .attr("class", `${styles.brush} parcoords_brush`) .each(function(d) { - d3.select(this).call(d.brush = d3.brushY() - .extent([[-10,0], [10, height]]) - .on("start", brushstart) - .on("brush", brush) - .on("end", brush) + d3.select(this).call( + d.brush = d3.brushY() + .extent([[-10,0], [10, height]]) + .on("start", brushstart) + .on("brush", brush) + .on("end", brush) ) }) .selectAll("rect")