Plotly.react

[rreusser]

Seeking feedback from @etpinard @alexcjohnson @bpostlethwaite on the best location for Plotly.react. I can imagine a few possibilities:

1. it should go in plotly.js and we just have to add a couple lines of code to this repo to make use of it.

• Pro: react-like functionality usable from any library
• Con: more code in plotly.js

2. it goes in this repo. It computes a diff (maybe using the schema to figure out what to do about array data, with optional flag to apply immutable-like reference-change logic to simplify diff computation) and sends the result to the relevant plotly.js API methods.

• Pro/con: opposites of above

Unless I'm wrong, sounds like @alexcjohnson is/will be working on Plotly.react. I just wanted to confirm that's what this will link up with.

[rreusser]

@nicolaskruchten Sounds good! Alternatively, maybe it's worthwhile to add a "don't be clever" switch that tells it to replot even when Plotly.react is available (which would amount to a not-even-one-line override when checking the availability of Plotly.react).

[nicolaskruchten]

Yeah the no_cleverness flag might be a nice feature for me :)

[Nauss]

I'm using plotly.js in a React environment and I would like to add this:

• For 1., we have large datasets to display (in tens of millions of points) so, for us it would not be possible to "copy all the data". Iterators would work.
• We need to resize the plot (its containing div) quite often and this operation must be efficient.

This is just a quick remark, I'll be happy to go into more details if needed.

[rreusser]

@Nauss Thanks for the feedback!

Regarding your first point, that's the precise concern. The standard react-like approach is to clone everything, compare it to the new input, and apply changes. For plotly.js, that won't work for cases like yours. We've been talking about applying some heuristics instead. Specifically:

• Copy only data array references to the internal data store. Plotly has a schema so that we know whether particular entries in the input are data or non-data attributes.
• When the plot receives new input, compute a deep diff for everything except the data arrays.
• If a data array reference or length has changed, then we obviously need to update the data.
• If a data array reference has not changed, then it's a bit trickier. The best options seem:
  • an immutable mode that only checks the reference (and length, perhaps)
  • a non-immutable mode that computes a deep diff of arrays (which would take perhaps 1ms for >90% of plots)
  • a revision counter so that you can tell it when the plot has been revised and it needs, at the very least, to redraw the traces. (implemented currently, though it leads to a full newPlot instead of just indicating it needs to restyle the traces.)

As for resizing, there are perhaps a couple options. First, I added a fit prop that lets you automatically adjust the plot to the size of the parent container when the window resizes. This is a common use case, but not very general. For more general resizes, you should be able to just change the size in the layout and it will decide it only needs to execute Plotly.relayout to resize the plot—which is the best performing way to resize a plot.

Hope that addresses your concerns! Please feel free to follow up though!

[Nauss]

Thanks for the quick answer :)

• About the data, it looks good to me.
• About the resizing, it is actually a direct user interaction (not a window resizing). I would like to achieve smooth "mouse resizing" (I'm using react-rnd for the resize). It would not be a problem if the Plotly.relayout is done only at the end (i.e. mouse up).

We have a naive implementation for now but I'll try v1.0 next and come back here for a feedback.

Thanks for the great work !!

[rreusser]

@Nauss Sounds good! Just to be clear, v1.0 does do a full replot on every change. It's meeting our current need, though it might not be adequate for you until v2.0. Regarding the mouse resizing, I think there's no reason you couldn't use overflow: hidden on your panel and not pass the updated size layout until mouseup.

[swiperii]

We are trying to use react-plotly.js in our react app, which displays e.g. scatter plots of real-time production data. That is, our data series are updated with new data regularly. And without a Plotly.react method, all user interactions (zoom area, point selections, toolbar choice,...) are of course reset for each new data point.

Is there any way to avoid this with the current plotly react component? Any workaround that would allow us to add data without completely resetting the plot state?

If not, what is the current status of the Plotly.react method? Any chance that this type of scenario will be supported in the near future?

[nicolaskruchten]

@swiperii if you want to create a separate issue I'd be happy to try to help you accomplish your goals within the current framework. Most likely you'll need to handle the updates and feed the layout back to the props along with the new data points.

[nicolaskruchten]

To clarify the next steps... The Plotly.react functionality will be added to plotly.js, and progress on that can be tracked here: plotly/plotly.js#1850

Once the upstream functionality is in place, this React component will be modified to take advantage of it and we can then close this current issue :)

[swiperii]

@nicolaskruchten Thanks for your response. I have currently made my own Plotly.react method that uses add/deleteTraces, restyle and some ugly hacks to make data updates work together with zoom and selections. There are still some bugs though, so I eagerly look forward to the real thing :)

[nicolaskruchten]

Good news! The Plotly.react method is implemented in plotly.js version 1.34.0 and this React wrapper already takes advantage of it, so just upgrade plotly.js and things should be more reactive!

[AyoCodess]

is there a solution for this?. As the plot automatically re-draws when any the data object changes. i.e an x-axis data point.

[bpostlethwaite]

There is a Plotly react component that was produced from this here: https://github.com/plotly/react-plotly.js/

There is also the .react method on the vanilla plotly object.