[BUG]: `scattergl` hover is slow above 100k points

Aperta
  • Qualcosa non va?
#8,134 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
58/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
data-visualization, performance

Direzione di ricerca

Start by comparing the hover path in src/traces/scattergl/hover.js with the threshold and point-cluster tree behavior in src/traces/scattergl/constants.ts; reproduce the lag with the provided 100,000 point example and compare it with 99,999 points. Determine why the .range() call is slow with infinite or wide bounds, then verify hover remains responsive at and above the threshold.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug P3 size: 3
Description

With 100,000 or more points, hovering over a scattergl trace is much slower than with 99,999 points.

Steps to reproduce
  • Open Plotly devtools and paste the following into the browser devtools console:
let n = 100000;

Plotly.newPlot('graph', [{
  type: 'scattergl',
  mode: 'markers',
  x0: 0,
  dx: 1,
  y: Array(n).fill(0)
}]);
  • Hover over individual points and note the lag
  • Change n to 99999 and note that hover is fast
Notes
  • At TOO_MANY_POINTS (src/traces/scattergl/constants.ts), scattergl switches from a plain array to the point-cluster tree
  • The slow call is .range() in src/traces/scattergl/hover.js
  • It's very slow with infinite bounds; it also seems slower than a plain array scan when the bounds cover a large share of the points
  • Either hover.js calls .range() in a non-optimal way, or plotly/point-cluster has a performance bug
  • #8052 stops the plot from freezing, but hover is still laggy
  • Also related to #8036
Lingua principale
JavaScript
Stelle
18.4k
Fork
2.1k
Merge medio
1g 5h
PR unite (30g)
12

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di plotly/plotly.js

Tutte le issue di plotly/plotly.js

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.