Comments (1)
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.
from giraffe.
Related Issues (20)
- Visualization: TableLayer: clicking on a column to sort highlights text unintentionally
- File structure: components should be organized
- Webpack: absolute file paths for imports HOT 1
- RawFluxDataTable is not visible HOT 1
- Rect: split into Heatmap and Histogram HOT 1
- Band: lower column is not rendering correctly HOT 1
- Sync-zoom multiple plots HOT 1
- SimpleTable: performance enhancement HOT 3
- SimpleTable: new data is not paginated correctly
- Giraffe: Gauge and SingleStat use a serif font
- SimpleTable: small Plot sizes render nothing even when there's data
- Visualization: Table: re-port from UI codebase without architectural changes
- Gauge value is positioned at wrong location
- Graphs origin alignment impossible
- Peer dependencies warning
- Return back bar chart from InfluxBX 1.x
- X-Y scatterplot rendering issue with newer Google Chrome versions
- Fixed legend width
- minified bundle size
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from giraffe.