Fix legends hanging around

ui/src/dashboards/actions/index.js

@@ -199,6 +199,13 @@ export const setHoverTime = hoverTime => ({
   },
 })
 
+export const setActiveCell = activeCellID => ({
+  type: 'SET_ACTIVE_CELL',
+  payload: {
+    activeCellID,
+  },
+})
+
 // Async Action Creators
 
 export const getDashboardsAsync = () => async dispatch => {

ui/src/dashboards/reducers/ui.js

@@ -10,6 +10,7 @@ const initialState = {
   isEditMode: false,
   cellQueryStatus: {queryID: null, status: null},
   hoverTime: NULL_HOVER_TIME,
+  activeCellID: '',
 }
 
 import {
@@ -320,6 +321,11 @@ export default function ui(state = initialState, action) {
 
       return {...state, hoverTime}
     }
+
+    case 'SET_ACTIVE_CELL': {
+      const {activeCellID} = action.payload
+      return {...state, activeCellID}
+    }
   }
 
   return state

ui/src/shared/components/Dygraph.js

@@ -35,9 +35,7 @@ class Dygraph extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      isHidden: true,
       staticLegendHeight: null,
-      isHoveringThisGraph: false,
     }
   }
 
@@ -214,14 +212,11 @@ class Dygraph extends Component {
 
   handleHideLegend = () => {
     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() {
@@ -284,8 +279,8 @@ class Dygraph extends Component {
   }
 
   render() {
-    const {isHidden, staticLegendHeight} = this.state
+    const {staticLegendHeight} = this.state
-    const {staticLegend, children} = this.props
+    const {staticLegend, children, cellID} = this.props
     const nestedGraph = (children && children.length && children[0]) || children
     let dygraphStyle = {...this.props.containerStyle, zIndex: '2'}
     if (staticLegend) {
@@ -308,7 +303,7 @@ class Dygraph extends Component {
               staticLegendHeight={staticLegendHeight}
             />
             <DygraphLegend
-              isHidden={isHidden}
+              cellID={cellID}
               dygraph={this.dygraph}
               onHide={this.handleHideLegend}
               onShow={this.handleShowLegend}
@@ -372,6 +367,7 @@ Dygraph.defaultProps = {
 }
 
 Dygraph.propTypes = {
+  cellID: string,
   handleSetHoverTime: func,
   axes: shape({
     y: shape({

ui/src/shared/components/DygraphLegend.js

@@ -1,11 +1,14 @@
 import React, {Component} from 'react'
+import {connect} from 'react-redux'
 import PropTypes from 'prop-types'
 import _ from 'lodash'
 import classnames from 'classnames'
 import uuid from 'uuid'
+import * as actions from 'src/dashboards/actions'
 
 import {makeLegendStyles, removeMeasurement} from 'shared/graphs/helpers'
 import {ErrorHandling} from 'src/shared/decorators/errors'
+import {NO_CELL} from 'src/shared/constants'
 
 @ErrorHandling
 class DygraphLegend extends Component {
@@ -30,6 +33,7 @@ class DygraphLegend extends Component {
       isFilterVisible: false,
       legendStyles: {},
       pageX: null,
+      cellID: null,
     }
   }
 
@@ -43,6 +47,7 @@ class DygraphLegend extends Component {
   }
 
   highlightCallback = _.throttle(e => {
+    this.props.setActiveCell(this.props.cellID)
     this.setState({pageX: e.pageX})
     this.props.onShow(e)
   }, 60)
@@ -84,10 +89,15 @@ class DygraphLegend extends Component {
     const isMouseHoveringLegend = mouseInLegendY && mouseInLegendX
 
     if (!isMouseHoveringLegend) {
-      this.props.onHide()
+      this.handleHide()
     }
   }
 
+  handleHide = () => {
+    this.props.onHide()
+    this.props.setActiveCell(NO_CELL)
+  }
+
   handleToggleFilter = () => {
     this.setState({
       isFilterVisible: !this.state.isFilterVisible,
@@ -120,7 +130,7 @@ class DygraphLegend extends Component {
   }
 
   render() {
-    const {dygraph, onHide, isHidden} = this.props
+    const {dygraph} = this.props
 
     const {
       pageX,
@@ -140,7 +150,6 @@ class DygraphLegend extends Component {
 
     const ordered = isAscending ? sorted : sorted.reverse()
     const filtered = ordered.filter(s => s.label.match(filterText))
-    const hidden = isHidden ? 'hidden' : ''
     const style = makeLegendStyles(dygraph.graphDiv, this.legendNodeRef, pageX)
 
     const renderSortAlpha = (
@@ -174,11 +183,12 @@ class DygraphLegend extends Component {
         <div className="sort-btn--bottom">9</div>
       </button>
     )
+
     return (
       <div
-        className={`dygraph-legend ${hidden}`}
+        className={`dygraph-legend ${this.hidden}`}
         ref={el => (this.legendNodeRef = el)}
-        onMouseLeave={onHide}
+        onMouseLeave={this.handleHide}
         style={style}
       >
         <div className="dygraph-legend--header">
@@ -233,15 +243,40 @@ class DygraphLegend extends Component {
       </div>
     )
   }
+
+  get isVisible() {
+    const {cellID, activeCellID, isDragging} = this.props
+
+    return cellID === activeCellID && !isDragging
+  }
+
+  get hidden() {
+    if (this.isVisible) {
+      return ''
+    }
+
+    return 'hidden'
+  }
 }
 
-const {bool, func, shape} = PropTypes
+const {bool, func, shape, string} = PropTypes
 
 DygraphLegend.propTypes = {
   dygraph: shape({}),
+  cellID: string.isRequired,
   onHide: func.isRequired,
   onShow: func.isRequired,
-  isHidden: bool.isRequired,
+  isDragging: bool.isRequired,
+  activeCellID: string.isRequired,
+  setActiveCell: func.isRequired,
 }
 
-export default DygraphLegend
+const mapDispatchToProps = {
+  setActiveCell: actions.setActiveCell,
+}
+
+const mapStateToProps = ({dashboardUI}) => ({
+  activeCellID: dashboardUI.activeCellID,
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(DygraphLegend)

ui/src/shared/components/Layout.js

@@ -53,6 +53,7 @@ const Layout = (
     templates,
     timeRange,
     isEditable,
+    isDragging,
     onEditCell,
     onCloneCell,
     autoRefresh,
@@ -84,6 +85,7 @@ const Layout = (
         inView={cell.inView}
         axes={axes}
         type={type}
+        isDragging={isDragging}
         tableOptions={tableOptions}
         staticLegend={IS_STATIC_LEGEND(legend)}
         cellHeight={h}
@@ -114,6 +116,7 @@ Layout.contextTypes = {
 }
 
 const propTypes = {
+  isDragging: bool,
   autoRefresh: number.isRequired,
   manualRefresh: number,
   timeRange: shape({

ui/src/shared/components/LineGraph.js

@@ -36,9 +36,9 @@ class LineGraph extends Component {
     const {
       data,
       axes,
-      cell,
       title,
       colors,
+      cellID,
       onZoom,
       queries,
       hoverTime,
@@ -96,14 +96,14 @@ class LineGraph extends Component {
       <div className="dygraph graph--hasYLabel" style={{height: '100%'}}>
         {isRefreshing ? <GraphLoadingDots /> : null}
         <Dygraph
-          cell={cell}
           axes={axes}
+          cellID={cellID}
           colors={colors}
           onZoom={onZoom}
           labels={labels}
-          hoverTime={hoverTime}
           queries={queries}
           options={options}
+          hoverTime={hoverTime}
           timeRange={timeRange}
           isBarGraph={isBarGraph}
           timeSeries={timeSeries}
@@ -157,6 +157,7 @@ LineGraph.defaultProps = {
 }
 
 LineGraph.propTypes = {
+  cellID: string,
   axes: shape({
     y: shape({
       bounds: array,
@@ -190,7 +191,6 @@ LineGraph.propTypes = {
   isInDataExplorer: bool,
   setResolution: func,
   cellHeight: number,
-  cell: shape(),
   onZoom: func,
   resizeCoords: shape(),
   queries: arrayOf(shape({}).isRequired).isRequired,

ui/src/shared/components/RefreshingGraph.js

@@ -115,6 +115,7 @@ const RefreshingGraph = ({
   return (
     <RefreshingLineGraph
       axes={axes}
+      cellID={cellID}
       colors={colors}
       onZoom={onZoom}
       queries={queries}