Remove need for annotationsRef

ui/src/shared/components/Annotation.js

@@ -16,18 +16,18 @@ const Annotation = ({
   <div>
     {annotation.startTime === annotation.endTime ? (
       <AnnotationPoint
-        lastUpdated={lastUpdated}
-        annotation={annotation}
         mode={mode}
         dygraph={dygraph}
+        annotation={annotation}
+        lastUpdated={lastUpdated}
         staticLegendHeight={staticLegendHeight}
       />
     ) : (
       <AnnotationSpan
-        lastUpdated={lastUpdated}
-        annotation={annotation}
         mode={mode}
         dygraph={dygraph}
+        annotation={annotation}
+        lastUpdated={lastUpdated}
         staticLegendHeight={staticLegendHeight}
       />
     )}

ui/src/shared/components/Annotations.js

@@ -24,7 +24,9 @@ class Annotations extends Component {
   }
 
   componentDidMount() {
-    this.props.annotationsRef(this)
+    this.props.dygraph.updateOptions({
+      drawCallback: this.heartbeat,
+    })
   }
 
   heartbeat = () => {
@@ -94,7 +96,6 @@ Annotations.propTypes = {
   dygraph: shape({}),
   mode: string,
   isTempHovering: bool,
-  annotationsRef: func,
   handleUpdateAnnotation: func.isRequired,
   handleDismissAddingAnnotation: func.isRequired,
   handleAddingAnnotationSuccess: func.isRequired,

ui/src/shared/components/Dygraph.js

@@ -152,7 +152,6 @@ class Dygraph extends Component {
       colors: this.lineColors,
       series: this.colorDygraphSeries,
       plotter: isBarGraph ? barPlotter : null,
-      drawCallback: this.annotationsRef.heartbeat,
     }
 
     dygraph.updateOptions(updateOptions)
@@ -270,10 +269,8 @@ class Dygraph extends Component {
   }
 
   handleMouseMove = e => {
-    if (this.props.handleSetHoverTime) {
+    const newTime = this.eventToTimestamp(e)
-      const newTime = this.eventToTimestamp(e)
+    this.props.handleSetHoverTime(newTime)
-      this.props.handleSetHoverTime(newTime)
-    }
 
     this.setState({isHoveringThisGraph: true})
   }
@@ -287,8 +284,6 @@ class Dygraph extends Component {
     this.setState({isHidden: false})
   }
 
-  handleAnnotationsRef = ref => (this.annotationsRef = ref)
-
   handleReceiveStaticLegendHeight = staticLegendHeight => {
     this.setState({staticLegendHeight})
   }
@@ -314,7 +309,6 @@ class Dygraph extends Component {
           <div className="dygraph-addons">
             <Annotations
               dygraph={this.dygraph}
-              annotationsRef={this.handleAnnotationsRef}
               staticLegendHeight={staticLegendHeight}
             />
             <DygraphLegend
@@ -377,6 +371,7 @@ Dygraph.defaultProps = {
   overrideLineColors: null,
   dygraphRef: () => {},
   onZoom: () => {},
+  handleSetHoverTime: () => {},
   staticLegend: {
     type: null,
   },