I have figured out a way to do what I am trying, but it seems pretty hacky, so I am wondering if there is a better alternative.
Here is my use case:
I have time series data containing an input variable and a response variable and I am using a slider to adjust how much the response variable is shifted relative to the input variable.
So, on page load (or some other event) I query my database to get the two time series, I then JSON encode that data and put it inside a hidden div. Then when the slider moves I call my JS callback, which takes the slider value as an Input and the hidden div contents as a State variable, which I then parse back into an object, slice the data as appropriate, and return the updated figure.
This sounds like the best way to do this. I believe @sjtrny is working through this in Is it possible to update just `layout`, not whole `figure` of Graph in callback? as well. The only thing to add would be to use
dcc.Store instead of
html.Div in case the “hidden div” feels too hacky. I don’t think there are any performance issues with using
The nice thing about updating a clientside store (html.Div or dcc.Store) is that other components can use this data as well like other charts or other data tables.
A flow that we imagined when writing this feature was:
app.layout as a function which embeds a dataset in
dcc.Store then updates a
data_table.DataTable directly (with a clientside callback) and then the
DataTable updates a series of graphs with
derived_virtual_data property. Then, the table is a natural UI for doing filtering & sorting of the data in the table and in the graphs without needing to write any extra Python code!
Thanks for the response. I will need to look into using
derived_virtual_data properties more, but that sounds like a very nice flow.
Also, I might see if I can get this working with transcrypt so I can stick to writing Python