Do not show crosshair component on hovered graph

ui/src/shared/components/Crosshair.js

@@ -4,12 +4,7 @@ import classnames from 'classnames'
 
 class Crosshair extends Component {
   render() {
-    const {
-      dygraph,
-      staticLegendHeight,
-      hoverTime,
-      handleCrosshairRef,
-    } = this.props
+    const {dygraph, staticLegendHeight, hoverTime} = this.props
     const crosshairleft = Math.round(
       Math.max(-1000, dygraph.toDomXCoord(hoverTime)) || -1000 + 1
     )
@@ -17,7 +12,7 @@ class Crosshair extends Component {
       DYGRAPH_CONTAINER_XLABEL_MARGIN}px)`
 
     return (
-      <div className="crosshair" ref={el => handleCrosshairRef(el)}>
+      <div className="crosshair">
         <div
           className={classnames('crosshair--crosshair', {
             hidden: crosshairleft < 0,
@@ -39,7 +34,6 @@ Crosshair.propTypes = {
   dygraph: shape({}),
   staticLegendHeight: number,
   hoverTime: string,
-  handleCrosshairRef: func,
 }
 
 export default Crosshair

ui/src/shared/components/Dygraph.js

@@ -34,6 +34,7 @@ class Dygraph extends Component {
       isSynced: false,
       isHidden: true,
       staticLegendHeight: null,
+      isNotHovering: true,
     }
   }
 
@@ -203,9 +204,7 @@ class Dygraph extends Component {
   }
 
   eventToTimestamp = ({pageX: pxBetweenMouseAndPage}) => {
-    const {
-      left: pxBetweenGraphAndPage,
-    } = this.crosshairRef.getBoundingClientRect()
+    const {left: pxBetweenGraphAndPage} = this.graphRef.getBoundingClientRect()
     const graphXCoordinate = pxBetweenMouseAndPage - pxBetweenGraphAndPage
     const timestamp = this.dygraph.toDataXCoord(graphXCoordinate)
     const clamped = this.clampWithinGraphTimerange(timestamp)
@@ -218,6 +217,7 @@ class Dygraph extends Component {
     if (onSetHoverTime) {
       onSetHoverTime(newTime)
     }
+    this.setState({isNotHovering: false})
   }
 
   unhighlightCallback = () => {
@@ -225,6 +225,7 @@ class Dygraph extends Component {
     if (onSetHoverTime) {
       onSetHoverTime('0')
     }
+    this.setState({isNotHovering: true})
   }
 
   hashColorDygraphSeries = () => {
@@ -328,7 +329,6 @@ class Dygraph extends Component {
   }
 
   handleAnnotationsRef = ref => (this.annotationsRef = ref)
-  handleCrosshairRef = ref => (this.crosshairRef = ref)
 
   handleReceiveStaticLegendHeight = staticLegendHeight => {
     this.setState({staticLegendHeight})
@@ -348,6 +348,7 @@ class Dygraph extends Component {
         height: `calc(100% - ${staticLegendHeight + cellVerticalPadding}px)`,
       }
     }
+
     return (
       <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
         {this.dygraph &&
@@ -363,12 +364,12 @@ class Dygraph extends Component {
               onHide={this.handleHideLegend}
               onShow={this.handleShowLegend}
             />
+            {this.state.isNotHovering &&
               <Crosshair
                 dygraph={this.dygraph}
                 staticLegendHeight={staticLegendHeight}
                 hoverTime={hoverTime}
-              handleCrosshairRef={this.handleCrosshairRef}
-            />
+              />}
           </div>}
         <div
           ref={r => {