Search code examples
pythonplotlyplotly-dash

plotly dash chained callback


This is my code

app = Dash(__name__)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Dropdown(options=['bar', 'pie'], id='dropdown', multi=False, value='bar', placeholder='Select graph type'),
    html.Div(id='page-content'),

])

@app.callback(
    Output('see1', 'options'),
    Input('url', 'search') 
)

def ex_projecKey(search):
    return re.search('project_key=(.*)', search).group(1)

@app.callback(
    Output('page-content', 'children'),
    Input('see1', 'options'),
    Input('dropdown', 'value')
)

def update_page(options, value):
    return f'{options}.{value}'

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

I receive something URL and search project_key after choice dropdown menu like bar or pie

Then i receive two object (project_key, graph_type )

But two error occur

Property "options" was used with component ID:
  "see1"
in one of the Input items of a callback.
This ID is assigned to a dash_html_components.Div component
in the layout, which does not support this property.
This ID was used in the callback(s) for Output(s):
  page-content.children

Property "options" was used with component ID:
  "see1"
in one of the Output items of a callback.
This ID is assigned to a dash_html_components.Div component
in the layout, which does not support this property.
This ID was used in the callback(s) for Output(s):
  see1.options

first callback Output see1, options

Than second callback Input receive that options inst it?


Solution

  • You get an error because you did not define see1 in the layout. I don't know which type of object you want see1 to be, but I think if it is juste to pass data bewteen callback, you should use dcc.Store. So you would call it with Output('see1', 'data') instead of Output('see1', 'options').

    Full code :

    from dash import dcc, html, Dash, Input, Output
    import re
    
    app = Dash(__name__)
    
    app.layout = html.Div([
        dcc.Location(id='url', refresh=False),
        dcc.Dropdown(options=['bar', 'pie'], id='dropdown', multi=False, value='bar', placeholder='Select graph type'),
        html.Div(id='page-content'),
        dcc.Store(id="see1", storage_type='memory'), # define see1 in layout as dcc.Store component
    ])
    
    @app.callback(
        Output('see1', 'data'), # use 'data' property
        Input('url', 'search')
    )
    
    def ex_projecKey(search):
        return re.search('project_key=(.*)', search).group(1)
    
    @app.callback(
        Output('page-content', 'children'),
        Input('see1', 'data'),
        Input('dropdown', 'value')
    )
    
    def update_page(options, value):
        return f'{options}.{value}'
    
    if __name__ == '__main__':
        app.run_server(debug=True, port=4444)