KeyError happening only in dash

Hi everyone !

So, I’m trying to do some interactive cartography in Dash (which I already did for an other purpose) but this time I’m facing a KeyError during a callback that I can’t explain.

I have two functions, the first take 4 arguments and return two dataframes. And then I use those two dataframes as arguments for the 2nd function that return the figure.

df1 , df2 = dataFunction(arg1,arg2,arg3,arg4)

figureFunction(df1,df2)

So I have 4 dcc.components to pick the correct arguments :

# setting the components : 

DropdownArg1 = dcc.Dropdown(id='CartoFRarg1',
                options=[
                    {'label': 'val1', 'value': 'val1'},
                     etc... 
                    {'label': 'valx', 'value': 'valx'},
                    ],
                value = 'val1',
                )

DropdownArg2 = dcc.Dropdown(id='CartoFRarg2',
               options=[
                    {'label': 'val1', 'value': 'val1'},
                     etc... 
                    {'label': 'valx', 'value': 'valx'},
                    ],
                value = 'val1',
                )

DropdownArg3 = dcc.Dropdown(id='CartoFRarg3',
               options=[
                    {'label': 'val1', 'value': 'val1'},
                     etc... 
                    {'label': 'valx', 'value': 'valx'},
                    ],
                value = 'val1',
                )

RadioItemsArg4 = dcc.RadioItems(id='CartoFRarg4',
                options=[
                    {'label': 'val1', 'value': 'val1'},
                     etc... 
                    {'label': 'valx', 'value': 'valx'},
                    ],

                labelStyle={'display': 'inline-block'},
            )


GraphCartoFR = dcc.Graph(
            id='figureCartoFR', 
        )

# organizing layout : 

LayoutCartoFR = html.Div([
    dbc.Row([
        dbc.Col(DropdownArg1,width={"size": 4, "offset": 1}),
        dbc.Col(DropdownArg2,width={"size": 4, "offset": 1}),
    ]),
    dbc.Row([
        dbc.Col(DropdownArg3,width={"size": 4, "offset": 1}),
        dbc.Col(RadioItemsArg4,width={"size": 4, "offset": 1}),
    ]),

    html.Hr(),
    dbc.Row(dbc.Col(GraphCartoFR,width={"size": 6, "offset": 3})),
    html.Hr(),
])

# initialise the Dash interface
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])


app.layout = html.Div([
    LayoutCartoFR,
                     ])

# callback figure :
@app.callback(
    Output('figureCartoFR', 'figure'),
    [Input('CartoFRarg1', 'value'),
    Input('CartoFRarg2', 'value'),
    Input('CartoFRarg3', 'value'),
    Input('CartoFRarg4', 'value'),]
    
)
def update_figure(arg1,arg2,arg3,arg4):
    df1,df2 = dataFunction(d_Data[arg1],arg2,arg3,arg4)
    fig = figureFunction(df1, df2)
    
    return fig

if __name__ == '__main__':
    app.run_server(debug=False)

What is happening :
The first call back works and show the figure.
If I change only the first argument : arg1 the figure is updating.
But if I change arg2, arg3 or arg4 I have a KeyError : ‘value_of_argX’ ← the value of the arg I just changed.

At this point I’m surprised because the functions work within the jupyter notebook, and it’s not an error about how I spell the Id of the components or the values in the option and it’s the same problem for arg2,arg3,arg4 so it will be very unlucky.
I continued my research and I printed in dash the columns of df1 and df2 after the datafunction. The columns is there as expected.

From there I have no clue on what can happen.

Of course I’ll share the solution if I’ll find it myself, but in the meantime I would really appreciate some help !

Please let me know if you need more informations to be able to help, and thank in advance for all who will try.

1 Like