render queue on scatter

src/components/graph/drawGraph.js

@@ -48,7 +48,7 @@ export const setupGraphElements = (
 *******************************************
 ******************************************/
 
-export const drawGraph = (
+const drawGraph = (
   context,
   expressionsCountsMap,
   colorAccessor,
@@ -59,29 +59,12 @@ export const drawGraph = (
   colorScale,
   graphMap, /* tmp remove when structure exists on server */
   opacityForDeselectedCells,
+  _currentCellSelectionMap,
 ) => {
-
+  return (p) => {
-  /* clear canvas */
-  context.clearRect(0, 0, globals.graphWidth, globals.graphHeight);
-
-  const data = [];
-
-  _.each(currentCellSelection, (cell, i) => {
-    if (graphMap[cell["CellName"]]) { /* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the cell array, check in reducer */
-      data.push([
-        cell["CellName"],
-        graphMap[cell["CellName"]][0],
-        graphMap[cell["CellName"]][1]
-      ])
-    }
-  })
 
     /* shuffle the data to overcome render order hiding cells, & filter first */
     // data = d3.shuffle(data); /* make me a control */
-
-  const _currentCellSelectionMap = _.keyBy(currentCellSelection, "CellName"); /* move me to the reducer */
-
-  data.forEach((p, i) => {
       context.beginPath();
       /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
       context.arc(
@@ -101,9 +84,57 @@ export const drawGraph = (
       }
 
       context.fill();
-  });
+
+  }
 }
 
+const _drawGraphUsingRenderQueue = (
+  context,
+  expressionsCountsMap,
+  colorAccessor,
+  ranges,
+  metadata,
+  currentCellSelection,
+  graphBrushSelection,
+  colorScale,
+  graphMap, /* tmp remove when structure exists on server */
+  opacityForDeselectedCells,
+) => {
+  const _currentCellSelectionMap = _.keyBy(currentCellSelection, "CellName"); /* move me to the reducer */
+
+  const dataForGraph = [];
+
+  _.each(currentCellSelection, (cell, i) => {
+    if (graphMap[cell["CellName"]]) { /* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the cell array, check in reducer */
+      dataForGraph.push([
+        cell["CellName"],
+        graphMap[cell["CellName"]][0],
+        graphMap[cell["CellName"]][1]
+      ])
+    }
+  })
+
+  const _renderGraphWithFunctionReturnedByQueue = renderQueue(
+    drawGraph(
+      context,
+      expressionsCountsMap,
+      colorAccessor,
+      ranges,
+      metadata,
+      currentCellSelection,
+      graphBrushSelection,
+      colorScale,
+      graphMap, /* tmp remove when structure exists on server */
+      opacityForDeselectedCells,
+      _currentCellSelectionMap,
+    )
+  )
+  _renderGraphWithFunctionReturnedByQueue(dataForGraph);
+  return _renderGraphWithFunctionReturnedByQueue;
+}
+
+export const drawGraphUsingRenderQueue = _.debounce(_drawGraphUsingRenderQueue, 50);
+
 const setupGraphBrush = (
   svg,
   handleBrushSelectAction,

src/components/graph/graph.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import _ from "lodash";
+import * as globals from "../../globals";
 import styles from "./graph.css";
-import {setupGraphElements, drawGraph} from "./drawGraph";
+import {setupGraphElements, drawGraphUsingRenderQueue} from "./drawGraph";
 import SectionHeader from "../framework/sectionHeader";
 import { connect } from "react-redux";
 import actions from "../../actions";
@@ -81,7 +82,10 @@ class Graph extends React.Component {
       // nextProps.expressions &&
       // nextProps.expressionsCountsMap &&
     ) {
-      drawGraph(
+      /* clear canvas */
+      this.state.ctx.clearRect(0, 0, globals.graphWidth, globals.graphHeight);
+
+      drawGraphUsingRenderQueue(
         this.state.ctx,
         nextProps.expressionsCountsMap,
         nextProps.colorAccessor,