Update crosshair on mousemove

ui/src/logs/components/LogViewerChart.tsx

@@ -18,10 +18,10 @@ class LogViewerChart extends PureComponent<Props> {
         onZoom={onZoom}
         queries={[]}
         data={data}
-        displayOptions={{animatedZooms: false}}
-        setResolution={this.setResolution}
         isBarGraph={true}
         timeRange={timeRange}
+        displayOptions={{animatedZooms: false}}
+        setResolution={this.setResolution}
         colors={DEFAULT_LINE_COLORS}
       />
     )

ui/src/shared/components/Dygraph.tsx

@@ -148,7 +148,7 @@ class Dygraph extends Component<Props, State> {
       zoomCallback: (lower: number, upper: number) =>
         this.handleZoom(lower, upper),
       drawCallback: () => this.handleDraw(),
-      highlightCircleSize: 0,
+      highlightCircleSize: 3,
     }
 
     if (isBarGraph) {
@@ -242,7 +242,7 @@ class Dygraph extends Component<Props, State> {
     const {staticLegend, cellID} = this.props
 
     return (
-      <div className="dygraph-child">
+      <div className="dygraph-child" onMouseMove={this.handleShowLegend}>
         {this.dygraph && (
           <div className="dygraph-addons">
             {this.areAnnotationsVisible && (
@@ -265,11 +265,7 @@ class Dygraph extends Component<Props, State> {
             />
           </div>
         )}
-        <div
+        <div className="dygraph-child-container" style={this.dygraphStyle} />
-          className="dygraph-child-container"
-          style={this.dygraphStyle}
-          onMouseEnter={this.handleShowLegend}
-        />
         {staticLegend && (
           <StaticLegend
             dygraphSeries={this.colorDygraphSeries}
@@ -287,7 +283,6 @@ class Dygraph extends Component<Props, State> {
           className="dygraph-child-container"
           ref={this.graphRef}
           style={this.dygraphStyle}
-          onMouseEnter={this.handleShowLegend}
         />
         <ReactResizeDetector
           handleWidth={true}

ui/src/shared/components/LineGraph.js

@@ -18,6 +18,7 @@ const validateTimeSeries = timeseries => {
     )
   )
 }
+
 @ErrorHandlingWith(InvalidData)
 class LineGraph extends Component {
   constructor(props) {
@@ -60,7 +61,6 @@ class LineGraph extends Component {
       cellID,
       onZoom,
       queries,
-      hoverTime,
       timeRange,
       cellHeight,
       ruleValues,
@@ -120,7 +120,6 @@ class LineGraph extends Component {
           labels={labels}
           queries={queries}
           options={options}
-          hoverTime={hoverTime}
           timeRange={timeRange}
           isBarGraph={isBarGraph}
           timeSeries={timeSeries}
@@ -182,7 +181,6 @@ LineGraph.propTypes = {
       label: string,
     }),
   }),
-  hoverTime: string,
   handleSetHoverTime: func,
   title: string,
   isFetchingInitially: bool,

ui/src/shared/components/RefreshingGraph.js

@@ -31,7 +31,6 @@ const RefreshingGraph = ({
   onZoom,
   cellID,
   queries,
-  hoverTime,
   tableOptions,
   templates,
   timeRange,
@@ -106,7 +105,7 @@ const RefreshingGraph = ({
         cellID={cellID}
         colors={colors}
         inView={inView}
-        hoverTime={hoverTime}
+        isInCEO={isInCEO}
         key={manualRefresh}
         queries={queries}
         templates={templates}
@@ -120,7 +119,6 @@ const RefreshingGraph = ({
         resizerTopHeight={resizerTopHeight}
         grabDataForDownload={grabDataForDownload}
         handleSetHoverTime={handleSetHoverTime}
-        isInCEO={isInCEO}
         onSetResolution={onSetResolution}
       />
     )
@@ -199,7 +197,6 @@ RefreshingGraph.propTypes = {
     isEnforced: bool.isRequired,
     digits: number.isRequired,
   }).isRequired,
-  hoverTime: string.isRequired,
   handleSetHoverTime: func.isRequired,
   isInCEO: bool,
   onSetResolution: func,
@@ -213,9 +210,8 @@ RefreshingGraph.defaultProps = {
   decimalPlaces: DEFAULT_DECIMAL_PLACES,
 }
 
-const mapStateToProps = ({dashboardUI, annotations: {mode}}) => ({
+const mapStateToProps = ({annotations: {mode}}) => ({
   mode,
-  hoverTime: dashboardUI.hoverTime,
 })
 
 const mapDispatchToProps = dispatch => ({

ui/src/shared/components/TableGraph.tsx

@@ -589,8 +589,12 @@ class TableGraph extends Component<Props, State> {
   }
 }
 
+const mstp = ({dashboardUI}) => ({
+  hoverTime: dashboardUI.hoverTime,
+})
+
 const mapDispatchToProps = dispatch => ({
   handleUpdateFieldOptions: bindActionCreators(updateFieldOptions, dispatch),
 })
 
-export default connect(null, mapDispatchToProps)(TableGraph)
+export default connect(mstp, mapDispatchToProps)(TableGraph)