From 8856312ddeaebcf2c8a34e587c28b278c989de88 Mon Sep 17 00:00:00 2001 From: Deniz Kusefoglu Date: Wed, 29 May 2019 16:20:06 -0700 Subject: [PATCH] Bump vis to 0.9.0 (#14017) * Change table getters implementation * ingest fluxGroupKeyUnion as array * Bump vis to 0.9.0 * Fix behavior of latestValues in tests --- ui/package-lock.json | 12 +++---- ui/package.json | 2 +- ui/src/shared/components/HeatmapContainer.tsx | 25 +++++++++++---- .../shared/components/HistogramContainer.tsx | 13 ++++---- .../components/RefreshingViewSwitcher.tsx | 4 +-- ui/src/shared/components/ScatterContainer.tsx | 23 ++++++++------ .../shared/components/VisTableTransform.tsx | 10 +++--- ui/src/shared/components/XYContainer.tsx | 14 ++++----- ui/src/shared/utils/latestValues.test.ts | 18 +++++------ ui/src/shared/utils/latestValues.ts | 31 ++++++++++++------- ui/src/shared/utils/vis.ts | 12 ++++--- ui/src/timeMachine/selectors/index.ts | 27 +++++++++------- 12 files changed, 110 insertions(+), 81 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 39a7a9b163..af13d43772 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -1052,9 +1052,9 @@ } }, "@influxdata/vis": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/@influxdata/vis/-/vis-0.8.0.tgz", - "integrity": "sha512-4MxvX+HlKQl9+2uLAr1ueDkTqmrcvokDFfp9yYEuVkD7rszMOfs5tInMhqHng49E5FXBksqPndryx/t+s5XBgw==", + "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", @@ -1068,9 +1068,9 @@ }, "dependencies": { "d3-array": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.0.3.tgz", - "integrity": "sha512-C7g4aCOoJa+/K5hPVqZLG8wjYHsTUROTk7Z1Ep9F4P5l+WVrvV0+6nAZ1wKTRLMhFWpGbozxUpyjIPZYAaLi+g==" + "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", diff --git a/ui/package.json b/ui/package.json index 1eeb3e9f71..e39a242488 100644 --- a/ui/package.json +++ b/ui/package.json @@ -143,7 +143,7 @@ "@influxdata/influx": "0.3.4", "@influxdata/influxdb-templates": "influxdata/influxdb-templates", "@influxdata/react-custom-scrollbars": "4.3.8", - "@influxdata/vis": "^0.8.0", + "@influxdata/vis": "^0.9.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 8b84796db0..61562f6d19 100644 --- a/ui/src/shared/components/HeatmapContainer.tsx +++ b/ui/src/shared/components/HeatmapContainer.tsx @@ -1,7 +1,6 @@ // Libraries import React, {FunctionComponent} from 'react' import {Config, Table} from '@influxdata/vis' -import {get} from 'lodash' // Components import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage' @@ -45,18 +44,23 @@ const HeatmapContainer: FunctionComponent = ({ }, children, }) => { + const columnKeys = table.columnKeys + const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings( storedXDomain, - get(table, ['columns', xColumn, 'data'], []) + columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : [] ) const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings( storedYDomain, - get(table, ['columns', yColumn, 'data'], []) + columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : [] ) const isValidView = - xColumn && yColumn && table.columns[xColumn] && table.columns[yColumn] + xColumn && + yColumn && + xColumn in table.columnKeys && + yColumn in table.columnKeys if (!isValidView) { return @@ -67,8 +71,17 @@ const HeatmapContainer: FunctionComponent = ({ ? storedColors : DEFAULT_LINE_COLORS.map(c => c.hex) - const xFormatter = getFormatter(table.columns[xColumn].type, xPrefix, xSuffix) - const yFormatter = getFormatter(table.columns[yColumn].type, yPrefix, ySuffix) + const xFormatter = getFormatter( + table.getColumnType(xColumn), + xPrefix, + xSuffix + ) + + const yFormatter = getFormatter( + table.getColumnType(yColumn), + yPrefix, + ySuffix + ) const config: Config = { ...VIS_THEME, diff --git a/ui/src/shared/components/HistogramContainer.tsx b/ui/src/shared/components/HistogramContainer.tsx index 38b77607a4..bba8bc5a90 100644 --- a/ui/src/shared/components/HistogramContainer.tsx +++ b/ui/src/shared/components/HistogramContainer.tsx @@ -1,7 +1,6 @@ // Libraries import React, {FunctionComponent} from 'react' import {Config, Table} from '@influxdata/vis' -import {get} from 'lodash' // Components import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage' @@ -40,15 +39,15 @@ const HistogramContainer: FunctionComponent = ({ xDomain: storedXDomain, }, }) => { + const columnKeys = table.columnKeys + const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings( storedXDomain, - get(table, ['columns', xColumn, 'data'], []) + columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : [] ) - const isValidView = - xColumn && - table.columns[xColumn] && - fillColumns.every(col => !!table.columns[col]) + const isValidView = xColumn && columnKeys.includes(xColumn) + fillColumns.every(col => columnKeys.includes(col)) if (!isValidView) { return @@ -59,7 +58,7 @@ const HistogramContainer: FunctionComponent = ({ ? colors.map(c => c.hex) : DEFAULT_LINE_COLORS.map(c => c.hex) - const xFormatter = getFormatter(table.columns[xColumn].type) + const xFormatter = getFormatter(table.getColumnType(xColumn)) const config: Config = { ...VIS_THEME, diff --git a/ui/src/shared/components/RefreshingViewSwitcher.tsx b/ui/src/shared/components/RefreshingViewSwitcher.tsx index 69ee96eeab..715bf8a999 100644 --- a/ui/src/shared/components/RefreshingViewSwitcher.tsx +++ b/ui/src/shared/components/RefreshingViewSwitcher.tsx @@ -138,10 +138,10 @@ const RefreshingViewSwitcher: FunctionComponent = ({ case ViewType.Scatter: return ( - {({table, groupKeyUnion}) => ( + {({table, fluxGroupKeyUnion}) => ( diff --git a/ui/src/shared/components/ScatterContainer.tsx b/ui/src/shared/components/ScatterContainer.tsx index 2f90be7995..c488383519 100644 --- a/ui/src/shared/components/ScatterContainer.tsx +++ b/ui/src/shared/components/ScatterContainer.tsx @@ -1,7 +1,6 @@ // Libraries import React, {FunctionComponent} from 'react' import {Config, Table} from '@influxdata/vis' -import {get} from 'lodash' // Components import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage' @@ -21,7 +20,7 @@ import {RemoteDataState, ScatterView} from 'src/types' interface Props { table: Table - groupKeyUnion?: Array + fluxGroupKeyUnion?: string[] loading: RemoteDataState viewProperties: ScatterView children: (config: Config) => JSX.Element @@ -50,23 +49,25 @@ const ScatterContainer: FunctionComponent = ({ const xColumn = chooseXColumn(table) const yColumn = chooseYColumn(table) + const columnKeys = table.columnKeys + const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings( storedXDomain, - get(table, ['columns', xColumn, 'data'], []) + columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : [] ) const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings( storedYDomain, - get(table, ['columns', yColumn, 'data'], []) + columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : [] ) const isValidView = xColumn && - table.columns[xColumn] && + columnKeys.includes(xColumn) && yColumn && - table.columns[yColumn] && - fillColumns.every(col => !!table.columns[col]) && - symbolColumns.every(col => !!table.columns[col]) + columnKeys.includes(yColumn) && + fillColumns.every(col => columnKeys.includes(col)) && + symbolColumns.every(col => columnKeys.includes(col)) if (!isValidView) { return @@ -75,7 +76,11 @@ const ScatterContainer: FunctionComponent = ({ const colorHexes = colors && colors.length ? colors : DEFAULT_LINE_COLORS.map(c => c.hex) - const yFormatter = getFormatter(table.columns[yColumn].type, yPrefix, ySuffix) + const yFormatter = getFormatter( + table.getColumnType(yColumn), + yPrefix, + ySuffix + ) const config: Config = { ...VIS_THEME, diff --git a/ui/src/shared/components/VisTableTransform.tsx b/ui/src/shared/components/VisTableTransform.tsx index aac4be1a0f..c77a2f02b9 100644 --- a/ui/src/shared/components/VisTableTransform.tsx +++ b/ui/src/shared/components/VisTableTransform.tsx @@ -1,10 +1,10 @@ // Libraries import {useMemo, FunctionComponent} from 'react' -import {fluxToTable, Table} from '@influxdata/vis' +import {fromFlux, Table} from '@influxdata/vis' interface VisTableTransformResult { table: Table - groupKeyUnion: Array + fluxGroupKeyUnion: string[] } interface Props { @@ -14,13 +14,11 @@ interface Props { const VisTableTransform: FunctionComponent = ({files, children}) => { const {table, fluxGroupKeyUnion} = useMemo( - () => fluxToTable(files.join('\n\n')), + () => fromFlux(files.join('\n\n')), [files] ) - const groupKeyUnion = Array.from(fluxGroupKeyUnion) - - return children({table, groupKeyUnion}) + return children({table, fluxGroupKeyUnion}) } export default VisTableTransform diff --git a/ui/src/shared/components/XYContainer.tsx b/ui/src/shared/components/XYContainer.tsx index 402b3c2ccd..07a3b60a41 100644 --- a/ui/src/shared/components/XYContainer.tsx +++ b/ui/src/shared/components/XYContainer.tsx @@ -1,7 +1,6 @@ // Libraries -import {get} from 'lodash' import React, {FunctionComponent, useMemo} from 'react' -import {Config, fluxToTable} from '@influxdata/vis' +import {Config, fromFlux} from '@influxdata/vis' // Components import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage' @@ -52,7 +51,7 @@ const XYContainer: FunctionComponent = ({ }, }) => { const {table, fluxGroupKeyUnion} = useMemo( - () => fluxToTable(files.join('\n\n')), + () => fromFlux(files.join('\n\n')), [files] ) @@ -63,16 +62,17 @@ const XYContainer: FunctionComponent = ({ const storedXDomain = useMemo(() => parseBounds(xBounds), [xBounds]) const storedYDomain = useMemo(() => parseBounds(yBounds), [yBounds]) + const columnKeys = table.columnKeys + const [xDomain, onSetXDomain, onResetXDomain] = useVisDomainSettings( storedXDomain, - get(table, ['columns', xColumn, 'data'], []) + columnKeys.includes(xColumn) ? table.getColumn(xColumn, 'number') : [] ) const [yDomain, onSetYDomain, onResetYDomain] = useVisDomainSettings( storedYDomain, - get(table, ['columns', yColumn, 'data'], []) + columnKeys.includes(yColumn) ? table.getColumn(yColumn, 'number') : [] ) - if (!xColumn || !yColumn) { return } @@ -92,7 +92,7 @@ const XYContainer: FunctionComponent = ({ ) const yFormatter = getFormatter( - table.columns[yColumn].type, + table.getColumnType(yColumn), yTickPrefix, yTickSuffix ) diff --git a/ui/src/shared/utils/latestValues.test.ts b/ui/src/shared/utils/latestValues.test.ts index cfef840681..79a1ddd06e 100644 --- a/ui/src/shared/utils/latestValues.test.ts +++ b/ui/src/shared/utils/latestValues.test.ts @@ -1,4 +1,4 @@ -import {fluxToTable} from '@influxdata/vis' +import {fromFlux} from '@influxdata/vis' import {latestValues} from 'src/shared/utils/latestValues' @@ -32,8 +32,8 @@ describe('latestValues', () => { ,,1,2018-12-10T18:29:48Z,1 ,,1,2018-12-10T18:54:18Z,2` - const latestValuesA = latestValues(fluxToTable(respA).table) - const latestValuesB = latestValues(fluxToTable(respB).table) + const latestValuesA = latestValues(fromFlux(respA).table) + const latestValuesB = latestValues(fromFlux(respB).table) expect(latestValuesA).toEqual([2]) expect(latestValuesB).toEqual([2]) @@ -54,7 +54,7 @@ describe('latestValues', () => { ,,1,2018-12-10T19:00:00Z,howdy ,,1,2018-12-10T20:00:00Z,howdy` - const result = latestValues(fluxToTable(resp).table) + const result = latestValues(fromFlux(resp).table) expect(result).toEqual([4]) }) @@ -67,7 +67,7 @@ describe('latestValues', () => { ,,0,2018-12-10T18:29:48Z,2018-12-10T18:29:48Z,3 ,,0,2018-12-10T18:40:18Z,2018-12-10T18:40:18Z,4` - const result = latestValues(fluxToTable(resp).table) + const result = latestValues(fromFlux(resp).table) expect(result).toEqual([4]) }) @@ -80,7 +80,7 @@ describe('latestValues', () => { ,,0,3 ,,0,4` - const result = latestValues(fluxToTable(resp).table) + const result = latestValues(fromFlux(resp).table) expect(result).toEqual([]) }) @@ -92,7 +92,7 @@ describe('latestValues', () => { ,result,table,_value,foo ,,0,3,4` - const result = latestValues(fluxToTable(resp).table) + const result = latestValues(fromFlux(resp).table) expect(result).toEqual([3, 4]) }) @@ -105,7 +105,7 @@ describe('latestValues', () => { ,,1,2018-12-10T19:00:00Z,howdy ,,1,2018-12-10T20:00:00Z,howdy` - const result = latestValues(fluxToTable(resp).table) + const result = latestValues(fromFlux(resp).table) expect(result).toEqual([]) }) @@ -124,7 +124,7 @@ describe('latestValues', () => { ,result,table,_time,_value,foo ,,0,2018-12-10T18:29:48Z,1,7.0 ,,0,2018-12-10T18:40:18Z,2,8.0` - const table = fluxToTable(resp).table + const table = fromFlux(resp).table const result = latestValues(table) expect(result).toEqual([4, 6.0, 2.0, 8.0]) diff --git a/ui/src/shared/utils/latestValues.ts b/ui/src/shared/utils/latestValues.ts index b11703e17e..e4359ff929 100644 --- a/ui/src/shared/utils/latestValues.ts +++ b/ui/src/shared/utils/latestValues.ts @@ -1,5 +1,5 @@ -import {get, range, flatMap} from 'lodash' -import {isNumeric, Table} from '@influxdata/vis' +import {range, flatMap} from 'lodash' +import {Table} from '@influxdata/vis' /* Return a list of the maximum elements in `xs`, where the magnitude of each @@ -36,9 +36,13 @@ const EXCLUDED_COLUMNS = new Set([ Determine if the values in a column should be considered in `latestValues`. */ const isValueCol = (table: Table, colKey: string): boolean => { - const {name, type} = table.columns[colKey] + const columnType = table.getColumnType(colKey) + const columnName = table.getColumnName(colKey) - return isNumeric(type) && !EXCLUDED_COLUMNS.has(name) + return ( + (columnType === 'number' || columnType === 'time') && + !EXCLUDED_COLUMNS.has(columnName) + ) } /* @@ -66,26 +70,29 @@ const sortTableKeys = (keyA: string, keyB: string): number => { If the table only has one row, then a time column is not needed. */ export const latestValues = (table: Table): number[] => { - const valueColsData = Object.keys(table.columns) + const valueColsData = table.columnKeys .sort((a, b) => sortTableKeys(a, b)) .filter(k => isValueCol(table, k)) - .map(k => table.columns[k].data) as number[][] + .map(k => table.getColumn(k)) as number[][] if (!valueColsData.length) { return [] } - const timeColData = get( - table, - 'columns._time.data', - get(table, 'columns._stop.data') // Fallback to `_stop` column if `_time` column missing - ) + const columnKeys = table.columnKeys + // Fallback to `_stop` column if `_time` column missing otherwise return empty array. + let timeColData = [] + if (columnKeys.includes('_time')) { + timeColData = table.getColumn('_time', 'number') + } else if (columnKeys.includes('_stop')) { + timeColData = table.getColumn('_stop', 'number') + } if (!timeColData && table.length !== 1) { return [] } - const d = i => { + const d = (i: number) => { const time = timeColData[i] if (time && valueColsData.some(colData => !isNaN(colData[i]))) { diff --git a/ui/src/shared/utils/vis.ts b/ui/src/shared/utils/vis.ts index 0a097c9ed6..a9c81d388d 100644 --- a/ui/src/shared/utils/vis.ts +++ b/ui/src/shared/utils/vis.ts @@ -1,6 +1,6 @@ // Libraries import {format} from 'd3-format' -import {isNumeric, Table, ColumnType, LineInterpolation} from '@influxdata/vis' +import {Table, ColumnType, LineInterpolation} from '@influxdata/vis' // Types import {XYViewGeom, Axis} from 'src/types' @@ -68,7 +68,7 @@ export const filterNoisyColumns = (columns: string[], table: Table): string[] => return true } - const keyData = table.columns[key].data + const keyData = table.getColumn(key) return !keyData.every(d => d === keyData[0]) }) @@ -111,7 +111,7 @@ export const extent = (xs: number[]): [number, number] | null => { } export const chooseXColumn = (table: Table): string | null => { - const columnKeys = new Set(Object.keys(table.columns)) + const columnKeys = new Set(table.columnKeys) if (columnKeys.has('_time')) { return '_time' @@ -129,7 +129,9 @@ export const chooseXColumn = (table: Table): string | null => { } export const chooseYColumn = (table: Table): string | null => { - return Object.keys(table.columns).find( - k => k.startsWith('_value') && isNumeric(table.columns[k].type) + return table.columnKeys.find( + k => + k.startsWith('_value') && + (table.getColumnType(k) === 'number' || table.getColumnType(k) === 'time') ) } diff --git a/ui/src/timeMachine/selectors/index.ts b/ui/src/timeMachine/selectors/index.ts index b7ef839e59..7781b7d3f3 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 {isNumeric, fluxToTable, Table} from '@influxdata/vis' +import {fromFlux, Table} from '@influxdata/vis' // Utils import {parseResponse} from 'src/shared/parsing/flux/response' @@ -35,7 +35,7 @@ const getTablesMemoized = memoizeOne( export const getTables = (state: AppState): FluxTable[] => getTablesMemoized(getActiveTimeMachine(state).queryResults.files) -const getVisTableMemoized = memoizeOne(fluxToTable) +const getVisTableMemoized = memoizeOne(fromFlux) export const getVisTable = (state: AppState): Table => { const files = getActiveTimeMachine(state).queryResults.files || [] @@ -46,14 +46,19 @@ export const getVisTable = (state: AppState): Table => { const getNumericColumnsMemoized = memoizeOne( (table: Table): string[] => { - const numericColumns = Object.entries(table.columns) - .filter( - ([__, {name, type}]) => - isNumeric(type) && name !== 'result' && name !== 'table' - ) - .map(([name]) => name) - - return numericColumns + const columnKeys = table.columnKeys + return columnKeys.reduce((numericColumns, key) => { + const columnType = table.getColumnType(key) + const columnName = table.getColumnName(key) + if ( + (columnType === 'number' || columnType === 'time') && + columnName !== 'result' && + columnName !== 'table' + ) { + numericColumns.push(columnName) + } + return numericColumns + }, []) } ) @@ -66,7 +71,7 @@ export const getNumericColumns = (state: AppState): string[] => { const getGroupableColumnsMemoized = memoizeOne( (table: Table): string[] => { const invalidGroupColumns = new Set(['_value', '_start', '_stop', '_time']) - const groupableColumns = Object.keys(table.columns).filter( + const groupableColumns = table.columnKeys.filter( name => !invalidGroupColumns.has(name) )