Callback gets activated without selection in Plotly Dash

Question

I am creating a dashboard with Plotly Dash but I am having some trouble using the callbacks.

Firstly I don't understand completely the difference between using 'value', 'options' or 'children' and how many more options are there for the input/output calls. Ex:

@app.callback(
    Output("output", "children"),
    Input("num_exp", "value"),
)

Secondly, although the dropdown works fine after I select an option, at the beginning when running the code it already gives this error returning the 'None' selection. I don't get why this happens since I thought the callback was just activated when actually selecting something in the dropdown.

Any help would be useful :) Thanks!

Answer 1

Ok, your callback as shown in the error message needs to have an Input. Right now, it doesn't, so the code thinks the function parameter dd_properties is None. You then try to use that to index into a list or something, and it breaks. That's your KeyError.

The difference between the properties (props) you use (ex. value, children, etc.) is what part of the component you are targeting. So, you could have something like this

html.Div(
    id='my-id',
    children='This is my favorite color',
    style=dict(color='blue'),  # no, yellooooooooow
)

You can have a callback output its value to the children prop by setting up your callback with Output('my-id', 'children'), or you can have it output to the style property with Output('my-id', 'style'). The same works for Input, and what prop triggers the callback. For a dropdown, if the value prop from the component is used (Input('my-dropdown', 'value')), then the callback will run when someone makes a selection in the dropdown menu. However, if the options prop is used, then the callback runs when the list of options in the dropdown changes, perhaps as a result of another callback which output to the options prop (resulting in chained callbacks).

Answer 2

The way I solved this was by using the n_clicks variable within my submit button and set it to 0 (n_clicks=0) inside the actual callback funtion i added an if statement to return an empty figure:

if n_clicks == 0:
        return empty_figure

and this was my code for the empty figure:

empty_figure = go.Figure()
empty_figure.update_layout(plot_bgcolor=app_color["graph_bg"], paper_bgcolor=app_color["graph_bg"],
                          yaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = app_color["graph_line"])),
                          xaxis = dict(showgrid=False, zeroline=False, tickfont = dict(color = app_color["graph_line"])))

then, on each graph, the input was set to

Input('submit-button', 'n_clicks')

and I passed the actual input value as a State:

State('input-on-submit', 'value')

hope this helps, good luck!