perf: TableGraphTable: tweak rendering internal state

fields that are often re-updated but rarely change value were moved out of react state
and into internal component state. changing these values won't force re-renders.

CHANGELOG.md

@@ -28,6 +28,7 @@
 1. [17384](https://github.com/influxdata/influxdb/pull/17384): Reuse slices built by iterator to reduce allocations
 1. [17404](https://github.com/influxdata/influxdb/pull/17404): Updated duplicate check error message to be more explicit and actionable
 1. [17515](https://github.com/influxdata/influxdb/pull/17515): Editing a table cell shows the proper values and respects changes
+1. [17521](https://github.com/influxdata/influxdb/pull/17521): Table view scrolling should be slightly smoother
 
 ### UI Improvements
 

ui/src/shared/components/tables/TableGraphTable.tsx

@@ -57,8 +57,6 @@ type Props = OwnProps & InjectedHoverProps
 
 interface State {
   timeColumnWidth: number
-  hoveredColumnIndex: number
-  hoveredRowIndex: number
   totalColumnWidths: number
   shouldResize: boolean
 }
@@ -69,13 +67,21 @@ class TableGraphTable extends PureComponent<Props, State> {
     timeColumnWidth: 0,
     shouldResize: false,
     totalColumnWidths: 0,
-    hoveredRowIndex: NULL_ARRAY_INDEX,
-    hoveredColumnIndex: NULL_ARRAY_INDEX,
   }
 
+  protected hoveredColumnIndex: number
+  protected hoveredRowIndex: number
+
   private gridContainer: HTMLDivElement
   private multiGrid?: MultiGrid
 
+  constructor(props) {
+    super(props)
+
+    this.hoveredRowIndex = NULL_ARRAY_INDEX
+    this.hoveredColumnIndex = NULL_ARRAY_INDEX
+  }
+
   public componentDidUpdate() {
     if (this.state.shouldResize) {
       if (this.multiGrid) {
@@ -217,9 +223,8 @@ class TableGraphTable extends PureComponent<Props, State> {
     const {
       transformedDataBundle: {sortedTimeVals},
     } = this.props
-    const {hoveredColumnIndex} = this.state
     const {hoverTime} = this.props
-    const hoveringThisTable = hoveredColumnIndex !== NULL_ARRAY_INDEX
+    const hoveringThisTable = this.hoveredColumnIndex !== NULL_ARRAY_INDEX
 
     if (!hoverTime || hoveringThisTable || !this.isTimeVisible) {
       return {scrollToColumn: 0, scrollToRow: -1}
@@ -266,10 +271,9 @@ class TableGraphTable extends PureComponent<Props, State> {
 
       onSetHoverTime(new Date(hoverTime).valueOf())
     }
-    this.setState({
-      hoveredColumnIndex: +dataset.columnIndex,
-      hoveredRowIndex: +dataset.rowIndex,
-    })
+
+    this.hoveredColumnIndex = +dataset.columnIndex
+    this.hoveredRowIndex = +dataset.rowIndex
   }
 
   private handleMouseLeave = (): void => {
@@ -278,10 +282,9 @@ class TableGraphTable extends PureComponent<Props, State> {
     if (onSetHoverTime) {
       onSetHoverTime(0)
     }
-    this.setState({
-      hoveredColumnIndex: NULL_ARRAY_INDEX,
-      hoveredRowIndex: NULL_ARRAY_INDEX,
-    })
+
+    this.hoveredColumnIndex = NULL_ARRAY_INDEX
+    this.hoveredRowIndex = NULL_ARRAY_INDEX
   }
 
   private calculateColumnWidth = (columnSizerWidth: number) => (column: {
@@ -361,9 +364,8 @@ class TableGraphTable extends PureComponent<Props, State> {
       onSort,
       properties,
     } = this.props
-    const {hoveredRowIndex, hoveredColumnIndex} = this.state
     const {scrollToRow} = this.scrollToColRow
-    const hoverIndex = scrollToRow >= 0 ? scrollToRow : hoveredRowIndex
+    const hoverIndex = scrollToRow >= 0 ? scrollToRow : this.hoveredRowIndex
 
     return (
       <TableCell
@@ -376,7 +378,7 @@ class TableGraphTable extends PureComponent<Props, State> {
         hoveredRowIndex={hoverIndex}
         properties={properties}
         resolvedFieldOptions={resolvedFieldOptions}
-        hoveredColumnIndex={hoveredColumnIndex}
+        hoveredColumnIndex={this.hoveredColumnIndex}
         isFirstColumnFixed={this.fixFirstColumn}
         isVerticalTimeAxis={this.isVerticalTimeAxis}
         onClickFieldName={onSort}