Remove the need for heartbeat and lastUpdated

ui/src/shared/components/Annotation.js

@@ -9,8 +9,8 @@ import * as schema from 'shared/schemas'
 const Annotation = ({
   mode,
   dygraph,
+  dWidth,
   annotation,
-  lastUpdated,
   staticLegendHeight,
 }) => (
   <div>
@@ -19,7 +19,7 @@ const Annotation = ({
         mode={mode}
         dygraph={dygraph}
         annotation={annotation}
-        lastUpdated={lastUpdated}
+        dWidth={dWidth}
         staticLegendHeight={staticLegendHeight}
       />
     ) : (
@@ -27,7 +27,7 @@ const Annotation = ({
         mode={mode}
         dygraph={dygraph}
         annotation={annotation}
-        lastUpdated={lastUpdated}
+        dWidth={dWidth}
         staticLegendHeight={staticLegendHeight}
       />
     )}
@@ -38,7 +38,7 @@ const {number, shape, string} = PropTypes
 
 Annotation.propTypes = {
   mode: string,
-  lastUpdated: number,
+  dWidth: number,
   annotation: schema.annotation.isRequired,
   dygraph: shape({}).isRequired,
   staticLegendHeight: number,

ui/src/shared/components/Annotations.js

@@ -19,25 +19,10 @@ import {
 import {visibleAnnotations} from 'src/shared/annotations/helpers'
 
 class Annotations extends Component {
-  state = {
-    lastUpdated: null,
-  }
-
-  componentDidMount() {
-    this.props.dygraph.updateOptions({
-      drawCallback: this.redraw,
-    })
-  }
-
-  redraw = () => {
-    // force a redraw of annotations
-    this.setState({lastUpdated: Date.now()})
-  }
-
   render() {
-    const {lastUpdated} = this.state
     const {
       mode,
+      dWidth,
       dygraph,
       isTempHovering,
       handleUpdateAnnotation,
@@ -70,7 +55,7 @@ class Annotations extends Component {
             mode={mode}
             annotation={a}
             dygraph={dygraph}
-            lastUpdated={lastUpdated}
+            dWidth={dWidth}
             staticLegendHeight={staticLegendHeight}
           />
         ))}
@@ -94,7 +79,8 @@ const {arrayOf, bool, func, number, shape, string} = PropTypes
 
 Annotations.propTypes = {
   annotations: arrayOf(schema.annotation),
-  dygraph: shape({}),
+  dygraph: shape({}).isRequired,
+  dWidh: number.isRequired,
   mode: string,
   isTempHovering: bool,
   handleUpdateAnnotation: func.isRequired,

ui/src/shared/components/Dygraph.js

@@ -288,6 +288,15 @@ class Dygraph extends Component {
     this.setState({staticLegendHeight})
   }
 
+  get areAnnotationsVisible() {
+    if (!this.dygraph) {
+      return false
+    }
+
+    const [start, end] = this.dygraph && this.dygraph.xAxisRange()
+    return !!start && !!end
+  }
+
   render() {
     const {isHidden, staticLegendHeight} = this.state
     const {staticLegend, children, hoverTime} = this.props
@@ -305,10 +314,11 @@ class Dygraph extends Component {
 
     return (
       <div className="dygraph-child" onMouseLeave={this.handleMouseLeave}>
-        {this.dygraph && (
+        {this.areAnnotationsVisible && (
           <div className="dygraph-addons">
             <Annotations
               dygraph={this.dygraph}
+              dWidth={this.dygraph.width_}
               staticLegendHeight={staticLegendHeight}
             />
             <DygraphLegend