draw scatterplot is now the inside of the loop, bring in queue

src/components/scatterplot/drawScatterplotCanvas.js

@@ -16,21 +16,16 @@ const drawScatterplotCanvas = (
   opacityForDeselectedCells,
   expression,
   scatterplotXXaccessor,
-  scatterplotYYaccessor
+  scatterplotYYaccessor,
+  _currentCellSelectionMap,
 ) => {
 
-  /* clear canvas */
+  return (cell) => {
-  context.clearRect(0, 0, width, height);
-  
-  const _currentCellSelectionMap = _.keyBy(currentCellSelection, "CellName"); /* move me to the reducer */
-
-  expression.data.cells.forEach((cell, i) => {
 
       /*
         this is necessary until we are no longer getting expression for all cells, but only for 'world'
         ...which will mean refetching when we regraph, or 'go back up to all cells'
       */
-      
       if (!_currentCellSelectionMap[cell.cellname]) { return }
 
       context.beginPath();
@@ -52,7 +47,39 @@ const drawScatterplotCanvas = (
       }
 
       context.fill();
-  });
+  }
 }
 
-export default _.debounce(drawScatterplotCanvas, 50)
+export const drawScatterplotCanvasUsingRenderQueue = (
+  context,
+  xScale,
+  yScale,
+  currentCellSelection,
+  opacityForDeselectedCells,
+  expression,
+  scatterplotXXaccessor,
+  scatterplotYYaccessor
+) => {
+
+  const _currentCellSelectionMap = _.keyBy(currentCellSelection, "CellName"); /* move me to the reducer */
+
+  const _renderLinesWithFunctionReturnedByQueue = renderQueue(
+    drawScatterplotCanvas(
+      context,
+      xScale,
+      yScale,
+      currentCellSelection,
+      opacityForDeselectedCells,
+      expression,
+      scatterplotXXaccessor,
+      scatterplotYYaccessor,
+      _currentCellSelectionMap,
+    )
+  )
+
+  _renderLinesWithFunctionReturnedByQueue(expression.data.cells)
+  return _renderLinesWithFunctionReturnedByQueue;
+
+}
+
+export default _.debounce(drawScatterplotCanvasUsingRenderQueue, 50)