Make annotations move smoothly with graph

ui/src/shared/components/Annotations.js

@@ -1,5 +1,6 @@
-import React, {PropTypes} from 'react'
+import React, {PropTypes, Component} from 'react'
 import Annotation from 'src/shared/components/Annotation'
+import AnnotationWindow from 'src/shared/components/AnnotationWindow'
 
 const style = {
   position: 'absolute',
@@ -9,25 +10,41 @@ const style = {
   zIndex: '150',
 }
 
-const Annotations = ({annotations, dygraph}) => {
-  if (!dygraph) {
-    return null
+class Annotations extends Component {
+  state = {
+    dygraph: null,
   }
 
-  return (
-    <div className="annotations-container" style={style}>
-      {annotations.map((a, i) =>
-        <Annotation key={i} annotation={a} dygraph={dygraph} />
-      )}
-    </div>
-  )
+  componentDidMount() {
+    this.props.annotationsRef(this)
+  }
+
+  render() {
+    const {dygraph} = this.state
+    const {annotations} = this.props
+
+    if (!dygraph) {
+      return null
+    }
+
+    return (
+      <div className="annotations-container" style={style}>
+        {annotations.map((a, i) =>
+          <Annotation key={i} annotation={a} dygraph={dygraph} />
+        )}
+        {annotations.map((a, i) =>
+          <AnnotationWindow key={i} annotation={a} dygraph={dygraph} />
+        )}
+      </div>
+    )
+  }
 }
 
-const {arrayOf, shape} = PropTypes
+const {arrayOf, func, shape} = PropTypes
 
 Annotations.propTypes = {
   annotations: arrayOf(shape({})),
-  dygraph: shape({}),
+  annotationsRef: func,
 }
 
 export default Annotations

ui/src/shared/components/Dygraph.js

@@ -7,7 +7,6 @@ import NanoDate from 'nano-date'
 import Dygraphs from 'src/external/dygraph'
 import DygraphLegend from 'src/shared/components/DygraphLegend'
 import Annotations from 'src/shared/components/Annotations'
-import AnnotationWindows from 'src/shared/components/AnnotationWindows'
 
 import getRange, {getStackedRange} from 'shared/parsing/getRangeForDygraph'
 import {DISPLAY_OPTIONS} from 'src/dashboards/constants'
@@ -47,8 +46,6 @@ export default class Dygraph extends Component {
     }
   }
 
-  annotationGraph = null
-
   componentDidMount() {
     const {
       axes: {y, y2},
@@ -68,9 +65,6 @@ export default class Dygraph extends Component {
       highlightCallback: this.highlightCallback,
       unhighlightCallback: this.unhighlightCallback,
       plugins: [new Dygraphs.Plugins.Crosshair({direction: 'vertical'})],
-      drawCallback: g => {
-        this.annotationGraph = g
-      },
       axes: {
         y: {
           valueRange: this.getYRange(timeSeries),
@@ -172,6 +166,9 @@ export default class Dygraph extends Component {
       series: this.hashColorDygraphSeries(),
       plotter: isBarGraph ? barPlotter : null,
       legendFormatter: this.legendComponent.legendFormatter,
+      drawCallback: graph => {
+        this.annotationsRef.setState({dygraph: graph})
+      },
     }
 
     dygraph.updateOptions(updateOptions)
@@ -335,18 +332,16 @@ export default class Dygraph extends Component {
     this.setState({isHidden: false})
   }
 
+  handleAnnotationsRef = ref => (this.annotationsRef = ref)
+
   render() {
     const {isHidden} = this.state
 
     return (
       <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
         <Annotations
+          annotationsRef={this.handleAnnotationsRef}
           annotations={getAnnotations(this.dygraph, annotations)}
-          dygraph={this.annotationGraph}
-        />
-        <AnnotationWindows
-          annotations={getAnnotations(this.dygraph, annotations)}
-          dygraph={this.annotationGraph}
         />
         <DygraphLegend
           dygraph={this.dygraph}