Linking a legend restyle callback to another Graph component

Dash Python
1

Hello,

I’ve recently been exploring dash as a tool for displaying oceanographic model data. What I’d like to do is have 2 Graph components, one a scattergl and one a scattermapbox, both of which update when daterangepicker component is changed. That part is straightforward.

The data from both graphs is from the same pandas dataframe. What I’d like to do is select a legend entry on the scattergl , which causes a trace to vanish, and have the corresponding trace on the scattermapbox to also vanish.

I’ve gotten his to work for small datasets, using the traces opacity property in a restyle callback, but I was wondering if there was a more efficient way to do this. For larger data-sets the scattermapbox takes a long time compared to the scatergl object. i.e. the scattergl updates quickly but the scattermapbox takes 20-30 seconds.

I’m returning entire figure object structure via the callback, which seems to update the entire figure. Is it possible to see the object properties of a Graph more directly in a callback? i.e just toggle visibility on and off in a scattermapbox graph?

Thanks for any guidance,
Eli

2

Hi @imcslatte welcome to the forum! You cannot (yet?) modify directly one attribute of a plotly figure in a dcc.Graph but there are several possible strategies to accelerate this. It would be interesting to know where the 25-30 seconds are spent to know what is the bottleneck: is it the exchanges between server and client ? (are you running the app locally or on the cloud?) Is these the plotly graph_objects / plotly express validations ? (to know this you would typically compare the rendering time between passing a figure as a dict - i.e. no validation - and using graph_objects methods_. Or is it just the rendering of the figure? (to know this you would create the figure objects inside a Jupyter notebook, and run fig.show in a separate cell to see how much time it takes). For the two first possibilities (client/server or validations), it can help to keep a dcc.Store with a dict of your scattermapbox figure, and two write two client-side callbacks (in Javascript, see https://dash.plot.ly/performance), one for updating the dcc.Store following a restyle event of your first figure, and the second one to pass the updated dict to the second figure.