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

move to componentDidUpdate

Browse Source
This commit is contained in:
Colin Megill
2018-07-31 16:50:48 -04:00
parent ee2b7fc13f
commit 20331313e0
1 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/graph/graph.js
+18 -25
View File
@@ -117,16 +117,19 @@ class Graph extends React.Component {
reglRender reglRender
}); });
} }
// static getDerivedStateFromProps(props, state) { componentDidUpdate(prevProps, prevState) {
// console.log("getDerivedStateFromProps in graph.js"); if (
// console.log("props", props); this.state.reglRender &&
// console.log("state", state); this.reglRenderState === "rendering" &&
// // console.log("this.props", this.props); this.state.mode !== "zoom"
// } ) {
componentWillReceiveProps(nextProps) { this.state.reglRender.cancel();
if (this.state.regl && nextProps.crossfilter) { this.reglRenderState = "paused";
}
if (this.state.regl && this.props.crossfilter) {
/* update the regl state */ /* update the regl state */
const crossfilter = nextProps.crossfilter.cells; const crossfilter = this.props.crossfilter.cells;
const cells = crossfilter.all(); const cells = crossfilter.all();
const cellCount = cells.length; const cellCount = cells.length;
@@ -135,7 +138,7 @@ class Graph extends React.Component {
// //
if ( if (
!this.renderCache.positions || !this.renderCache.positions ||
this.props.crossfilter.cells != nextProps.crossfilter.cells this.props.crossfilter.cells != prevProps.crossfilter.cells
) { ) {
if (!this.renderCache.positions) if (!this.renderCache.positions)
this.renderCache.positions = new Float32Array(2 * cellCount); this.renderCache.positions = new Float32Array(2 * cellCount);
@@ -167,7 +170,7 @@ class Graph extends React.Component {
// we could add some sort of color-specific indicator to the app state. // we could add some sort of color-specific indicator to the app state.
if ( if (
!this.renderCache.colors || !this.renderCache.colors ||
this.props.cellsMetadata != nextProps.cellsMetadata this.props.cellsMetadata != prevProps.cellsMetadata
) { ) {
if (!this.renderCache.colors) if (!this.renderCache.colors)
this.renderCache.colors = new Float32Array(3 * cellCount); this.renderCache.colors = new Float32Array(3 * cellCount);
@@ -184,7 +187,7 @@ class Graph extends React.Component {
// //
if ( if (
!this.renderCache.sizes || !this.renderCache.sizes ||
this.props.crossfilter.cells != nextProps.crossfilter.cells this.props.crossfilter.cells != prevProps.crossfilter.cells
) { ) {
this.renderCache.sizes = new Float32Array(cellCount); this.renderCache.sizes = new Float32Array(cellCount);
} }
@@ -206,8 +209,8 @@ class Graph extends React.Component {
if ( if (
/* invisibly handles the initial null vs integer case as well as resize events */ /* invisibly handles the initial null vs integer case as well as resize events */
nextProps.responsive.height !== this.props.responsive.height || prevProps.responsive.height !== this.props.responsive.height ||
nextProps.responsive.width !== this.props.responsive.width prevProps.responsive.width !== this.props.responsive.width
) { ) {
/* clear out whatever was on the div, even if nothing, but usually the brushes etc */ /* clear out whatever was on the div, even if nothing, but usually the brushes etc */
d3.select("#graphAttachPoint") d3.select("#graphAttachPoint")
@@ -216,22 +219,12 @@ class Graph extends React.Component {
const { svg, brush, brushContainer } = setupSVGandBrushElements( const { svg, brush, brushContainer } = setupSVGandBrushElements(
this.handleBrushSelectAction.bind(this), this.handleBrushSelectAction.bind(this),
this.handleBrushDeselectAction.bind(this), this.handleBrushDeselectAction.bind(this),
nextProps.responsive, this.props.responsive,
this.graphPaddingTop this.graphPaddingTop
); );
this.setState({ svg, brush, brushContainer }); this.setState({ svg, brush, brushContainer });
} }
} }
componentDidUpdate() {
if (
this.state.reglRender &&
this.reglRenderState === "rendering" &&
this.state.mode !== "zoom"
) {
this.state.reglRender.cancel();
this.reglRenderState = "paused";
}
}
handleBrushSelectAction() { handleBrushSelectAction() {
/* This conditional handles procedural brush deselect. Brush emits an event on procedural deselect because it is move: null */ /* This conditional handles procedural brush deselect. Brush emits an event on procedural deselect because it is move: null */
if (d3.event.sourceEvent !== null) { if (d3.event.sourceEvent !== null) {