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

Merge pull request #12 from bkmartinjr/regl-playground

Browse Source 
performance - parse color descriptions once
This commit is contained in:
Colin Megill
2018-05-01 13:24:17 -07:00
committed by GitHub
parent c98dd20cb3 118248446e
commit af09276951
5 changed files with 41 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/graph/graph.js
+1 -21
View File
@@ -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__"];
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))
];
}
colors[i] = cell.__colorRGB__;
sizes[i] = cell["__selected__"] ? 4 : .2 /* make this a function of the number of total cells, including regraph */
}
})
src/components/scatterplot/scatterplot.js
+1 -21
View File
@@ -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__"];
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))
]);
}
colors.push(_currentCellSelectionMap[cell.cellname]["__colorRGB__"])
sizes.push(_currentCellSelectionMap[cell.cellname]["__selected__"] ? 4 : .2) /* make this a function of the number of total cells, including regraph */
}
})
src/middleware/updateCellColors.js
+16 -7
View File
@@ -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
Vendored
+4
View File
@@ -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
+19
View File
@@ -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))
];
}
};