Best practice for adding/removing series/data dynamically

[mulgurul]

Hi

I'm enjoying the uPlot graph API and the React wrapper, thank you for the nice work.

I have a need for adding/deleting series to a graph dynamically, and I'm wondering what the best approach would be.
I can update the data and option props on the component which seems to re-render the graph, but it also resets things like graph selection in the legend, and often i get uPlot errors "cannot read .. of undefined" which seems to be related to axis generation . The wrapped uPlot may be very sensitive to what is added first; series og data, or maybe these errors is related to some other problem down the pipe.

In add/del series example it is done using the methods on the uPlot object, .addSeries .delSeries but then i have to manage the state separately to know my current series. And it seems to break the React way of using state changes for auto updating the component. But updating the option and data props seems to cause full delete/recreate of the graph which is not optimal. So I'm in doubt how to work this one out?

Some advice here would be highly appreciated.

Thanks from Peter, Denmark

[skalinichev]

Hi there,

Sorry for the late reply, was a bit busy recently.
Regarding the question - the recommended way to dynamically update options is to change the props.
Though, as you have already noticed, it doesn't always provide the optimal results, since in that case the plot is re-created anew.
As a w/a you can pass some default options to the wrapper and never change it afterwards. Instead try using uPlot instance methods directly (e.g. addSeries/delSeries). Since in that case options prop will never change, the plot will not be recreated.
Ideally we should be tracking series changes and using those API methods to reflect the changes. Though it doesn't look that easy to implement at the first sight to me. Anyway patches are welcomed!

As for the errors - I couldn't reproduce it. If you have a minimally reproducible test-case, feel free to share it, I will take a look.

[mulgurul]

Hi and thank you for not so late reply:-)

Yes I have tried both using graph props and API, but I get errors when adding or deleting series/data in both cases.
ATM. I'm focusing on react/props updating the option and data props through useEffect handlers.
It kind of works but adding or removing series/data after first series keeps throwing:

Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at getOuterIdxs (uPlot.esm.js:4081:1)
    at uPlot.esm.js:4101:1
    at Array.forEach (<anonymous>)
    at drawSeries (uPlot.esm.js:4092:1)
    at uPlot.esm.js:4762:1
    at Array.forEach (<anonymous>)
    at _commit (uPlot.esm.js:4762:1)

When I close the react error layer, then the graph seems to have been drawn correctly according to the update.
I have debugged the flow and data/options seems correct, but it might have to do with the order/timing of the changes. It might need it in a particular order?

I'll try to see if I can make a stand alone repro of the problem. It would also help me developing extra features we need.

Best regards from Peter

[mulgurul]

I have succeeded recreating the error I encount when using prop changes.

Repro

In line 159 you can in-comment the second y series data array which solves the error.
So it seems it is throwning this whenever theres fever data series than option series elements. This indicates that data needs to be added first and then series definitions.
In my app the updates happens in some useEffect methods, the code first create the series definintion and shows it in other layout. Then it retrieves data async which causes the data array to be updated with the new series data element.

It would be nice if the data element was not mandatory. The other way around seems to work, where theres more data series than series option definintion.

Maybe I can add a dummy data element as workaround.
Take a look at it and see what you think..

[skalinichev]

I see. Yeah, it seems to be working that way. You have to add data series first, option series second. When removing do the opposite: remove option series first, then data series.

As a w/a you can add an empty array, if you want to display the series when there is no data.
Having said that it still feels wrong that uPlot crashes when there is not enough data series to display. I think it should display only available data series in that case.
You can create an issue for it at https://github.com/leeoniya/uPlot/issues
Feel free to CC me, I'm also interested in what the uPlot author would say.

Btw I also saw you other comment here leeoniya/uPlot#962 I think you should re-phrase the question a bit, since there are so many problems packed in one issue, it makes it very difficult to understand. Probably that's why there is no reply yet... Maybe it would be better to make it all about the updateSeries feature w/o mentioning React and all? If we have an updateSeries by key method, we can use it in the wrappers and all the mentioned problems will be automatically resolved.

[skalinichev]

Closing then. Will return to it when/if there is API in uPlot to work with series by keys.