influxdata / influxdata/giraffe

Page Scroll leads to misplaced datapoint tooltip/popups

Open
#293 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
189
Forks
33
Avg merge
3d 15h
Merged PRs (30d)
4

Description

Detected in PR #280 but it appears to apply generally

### Use Case

Learning Giraffe with React, plots created to the same page are stacked on top of each other. This might also be a layout for a mobile device. There is a need to scroll down the page from one plot to the next. Then hover on datapoints to view the tooltip/popup.

I've saved a project illustrating this here. https://github.com/karel-rehor/giraffe-test

### Expected Behavoir

That whenever a datapoint in a plot is hovered the tooltip/popup will appear next to the pointer in the plot.

### Observed Behavior

As the page is scrolled the datapoint tooltip/popups are no longer aligned with the pointer location, and may even disappear all together, appearing at the very bottom of the page, which may be below the viewport frame.

### Screencast

![GiraffeScroll01](https://user-images.githubusercontent.com/25881301/94261825-cbbf9700-ff32-11ea-8998-98a2b4965236.gif)

### Note

I was not sure about the importance of this issue, since I've yet to come across a production React application that uses scrolling of the entire page and I assumed that most React applications would limit the layout to the viewport dimensions. But after discussions with Vlada, it was decided that this issue could be raised.

Contributor guide

Open the contributing guide

Research direction

Start with the linked giraffe-test reproduction and reproduce the tooltip behavior after scrolling the page. Review the behavior noted in PR #280, then verify that datapoint tooltips remain next to the pointer and visible in the viewport after scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.