plotly / plotly/react-plotly.js

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

Open
#243 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.1k
Forks
138
Avg merge
3d 2h
Merged PRs (30d)
4

Description

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?

Contributor guide

No contributing guide indexed for this repository

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 reproducing the reported case with the 100-trace sample and compare changing one trace with changing all traces. Inspect the Plot component's data and revision update path alongside the referenced react-plotly.js and Plotly.js documentation; done requires establishing whether single-trace redraw is supported and documenting or fixing the observed behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
data-visualization, frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.