Merge pull request #4489 from influxdata/flux/table-hover-time

Change time field in flux table from Date to number to fix hover time

ui/src/shared/components/TableGraph.tsx

@@ -455,14 +455,15 @@ class TableGraph extends PureComponent<Props, State> {
       return {scrollToColumn: 0, scrollToRow: -1}
     }
 
-    const firstDiff = Math.abs(Number(hoverTime) - Number(sortedTimeVals[1])) // sortedTimeVals[0] is "time"
+    const firstDiff = this.getTimeDifference(hoverTime, sortedTimeVals[1]) // sortedTimeVals[0] is "time"
+
     const hoverTimeFound = fastReduce<
       TimeSeriesValue,
       {index: number; diff: number}
     >(
       sortedTimeVals,
       (acc, currentTime, index) => {
-        const thisDiff = Math.abs(Number(hoverTime) - Number(currentTime))
+        const thisDiff = this.getTimeDifference(hoverTime, currentTime)
         if (thisDiff < acc.diff) {
           return {index, diff: thisDiff}
         }
@@ -476,6 +477,10 @@ class TableGraph extends PureComponent<Props, State> {
     return {scrollToRow, scrollToColumn}
   }
 
+  private getTimeDifference(hoverTime, time: string | number) {
+    return Math.abs(parseInt(hoverTime, 10) - parseInt(time as string, 10))
+  }
+
   private get isVerticalTimeAxis(): boolean {
     return _.get(
       this.props,
@@ -675,15 +680,19 @@ class TableGraph extends PureComponent<Props, State> {
     const fieldName =
       foundField && (foundField.displayName || foundField.internalName)
 
+    const isHighlightedRow =
+      rowIndex === parent.props.scrollToRow ||
+      (rowIndex === hoveredRowIndex && hoveredRowIndex > 0)
+
+    const isHighlightedColumn =
+      columnIndex === hoveredColumnIndex && hoveredColumnIndex > 0
+
     const cellClass = classnames('table-graph-cell', {
       'table-graph-cell__fixed-row': isFixedRow,
       'table-graph-cell__fixed-column': isFixedColumn,
       'table-graph-cell__fixed-corner': isFixedCorner,
-      'table-graph-cell__highlight-row':
-        rowIndex === parent.props.scrollToRow ||
-        (rowIndex === hoveredRowIndex && hoveredRowIndex > 0),
-      'table-graph-cell__highlight-column':
-        columnIndex === hoveredColumnIndex && hoveredColumnIndex > 0,
+      'table-graph-cell__highlight-row': isHighlightedRow,
+      'table-graph-cell__highlight-column': isHighlightedColumn,
       'table-graph-cell__numerical': isNumerical,
       'table-graph-cell__field-name': isFieldName,
       'table-graph-cell__sort-asc': isFieldName && isSorted && isAscending,

ui/src/shared/parsing/flux/response.ts

@@ -62,7 +62,7 @@ export const parseTables = (responseChunk: string): FluxTable[] => {
   }
 
   // Group rows by their table id
-  const tablesData: Array<Array<Array<string | Date>>> = Object.values(
+  const tablesData: Array<Array<Array<string | number>>> = Object.values(
     _.groupBy(nonAnnotationData.slice(1), row => row[tableColIndex])
   )
 
@@ -99,10 +99,10 @@ export const parseTables = (responseChunk: string): FluxTable[] => {
     )
 
     for (const row of tableData) {
-      row[timeColIndex] = new Date(row[timeColIndex])
+      row[timeColIndex] = new Date(row[timeColIndex]).valueOf()
     }
 
-    const data: Array<Array<string | Date>> = [headerRow, ...tableData]
+    const data: Array<Array<string | number>> = [headerRow, ...tableData]
 
     return {
       id: uuid.v4(),

ui/src/types/flux.ts

@@ -163,7 +163,7 @@ export interface Links {
 export interface FluxTable {
   id: string
   name: string
-  data: Array<Array<string | Date>>
+  data: Array<Array<string | number>>
   groupKey: {
     [columnName: string]: string
   }

ui/src/worker/jobs/fluxTablesToDygraph.ts

@@ -32,7 +32,7 @@ export const fluxTablesToDygraphWork = (
 
   for (const table of tablesByTime) {
     for (const [date, values] of Object.entries(table)) {
-      dygraphValuesByTime[date][DATE_INDEX] = new Date(date)
+      dygraphValuesByTime[date][DATE_INDEX] = new Date(Number(date))
 
       for (const [seriesName, value] of Object.entries(values)) {
         const i = allColumnNames.indexOf(seriesName) + DATE_INDEX_OFFSET