Merge pull request #12 from bkmartinjr/regl-playground

performance - parse color descriptions once

src/components/graph/graph.js

@@ -17,10 +17,6 @@ import FaCrosshair from 'react-icons/lib/fa/crosshairs';
 import FaZoom from 'react-icons/lib/fa/search-plus';
 import FaSave from 'react-icons/lib/fa/download';
 
-import {
-  scaleRGB
-} from "../../util/scaleRGB";
-
 /* https://bl.ocks.org/mbostock/9078690 - quadtree for onClick / hover selections */
 
 @connect((state) => {
@@ -156,23 +152,7 @@ class Graph extends React.Component {
             glScaleY(nextProps.graphMap[cell["CellName"]][1])
           ]
 
-          let c = cell["__color__"];
+          colors[i] = cell.__colorRGB__;
-
-          if (c[0] !== "#") {
-            const _c = c.replace(/[^\d,.]/g, '').split(',');
-            colors[i] = [
-              scaleRGB(+_c[0]),
-              scaleRGB(+_c[1]),
-              scaleRGB(+_c[2])
-            ]
-          } else {
-            var parsedHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c);
-            colors[i] = [
-              scaleRGB(parseInt(parsedHex[1], 16)),
-              scaleRGB(parseInt(parsedHex[2], 16)),
-              scaleRGB(parseInt(parsedHex[3], 16))
-            ];
-          }
           sizes[i] = cell["__selected__"] ? 4 : .2 /* make this a function of the number of total cells, including regraph */
         }
       })

src/components/scatterplot/scatterplot.js

@@ -16,10 +16,6 @@ import _camera from '../../util/camera.js'
 import _regl from 'regl'
 import _drawPoints from './drawPointsRegl'
 
-import {
-  scaleRGB
-} from "../../util/scaleRGB";
-
 import {
   margin,
   width,
@@ -169,23 +165,7 @@ class Scatterplot extends React.Component {
             glScaleY(this.state.yScale(cell.e[this.props.expression.data.genes.indexOf(this.props.scatterplotYYaccessor)]))
           ])
 
-          let c = _currentCellSelectionMap[cell.cellname]["__color__"];
+          colors.push(_currentCellSelectionMap[cell.cellname]["__colorRGB__"])
-
-          if (c[0] !== "#") {
-            const _c = c.replace(/[^\d,.]/g, '').split(',');
-            colors.push([
-              scaleRGB(+_c[0]),
-              scaleRGB(+_c[1]),
-              scaleRGB(+_c[2])
-            ])
-          } else {
-            var parsedHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c);
-            colors.push([
-              scaleRGB(parseInt(parsedHex[1], 16)),
-              scaleRGB(parseInt(parsedHex[2], 16)),
-              scaleRGB(parseInt(parsedHex[3], 16))
-            ]);
-          }
           sizes.push(_currentCellSelectionMap[cell.cellname]["__selected__"] ? 4 : .2) /* make this a function of the number of total cells, including regraph */
         }
       })

src/middleware/updateCellColors.js

@@ -1,6 +1,9 @@
 import uri from "urijs";
 import * as globals from "../globals";
 import _ from "lodash";
+import {
+  parseRGB
+} from "../util/parseRGB";
 
 /*
   https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6
@@ -47,7 +50,7 @@ const updateCellSelectionMiddleware = (store) => {
          (a) once the cells have loaded.
          (b) each time a user changes a color control we need to update currentCellSelection colors
 
-         This is available to all the draw functions as cell["__color__"]
+         This is available to all the draw functions as cell["__color__"] and cell["__colorRGB__"]
       */
 
       if (action.type === "color by categorical metadata") {
@@ -57,9 +60,11 @@ const updateCellSelectionMiddleware = (store) => {
         colorScale = d3.scaleOrdinal().range(globals.ordinalColors);
 
         _.each(currentSelectionWithUpdatedColors, (cell, i) => {
-          currentSelectionWithUpdatedColors[i]["__color__"] = colorScale(
+          let c = colorScale(
             cell[action.colorAccessor]
-          )
+          );
+          currentSelectionWithUpdatedColors[i]["__color__"] = c;
+          currentSelectionWithUpdatedColors[i]["__colorRGB__"] = parseRGB(c);
         })
 
       }
@@ -71,11 +76,13 @@ const updateCellSelectionMiddleware = (store) => {
           .range([1,0])
 
         _.each(currentSelectionWithUpdatedColors, (cell, i) => {
-          currentSelectionWithUpdatedColors[i]["__color__"] = d3.interpolateViridis(
+          let c = d3.interpolateViridis(
             colorScale(
               cell[action.colorAccessor]
             )
-          )
+          );
+          currentSelectionWithUpdatedColors[i]["__color__"] = c;
+          currentSelectionWithUpdatedColors[i]["__colorRGB__"] = parseRGB(c);
         })
 
       }
@@ -113,11 +120,13 @@ const updateCellSelectionMiddleware = (store) => {
           .range([1,0]) /* invert viridis... probably pass this scale through to others */
 
         _.each(currentSelectionWithUpdatedColors, (cell, i) => {
-          currentSelectionWithUpdatedColors[i]["__color__"] = d3.interpolateViridis(
+          let c = d3.interpolateViridis(
             colorScale(
               expressionMap[cell.CellName][indexOfGene]
             )
-          )
+          );
+          currentSelectionWithUpdatedColors[i]["__color__"] = c;
+          currentSelectionWithUpdatedColors[i]["__colorRGB__"] = parseRGB(c);
         })
       }
 

src/reducers/controls.js

@@ -1,4 +1,7 @@
 import _ from "lodash";
+import {
+  parseRGB
+} from "../util/parseRGB";
 
 const Controls = (state = {
   _ranges: null, /* this comes from initialize, this is universe */
@@ -34,6 +37,7 @@ const Controls = (state = {
     _.each(currentCellSelection, (cell) => {
       cell["__selected__"] = true;
       cell["__color__"] = "rgba(0,0,0,1)" /* initial color for all cells in all charts */
+      cell["__colorRGB__"] = parseRGB(cell["__color__"]);
     });
     /*
       construct a copy of the ranges object that only has categorical

src/util/parseRGB.js

@@ -0,0 +1,19 @@
+import {scaleRGB} from "./scaleRGB";
+
+export const parseRGB = (c) => {
+  if (c[0] !== "#") {
+    const _c = c.replace(/[^\d,.]/g, '').split(',');
+    return [
+      scaleRGB(+_c[0]),
+      scaleRGB(+_c[1]),
+      scaleRGB(+_c[2])
+    ];
+  } else {
+    var parsedHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c);
+    return [
+      scaleRGB(parseInt(parsedHex[1], 16)),
+      scaleRGB(parseInt(parsedHex[2], 16)),
+      scaleRGB(parseInt(parsedHex[3], 16))
+    ];
+  }
+};