influxdata / influxdata/giraffe

Spike: make hovering calculate only useful data without any loss of data

Open
#397 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

difficulty/high team/ui
Dominant language
TypeScript
Stars
189
Forks
33
Avg merge
3d 15h
Merged PRs (30d)
4

Description

As part of fixing #396 one of the attempts was to limit the calculation of the hover points. Even though this approach was reverted, it is worthwhile to explore this separately in more depth. Specifically, the comments regarding hovering and the usefulness of the calculations should be revisited.

The following comments and `const` were temporarily found in **src/utils/useHoverPointIndices.ts** before being reverted.

/************************************************************************
```* When calculating hovered points in a graph:
*
* 1. The graph is divided into sections or "bins".
* Bigger graphs (width, height), have more bins than smaller graphs.
*
* 2. All of the data points are assigned to the bins.
* When comparing the same set of data points:
* - large graphs have many bins with fewer data points per bin
* ex: 50 data points = 10 bins x 5 data points each
*
* - small graphs have fewer bins with many data points per bin
* ex: 50 data points = 2 bins x 25 data points each
*
* 3. When hovering, a typical screen size (laptop or desktop) fits around 200 rows
* in a readable font size. Any additional rows calculated will not be viewable
* on the screen. So, any additional calculation is useless because no useful
* information for the user will be viewable due to screen size.
*
* 4. Therefore, any excessively large data set does a lot of useless work and
* adversely affects browser performance.
*
* 5. Limit the total number of points in each dimension and also each bin.
* Keep in mind the considerations in 2.
*/
const TOTAL_POINTS_PER_HOVER_DIMENSION = 100_000
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading src/utils/useHoverPointIndices.ts and the context from issue #396. Review the reverted hovering comments and TOTAL_POINTS_PER_HOVER_DIMENSION assumption, then determine how to reduce unnecessary calculations without losing useful hover data. Done means the approach is defined and validated against the stated data-preservation goal.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend, performance
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.