Hide legend a little better

ui/src/shared/components/Dygraph.js

@@ -31,6 +31,7 @@ export default class Dygraph extends Component {
     this.handleSortLegend = ::this.handleSortLegend
     this.handleLegendInputChange = ::this.handleLegendInputChange
     this.handleSnipLabel = ::this.handleSnipLabel
+    this.handleHideLegend = ::this.handleHideLegend
   }
 
   static defaultProps = {
@@ -46,18 +47,6 @@ export default class Dygraph extends Component {
     return timeSeries.length ? timeSeries : [[0]]
   }
 
-  handleSortLegend(sortType) {
-    this.setState({sortType, isAscending: !this.state.isAscending})
-  }
-
-  handleLegendInputChange(e) {
-    this.setState({filterText: e.target.value})
-  }
-
-  handleSnipLabel() {
-    this.setState({isSnipped: !this.state.isSnipped})
-  }
-
   componentDidMount() {
     const timeSeries = this.getTimeSeries()
     // dygraphSeries is a legend label and its corresponding y-axis e.g. {legendLabel1: 'y', legendLabel2: 'y2'};
@@ -275,6 +264,33 @@ export default class Dygraph extends Component {
     }
   }
 
+  handleSortLegend(sortType) {
+    this.setState({sortType, isAscending: !this.state.isAscending})
+  }
+
+  handleLegendInputChange(e) {
+    this.setState({filterText: e.target.value})
+  }
+
+  handleSnipLabel() {
+    this.setState({isSnipped: !this.state.isSnipped})
+  }
+
+  handleHideLegend(e) {
+    const {top, bottom, left, right} = this.graphRef.getBoundingClientRect()
+
+    const mouseY = e.clientY
+    const mouseX = e.clientX
+
+    const mouseInGraphY = mouseY <= bottom && mouseY >= top
+    const mouseInGraphX = mouseX <= right && mouseX >= left
+    const isMouseHoveringGraph = mouseInGraphY && mouseInGraphX
+
+    if (!isMouseHoveringGraph) {
+      this.setState({isHidden: true})
+    }
+  }
+
   render() {
     const {
       legend,
@@ -290,6 +306,7 @@ export default class Dygraph extends Component {
         <DygraphLegend
           {...legend}
           sortType={sortType}
+          onHide={this.handleHideLegend}
           isHidden={isHidden}
           isSnipped={isSnipped}
           filterText={filterText}

ui/src/shared/components/DygraphLegend.js

@@ -10,6 +10,7 @@ const DygraphLegend = ({
   series,
   onSort,
   onSnip,
+  onHide,
   isHidden,
   isSnipped,
   sortType,
@@ -34,6 +35,7 @@ const DygraphLegend = ({
       }}
       className={`container--dygraph-legend ${hidden}`}
       ref={legendRef}
+      onMouseLeave={onHide}
     >
       <div className="dygraph-legend--header">
         <input
@@ -96,6 +98,8 @@ DygraphLegend.propTypes = {
     })
   ),
   dygraph: shape(),
+  onSnip: func.isRequired,
+  onHide: func.isRequired,
   onSort: func.isRequired,
   onInputChange: func.isRequired,
   filterText: string.isRequired,
@@ -103,7 +107,6 @@ DygraphLegend.propTypes = {
   sortType: string.isRequired,
   isHidden: bool.isRequired,
   legendRef: func.isRequired,
-  onSnip: func.isRequired,
   isSnipped: bool.isRequired,
 }