Visualization: TableLayer: scrolling is sticky and unresponsive
TCL735 opened this issue · 1 comments
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
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.