feat(ui): upgrade giraffe dependency

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-lock.json

@@ -1029,6 +1029,54 @@
         }
       }
     },
+    "@influxdata/giraffe": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@influxdata/giraffe/-/giraffe-0.11.0.tgz",
+      "integrity": "sha512-pHbuyoXwkhAyOpj+cC1AVgWZi6ASr6hYLdnlXOlNznbKXXgcWb+xKxglua67gxrJmWNkaKqdf4y3iwwipfO3gQ==",
+      "requires": {
+        "d3-array": "^2.0.3",
+        "d3-color": "^1.2.3",
+        "d3-dsv": "^1.1.1",
+        "d3-format": "^1.3.2",
+        "d3-interpolate": "^1.3.2",
+        "d3-scale": "^2.2.2",
+        "d3-shape": "^1.3.5",
+        "memoize-one": "^5.0.2",
+        "react-virtualized-auto-sizer": "^1.0.2"
+      },
+      "dependencies": {
+        "d3-array": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.2.0.tgz",
+          "integrity": "sha512-eE0QmSh6xToqM3sxHiJYg/QFdNn52ZEgmFE8A8abU8GsHvsIOolqH8B70/8+VGAKm5MlwaExhqR3DLIjOJMLPA=="
+        },
+        "d3-scale": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
+          "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
+          "requires": {
+            "d3-array": "^1.2.0",
+            "d3-collection": "1",
+            "d3-format": "1",
+            "d3-interpolate": "1",
+            "d3-time": "1",
+            "d3-time-format": "2"
+          },
+          "dependencies": {
+            "d3-array": {
+              "version": "1.2.4",
+              "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+              "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+            }
+          }
+        },
+        "memoize-one": {
+          "version": "5.0.4",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
+          "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
+        }
+      }
+    },
     "@influxdata/influx": {
       "version": "github:influxdata/influxdb2-js#4bb7981498a2649391fbebdcaababafbf304f642",
       "from": "github:influxdata/influxdb2-js#dev",
@@ -1082,54 +1130,6 @@
         "raf": "^3.1.0"
       }
     },
-    "@influxdata/vis": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@influxdata/vis/-/vis-0.9.0.tgz",
-      "integrity": "sha512-Fz49Gu7uG01gbmtDaJ0QuPYpo8XY6OWQyDjvCJIT30LlPdJ6R0QbKXyV/4ZTtTIMcfuhpFz5+9zNhN+nOzDpBQ==",
-      "requires": {
-        "d3-array": "^2.0.3",
-        "d3-color": "^1.2.3",
-        "d3-dsv": "^1.1.1",
-        "d3-format": "^1.3.2",
-        "d3-interpolate": "^1.3.2",
-        "d3-scale": "^2.2.2",
-        "d3-shape": "^1.3.5",
-        "memoize-one": "^5.0.2",
-        "react-virtualized-auto-sizer": "^1.0.2"
-      },
-      "dependencies": {
-        "d3-array": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.2.0.tgz",
-          "integrity": "sha512-eE0QmSh6xToqM3sxHiJYg/QFdNn52ZEgmFE8A8abU8GsHvsIOolqH8B70/8+VGAKm5MlwaExhqR3DLIjOJMLPA=="
-        },
-        "d3-scale": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.2.2.tgz",
-          "integrity": "sha512-LbeEvGgIb8UMcAa0EATLNX0lelKWGYDQiPdHj+gLblGVhGLyNbaCn3EvrJf0A3Y/uOOU5aD6MTh5ZFCdEwGiCw==",
-          "requires": {
-            "d3-array": "^1.2.0",
-            "d3-collection": "1",
-            "d3-format": "1",
-            "d3-interpolate": "1",
-            "d3-time": "1",
-            "d3-time-format": "2"
-          },
-          "dependencies": {
-            "d3-array": {
-              "version": "1.2.4",
-              "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
-              "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
-            }
-          }
-        },
-        "memoize-one": {
-          "version": "5.0.4",
-          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz",
-          "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA=="
-        }
-      }
-    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",

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,5 +1,6 @@
 // Libraries
 import {useMemo} from 'react'
+import {NumericColumnData} from '@influxdata/giraffe'
 
 // Utils
 import {useOneWayState} from 'src/shared/utils/useOneWayState'
@@ -7,7 +8,7 @@ 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
@@ -15,10 +16,10 @@ import {extent} from 'src/shared/utils/vis'
 */
 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 {

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 {