move graph scales, still hardcoded, into globals

src/components/graph/drawGraph.js

@@ -1,18 +1,7 @@
 import styles from "./graph.css";
 import renderQueue from "../continuous/renderQueue";
 import _ from "lodash";
-
+import * as globals from "../../globals";
-const margin = {top: 20, right: 10, bottom: 30, left: 40},
-    width = 960 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;
-
-const x = d3.scaleLinear()
-  .domain([0, 1]) /* while this is the default for d3, our data is normalized so better to be explicit */
-  .range([0, width]);
-
-const y = d3.scaleLinear()
-  .domain([0, 1]) /* while this is the default for d3, our data is normalized so better to be explicit */
-  .range([height, 0]);
 
 /******************************************
 *******************************************
@@ -27,15 +16,15 @@ export const setupGraphElements = (
 
   var canvas = d3.select("#graphAttachPoint")
     .append("canvas")
-    .attr("width", width + margin.left + margin.right)
+    .attr("width", globals.graphWidth)
-    .attr("height", height + margin.top + margin.bottom)
+    .attr("height", globals.graphHeight)
     .attr("class", `${styles.graphCanvas}`);
 
   var ctx = canvas.node().getContext("2d");
 
   var svg = d3.select("#graphAttachPoint").append("svg")
-    .attr("width", width + margin.left + margin.right)
+    .attr("width", globals.graphWidth)
-    .attr("height", height + margin.top + margin.bottom)
+    .attr("height", globals.graphHeight)
     .attr("class", `${styles.graphSVG}`)
     // .append("g")
     //   .attr("transform", "translate(" + margin.left + " " + margin.top + ")");
@@ -72,7 +61,7 @@ export const drawGraph = (
 ) => {
 
   /* clear canvas */
-  context.clearRect(0, 0, width, height);
+  context.clearRect(0, 0, globals.graphWidth, globals.graphHeight);
 
   // let colorScale = null; /* it could be 'by expression' and that's a special case */
 
@@ -83,12 +72,12 @@ export const drawGraph = (
 
   const data = [];
 
-  _.each(currentCellSelection, (metadata, i) => {
+  _.each(currentCellSelection, (cell, i) => {
-    if (graphMap[metadata["CellName"]]) { /* fails silently, sometimes this is undefined, in which case the graph array should be shorter than the metadata array, check in reducer */
+    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([
-        metadata["CellName"],
+        cell["CellName"],
-        graphMap[metadata["CellName"]][0],
+        graphMap[cell["CellName"]][0],
-        graphMap[metadata["CellName"]][1]
+        graphMap[cell["CellName"]][1]
       ])
     }
   })
@@ -96,14 +85,14 @@ export const drawGraph = (
   /* shuffle the data to overcome render order hiding cells, & filter first */
   // data = d3.shuffle(data); /* make me a control */
 
-  const _metadata = _.keyBy(metadata, "CellName"); /* move me to the reducer */
+  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(
-      x(p[1]),            /* x */
+      globals.graphXScale(p[1]),            /* x */
-      y(p[2]),            /* y */
+      globals.graphYScale(p[2]),            /* y */
       2,                  /* r */
       0,                  /* sAngle */
       2 * Math.PI         /* eAngle */
@@ -114,31 +103,29 @@ export const drawGraph = (
     if (graphBrushSelection) {
 
       pointIsInsideBrushBounds = (
-        x(p[1]) >= graphBrushSelection.northwestX &&
+        globals.graphXScale(p[1]) >= graphBrushSelection.northwestX &&
-        x(p[1]) <= graphBrushSelection.southeastX &&
+        globals.graphXScale(p[1]) <= graphBrushSelection.southeastX &&
-        y(p[2]) >= graphBrushSelection.northwestY &&
+        globals.graphYScale(p[2]) >= graphBrushSelection.northwestY &&
-        y(p[2]) <= graphBrushSelection.southeastY
+        globals.graphYScale(p[2]) <= graphBrushSelection.southeastY
       );
 
-      // if (i === 5) {
-      //   console.log(
-      //     pointIsInsideBrushBounds,
-      //     x(p[1]),
-      //     y(p[2]),
-      //     graphBrushSelection,
-      //   );
-      // }
     }
 
+
     context.globalAlpha = !graphBrushSelection || pointIsInsideBrushBounds ? 1 : .2;
 
     if (colorAccessor && colorScale) {
       context.fillStyle = d3.interpolateViridis(colorScale(
-        _metadata[p[0]][colorAccessor]
+        _currentCellSelectionMap[p[0]][colorAccessor]
-        // _.find(metadata, {CellName: p[0]})[color] /* this.state.cells.metadata["23452345325"]["ERCC_reads"] = 20000 would be much faster as key value lookup */
       ));
     }
 
+    if (_currentCellSelectionMap[p[0]]["__selected__"]) {
+      context.fillStyle = "rgb(255,0,0)";
+    } else {
+      context.fillStyle = "rgb(0,0,0)";
+    }
+
     // if (i < 20) {
       // console.log(
       //   '0 to 1 scale', expressionToColorScale(expressionsCountsMap[p[0]]),
@@ -155,6 +142,7 @@ export const drawGraph = (
     context.fill();
 
   });
+
 }
 
 const setupGraphBrush = (
@@ -167,7 +155,7 @@ const setupGraphBrush = (
      d3.brush()
      .extent([
        [0, 0],
-       [width, height]
+       [globals.graphWidth, globals.graphHeight]
      ])
      .on("brush", handleBrushSelectAction)
      .on("end", handleBrushDeselectAction)

src/globals.js

@@ -41,3 +41,21 @@ export const API = {
 export const accentFont = "Georgia,Times,Times New Roman,serif";
 export const maxParagraphWidth = 600;
 export const maxControlsWidth = 800;
+
+export const graphMargin = {top: 20, right: 10, bottom: 30, left: 40};
+export const graphWidth = 960;
+export const graphHeight = 500;
+
+export const graphXScale = d3.scaleLinear()
+  .domain([0, 1]) /* while this is the default for d3, our data is normalized so better to be explicit */
+  .range([
+    0 + graphMargin.left,
+    graphWidth - graphMargin.right
+  ]);
+
+export const graphYScale = d3.scaleLinear()
+  .domain([0, 1]) /* while this is the default for d3, our data is normalized so better to be explicit */
+  .range([
+    graphHeight - graphMargin.bottom,
+    0 + graphMargin.top
+  ]);