Cache offset{Width,Height} calls

hammerlab · Apr 23, 2015 · 7dd9933 · 7dd9933
1 parent b5e5c8c
commit 7dd9933
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/src/GeneTrack.js b/src/GeneTrack.js
@@ -53,6 +53,12 @@ var NonEmptyGeneTrack = React.createClass({
     genes: React.PropTypes.array.isRequired,
     onRangeChange: React.PropTypes.func.isRequired
   },
+  getInitialState: function() {
+    return {
+      width: 0,
+      height: 0
+    };
+  },
   render: function() {
     return <div className="genes"></div>;
   },
@@ -61,6 +67,11 @@ var NonEmptyGeneTrack = React.createClass({
         svg = d3.select(div)
                 .append('svg');
 
+    this.setState({
+      width: div.offsetWidth,
+      height: div.offsetHeight
+    });
+
     // These define the left/right arrow patterns for sense/antisense genes.
     // The second <path> allows the arrow to be seen on top of an exon.
     var defs = svg.append('defs');
@@ -80,29 +91,31 @@ var NonEmptyGeneTrack = React.createClass({
     this.updateVisualization();
   },
   getScale: function() {
-    var div = this.getDOMNode(),
-        range = this.props.range,
-        width = div.offsetWidth,
+    var range = this.props.range,
         offsetPx = range.offsetPx || 0;
     var scale = d3.scale.linear()
             .domain([range.start, range.stop + 1])  // 1 bp wide
-            .range([-offsetPx, width - offsetPx]);
+            .range([-offsetPx, this.state.width - offsetPx]);
     return scale;
   },
   componentDidUpdate: function(prevProps: any, prevState: any) {
     // Check a whitelist of properties which could change the visualization.
     var newProps = this.props;
     if (!_.isEqual(newProps.genes, prevProps.genes) ||
-        !_.isEqual(newProps.range, prevProps.range)) {
+        !_.isEqual(newProps.range, prevProps.range) ||
+       prevState != this.state) {
       this.updateVisualization();
     }
   },
   updateVisualization: function() {
     var div = this.getDOMNode(),
-        width = div.offsetWidth,
-        height = div.offsetHeight,
+        width = this.state.width,
+        height = this.state.height,
         svg = d3.select(div).select('svg');
 
+    // Hold off until height & width are known.
+    if (width === 0) return;
+
     var scale = this.getScale(),
         // We can't clamp scale directly because of offsetPx.
         clampedScale = d3.scale.linear()

diff --git a/src/PileupTrack.js b/src/PileupTrack.js
@@ -40,19 +40,28 @@ var NonEmptyPileupTrack = React.createClass({
     reads: React.PropTypes.array.isRequired,
     onRangeChange: React.PropTypes.func.isRequired
   },
+  getInitialState: function() {
+    return {
+      width: 0,
+      height: 0
+    };
+  },
   render: function(): any {
     return <div className='pileup'></div>;
   },
   componentDidMount: function() {
     var div = this.getDOMNode();
+    this.setState({
+      width: div.offsetWidth,
+      height: div.offsetWidth
+    });
     d3.select(div)
       .append('svg');
     this.updateVisualization();
   },
   getScale: function() {
-    var div = this.getDOMNode(),
-        range = this.props.range,
-        width = div.offsetWidth,
+    var range = this.props.range,
+        width = this.state.width,
         offsetPx = range.offsetPx || 0;
     var scale = d3.scale.linear()
             .domain([range.start, range.stop + 1])  // 1 bp wide
@@ -64,16 +73,20 @@ var NonEmptyPileupTrack = React.createClass({
     // TODO: this is imprecise; it would be better to deep check reads.
     var newProps = this.props;
     if (!_.isEqual(newProps.reads, prevProps.reads) ||
-        !_.isEqual(newProps.range, prevProps.range)) {
+        !_.isEqual(newProps.range, prevProps.range) ||
+       prevState != this.state) {
       this.updateVisualization();
     }
   },
   updateVisualization: function() {
     var div = this.getDOMNode(),
-        width = div.offsetWidth,
-        height = div.offsetHeight,
+        width = this.state.width,
+        height = this.state.height,
         svg = d3.select(div).select('svg');
 
+    // Hold off until height & width are known.
+    if (width === 0) return;
+
     var scale = this.getScale();
 
     var rows = pileup(this.props.reads.map(