Persist legend in when hovered over

ui/src/shared/components/Dygraph.js

@@ -158,6 +158,7 @@ export default class Dygraph extends Component {
       gridLineWidth: 1,
       highlightCircleSize: 3,
       animatedZooms: true,
+      hideOverlayOnMouseOut: false,
       colors: finalLineColors,
       series: dygraphSeries,
       axes: {
@@ -172,16 +173,31 @@ export default class Dygraph extends Component {
         strokeWidth: 2,
         highlightCircleSize: 5,
       },
-      unhighlightCallback: () => {
+      unhighlightCallback: e => {
-        legendContainerNode.className = 'container--dygraph-legend hidden' // hide
+        const {
+          top,
+          bottom,
+          left,
+          right,
+        } = legendContainerNode.getBoundingClientRect()
 
-        // part of optional workaround for preventing updateOptions from breaking legend
+        const mouseY = e.clientY
-        // this.isMouseOverGraph = false
+        const mouseX = e.clientX
+
+        const mouseInLegendY = mouseY <= bottom && mouseY >= top
+        const mouseInLegendX = mouseX <= right && mouseX >= left
+        const isMouseHoveringLegend = mouseInLegendY && mouseInLegendX
+
+        if (!isMouseHoveringLegend) {
+          legendContainerNode.className = 'container--dygraph-legend hidden' // hide
+        }
       },
       highlightCallback: e => {
         // don't make visible yet, but render on DOM to capture position for calcs
         legendContainerNode.style.visibility = 'hidden'
         legendContainerNode.className = 'container--dygraph-legend'
+        legendContainerNode.onmouseleave = () =>
+          legendContainerNode.className = 'container--dygraph-legend hidden'
 
         // Move the Legend on hover
         const graphRect = graphContainerNode.getBoundingClientRect()
@@ -322,6 +338,13 @@ export default class Dygraph extends Component {
   render() {
     return (
       <div className="dygraph-child">
+        <div
+          style={{userSelect: 'text'}}
+          ref={r => {
+            this.legendContainer = r
+          }}
+          className={'container--dygraph-legend hidden'}
+        />
         <div
           ref={r => {
             this.graphContainer = r
@@ -329,12 +352,6 @@ export default class Dygraph extends Component {
           style={this.props.containerStyle}
           className="dygraph-child-container"
         />
-        <div
-          ref={r => {
-            this.legendContainer = r
-          }}
-          className={'container--dygraph-legend hidden'}
-        />
       </div>
     )
   }

ui/src/style/components/dygraphs.scss

@@ -33,7 +33,6 @@
   border-radius: 3px;
   font-weight: 600;
   line-height: 13px;
-  pointer-events: none;
 
   &.hidden {
     display: none !important;