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

Offen
  • Stimmt etwas nicht?
#8,134 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 2 Tagen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
58/100
Issue-Typ
Bug
Klarheit
Größtenteils klar
Aktivitätsstatus
Aktiv
Tech-Stack
javascript
Bereich
data-visualization, performance

Rechercherichtung

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.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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
Vorherrschende Sprache
JavaScript
Sterne
18.4k
Forks
2.1k
Ø Merge
1 T. 5 Std.
Gemergte PRs (30 T.)
12

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus plotly/plotly.js

Alle Issues in plotly/plotly.js

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.