plotly / plotly/react-plotly.js

Updating single trace of many: changing `revision` prop does not improve performance (compared to redrawing all)

Offen
#243 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
1.1k
Forks
138
Ø Merge
3 T. 2 Std.
Gemergte PRs (30 T.)
4

Beschreibung

Hi, I am trying to redraw only single trace in a plot of many traces (biophysical data). I tried to follow instructions in react-plotly and plotlyjs documentation. Plot is updated but I don't see any performance improvement if I change only single element of data or all data elements, if I change revision as described in following:
https://github.com/plotly/react-plotly.js/#refreshing-the-plot
https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
Important Note: In order to use this method to plot new items in arrays under data such as x or marker.color etc, these items must either have been added immutably (i.e. the identity of the parent array must have changed) or the value of layout.datarevision must have changed.

I generate sample data 100 traces of 10000 points with:

  const data = useRef([...Array(100).keys()].map( c=> (
    { x: [...Array(10000).keys()],
      y: [...Array(10000).keys()].map( c=> c/10000.0 + Math.random()/5)
    } ) ))
  const revision = useRef(0)

Also, I change data with:

revision.current++
data.current[0].x = [...Array(100).keys()].map( v => v*100)
data.current[0].y = [...Array(100).keys()].map( c=> Math.random())
setState({...state, data:data.current, revision:revision.current})

Plot is generated using data.current for it's data prop

<Plot
data={state.data}
revision={state.revision}
...

Drawing plot containing single trace takes just a split of second, but if I had already drawn many traces and I want to redraw only single trace, it takes same time as to redraw all traces (few seconds).
Am I doing something wrong?

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne damit, den gemeldeten Fall mit dem 100-trace sample zu reproduzieren und vergleiche die Änderung eines einzelnen Traces mit der Änderung aller Traces. Untersuche den data- und revision-Aktualisierungspfad der Plot-Komponente zusammen mit der referenzierten Dokumentation zu react-plotly.js und Plotly.js; als erledigt gilt die Aufgabe, wenn festgestellt ist, ob das Neuzeichnen eines einzelnen Traces unterstützt wird, und das beobachtete Verhalten dokumentiert oder behoben wurde.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
data-visualization, frontend, performance
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

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