Polish in prep for PR

ui/src/shared/components/Dygraph.js

@@ -15,7 +15,7 @@ import getRange, {getStackedRange} from 'shared/parsing/getRangeForDygraph'
 import {DISPLAY_OPTIONS} from 'src/dashboards/constants'
 import {buildDefaultYLabel} from 'shared/presenters'
 import {numberValueFormatter} from 'src/utils/formatting'
-
+import {NULL_HOVER_TIME} from 'src/shared/constants/tableGraph'
 import {
   OPTIONS,
   LINE_COLORS,
@@ -188,20 +188,16 @@ class Dygraph extends Component {
     onZoom(this.formatTimeRange(lower), this.formatTimeRange(upper))
   }
 
-  clampWithinGraphTimerange = timestamp => {
-    const [xRangeStart] = this.dygraph.xAxisRange()
-    return Math.max(xRangeStart, timestamp)
-  }
-
   eventToTimestamp = ({pageX: pxBetweenMouseAndPage}) => {
     const {left: pxBetweenGraphAndPage} = this.graphRef.getBoundingClientRect()
     const graphXCoordinate = pxBetweenMouseAndPage - pxBetweenGraphAndPage
     const timestamp = this.dygraph.toDataXCoord(graphXCoordinate)
-    const clamped = this.clampWithinGraphTimerange(timestamp)
+    const [xRangeStart] = this.dygraph.xAxisRange()
+    const clamped = Math.max(xRangeStart, timestamp)
     return `${clamped}`
   }
 
-  highlightCallback = e => {
+  handleMouseMove = e => {
     const {onSetHoverTime} = this.props
     const newTime = this.eventToTimestamp(e)
     if (onSetHoverTime) {
@@ -210,10 +206,10 @@ class Dygraph extends Component {
     this.setState({isNotHovering: false})
   }
 
-  unhighlightCallback = () => {
+  handleMouseOut = () => {
     const {onSetHoverTime} = this.props
     if (onSetHoverTime) {
-      onSetHoverTime('0')
+      onSetHoverTime(NULL_HOVER_TIME)
     }
     this.setState({isNotHovering: true})
   }
@@ -361,8 +357,8 @@ class Dygraph extends Component {
           }}
           className="dygraph-child-container"
           style={dygraphStyle}
-          onMouseMove={this.highlightCallback}
-          onMouseOut={this.unhighlightCallback}
+          onMouseMove={this.handleMouseMove}
+          onMouseOut={this.handleMouseOut}
         />
         {staticLegend &&
           <StaticLegend

ui/src/shared/components/TableGraph.js

@@ -3,6 +3,11 @@ import _ from 'lodash'
 import classnames from 'classnames'
 
 import {timeSeriesToTableGraph} from 'src/utils/timeSeriesToDygraph'
+import {
+  NULL_COLUMN_INDEX,
+  NULL_ROW_INDEX,
+  NULL_HOVER_TIME,
+} from 'src/shared/constants/tableGraph'
 
 import {MultiGrid} from 'react-virtualized'
 
@@ -10,8 +15,8 @@ class TableGraph extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      hoveredColumnIndex: -1,
-      hoveredRowIndex: -1,
+      hoveredColumnIndex: NULL_COLUMN_INDEX,
+      hoveredRowIndex: NULL_ROW_INDEX,
     }
   }
 
@@ -32,8 +37,11 @@ class TableGraph extends Component {
   }
 
   handleMouseOut = () => {
-    this.props.onSetHoverTime('0')
-    this.setState({hoveredColumnIndex: -1, hoveredRowIndex: -1})
+    this.props.onSetHoverTime(NULL_HOVER_TIME)
+    this.setState({
+      hoveredColumnIndex: NULL_COLUMN_INDEX,
+      hoveredRowIndex: NULL_ROW_INDEX,
+    })
   }
 
   cellRenderer = ({columnIndex, rowIndex, key, style, parent}) => {
@@ -99,21 +107,21 @@ class TableGraph extends Component {
       >
         {data.length > 1 &&
           <MultiGrid
-            fixedColumnCount={1}
-            fixedRowCount={1}
-            cellRenderer={this.cellRenderer}
             columnCount={columnCount}
             columnWidth={COLUMN_WIDTH}
-            height={tableHeight}
             rowCount={rowCount}
             rowHeight={ROW_HEIGHT}
+            height={tableHeight}
+            width={tableWidth}
+            fixedColumnCount={1}
+            fixedRowCount={1}
             enableFixedColumnScroll={true}
             enableFixedRowScroll={true}
+            scrollToRow={hoverTimeRow}
+            cellRenderer={this.cellRenderer}
             hoveredColumnIndex={hoveredColumnIndex}
             hoveredRowIndex={hoveredRowIndex}
-            scrollToRow={hoverTimeRow}
             hoverTime={hoverTime}
-            width={tableWidth}
           />}
       </div>
     )

ui/src/shared/constants/index.js

@@ -445,11 +445,3 @@ export const cellSupportsAnnotations = cellType => {
   ]
   return !!supportedTypes.find(type => type === cellType)
 }
-
-export const DYGRAPH_CELL_TYPES = [
-  'line',
-  'line-stacked',
-  'line-stepplot',
-  'line-plus-single-stat',
-  'bar',
-]