PlotlyEditor handleUpdate mutates inputs instead of following unidirectional data flow

Due to the way the editor is wired to depend on the graphDiv DOM element from react-plotly.js, handleUpdate is mutating the data/layout, and then uses onUpdate as a “something changed” flag. So, it’s essentially just bypassing the React render loop altogether by flowing some data mutations directly back to the embedded Plotly inside react-plotly.js.

What it should be doing is using something like immutability-helper to create an updated immutable copy of data/layout, and then send back those changes out as values to the onUpdate callback. The callback would then update the higher state, and those new changes would flow back down into the data & layout props of both the Plot and PlotlyEditor components.

[nicolaskruchten]

I’m definitely not dismissing immutability, I’m working hard to promote it and we’re making changes to plotly.js to use it! 😃

That said, copying large arrays is much slower than “not exactly the same” … Per https://jsperf.com/copy-large-array/1 for me the slice-and-push operation runs at ~60 ops/sec and the push-only runs at ~30,000,000 ops/sec.

[nicolaskruchten]

Once #384 settles down, it will be easier to resolve this (and #212, which was already intended to do this!) as per https://github.com/plotly/react-chart-editor/pull/384#discussion_r172730087