fix: split out visualizations that do not use PlotEnv (#814)

Author: TCL735

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",

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<HTMLCanvasElement>
@@ -25,7 +32,7 @@ export const Plot: FunctionComponent<PlotProps> = props => {
   }
 
   if (config.width && config.height) {
-    return (
+    return hasPlotEnv(config) ? (
       <div className="giraffe-fixedsizer" style={{position: 'relative'}}>
         <PlotResizer
           axesCanvasRef={axesCanvasRef}
@@ -37,10 +44,18 @@ export const Plot: FunctionComponent<PlotProps> = props => {
           {children}
         </PlotResizer>
       </div>
+    ) : (
+      <TableResizer
+        config={config as SizedConfig}
+        height={config.height}
+        width={config.width}
+      >
+        {children}
+      </TableResizer>
     )
   }
 
-  return (
+  return hasPlotEnv(config) ? (
     <AutoSizer className="giraffe-autosizer">
       {({width, height}) => (
         <PlotResizer
@@ -54,6 +69,18 @@ export const Plot: FunctionComponent<PlotProps> = props => {
         </PlotResizer>
       )}
     </AutoSizer>
+  ) : (
+    <AutoSizer className="giraffe-autosizer">
+      {({width, height}) => (
+        <TableResizer
+          config={config as SizedConfig}
+          height={height}
+          width={width}
+        >
+          {children}
+        </TableResizer>
+      )}
+    </AutoSizer>
   )
 }
 

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<PlotResizerProps> = 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 <SizedTable config={normalizedConfig}>{children}</SizedTable>
-  }
-
   return (
     <>
       <SizedPlot
@@ -78,3 +67,28 @@ export const PlotResizer: FC<PlotResizerProps> = props => {
     </>
   )
 }
+
+interface TableResizerProps {
+  config: SizedConfig
+  height: number
+  width: number
+}
+
+export const TableResizer: FC<TableResizerProps> = 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 <SizedTable config={normalizedConfig}>{children}</SizedTable>
+}

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,24 +38,24 @@ 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
   let currentTable
   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<Props> = ({result, showAll}) => {
         numberOfRowsOnCurrentPage,
         showAll
       ),
-    [numberOfRowsOnCurrentPage, paginationOffset, result] // eslint-disable-line react-hooks/exhaustive-deps
+    [numberOfRowsOnCurrentPage, paginationOffset, result, showAll]
   )
 
   const inner = useMemo(() => {

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<Props> = ({
-  config: userConfig,
-  children,
-}) => {
-  const env = usePlotEnv(userConfig)
-
-  const {config} = env
+export const SizedTable: FunctionComponent<Props> = ({config, children}) => {
   const {width, height} = config
 
   config.showAxes = false
@@ -53,7 +45,7 @@ export const SizedTable: FunctionComponent<Props> = ({
       <div
         className="giraffe-inner-plot"
         style={{
-          cursor: `${userConfig.cursor || 'auto'}`,
+          cursor: `${config.cursor || 'auto'}`,
         }}
       >
         <div className="giraffe-layers" style={fullsizeStyle}>
@@ -113,22 +105,6 @@ export const SizedTable: FunctionComponent<Props> = ({
                   </FluxTablesTransform>
                 )
 
-              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
             }

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
+}

stories/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.35.0",
+  "version": "2.36.0",
   "license": "MIT",
   "repository": {
     "type": "git",