From 9a3d349f9919218032b0a0f985dd7a9af5e34728 Mon Sep 17 00:00:00 2001 From: Colin Megill Date: Thu, 7 Dec 2017 14:33:25 -0800 Subject: [PATCH] move graph scales, still hardcoded, into globals --- src/components/graph/drawGraph.js | 68 +++++++++++++------------------ src/globals.js | 18 ++++++++ 2 files changed, 46 insertions(+), 40 deletions(-) diff --git a/src/components/graph/drawGraph.js b/src/components/graph/drawGraph.js index 85d1c2f7..d871ce43 100644 --- a/src/components/graph/drawGraph.js +++ b/src/components/graph/drawGraph.js @@ -1,18 +1,7 @@ import styles from "./graph.css"; import renderQueue from "../continuous/renderQueue"; import _ from "lodash"; - -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]); +import * as globals from "../../globals"; /****************************************** ******************************************* @@ -27,15 +16,15 @@ export const setupGraphElements = ( var canvas = d3.select("#graphAttachPoint") .append("canvas") - .attr("width", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) + .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", width + margin.left + margin.right) - .attr("height", height + margin.top + margin.bottom) + .attr("width", globals.graphWidth) + .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) => { - 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 */ + _.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([ - metadata["CellName"], - graphMap[metadata["CellName"]][0], - graphMap[metadata["CellName"]][1] + cell["CellName"], + graphMap[cell["CellName"]][0], + 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 */ - y(p[2]), /* y */ + globals.graphXScale(p[1]), /* x */ + 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 && - x(p[1]) <= graphBrushSelection.southeastX && - y(p[2]) >= graphBrushSelection.northwestY && - y(p[2]) <= graphBrushSelection.southeastY + globals.graphXScale(p[1]) >= graphBrushSelection.northwestX && + globals.graphXScale(p[1]) <= graphBrushSelection.southeastX && + globals.graphYScale(p[2]) >= graphBrushSelection.northwestY && + 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] - // _.find(metadata, {CellName: p[0]})[color] /* this.state.cells.metadata["23452345325"]["ERCC_reads"] = 20000 would be much faster as key value lookup */ + _currentCellSelectionMap[p[0]][colorAccessor] )); } + 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) diff --git a/src/globals.js b/src/globals.js index ee690cb6..7fcb4b96 100644 --- a/src/globals.js +++ b/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 + ]);