I just discovered Javascript callbacks, which are awesome for speeding up my app by saving round trips to the server and make functionality possible that would be unusably slow otherwise.
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.
Is this the best way to do this? Or is there some way to have my python code directly set the value of a Javascript variable without using this hidden div workaround?
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 html.Div though.
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. 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!
