Move pageX state into Legend

For improved performance rendering logic

ui/src/shared/components/Dygraph.js

@@ -38,7 +38,6 @@ export default class Dygraph extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      pageX: null,
       isSynced: false,
       isHidden: true,
     }
@@ -325,14 +324,15 @@ export default class Dygraph extends Component {
     }
   }
 
-  highlightCallback = ({clientX}) => {
-    this.setState({pageX: clientX, isHidden: false})
+  highlightCallback = ({pageX}) => {
+    this.legendComponent.setState({pageX})
+    this.setState({isHidden: false})
   }
 
   handleAnnotationsRef = ref => (this.annotationsRef = ref)
 
   render() {
-    const {isHidden, pageX} = this.state
+    const {isHidden} = this.state
 
     return (
       <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
@@ -343,7 +343,6 @@ export default class Dygraph extends Component {
         <DygraphLegend
           dygraph={this.dygraph}
           graph={this.graphRef}
-          pageX={pageX}
           isHidden={isHidden}
           legendNode={this.legendNodeRef}
           onHide={this.handleHideLegend}

ui/src/shared/components/DygraphLegend.js

@@ -22,6 +22,7 @@ class DygraphLegend extends Component {
     isSnipped: false,
     isFilterVisible: false,
     legendStyles: {},
+    pageX: null,
   }
 
   componentDidMount() {
@@ -86,16 +87,10 @@ class DygraphLegend extends Component {
   }
 
   render() {
-    const {
-      pageX,
-      graph,
-      onHide,
-      isHidden,
-      legendNodeRef,
-      legendNode,
-    } = this.props
+    const {graph, onHide, isHidden, legendNodeRef, legendNode} = this.props
 
     const {
+      pageX,
       legend,
       filterText,
       isSnipped,
@@ -210,12 +205,11 @@ class DygraphLegend extends Component {
   }
 }
 
-const {bool, func, number, shape} = PropTypes
+const {bool, func, shape} = PropTypes
 
 DygraphLegend.propTypes = {
   legendComponent: func,
   legendNode: shape({}),
-  pageX: number,
   dygraph: shape({}),
   graph: shape({}),
   onHide: func.isRequired,