move render queue out of continuous

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) {
+      if (this.state._drawLinesCanvas) {
-
+        this.state._drawLinesCanvas.invalidate();
-        this.state._drawCellLines.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 {
+      console.log(        _.filter(this.state.processedMetadata, (d) => {
-        processedMetadata,
+                return nextProps.continuousSelection.indexOf(d.CellName) > -1
-        processedDimensions
+              }))
-      } = processData(
-        nextProps.metadata,
-        dimensions
-      )
 
-      console.log('draw cell lines', processedMetadata, processedDimensions)
+      const _drawLinesCanvas = drawLinesCanvas(
-      const _drawCellLines = this.drawCellLines(
+        _.filter(this.state.processedMetadata, (d) => {
-        _.filter(processedMetadata, (d) => { return nextProps.continuousSelection.indexOf(d.CellName) > -1 }),
+          return nextProps.continuousSelection.indexOf(d.CellName) > -1
-        processedDimensions,
+        }),
-        this.state.xscale
+        this.state.processedDimensions,
+        this.state.xscale,
+        this.state.ctx,
+        width,
+        height
       );
 
       this.setState({
-        dimensions,
+        // dimensions,
-        _drawCellLines,
+        _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 (

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()
+        d3.select(this).call(
-          .extent([[-10,0], [10, height]])
+          d.brush = d3.brushY()
-          .on("start", brushstart)
+            .extent([[-10,0], [10, height]])
-          .on("brush", brush)
+            .on("start", brushstart)
-          .on("end", brush)
+            .on("brush", brush)
+            .on("end", brush)
         )
       })
     .selectAll("rect")