Buttery smoothness

ui/src/shared/components/Dygraph.js

@@ -216,7 +216,15 @@ class Dygraph extends Component {
   }
 
   handleHideLegend = () => {
-    this.setState({isHidden: true})
+    this.props.handleSetHoverTime(NULL_HOVER_TIME)
+    this.setState({isHidden: true, isHoveringThisGraph: false})
+  }
+
+  handleShowLegend = e => {
+    const newTime = this.eventToTimestamp(e)
+    this.props.handleSetHoverTime(newTime)
+
+    this.setState({isHidden: false, isHoveringThisGraph: true})
   }
 
   get lineColors() {
@@ -265,22 +273,6 @@ class Dygraph extends Component {
     return date.toISOString()
   }
 
-  handleMouseMove = e => {
-    const newTime = this.eventToTimestamp(e)
-    this.props.handleSetHoverTime(newTime)
-
-    this.setState({isHoveringThisGraph: true})
-  }
-
-  handleMouseLeave = () => {
-    this.props.handleSetHoverTime(NULL_HOVER_TIME)
-    this.setState({isHoveringThisGraph: false})
-  }
-
-  handleShowLegend = () => {
-    this.setState({isHidden: false})
-  }
-
   handleReceiveStaticLegendHeight = staticLegendHeight => {
     this.setState({staticLegendHeight})
   }
@@ -310,7 +302,7 @@ class Dygraph extends Component {
     }
 
     return (
-      <div className="dygraph-child" onMouseLeave={this.handleMouseLeave}>
+      <div className="dygraph-child">
         {this.areAnnotationsVisible && (
           <div className="dygraph-addons">
             <Annotations
@@ -337,8 +329,6 @@ class Dygraph extends Component {
           }}
           className="dygraph-child-container"
           style={dygraphStyle}
-          onMouseMove={_.throttle(this.handleMouseMove, 100)}
-          onMouseOut={this.handleMouseOut}
         />
         {staticLegend && (
           <StaticLegend

ui/src/shared/components/DygraphLegend.js

@@ -88,13 +88,13 @@ class DygraphLegend extends Component {
     const isMouseHoveringLegend = mouseInLegendY && mouseInLegendX
 
     if (!isMouseHoveringLegend) {
-      this.props.onHide(e)
+      this.props.onHide()
     }
   }
 
-  highlightCallback = ({pageX}) => {
-    this.setState({pageX})
-    this.props.onShow()
+  highlightCallback = e => {
+    this.setState({pageX: e.pageX})
+    this.props.onShow(e)
   }
 
   legendFormatter = legend => {