fixed scatterplot infinite render (#429)

* add more to state from componentDidMount

* always brush

* destructure

* move render to function

* fixed scatterplot infinite render

* remove logging

client/src/components/brushableHistogram/index.js

@@ -215,7 +215,12 @@ class HistogramBrush extends React.Component {
     d3.select(svgRef)
       .append("g")
       .attr("class", "brush")
-      .call(d3.brushX().on("end", this.onBrush(field, x.invert).bind(this)));
+      .call(
+        d3
+          .brushX()
+          .on("brush", this.onBrush(field, x.invert).bind(this))
+          .on("end", this.onBrush(field, x.invert).bind(this))
+      );
 
     /* AXIS */
     d3.select(svgRef)

client/src/components/scatterplot/drawPointsRegl.js

@@ -38,14 +38,7 @@ export default function(regl) {
     uniforms: {
       distance: regl.prop("distance"),
       view: regl.prop("view"),
-      projection: (context, props) =>
+      projection: () => mat4.perspective([], Math.PI / 2, 1, 0.01, 1000)
-        mat4.perspective(
-          [],
-          Math.PI / 2,
-          (context.viewportWidth * props.scale) / context.viewportHeight,
-          0.01,
-          1000
-        )
     },
 
     count: regl.prop("count"),

client/src/components/scatterplot/scatterplot.js

@@ -82,12 +82,6 @@ class Scatterplot extends React.Component {
       this.drawAxesSVG(scales.xScale, scales.yScale, svg);
     }
 
-    this.setState({
-      svg,
-      xScale: scales ? scales.xScale : null,
-      yScale: scales ? scales.yScale : null
-    });
-
     const camera = _camera(this.reglCanvas, { scale: true, rotate: false });
     const regl = _regl(this.reglCanvas);
 
@@ -98,43 +92,35 @@ class Scatterplot extends React.Component {
     const colorBuffer = regl.buffer();
     const sizeBuffer = regl.buffer();
 
-    regl.frame(({ viewportWidth, viewportHeight }) => {
+    const reglRender = regl.frame(() => {
-      regl.clear({
+      this.reglDraw(
-        depth: 1,
+        regl,
-        color: [1, 1, 1, 1]
+        drawPoints,
-      });
+        sizeBuffer,
-
+        colorBuffer,
-      drawPoints({
+        pointBuffer,
-        distance: camera.distance,
+        camera
-        color: colorBuffer,
+      );
-        position: pointBuffer,
-        size: sizeBuffer,
-        count: this.count,
-        view: camera.view(),
-        scale: viewportHeight / viewportWidth
-      });
-
       camera.tick();
     });
 
+    this.reglRenderState = "rendering";
+
     this.setState({
       regl,
       sizeBuffer,
       pointBuffer,
-      colorBuffer
+      colorBuffer,
+      svg,
+      xScale: scales ? scales.xScale : null,
+      yScale: scales ? scales.yScale : null,
+      reglRender,
+      camera,
+      drawPoints
     });
   }
 
   componentDidUpdate(prevProps) {
-    const {
-      svg,
-      xScale,
-      yScale,
-      regl,
-      pointBuffer,
-      colorBuffer,
-      sizeBuffer
-    } = this.state;
     const {
       world,
       crossfilter,
@@ -144,6 +130,18 @@ class Scatterplot extends React.Component {
       expressionY,
       colorRGB
     } = this.props;
+    const {
+      reglRender,
+      xScale,
+      yScale,
+      regl,
+      pointBuffer,
+      colorBuffer,
+      sizeBuffer,
+      svg,
+      drawPoints,
+      camera
+    } = this.state;
 
     if (
       world &&
@@ -159,6 +157,11 @@ class Scatterplot extends React.Component {
       this.drawAxesSVG(xScale, yScale, svg);
     }
 
+    if (reglRender && this.reglRenderState === "rendering") {
+      reglRender.cancel();
+      this.reglRenderState = "paused";
+    }
+
     if (
       world &&
       regl &&
@@ -198,6 +201,16 @@ class Scatterplot extends React.Component {
       colorBuffer({ data: colorsBuf, dimension: 3 });
       sizeBuffer({ data: sizesBuf, dimension: 1 });
       this.count = cellCount;
+
+      regl._refresh();
+      this.reglDraw(
+        regl,
+        drawPoints,
+        sizeBuffer,
+        colorBuffer,
+        pointBuffer,
+        camera
+      );
     }
 
     if (
@@ -227,6 +240,22 @@ class Scatterplot extends React.Component {
     };
   }
 
+  reglDraw(regl, drawPoints, sizeBuffer, colorBuffer, pointBuffer, camera) {
+    regl.clear({
+      depth: 1,
+      color: [1, 1, 1, 1]
+    });
+
+    drawPoints({
+      size: sizeBuffer,
+      distance: camera.distance,
+      color: colorBuffer,
+      position: pointBuffer,
+      count: this.count,
+      view: camera.view()
+    });
+  }
+
   drawAxesSVG(xScale, yScale, svg) {
     const { scatterplotYYaccessor, scatterplotXXaccessor } = this.props;
     svg.selectAll("*").remove();