fork/cellxgene
1
0
Fork 0
mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-09-24 01:18:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove dead code canvas rendering code

Browse Source
This commit is contained in:
bkmartinjr
2018-05-07 16:26:24 -07:00
parent c9ff8b35c2
commit bb61d116d5
4 changed files with 2 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/graph/drawGraph.js
+1 -114
View File
@@ -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
+1 -1
View File
@@ -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
-89
View File
@@ -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
-1
View File
@@ -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";