fix: calculate the correct heights for the header and rows in SimpleTable (#5240)

Author: TCL735

src/visualization/types/SimpleTable/InnerTable.tsx

@@ -1,12 +1,19 @@
-import React, {FC} from 'react'
+import React, {FC, Ref} from 'react'
 import {ComponentSize, Table, VerticalAlignment} from '@influxdata/clockface'
 import {SubsetTable} from 'src/visualization/types/SimpleTable'
 
 interface InnerProps {
   table: SubsetTable
+  pagedTableRefs: {
+    pagedTableHeaderRef: Ref<HTMLTableSectionElement>
+    pagedTableBodyRef: Ref<HTMLTableSectionElement>
+  }
 }
 
-const InnerTable: FC<InnerProps> = ({table}) => {
+const InnerTable: FC<InnerProps> = ({
+  pagedTableRefs: {pagedTableHeaderRef, pagedTableBodyRef},
+  table,
+}) => {
   const headers = Object.values(table.cols).map(c => {
     if (c.name === 'table') {
       return (
@@ -61,10 +68,10 @@ const InnerTable: FC<InnerProps> = ({table}) => {
       highlight
       testID="simple-table"
     >
-      <Table.Header>
+      <Table.Header ref={pagedTableHeaderRef}>
         <Table.Row>{headers}</Table.Row>
       </Table.Header>
-      <Table.Body>{rows}</Table.Body>
+      <Table.Body ref={pagedTableBodyRef}>{rows}</Table.Body>
     </Table>
   )
 }

src/visualization/types/SimpleTable/PagedTable.tsx

@@ -1,9 +1,9 @@
 import React, {
   FC,
   useContext,
+  useEffect,
   useMemo,
   useRef,
-  useEffect,
   useState,
 } from 'react'
 import {DapperScrollbars} from '@influxdata/clockface'
@@ -24,13 +24,12 @@ interface ExtendedColumn {
   data: any[]
 }
 
-const HEADER_HEIGHT = 51
-const ROW_HEIGHT = 25
-
 const measurePage = (
   result: FluxResult['parsed'],
   offset: number,
-  height: number
+  height: number,
+  headerHeight: number,
+  rowHeight: number
 ): number => {
   if (height === 0) {
     return 0
@@ -54,7 +53,7 @@ const measurePage = (
         .join('|')
 
       if (signature !== lastSignature) {
-        runningHeight += HEADER_HEIGHT
+        runningHeight += headerHeight
 
         if (currentTable !== undefined) {
           runningHeight += 10
@@ -72,9 +71,9 @@ const measurePage = (
       continue
     }
 
-    runningHeight += ROW_HEIGHT
+    runningHeight += rowHeight
 
-    if (runningHeight >= height) {
+    if (runningHeight + 0.25 * rowHeight >= height) {
       break
     }
 
@@ -231,8 +230,36 @@ const PagedTable: FC<Props> = ({result, properties}) => {
     setPage,
     setTotalPages,
   } = useContext(PaginationContext)
-  const [height, setHeight] = useState(0)
-  const ref = useRef()
+  const [height, setHeight] = useState<number>(0)
+  const [headerHeight, setHeaderHeight] = useState<number>(0)
+  const [rowHeight, setRowHeight] = useState<number>(0)
+  const ref = useRef<HTMLDivElement>()
+  const pagedTableHeaderRef = useRef<HTMLTableSectionElement>()
+  const pagedTableBodyRef = useRef<HTMLTableSectionElement>()
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (headerHeight === 0 && pagedTableHeaderRef?.current) {
+      const calculatedHeaderHeight =
+        pagedTableHeaderRef.current.clientHeight ?? 0
+
+      if (calculatedHeaderHeight !== headerHeight) {
+        setHeaderHeight(calculatedHeaderHeight)
+      }
+    }
+  })
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (rowHeight === 0 && pagedTableBodyRef?.current) {
+      const calculatedRowHeight =
+        pagedTableBodyRef.current?.children?.[0].clientHeight ?? 0
+
+      if (calculatedRowHeight !== rowHeight) {
+        setRowHeight(calculatedRowHeight)
+      }
+    }
+  })
 
   // this makes sure that the table is always filling it's parent container
   useEffect(() => {
@@ -274,8 +301,8 @@ const PagedTable: FC<Props> = ({result, properties}) => {
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   const size = useMemo(() => {
-    return measurePage(result, offset, height)
-  }, [result, offset, height])
+    return measurePage(result, offset, height, headerHeight, rowHeight)
+  }, [result, offset, height, headerHeight, rowHeight])
   const tables = useMemo(() => {
     return subsetResult(result, offset, size, properties.showAll)
   }, [result, offset, size]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -285,8 +312,8 @@ const PagedTable: FC<Props> = ({result, properties}) => {
   }, [size]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    setMaxSize(measurePage(result, 0, height))
-  }, [height, result]) // eslint-disable-line react-hooks/exhaustive-deps
+    setMaxSize(measurePage(result, 0, height, headerHeight, rowHeight))
+  }, [result, height, headerHeight, rowHeight]) // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     setPage(1)
@@ -300,7 +327,13 @@ const PagedTable: FC<Props> = ({result, properties}) => {
 
   const inner =
     !!size &&
-    tables.map((t, tIdx) => <InnerTable table={t} key={`table${tIdx}`} />)
+    tables.map((t, tIdx) => (
+      <InnerTable
+        table={t}
+        key={`table${tIdx}`}
+        pagedTableRefs={{pagedTableHeaderRef, pagedTableBodyRef}}
+      />
+    ))
 
   return (
     <div className="visualization--simple-table--results" ref={ref}>