Merge remote-tracking branch 'origin/regl-playground' into regl-playground

src/components/graph/drawGraph.js

@@ -1,12 +1,11 @@
 // jshint esversion: 6
 import styles from "./graph.css";
-import renderQueue from "../../util/renderQueue";
 import _ from "lodash";
 import * as globals from "../../globals";
 
 /******************************************
 *******************************************
-          put svg & canvas in DOM
+          put svg in DOM
 *******************************************
 ******************************************/
 
@@ -14,132 +13,20 @@ export const setupGraphElements = (
   handleBrushSelectAction,
   handleBrushDeselectAction
 ) => {
-  // var canvas = d3.select("#graphAttachPoint")
-  //   .append("canvas")
-  //   .attr("width", globals.graphWidth)
-  //   .attr("height", globals.graphHeight)
-  //   .attr("class", `${styles.graphCanvas}`);
-
-  // var ctx = canvas.node().getContext("2d");
-
   var svg = d3
     .select("#graphAttachPoint")
     .append("svg")
     .attr("width", globals.graphWidth)
     .attr("height", globals.graphHeight)
     .attr("class", `${styles.graphSVG}`);
-  // .append("g")
-  //   .attr("transform", "translate(" + margin.left + " " + margin.top + ")");
 
   setupGraphBrush(svg, handleBrushSelectAction, handleBrushDeselectAction);
 
   return {
     svg
-    // ctx
   };
 };
 
-/******************************************
-*******************************************
-        draw cells on the canvas
-*******************************************
-******************************************/
-
-const drawGraph = (
-  context,
-  expressionsCountsMap,
-  colorAccessor,
-  ranges,
-  metadata,
-  currentCellSelection,
-  graphBrushSelection,
-  colorScale,
-  graphMap /* tmp remove when structure exists on server */,
-  opacityForDeselectedCells,
-  _currentCellSelectionMap
-) => {
-  return p => {
-    /* shuffle the data to overcome render order hiding cells, & filter first */
-    // data = d3.shuffle(data); /* make me a control */
-    context.beginPath();
-    /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
-    context.arc(
-      globals.graphXScale(p[1]) /* x */,
-      globals.graphYScale(p[2]) /* y */,
-      _currentCellSelectionMap[p[0]]["__selected__"] ? 3 : 1.5 /* r */,
-      0 /* sAngle */,
-      2 * Math.PI /* eAngle */
-    );
-
-    context.fillStyle = _currentCellSelectionMap[p[0]]["__color__"];
-
-    if (_currentCellSelectionMap[p[0]]["__selected__"]) {
-      context.globalAlpha = 1;
-    } else {
-      context.globalAlpha = opacityForDeselectedCells;
-    }
-
-    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]
-      ]);
-    }
-  });
-
-  /* clear canvas */
-  context.clearRect(0, 0, globals.graphWidth, globals.graphHeight);
-
-  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,
-  100
-);
-
 const setupGraphBrush = (
   svg,
   handleBrushSelectAction,

src/components/graph/graph.js

@@ -3,7 +3,7 @@ import React from "react";
 import _ from "lodash";
 import * as globals from "../../globals";
 import styles from "./graph.css";
-import { setupGraphElements, drawGraphUsingRenderQueue } from "./drawGraph";
+import { setupGraphElements } from "./drawGraph";
 import SectionHeader from "../framework/sectionHeader";
 import { connect } from "react-redux";
 import actions from "../../actions";

src/components/scatterplot/drawScatterplotCanvas.js

@@ -1,89 +0,0 @@
-// jshint esversion: 6
-import _ from "lodash";
-import renderQueue from "../../util/renderQueue";
-
-import { margin, width, height, createDimensions } from "./util";
-
-const drawScatterplotCanvas = (
-  context,
-  xScale,
-  yScale,
-  currentCellSelection,
-  opacityForDeselectedCells,
-  expression,
-  scatterplotXXaccessor,
-  scatterplotYYaccessor,
-  _currentCellSelectionMap
-) => {
-  return cell => {
-    /*
-        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();
-    /* context.arc(x,y,r,sAngle,eAngle,counterclockwise); */
-    context.arc(
-      xScale(
-        cell.e[expression.data.genes.indexOf(scatterplotXXaccessor)]
-      ) /* x */,
-      yScale(
-        cell.e[expression.data.genes.indexOf(scatterplotYYaccessor)]
-      ) /* y */,
-      _currentCellSelectionMap[cell.cellname]["__selected__"] ? 3 : 1.5 /* r */,
-      0 /* sAngle */,
-      2 * Math.PI /* eAngle */
-    );
-
-    context.fillStyle = _currentCellSelectionMap[cell.cellname]["__color__"];
-
-    if (_currentCellSelectionMap[cell.cellname]["__selected__"]) {
-      context.globalAlpha = 1;
-    } else {
-      context.globalAlpha = opacityForDeselectedCells;
-    }
-
-    context.fill();
-  };
-};
-
-export const drawScatterplotCanvasUsingRenderQueue = (
-  context,
-  xScale,
-  yScale,
-  currentCellSelection,
-  opacityForDeselectedCells,
-  expression,
-  scatterplotXXaccessor,
-  scatterplotYYaccessor
-) => {
-  /* clear canvas */
-  context.clearRect(0, 0, width, height);
-
-  const _currentCellSelectionMap = _.keyBy(
-    currentCellSelection,
-    "CellName"
-  ); /* move me to the reducer */
-
-  const _renderScatterplotWithFunctionReturnedByQueue = renderQueue(
-    drawScatterplotCanvas(
-      context,
-      xScale,
-      yScale,
-      currentCellSelection,
-      opacityForDeselectedCells,
-      expression,
-      scatterplotXXaccessor,
-      scatterplotYYaccessor,
-      _currentCellSelectionMap
-    )
-  );
-
-  _renderScatterplotWithFunctionReturnedByQueue(expression.data.cells);
-  return _renderScatterplotWithFunctionReturnedByQueue;
-};
-
-export default _.debounce(drawScatterplotCanvasUsingRenderQueue, 100);

src/components/scatterplot/scatterplot.js

@@ -9,7 +9,6 @@ import { connect } from "react-redux";
 import scatterplot from "./scatterplot";
 import setupScatterplot from "./setupScatterplot";
 import styles from "./scatterplot.css";
-import drawScatterplotCanvas from "./drawScatterplotCanvas";
 
 import mat4 from "gl-mat4";
 import fit from "canvas-fit";

src/util/parseRGB.js

@@ -1,7 +1,13 @@
 // jshint esversion: 6
 import { scaleRGB } from "./scaleRGB";
 
-export const parseRGB = c => {
+// maintain a cache of already parsed RGB names, as it is reasonably expensive
+// to do this operation.  This lets us have speed, but keep the pleasant ability
+// to talk about colors by their text description eg, 'rgb(0,0,1)'
+//
+const colorCache = new Object(null); // no prototype
+
+function parseColorName(c) {
   if (c[0] !== "#") {
     const _c = c.replace(/[^\d,.]/g, "").split(",");
     return [scaleRGB(+_c[0]), scaleRGB(+_c[1]), scaleRGB(+_c[2])];
@@ -13,4 +19,13 @@ export const parseRGB = c => {
       scaleRGB(parseInt(parsedHex[3], 16))
     ];
   }
+}
+
+export const parseRGB = c => {
+  var cv = colorCache[c];
+  if (!cv) {
+    cv = parseColorName(c);
+    colorCache[c] = cv;
+  }
+  return cv;
 };