How to correctly use @app.callback function?

Dash Python
1

I am using Dash to display several data sets that are connected to another. When the user clicks on a point in the main plot the three sub plots are changed accordingly as is shown in this gif:

demo
demo1392×861 503 KB

This is done using the @app.callback function like this:

@app.callback(
    Output('mesh', 'figure'),
    [Input('overview', 'clickData')])
def update_figure(clickData):
    selected_Re = clickData['points'][0]['x']
    curve_number = clickData['points'][0]['curveNumber']
    trace_name = forces_dict.keys()[curve_number]
    return {
       'data': getMeshTraces(trace_name,selected_Re),
       'layout': go.Layout(
            title='Mesh study for Re = '+str(selected_Re)+' ('+trace_name+')',
            xaxis={'title': 'No. of faces'},
            yaxis={'title': selected_force},
            hovermode='closest'
        )
    }

Although this seems to work fine, when starting the app it throws an type error that the 'NoneType' object has no attribute '__getitem__' . I believe this is caused because in the beginning no point is selected and thus the variable clickData is empty. However when I tried to prevent this error by putting everything in def update_figure(clickData): inside an if statement

if clickData is not None:

this actually broke the functionality and the app is not working anymore. Alternatively I also tried to put everything inside a try: statement, but that yielded the same result. It seems like update_figure is only evaluated once when the app is started and the result of the if or try statement is then seen as static.

How can I clean up my code, i.e. getting rid of the error message and still remain the functionality that it has right now?

2

This might be a helpful read for you: clickData for multiple plots