How the function can regonize the correct parameter in Dash using python?

Question

I have a question about doing functions in dash using python.

Here is the code I'm studying:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div(["Input: ",
              dcc.Input(id='my-input', value='initial value', type='text')]),
    html.Br(),
    html.Div(id='my-output'),

])


@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value')
)
def update_output_div(input_value):
    return 'Output: {}'.format(input_value)


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

After the callback, we have a function "update_output_div", and a parameter named "input_value", but how the code knows that the input_value is the component_property of the component_id named "my-input? The first answer for this question was because of the order, but and in this case:

@app.callback(
    [Output(component_id='plot1', component_property='children'),
    Output(component_id='plot2', component_property='children'),
    Output(component_id='plot3', component_property='children'),
    Output(component_id='plot4', component_property='children'),
    Output(component_id='plot5', component_property='children')],
    [Input(component_id='input-type', component_property='value'),
    Input(component_id='input-year', component_property='value')],
    # REVIEW4: Holding output state till user enters all the form information. In this case, it will be chart type and year
    [State("plot1", 'children'), State("plot2", "children"),
    State("plot3", "children"), State("plot4", "children"),
    State("plot5", "children")])

# Add computation to callback function and return graph
def get_graph(chart, year, children1, children2, c3, c4, c5):

?

MarcZ · Accepted Answer · 2021-07-30 14:51:34Z

1

It respects an order :

The first Input component_property will be taken as the first argument of your function, for example :

@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input1', component_property='value1'),
    Input(component_id='my-input2', component_property='value2'),
    Input(component_id='my-input3', component_property='value3'),
    State(component_id='my-input4', component_property='value4'),
    State(component_id='my-input5', component_property='value5')
)
def update_output_div(value1, value2, value3, value4, value5):
    return func(value1, value2, value3, value4, value5)

answered Jul 30, 2021 at 14:51

MarcZ

838 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GEDS27 Over a year ago

i thought that could be because of the order, but see my edition in my question, could you help again, please?

MarcZ Over a year ago

The component_property 'value' is a common property for different components (e.g. just like the children component) - you can have N different inputs from different components, all of them inputting their component_property='value'. Following the order of your callback statement : your 1st function argument 'chart' receives 'value' input from component_id = 'input_type'; your 2nd function argument 'year' receives 'value' input from component_id = 'input_year'... the same for the States

Collectives™ on Stack Overflow

How the function can regonize the correct parameter in Dash using python?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related