From bbf891e15e7d4f7b326069951aa1d22f98bad4d0 Mon Sep 17 00:00:00 2001 From: Timmy Luong Date: Mon, 26 Sep 2022 09:48:25 -0700 Subject: [PATCH] fix: split out visualizations that do not use PlotEnv (#814) --- giraffe/package.json | 2 +- giraffe/src/components/Plot.tsx | 33 ++++++++++++++-- giraffe/src/components/PlotResizer.tsx | 38 +++++++++++++------ .../src/components/SimpleTable/PagedTable.tsx | 22 +++++------ giraffe/src/components/SizedTable.tsx | 28 +------------- giraffe/src/utils/hasPlotEnv.ts | 15 ++++++++ stories/package.json | 2 +- 7 files changed, 85 insertions(+), 55 deletions(-) create mode 100644 giraffe/src/utils/hasPlotEnv.ts diff --git a/giraffe/package.json b/giraffe/package.json index 72f2139e..e482a6a1 100644 --- a/giraffe/package.json +++ b/giraffe/package.json @@ -1,6 +1,6 @@ { "name": "@influxdata/giraffe", - "version": "2.35.0", + "version": "2.36.0", "main": "dist/index.js", "module": "dist/index.js", "license": "MIT", diff --git a/giraffe/src/components/Plot.tsx b/giraffe/src/components/Plot.tsx index a2d402c1..6a7af914 100644 --- a/giraffe/src/components/Plot.tsx +++ b/giraffe/src/components/Plot.tsx @@ -1,9 +1,16 @@ +// Libraries import React, {FunctionComponent, RefObject, useRef} from 'react' import AutoSizer from 'react-virtualized-auto-sizer' +// Components +import {PlotResizer, TableResizer} from './PlotResizer' + +// Types import {Config, SizedConfig} from '../types' -import {PlotResizer} from './PlotResizer' +// Utils +import {hasPlotEnv} from '../utils/hasPlotEnv' + interface PlotProps { config: Config axesCanvasRef?: RefObject @@ -25,7 +32,7 @@ export const Plot: FunctionComponent = props => { } if (config.width && config.height) { - return ( + return hasPlotEnv(config) ? (
= props => { {children}
+ ) : ( + + {children} + ) } - return ( + return hasPlotEnv(config) ? ( {({width, height}) => ( = props => { )} + ) : ( + + {({width, height}) => ( + + {children} + + )} + ) } diff --git a/giraffe/src/components/PlotResizer.tsx b/giraffe/src/components/PlotResizer.tsx index 213fc702..0c8352ca 100644 --- a/giraffe/src/components/PlotResizer.tsx +++ b/giraffe/src/components/PlotResizer.tsx @@ -1,8 +1,7 @@ import React, {FC, RefObject, useMemo} from 'react' -import {LayerTypes, PlotDimensions, SizedConfig} from '../types' +import {PlotDimensions, SizedConfig} from '../types' -import {get} from '../utils/get' import {resizePlotWithStaticLegend} from '../utils/legend/resizePlot' import {normalizeConfig} from '../utils/normalizeConfig' import {usePlotEnv} from '../utils/usePlotEnv' @@ -40,21 +39,11 @@ export const PlotResizer: FC = props => { const env = usePlotEnv(normalizedConfig) const spec = env.getSpec(0) - const graphType = get(config, 'layers.0.type') if (width === 0 || height === 0) { return null } - if ( - graphType === LayerTypes.Table || - graphType === LayerTypes.RawFluxDataTable || - graphType === LayerTypes.Gauge || - graphType === LayerTypes.SimpleTable - ) { - return {children} - } - return ( <> = props => { ) } + +interface TableResizerProps { + config: SizedConfig + height: number + width: number +} + +export const TableResizer: FC = props => { + const {children, config, height, width} = props + + const normalizedConfig: SizedConfig = useMemo( + () => ({ + ...normalizeConfig(config), + height, + width, + }), + [config, height, width] + ) + + if (width === 0 || height === 0) { + return null + } + + return {children} +} diff --git a/giraffe/src/components/SimpleTable/PagedTable.tsx b/giraffe/src/components/SimpleTable/PagedTable.tsx index 5ca6cab9..55fbb6fa 100644 --- a/giraffe/src/components/SimpleTable/PagedTable.tsx +++ b/giraffe/src/components/SimpleTable/PagedTable.tsx @@ -23,8 +23,6 @@ interface ExtendedColumn { data: any[] } -const MAXIMUM_ESTIMATED_ROW_HEIGHT = 42 - /* * @param result - the result of the query * @param paginationOffset - the start index of the first row of the current page @@ -40,16 +38,15 @@ const getNumberOfRowsOnCurrentPage = ( headerHeight: number, rowHeight: number ): number => { - if (totalAvailableHeight === 0) { + if (totalAvailableHeight <= 0) { return 0 } - const minimumLength = result?.table?.length ?? 1 - const estimatedRowHeight = Math.min( - Math.ceil(totalAvailableHeight / minimumLength), - MAXIMUM_ESTIMATED_ROW_HEIGHT - ) - const visibleRowHeight = Math.max(rowHeight, estimatedRowHeight) + // this means that no rows have been mounted or measured, so we need to + // mount one row to measure the row height + if (rowHeight <= 0) { + return 1 + } let runningHeight = 14 let rowIdx = paginationOffset @@ -57,7 +54,8 @@ const getNumberOfRowsOnCurrentPage = ( let lastSignature let signature - const lastVisibleRowMinimumHeight = 0.2 * visibleRowHeight + // rowHeight is now guaranteed to be greater than zero + const lastVisibleRowMinimumHeight = 0.2 * rowHeight while (rowIdx < result.table.length) { if (result.table.columns?.table?.data?.[rowIdx] !== currentTable) { @@ -92,7 +90,7 @@ const getNumberOfRowsOnCurrentPage = ( continue } - runningHeight += visibleRowHeight + runningHeight += rowHeight if (runningHeight + lastVisibleRowMinimumHeight >= totalAvailableHeight) { break @@ -402,7 +400,7 @@ const PagedTable: FC = ({result, showAll}) => { numberOfRowsOnCurrentPage, showAll ), - [numberOfRowsOnCurrentPage, paginationOffset, result] // eslint-disable-line react-hooks/exhaustive-deps + [numberOfRowsOnCurrentPage, paginationOffset, result, showAll] ) const inner = useMemo(() => { diff --git a/giraffe/src/components/SizedTable.tsx b/giraffe/src/components/SizedTable.tsx index 410a2f61..6dd723a8 100644 --- a/giraffe/src/components/SizedTable.tsx +++ b/giraffe/src/components/SizedTable.tsx @@ -16,19 +16,11 @@ import {FluxTablesTransform} from './FluxTablesTransform' import {TableGraphLayer} from './Table' import {SimpleTableLayer} from './SimpleTable' -import {usePlotEnv} from '../utils/usePlotEnv' - interface Props { config: SizedConfig } -export const SizedTable: FunctionComponent = ({ - config: userConfig, - children, -}) => { - const env = usePlotEnv(userConfig) - - const {config} = env +export const SizedTable: FunctionComponent = ({config, children}) => { const {width, height} = config config.showAxes = false @@ -53,7 +45,7 @@ export const SizedTable: FunctionComponent = ({
@@ -113,22 +105,6 @@ export const SizedTable: FunctionComponent = ({ ) - case LayerTypes.Custom: - const renderProps = { - key: layerIndex, - width, - height, - innerWidth: env.innerWidth, - innerHeight: env.innerHeight, - xScale: env.xScale, - yScale: env.yScale, - xDomain: env.xDomain, - yDomain: env.yDomain, - columnFormatter: env.getFormatterForColumn, - yColumnType: env.yColumnType, - } - return layerConfig.render(renderProps) - default: return null } diff --git a/giraffe/src/utils/hasPlotEnv.ts b/giraffe/src/utils/hasPlotEnv.ts new file mode 100644 index 00000000..04beda8c --- /dev/null +++ b/giraffe/src/utils/hasPlotEnv.ts @@ -0,0 +1,15 @@ +import {Config, LayerTypes} from '../types' +import {get} from './get' + +export const hasPlotEnv = (config: Config): boolean => { + const graphType = get(config, 'layers.0.type') + if ( + graphType === LayerTypes.Gauge || + graphType === LayerTypes.RawFluxDataTable || + graphType === LayerTypes.SimpleTable || + graphType === LayerTypes.Table + ) { + return false + } + return true +} diff --git a/stories/package.json b/stories/package.json index 589a4d04..f1dcab5a 100644 --- a/stories/package.json +++ b/stories/package.json @@ -1,6 +1,6 @@ { "name": "@influxdata/giraffe-stories", - "version": "2.35.0", + "version": "2.36.0", "license": "MIT", "repository": { "type": "git",