diff --git a/CHANGELOG.md b/CHANGELOG.md index 90645dca4a..d87ce6c429 100644 --- a/CHANGELOG.md +++ b/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] diff --git a/ui/package-lock.json b/ui/package-lock.json index b0a656572c..8e119552db 100644 --- a/ui/package-lock.json +++ b/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", diff --git a/ui/package.json b/ui/package.json index 70dc26d8b9..53b31338ec 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/shared/components/HeatmapContainer.tsx b/ui/src/shared/components/HeatmapContainer.tsx index 7c77d301d5..45743c9c13 100644 --- a/ui/src/shared/components/HeatmapContainer.tsx +++ b/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 = ({ 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 = diff --git a/ui/src/shared/components/HistogramContainer.tsx b/ui/src/shared/components/HistogramContainer.tsx index 81350dde1e..5157520683 100644 --- a/ui/src/shared/components/HistogramContainer.tsx +++ b/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 = ({ const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings( storedXDomain, - columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : [] + table.getColumn(xColumn, 'number') ) const isValidView = diff --git a/ui/src/shared/components/LatestValueTransform.tsx b/ui/src/shared/components/LatestValueTransform.tsx index ed30426d81..9ce5e6392b 100644 --- a/ui/src/shared/components/LatestValueTransform.tsx +++ b/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' diff --git a/ui/src/shared/components/RefreshingViewSwitcher.tsx b/ui/src/shared/components/RefreshingViewSwitcher.tsx index de2e764245..12fbb5516b 100644 --- a/ui/src/shared/components/RefreshingViewSwitcher.tsx +++ b/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' diff --git a/ui/src/shared/components/ScatterContainer.tsx b/ui/src/shared/components/ScatterContainer.tsx index 916103c9f7..e3fa64c460 100644 --- a/ui/src/shared/components/ScatterContainer.tsx +++ b/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 = ({ 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 = diff --git a/ui/src/shared/components/VisTableTransform.tsx b/ui/src/shared/components/VisTableTransform.tsx index c77a2f02b9..7fd56b19e7 100644 --- a/ui/src/shared/components/VisTableTransform.tsx +++ b/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 diff --git a/ui/src/shared/components/XYContainer.tsx b/ui/src/shared/components/XYContainer.tsx index 7b9575aae0..edf566363f 100644 --- a/ui/src/shared/components/XYContainer.tsx +++ b/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 = ({ 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 = diff --git a/ui/src/shared/components/cells/Cell.scss b/ui/src/shared/components/cells/Cell.scss index c7c55ed564..c9cfeb2dba 100644 --- a/ui/src/shared/components/cells/Cell.scss +++ b/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; } diff --git a/ui/src/shared/constants/index.ts b/ui/src/shared/constants/index.ts index fe3fb72681..079dbf7d6c 100644 --- a/ui/src/shared/constants/index.ts +++ b/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' diff --git a/ui/src/shared/utils/latestValues.test.ts b/ui/src/shared/utils/latestValues.test.ts index 79a1ddd06e..67afb2c27d 100644 --- a/ui/src/shared/utils/latestValues.test.ts +++ b/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' diff --git a/ui/src/shared/utils/latestValues.ts b/ui/src/shared/utils/latestValues.ts index e4359ff929..bdd1db0872 100644 --- a/ui/src/shared/utils/latestValues.ts +++ b/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')) { diff --git a/ui/src/shared/utils/useVisDomainSettings.ts b/ui/src/shared/utils/useVisDomainSettings.ts index 9caa2f313d..fb05ac598d 100644 --- a/ui/src/shared/utils/useVisDomainSettings.ts +++ b/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] ) diff --git a/ui/src/shared/utils/view.ts b/ui/src/shared/utils/view.ts index b54c9a2548..219770505f 100644 --- a/ui/src/shared/utils/view.ts +++ b/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 { diff --git a/ui/src/shared/utils/vis.ts b/ui/src/shared/utils/vis.ts index b36d60d0b8..99d2cde19a 100644 --- a/ui/src/shared/utils/vis.ts +++ b/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' diff --git a/ui/src/timeMachine/actions/index.ts b/ui/src/timeMachine/actions/index.ts index c8e582489b..f0a2735cde 100644 --- a/ui/src/timeMachine/actions/index.ts +++ b/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 diff --git a/ui/src/timeMachine/components/VisDataTransform.tsx b/ui/src/timeMachine/components/VisDataTransform.tsx index 68fc81799d..33446484c9 100644 --- a/ui/src/timeMachine/components/VisDataTransform.tsx +++ b/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 { diff --git a/ui/src/timeMachine/components/VisSwitcher.tsx b/ui/src/timeMachine/components/VisSwitcher.tsx index cdd429b240..9355329d94 100644 --- a/ui/src/timeMachine/components/VisSwitcher.tsx +++ b/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' diff --git a/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx b/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx index 2ac7ffbe18..f65f898ef7 100644 --- a/ui/src/timeMachine/components/view_options/HeatmapOptions.tsx +++ b/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 diff --git a/ui/src/timeMachine/components/view_options/HistogramOptions.tsx b/ui/src/timeMachine/components/view_options/HistogramOptions.tsx index ae31e553d4..bac1aa17f5 100644 --- a/ui/src/timeMachine/components/view_options/HistogramOptions.tsx +++ b/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' diff --git a/ui/src/timeMachine/components/view_options/ScatterOptions.tsx b/ui/src/timeMachine/components/view_options/ScatterOptions.tsx index 3efb75307d..db01c20b1d 100644 --- a/ui/src/timeMachine/components/view_options/ScatterOptions.tsx +++ b/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' diff --git a/ui/src/timeMachine/selectors/index.ts b/ui/src/timeMachine/selectors/index.ts index 07371a6709..7b4855f8c1 100644 --- a/ui/src/timeMachine/selectors/index.ts +++ b/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' diff --git a/ui/src/types/dashboards.ts b/ui/src/types/dashboards.ts index bf038241d6..21aa697ff1 100644 --- a/ui/src/types/dashboards.ts +++ b/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 {