Can't update chart on different data source

[cansu-aksu]

Hi,

After creating a chart, with a function, I change the data source and source options but the chart doesn't update even if I use revision or datarevision as you mentioned in the docs but when I change a trace, it gets updated without facing any issues. Also, I haven't been able to use Plotly.newPlot or Plotly.react as well to create a new chart even though it does not throw an error.

Is this a known issue? If it is, what might be causing this? I would appreciate if you can give me an example.

import plotly from 'plotly.js/dist/plotly';
import PlotlyEditor from 'react-chart-editor';
function ChartPane({ chartData, onUpdate }) {
  const { data, sourceOptions, sources, frames, layout } = chartData;
  return (
    <div className="chart-container bp3-dark">
      <PlotlyEditor
        data={data}
        config={config}
        layout={layout}
        frames={frames}
        plotly={plotly}
        onUpdate={onUpdate}
        dataSources={sources}
        dataSourceOptions={sourceOptions}
        useResizeHandler
        debug
        advancedTraceTypeSelector
        responsive
      />
    </div>
  );
}

[nicolaskruchten]

I think I'm going to need a bit more context and/or a reproducible example here :)

Are you changing the identity or just the contents of sources and/or sourceOptions ?

[cansu-aksu]

Thanks for answering,

Yes, I change the contents of sources and sourceOptions both but I don't quite understand what identity really means. Can you explain it more?

Also what I'm really trying to do is, while using the same traces, update the chart with the new source and sourceOptions. So I need the data and layout to get updated as well according to the new source and sourceOptions.

[nicolaskruchten]

If you just change the contents of e.g. sources then the Editor won't know that they've changed because the top-level sources object has the same identity as the one that the Editor is currently rendering (as verified by a === shallow equality check)... This is a pretty standard React pattern and more information can be found here: https://reactjs.org/docs/update.html

[cansu-aksu]

Sorry for the late answer,

This repo contains an example of the situation that I'm having
https://github.com/cansu-aksu/react-chart-editor-example

Here, when the button at left top is clicked, the data, layout and frames are passed the same; sources and sourceOptions are updated. Initially the chart does not get updated but when the trace is changed , it gets updated on UI. How can I make the data and layout get updated as well according to the new sources and sourceOptions without changing the trace and see the new chart? @nicolaskruchten

[mcsearchin]

@nicolaskruchten Any updates on this? I have independently arrived at the same need for this functionality. Basically built out the same example app as @cansu-aksu and I'm seeing the same results. When dataSources and dataSourceOptions are updated, I pass in brand new copies of of the objects (different identities), but I have to go change something within the editor controls to see the plot refresh. It's only when I make changes to the actual data in state that I can actually force a refresh of the plot, and as far as I can tell, this state should be managed internally.

I can see that DataSelector.updatePlot is responsible for actually constructing the data update which is eventually passed as a EDITOR_ACTIONS.UPDATE_TRACES action to the EditorControls.handleUpdate. I'm wondering if you can recommend a way to do that same thing when dataSources change.

Thanks for your help. This library has been immensely useful. I'm just struggling with this one piece of functionality.

[nicolaskruchten]

I dug into this a bit this afternoon... The short answer is that indeed, updating dataSources and dataSourceOptions doesn't actually update the chart. It updates the data sources that are available to the editor for injection into the figure but not the figure itself. This is outside the responsibility of the editor proper. Every time your code updates the dataSources, it must then walk the figure object yourself and update the data vectors therein. The code that used to do this in the async example we had before was here: 71323da#diff-15689f7c88897123f86b341be3c30311L105

This example worked for a while and then we made some change that broke it and because we didn't have time to fix it, we just removed it. Most of the action happens in the dereference function which lives here https://github.com/plotly/react-chart-editor/blob/master/src/lib/dereference.js

Hopefully this is enough of a thread to pull on to unravel things! This pattern does work, as it's what powers https://chart-studio.plot.ly/create (wherein you can definitely edit the data in the grid and have the figure update) but that specific part of the code isn't open-source at the moment.

[nicolaskruchten]

I should note as a PS that part of the reason we put this updating process outside the scope of the editor is that architecturally, this logic is sort of bound up with various design choices around what to do about situations where a data source that is used in the figure is no longer in the set of data sources being provided to the editor... in Chart Studio we just don't allow this, but this check happens outside the editor i.e. if you try to delete a column that's in use in a figure the containing workspace just doesn't let you. Maybe some implementations would allow this and just remove those bits of the figure or something.

[Srinath516]

Any update on this issue? Chart is not updating even after updating graph data. Please suggest the solution.

[ftkvyn]

Hello, any update on this? Is it going to change anytime soon? If no - is there maybe a way to force the sources update or to update a trace?

[alexmojaki]

Here's how I solved this generically: https://github.com/gristlabs/custom-charts-widget/blob/ac917e964ffda3a86e22e01f19e4ce80f709f1b5/src/App.js#L20