Merge a8df8aa into 210de66

scripts/watch.sh

@@ -8,8 +8,6 @@ trap "trap - SIGTERM && kill -- -$$" SIGINT SIGTERM EXIT
 
 mkdir -p dist  # in case it doesn't exist; watchify needs it
 
-babelify --ignore [src/lib]
-
 # Start watchers
 watchify -v -t [ babelify --ignore [src/lib] ] src/test/{*.js,**/*.js} --debug -o dist/tests.js &
 watchify -v -t [babelify --ignore [src/lib] ] src/main/pileup.js      --debug -o dist/pileup.js --standalone pileup &

src/main/VisualizationWrapper.js

@@ -77,7 +77,10 @@ class VisualizationWrapper extends React.Component<Props, State> {
     if (this.props.range && !this.hasDragBeenInitialized) this.addDragInterface();
   }
 
-  componentDidUpdate(): any {
+  componentDidUpdate(prevProps: Props, prevState: Object): any {
+    if (prevState.updateSize) {
+      this.updateSize();
+    }
     if (this.props.range && !this.hasDragBeenInitialized) this.addDragInterface();
   }
 
@@ -137,12 +140,6 @@ class VisualizationWrapper extends React.Component<Props, State> {
     }
   }
 
-  componentWillUpdate(nextProps:Props, nextState: Object) {
-    if (nextState.updateSize) {
-      this.updateSize();
-    }
-  }
-
   render(): any {
     const range = this.props.range;
     const component = this.props.visualization.component;

src/main/viz/CoverageTrack.js

@@ -186,16 +186,18 @@ class CoverageTrack extends React.Component<VizProps<DataSource<Alignment | Feat
   state: State; // no state, used to make flow happy
   cache: CoverageCache< Alignment | Feature >;
   tiles: CoverageTiledCanvas;
+  ref: Object;
   static defaultOptions: Object;
   static getOptionsMenu: (options: Object) => any;
   static handleSelectOption: (item: Object, oldOptions: Object) => Object;
 
   constructor(props: VizProps<DataSource<Alignment | Feature>>) {
     super(props);
+    this.ref = React.createRef();
   }
 
   render(): any {
-    return <canvas ref='canvas' onClick={this.handleClick.bind(this)} />;
+    return <canvas ref={this.ref} onClick={this.handleClick.bind(this)} />;
   }
 
   getScale(): any {
@@ -240,7 +242,7 @@ class CoverageTrack extends React.Component<VizProps<DataSource<Alignment | Feat
   }
 
   getContext(): CanvasRenderingContext2D {
-    var canvas = (this.refs.canvas : HTMLCanvasElement);
+    const canvas = (this.ref.current : HTMLCanvasElement);
     // The typecast through `any` is because getContext could return a WebGL context.
     var ctx = ((canvas.getContext('2d') : any) : CanvasRenderingContext2D);
     return ctx;
@@ -275,8 +277,8 @@ class CoverageTrack extends React.Component<VizProps<DataSource<Alignment | Feat
   }
 
   visualizeCoverage() {
-    var canvas = (this.refs.canvas : HTMLCanvasElement),
-        width = this.props.width,
+    const canvas = (this.ref.current : HTMLCanvasElement);
+    var width = this.props.width,
         height = this.props.height,
         range = ContigInterval.fromGenomeRange(this.props.range);
 

src/main/viz/FeatureTrack.js

@@ -101,12 +101,14 @@ class FeatureTrack extends React.Component<VizProps<DataSource<Feature>>, State>
   state: State;
   tiles: FeatureTiledCanvas;
   cache: GenericFeatureCache;
+  ref: Object;
   static defaultOptions: Object;
   static getOptionsMenu: (options: Object) => any;
   static handleSelectOption: (item: Object, oldOptions: Object) => Object;
 
   constructor(props: VizProps<DataSource<Feature>>) {
     super(props);
+    this.ref = React.createRef();
     this.state = {
       networkStatus: null
     };
@@ -125,7 +127,7 @@ class FeatureTrack extends React.Component<VizProps<DataSource<Feature>>, State>
         networkStatus = this.state.networkStatus;
     if (networkStatus) {
       statusEl = (
-        <div ref='status' className='network-status-small'>
+        <div className='network-status-small'>
           <div className='network-status-message-small'>
             Loading features…
           </div>
@@ -147,8 +149,8 @@ class FeatureTrack extends React.Component<VizProps<DataSource<Feature>>, State>
       return (
         <div>
           {statusEl}
-          <div ref='container' style={containerStyles}>
-            <canvas ref='canvas' onClick={this.handleClick.bind(this)} />
+          <div style={containerStyles}>
+            <canvas ref={this.ref} onClick={this.handleClick.bind(this)} />
           </div>
         </div>
       );
@@ -212,8 +214,8 @@ class FeatureTrack extends React.Component<VizProps<DataSource<Feature>>, State>
   }
 
   updateVisualization() {
-    var canvas = (this.refs.canvas : HTMLCanvasElement),
-        width = this.props.width,
+    const canvas = (this.ref.current : HTMLCanvasElement);
+    var width = this.props.width,
         genomeRange = this.props.range;
 
     var range = new ContigInterval(genomeRange.contig, genomeRange.start, genomeRange.stop);
@@ -253,7 +255,7 @@ class FeatureTrack extends React.Component<VizProps<DataSource<Feature>>, State>
         x = ev.offsetX, // resize offset to canvas size
         y = ev.offsetY/ratio;
 
-    var ctx = canvasUtils.getContext(this.refs.canvas);
+    var ctx = canvasUtils.getContext(this.ref.current);
     var trackingCtx = new dataCanvas.ClickTrackingContext(ctx, x, y);
 
     var genomeRange = this.props.range,

src/main/viz/GeneTrack.js

@@ -14,7 +14,6 @@ import GenericFeature from '../data/genericFeature';
 import {GenericFeatureCache} from './GenericFeatureCache';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import _ from 'underscore';
 import shallowEquals from 'shallow-equals';
 
@@ -78,16 +77,18 @@ class GeneTrack extends React.Component<VizProps<DataSource<Gene>>, State> {
   props: VizProps<DataSource<Gene>>;
   state: State;
   cache: GenericFeatureCache;
+  ref: Object;
 
   constructor(props: VizProps<DataSource<Gene>>) {
     super(props);
+    this.ref = React.createRef();
     this.state = {
       networkStatus: null
     };
   }
 
   render(): any {
-    return <canvas />;
+    return <canvas ref={this.ref} />;
   }
 
   componentDidMount() {
@@ -124,8 +125,8 @@ class GeneTrack extends React.Component<VizProps<DataSource<Gene>>, State> {
   }
 
   updateVisualization() {
-    var canvas = ReactDOM.findDOMNode(this),
-        {width, height} = this.props,
+    const canvas = this.ref.current;
+    var {width, height} = this.props,
         genomeRange = this.props.range;
 
     var range = new ContigInterval(genomeRange.contig, genomeRange.start, genomeRange.stop);

src/main/viz/GenomeTrack.js

@@ -10,7 +10,6 @@ import type {DataCanvasRenderingContext2D} from 'data-canvas';
 import type {Scale} from './d3utils';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import shallowEquals from 'shallow-equals';
 import type {State} from '../types';
 
@@ -114,9 +113,15 @@ class GenomeTrack extends React.Component<VizProps<TwoBitSource>, State> {
   props: VizProps<TwoBitSource>;
   state: State;  // no state, used to make flow happy
   tiles: GenomeTiledCanvas;
+  ref: Object
+
+  constructor(props: VizProps<TwoBitSource>) {
+    super(props);
+    this.ref = React.createRef();
+  }
 
   render(): any {
-    return <canvas />;
+    return <canvas ref={this.ref}/>;
   }
 
   componentDidMount() {
@@ -147,8 +152,8 @@ class GenomeTrack extends React.Component<VizProps<TwoBitSource>, State> {
   }
 
   updateVisualization() {
-    var canvas = ReactDOM.findDOMNode(this),
-        {width, height, range} = this.props;
+    const canvas = this.ref.current;
+    var  {width, height, range} = this.props;
 
     // Hold off until height & width are known.
     if (width === 0) return;

src/main/viz/GenotypeTrack.js

@@ -94,10 +94,14 @@ class GenotypeTrack extends React.Component<VizProps<VcfDataSource>, State> {
   props: VizProps<VcfDataSource>;
   state: State;
   tiles: GenotypeTiledCanvas;
+  canvasRef: Object;
+  labelRef: Object
   callSetNames: string[];
 
   constructor(props: Object) {
     super(props);
+    this.labelRef = React.createRef();
+    this.canvasRef = React.createRef();
     this.callSetNames = [];
     this.state = {
       networkStatus: null
@@ -133,7 +137,7 @@ class GenotypeTrack extends React.Component<VizProps<VcfDataSource>, State> {
         networkStatus = this.state.networkStatus;
     if (networkStatus) {
       statusEl = (
-        <div ref='status' className='network-status-small'>
+        <div className='network-status-small'>
           <div className='network-status-message-small'>
             Loading Genotypes…
           </div>
@@ -155,9 +159,9 @@ class GenotypeTrack extends React.Component<VizProps<VcfDataSource>, State> {
       return (
         <div>
           {statusEl}
-          <div ref='container' style={containerStyles}>
-            <div className="genotypeLabels" style={labelStyles}><canvas ref='labelCanvas' /></div>
-            <div className="genotypeRows" style={canvasStyles}><canvas ref='canvas' onClick={this.handleClick.bind(this)} /></div>
+          <div style={containerStyles}>
+            <div className="genotypeLabels" style={labelStyles}><canvas ref={this.labelRef} /></div>
+            <div className="genotypeRows" style={canvasStyles}><canvas ref={this.canvasRef} onClick={this.handleClick.bind(this)} /></div>
           </div>
         </div>
       );
@@ -216,8 +220,8 @@ class GenotypeTrack extends React.Component<VizProps<VcfDataSource>, State> {
   // draws sample names on side bar. This needs to be only rendered once.
   drawLabels() {
     // if already drawn, return
-    var labelCanvas = (this.refs.labelCanvas : HTMLCanvasElement),
-        width = this.props.width;
+    const labelCanvas = (this.labelRef.current : HTMLCanvasElement);
+    var width = this.props.width;
 
     // Hold off until height & width are known.
     if (width === 0 || typeof labelCanvas == 'undefined') return;
@@ -245,8 +249,8 @@ class GenotypeTrack extends React.Component<VizProps<VcfDataSource>, State> {
   }
 
   updateVisualization() {
-    var canvas = (this.refs.canvas : HTMLCanvasElement),
-        width = this.props.width;
+    const canvas = (this.canvasRef.current : HTMLCanvasElement);
+    var  width = this.props.width;
 
     // Hold off until height & width are known.
     if (width === 0 || typeof canvas == 'undefined') return;

src/main/viz/IdiogramTrack.js

@@ -15,7 +15,6 @@ import canvasUtils from './canvas-utils';
 import dataCanvas from 'data-canvas';
 import style from '../style';
 
-import ReactDOM from 'react-dom';
 import shallowEquals from 'shallow-equals';
 import d3utils from './d3utils';
 import _ from 'underscore';
@@ -36,16 +35,18 @@ class IdiogramTrack extends React.Component<VizProps<DataSource<Chromosome>>, St
   props: VizProps<DataSource<Chromosome>>;
   state: State;
   cache: GenericFeatureCache;
+  ref: Object
 
   constructor(props: VizProps<DataSource<Chromosome>>) {
     super(props);
+    this.ref = React.createRef();
     this.state = {
       networkStatus: null
     };
   }
 
   render(): any {
-    return <canvas />;
+    return <canvas ref={this.ref} />;
   }
 
   componentDidMount() {
@@ -78,8 +79,8 @@ class IdiogramTrack extends React.Component<VizProps<DataSource<Chromosome>>, St
   }
 
   updateVisualization(prevProps: any) {
-    var canvas = ReactDOM.findDOMNode(this),
-      {width, height} = this.props;
+    const canvas = this.ref.current;
+    var  {width, height} = this.props;
 
     var range = new ContigInterval(this.props.range.contig, this.props.range.start, this.props.range.stop);
 

src/main/viz/LocationTrack.js

@@ -8,7 +8,6 @@ import type {VizProps} from '../VisualizationWrapper';
 import type {Scale} from './d3utils';
 import type {State} from '../types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import EmptySource from '../sources/EmptySource';
 import canvasUtils from './canvas-utils';
 import dataCanvas from 'data-canvas';
@@ -18,18 +17,20 @@ import d3utils from './d3utils';
 class LocationTrack extends React.Component<VizProps<void>, State> {
   props: VizProps<void>;
   state: State;  // state not used, here to make flow happy
+  ref: Object;
   static defaultSource: Object;
 
   constructor(props: VizProps<void>) {
     super(props);
+    this.ref = React.createRef();
   }
 
   getScale(): Scale {
     return d3utils.getTrackScale(this.props.range, this.props.width);
   }
 
   render(): any {
-    return <canvas />;
+    return <canvas ref={this.ref} />;
   }
 
   componentDidMount() {
@@ -41,8 +42,8 @@ class LocationTrack extends React.Component<VizProps<void>, State> {
   }
 
   updateVisualization() {
-    var canvas = ReactDOM.findDOMNode(this),
-        {range, width, height} = this.props,
+    const canvas = this.ref.current;
+    var  {range, width, height} = this.props,
         scale = this.getScale();
 
     if (canvas && canvas instanceof Element) { // check for getContext