I have some callback that uses times from hoverData of a timeseries graph to select times from some other multi-dimensional array and update another graph. I was wondering if there would be some recommendations on how to optimise performance under this scenario when running from a remote server.
This works great when I run the app locally. Running on a remote server however causes the update of the second graph to be slow due to the round-trip.
One thing I was playing with was trying to save the multidimensional array in the browser within a hidden div as explained here. The challenge I am facing is that the multi-dimensional array I need accessing data from is relatively large (>30M) so deserializing it from the hidden div within the hover callback also becomes slow for this use case.
One thing I was thinking was to try and save data from each time in this array within its own hidden div so I could access / deserialize only what I really needed within the callback (I tried to exemplify this below). The idea would be something similar to Example 2 here, but trying to avoid deserializing the full data within the callback. I’m not sure however how I would set the (dynamic) ids within the hover callback though since the Input id in the callback need to be defined upfront…
Any suggestions would be really appreciated!
Thanks
app.layout = html.Div(children=[
html.Div(
id="hidden-div",
style={"display": "none"},
),
dcc.Interval(
id="interval-component",
interval=3600 * 1000,
n_intervals=0,
),
])
@app.callback(
Output('hidden-div', 'children'),
[Input('interval-component', 'n_intervals')]
)
def set_tmp_data(value):
df = load_my_data()
children = []
for time, data in df.iterrows():
children.append(
html.Div(id=str(time), children=data.to_json(), style={"display": "none"})
)
return children