Upgrade vis library

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### Bug Fixes
 
+1. [14085](https://github.com/influxdata/influxdb/pull/14085): Fix performance regression in graph tooltips
+
 ### UI Improvements
 
 ## v2.0.0-alpha.11 [2019-05-31]

ui/package.json

@@ -143,7 +143,7 @@
     "@influxdata/influx": "github:influxdata/influxdb2-js#dev",
     "@influxdata/influxdb-templates": "influxdata/influxdb-templates",
     "@influxdata/react-custom-scrollbars": "4.3.8",
-    "@influxdata/vis": "^0.9.0",
+    "@influxdata/giraffe": "0.11.0",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "bignumber.js": "^4.0.2",

ui/src/shared/components/HeatmapContainer.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@@ -48,12 +48,12 @@ const HeatmapContainer: FunctionComponent<Props> = ({
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
     storedXDomain,
-    columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
+    table.getColumn(xColumn, 'number')
   )
 
   const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
     storedYDomain,
-    columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
+    table.getColumn(yColumn, 'number')
   )
 
   const isValidView =

ui/src/shared/components/HistogramContainer.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@@ -43,7 +43,7 @@ const HistogramContainer: FunctionComponent<Props> = ({
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
     storedXDomain,
-    columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
+    table.getColumn(xColumn, 'number')
   )
 
   const isValidView =

ui/src/shared/components/LatestValueTransform.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {useMemo, FunctionComponent} from 'react'
-import {Table} from '@influxdata/vis'
+import {Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'

ui/src/shared/components/RefreshingViewSwitcher.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Plot} from '@influxdata/vis'
+import {Plot} from '@influxdata/giraffe'
 
 // Components
 import GaugeChart from 'src/shared/components/GaugeChart'

ui/src/shared/components/ScatterContainer.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@@ -54,12 +54,12 @@ const ScatterContainer: FunctionComponent<Props> = ({
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
     storedXDomain,
-    columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
+    table.getColumn(xColumn, 'number')
   )
 
   const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
     storedYDomain,
-    columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
+    table.getColumn(yColumn, 'number')
   )
 
   const isValidView =

ui/src/shared/components/VisTableTransform.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import {useMemo, FunctionComponent} from 'react'
-import {fromFlux, Table} from '@influxdata/vis'
+import {fromFlux, Table} from '@influxdata/giraffe'
 
 interface VisTableTransformResult {
   table: Table

ui/src/shared/components/XYContainer.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, {FunctionComponent, useMemo} from 'react'
-import {Config, Table} from '@influxdata/vis'
+import {Config, Table} from '@influxdata/giraffe'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@@ -65,12 +65,12 @@ const XYContainer: FunctionComponent<Props> = ({
 
   const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings(
     storedXDomain,
-    columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : []
+    table.getColumn(xColumn, 'number')
   )
 
   const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings(
     storedYDomain,
-    columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : []
+    table.getColumn(yColumn, 'number')
   )
 
   const isValidView =

ui/src/shared/components/cells/Cell.scss

@@ -183,7 +183,7 @@ $cell--header-size: 36px;
   padding: $ix-marg-c;
 }
 
-.vis-tooltip-container {
+.giraffe-tooltip-container {
   z-index: $z--dygraph-legend;
 }
 

ui/src/shared/constants/index.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import {Config} from '@influxdata/vis'
+import {Config} from '@influxdata/giraffe'
 import {AutoRefreshStatus} from 'src/types'
 
 export const DEFAULT_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'

ui/src/shared/utils/latestValues.test.ts

@@ -1,4 +1,4 @@
-import {fromFlux} from '@influxdata/vis'
+import {fromFlux} from '@influxdata/giraffe'
 
 import {latestValues} from 'src/shared/utils/latestValues'
 

ui/src/shared/utils/latestValues.ts

@@ -1,5 +1,5 @@
 import {range, flatMap} from 'lodash'
-import {Table} from '@influxdata/vis'
+import {Table, NumericColumnData} from '@influxdata/giraffe'
 
 /*
   Return a list of the maximum elements in `xs`, where the magnitude of each
@@ -80,8 +80,10 @@ export const latestValues = (table: Table): number[] => {
   }
 
   const columnKeys = table.columnKeys
+
   // Fallback to `_stop` column if `_time` column missing otherwise return empty array.
-  let timeColData = []
+  let timeColData: NumericColumnData = []
+
   if (columnKeys.includes('_time')) {
     timeColData = table.getColumn('_time', 'number')
   } else if (columnKeys.includes('_stop')) {

ui/src/shared/utils/useVisDomainSettings.ts

@@ -1,24 +1,25 @@
 // Libraries
 import {useMemo} from 'react'
+import {NumericColumnData} from '@influxdata/giraffe'
 
 // Utils
 import {useOneWayState} from 'src/shared/utils/useOneWayState'
 import {extent} from 'src/shared/utils/vis'
 
 /*
   This hook helps map the domain setting stored for line graph to the
-  appropriate settings on a @influxdata/vis `Config` object. 
+  appropriate settings on a @influxdata/giraffe `Config` object. 
 
   If the domain setting is present, it should be used. If the domain setting is
   not present, then the min/max values shown should be derived from the data
   passed to the plot.
 */
 export const useVisDomainSettings = (
   storedDomain: [number, number],
-  data: number[]
+  data: NumericColumnData = []
 ) => {
   const initialDomain = useMemo(
-    () => (storedDomain ? storedDomain : extent(data)),
+    () => (storedDomain ? storedDomain : extent(data as number[])),
     [storedDomain, data]
   )
 

ui/src/shared/utils/view.ts

@@ -1,5 +1,5 @@
 // Constants
-import {INFERNO, NINETEEN_EIGHTY_FOUR} from '@influxdata/vis'
+import {INFERNO, NINETEEN_EIGHTY_FOUR} from '@influxdata/giraffe'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {DEFAULT_CELL_NAME} from 'src/dashboards/constants/index'
 import {
@@ -128,7 +128,7 @@ const NEW_VIEW_CREATORS = {
       queries: [],
       type: ViewType.Histogram,
       shape: ViewShape.ChronografV2,
-      xColumn: null,
+      xColumn: '_value',
       xDomain: null,
       xAxisLabel: '',
       fillColumns: null,

ui/src/shared/utils/vis.ts

@@ -1,5 +1,5 @@
 // Libraries
-import {Table, ColumnType, LineInterpolation} from '@influxdata/vis'
+import {Table, ColumnType, LineInterpolation} from '@influxdata/giraffe'
 
 // Utils
 import {formatNumber} from 'src/shared/utils/formatNumber'

ui/src/timeMachine/actions/index.ts

@@ -22,7 +22,7 @@ import {
   AutoRefresh,
 } from 'src/types'
 import {Color} from 'src/types/colors'
-import {HistogramPosition} from '@influxdata/vis'
+import {HistogramPosition} from '@influxdata/giraffe'
 
 export type Action =
   | QueryBuilderAction

ui/src/timeMachine/components/VisDataTransform.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import {FunctionComponent} from 'react'
 import {connect} from 'react-redux'
-import {Table} from '@influxdata/vis'
+import {Table} from '@influxdata/giraffe'
 
 // Utils
 import {

ui/src/timeMachine/components/VisSwitcher.tsx

@@ -2,7 +2,7 @@
 import React, {FunctionComponent} from 'react'
 import {connect} from 'react-redux'
 import {AutoSizer} from 'react-virtualized'
-import {Plot} from '@influxdata/vis'
+import {Plot} from '@influxdata/giraffe'
 
 // Components
 import RawFluxDataTable from 'src/timeMachine/components/RawFluxDataTable'

ui/src/timeMachine/components/view_options/HeatmapOptions.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import React, {FunctionComponent, ChangeEvent} from 'react'
 import {connect} from 'react-redux'
-import {VIRIDIS, MAGMA, INFERNO, PLASMA} from '@influxdata/vis'
+import {VIRIDIS, MAGMA, INFERNO, PLASMA} from '@influxdata/giraffe'
 import {Form, Grid, Input, Columns, InputType} from '@influxdata/clockface'
 
 // Components

ui/src/timeMachine/components/view_options/HistogramOptions.tsx

@@ -29,7 +29,7 @@ import {
 
 // Types
 import {ComponentStatus} from '@influxdata/clockface'
-import {HistogramPosition} from '@influxdata/vis'
+import {HistogramPosition} from '@influxdata/giraffe'
 import {Color} from 'src/types/colors'
 import {AppState} from 'src/types'
 import ColumnSelector from 'src/shared/components/ColumnSelector'

ui/src/timeMachine/components/view_options/ScatterOptions.tsx

@@ -9,7 +9,7 @@ import {
   CTHULHU,
   ECTOPLASM,
   T_MAX_400_FILM,
-} from '@influxdata/vis'
+} from '@influxdata/giraffe'
 
 // Components
 import {Form, Input, Grid} from '@influxdata/clockface'

ui/src/timeMachine/selectors/index.ts

@@ -1,7 +1,7 @@
 // Libraries
 import memoizeOne from 'memoize-one'
 import {get, flatMap} from 'lodash'
-import {fromFlux, Table} from '@influxdata/vis'
+import {fromFlux, Table} from '@influxdata/giraffe'
 
 // Utils
 import {parseResponse} from 'src/shared/parsing/flux/response'

ui/src/types/dashboards.ts

@@ -1,4 +1,4 @@
-import {HistogramPosition} from '@influxdata/vis'
+import {HistogramPosition} from '@influxdata/giraffe'
 import {Color} from 'src/types/colors'
 
 import {