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

better caching of graph regl data

Browse Source
This commit is contained in:
bkmartinjr
2018-05-25 17:27:50 -07:00
parent 007e1d3a66
commit 7874e6a68b
1 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/graph/graph.js
+28 -14
View File
@@ -101,18 +101,26 @@ class Graph extends React.Component {
!this.renderCache.positions || !this.renderCache.positions ||
this.props.crossfilter.cells != nextProps.crossfilter.cells this.props.crossfilter.cells != nextProps.crossfilter.cells
) { ) {
const positions = new Float32Array(2 * cellCount); if (!this.renderCache.positions)
this.renderCache.positions = new Float32Array(2 * cellCount);
// d3.scaleLinear().domain([0,1]).range([-1,1]) // d3.scaleLinear().domain([0,1]).range([-1,1])
const glScaleX = scaleLinear([0, 1], [-1, 1]); const glScaleX = scaleLinear([0, 1], [-1, 1]);
// d3.scaleLinear().domain([0,1]).range([1,-1]) // d3.scaleLinear().domain([0,1]).range([1,-1])
const glScaleY = scaleLinear([0, 1], [1, -1]); const glScaleY = scaleLinear([0, 1], [1, -1]);
for (let i = 0; i < cellCount; i++) { for (
let i = 0, positions = this.renderCache.positions;
i < cellCount;
i++
) {
positions[2 * i] = glScaleX(cells[i].__x__); positions[2 * i] = glScaleX(cells[i].__x__);
positions[2 * i + 1] = glScaleY(cells[i].__y__); positions[2 * i + 1] = glScaleY(cells[i].__y__);
} }
this.renderCache.positions = positions; this.state.pointBuffer({
data: this.renderCache.positions,
dimension: 2
});
} }
// Colors for each point - a cached value that only changes when // Colors for each point - a cached value that only changes when
@@ -125,22 +133,28 @@ class Graph extends React.Component {
!this.renderCache.colors || !this.renderCache.colors ||
this.props.allCellsMetadata != nextProps.allCellsMetadata this.props.allCellsMetadata != nextProps.allCellsMetadata
) { ) {
const colors = new Float32Array(3 * cellCount); if (!this.renderCache.colors)
for (let i = 0; i < cellCount; i++) { this.renderCache.colors = new Float32Array(3 * cellCount);
for (let i = 0, colors = this.renderCache.colors; i < cellCount; i++) {
colors.set(cells[i].__colorRGB__, 3 * i); colors.set(cells[i].__colorRGB__, 3 * i);
} }
this.renderCache.colors = colors; this.state.colorBuffer({ data: this.renderCache.colors, dimension: 3 });
} }
const sizes = new Float32Array(cellCount); // Sizes for each point - this is presumed to change each time the
crossfilter.fillByIsFiltered(sizes, 4, 0.2); // component receives new props. Almost always a true assumption, as
// most property upates are due to changes driving a crossfilter
// selection set change.
//
if (
!this.renderCache.sizes ||
this.props.crossfilter.cells != nextProps.crossfilter.cells
) {
this.renderCache.sizes = new Float32Array(cellCount);
}
crossfilter.fillByIsFiltered(this.renderCache.sizes, 4, 0.2);
this.state.sizeBuffer({ data: this.renderCache.sizes, dimension: 1 });
this.state.pointBuffer({
data: this.renderCache.positions,
dimension: 2
});
this.state.colorBuffer({ data: this.renderCache.colors, dimension: 3 });
this.state.sizeBuffer({ data: sizes, dimension: 1 });
this.count = cellCount; this.count = cellCount;
} }