Visualization: TableLayer: scrolling is sticky and unresponsive

[TCL735]

When using the TableLayer visualization, scrolling vertically is jarring. The scroll "sticks" and does not move as expected. There is a bounceback to a previous scroll position requiring the user to scroll even harder just to move the scroll position slightly.

Here is a video of the sticky and unresponsive scrolling:

Kapture.2022-08-03.at.14.42.36.mp4

[blegesse-w]

Inside TableGraphTable.tsx there is an event listener function handleHover that gets executed each time the mouse moves. In other words, as the mouse hovers over a new cell, this function gets called. handleHover receives an event parameter, which contains a dataset property. And this dataset property we get from the event has a rowIndex property. When user moves the mouse to the first row of the table, rowIndex get updated from it's initial value to 0 -- indicating user is now on the first row of the able. Then when user moves the mouse cursor to the second row of the table, handleHover event listener gets executed and updates the rowIndex to be 1. Each time handleHover runs, we also update a state hoveredColumnIndex and hoveredRowIndex to be +dataset.columnIndex and +dataset.rowIndex respectively. Movement of the mouse from one row to another fireshandleHover function, which updates the state with the dataset.rowIndex value. But because we are updating the state and the state is attached to each cell of the table, it causes the component to re-render. This re-render then executes the handleHover function once again, which ends up updating the state with the previous row index value. Again, when state is updated, each cell gets re-rendered and this time the current row mouse is pointing to gets updated with the correct index value causing the jump we see in the UI.