dcc.Loading graph runs callback function every single time

Dash Python
1

I have a dcc.Graph component that is wrapped around dcc.Loading.

layout = html.Div([

            dcc.Loading(
                id = "map--load",
                type = "default",
                className = "map-load",
                fullscreen=False,
                children=dcc.Graph(id="map-graph1", className="map-graph1"),
            ),

           dbc.Button(id='cbutton')

])

The graph component is a scattermapbox and every time a user interacts with the map, for ex. to zoom, it runs the callback which is time consuming as it has several operations and function calls.

This results in poor user experience as user sees the loading bar for 20-odd seconds when they zoom in/out. Here’s the callback:

@application.callback([

                          Output("map-graph1", "figure")

                      ],
                      [

                          Input("cbutton", "n_clicks"),
                          Input("map-graph1", "relayoutData")

                      ],
                 
             )
def update_graph(n_clicks, mapdata):

       if n_clicks:
           # set of operations 

       return figure

The user has clicked the button in the past, so if condition evaluates as True. How do I prevent this callback from running every time there is a interaction with the map?

2 Likes
2

Hi @keval

You can use ctx.triggered_id to see which input triggered the callback. See more information here:

1 Like
3

Why do you need

Input("map-graph1", "relayoutData")

if you don’t want to fire the callback on Zoom/Relayout?

4

I need to adjust zoom settings. There are certain operations in the callback that I don’t want to run.

I ended up using ctx.triggered to check for what’s changed as @AnnMarieW suggested.

1 Like