✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Output not shown correctly with pattern-matching callbacks

Hi all,

I’m new to Plotly Dash so I wanted to run the examples on the documentation. I have some problems when runnning pattern-matching callbacks examples. This one is from “Simple example with ALL”:

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

app = dash.Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    html.Button("Add Filter", id="add-filter", n_clicks=0),
    html.Div(id='dropdown-container', children=[]),
    html.Div(id='dropdown-container-output')
])

@app.callback(
    Output('dropdown-container', 'children'),
    Input('add-filter', 'n_clicks'),
    State('dropdown-container', 'children'))
def display_dropdowns(n_clicks, children):
    new_dropdown = dcc.Dropdown(
        id={
            'type': 'filter-dropdown',
            'index': n_clicks
        },
        options=[{'label': i, 'value': i} for i in ['NYC', 'MTL', 'LA', 'TOKYO']]
    )
    children.append(new_dropdown)
    return children

@app.callback(
    Output('dropdown-container-output', 'children'),
    Input({'type': 'filter-dropdown', 'index': ALL}, 'value')
)
def display_output(values):
    return html.Div([
        html.Div('Dropdown {} = {}'.format(i + 1, value))
        for (i, value) in enumerate(values)
    ])


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

Error output reads:

app.run_server(debug = True)
Dash is running on http://127.0.0.1:8050/

 * Serving Flask app "__main__" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
An exception has occurred, use %tb to see the full traceback.

SystemExit: 1

C:\Users\93cha\anaconda3\envs\srt\lib\site-packages\IPython\core\interactiveshell.py:3445: UserWarning: To exit: use 'exit', 'quit', or Ctrl-D.
  warn("To exit: use 'exit', 'quit', or Ctrl-D.", stacklevel=1)

And when I call traceback:

%tb
Traceback (most recent call last):

  File "<ipython-input-2-6f6fa5ce54d8>", line 1, in <module>
    app.run_server(debug = True)

  File "C:\Users\93cha\anaconda3\envs\srt\lib\site-packages\dash\dash.py", line 1717, in run_server
    self.server.run(host=host, port=port, debug=debug, **flask_run_options)

  File "C:\Users\93cha\anaconda3\envs\srt\lib\site-packages\flask\app.py", line 990, in run
    run_simple(host, port, self, **options)

  File "C:\Users\93cha\anaconda3\envs\srt\lib\site-packages\werkzeug\serving.py", line 1050, in run_simple
    run_with_reloader(inner, extra_files, reloader_interval, reloader_type)

  File "C:\Users\93cha\anaconda3\envs\srt\lib\site-packages\werkzeug\_reloader.py", line 339, in run_with_reloader
    sys.exit(reloader.restart_with_reloader())

SystemExit: 1

I googled around and some people suggested deleting debug = True in app.run_server. I tried that and it ran, but I could then see only dropdowns and no outputs.

Layout I should see:

Layout that I see (no ouput text):

I tried googling some more, and other suggested there is a problem with the Reloader (I also don’t understand what reloader does) and instead I should run app.run_server(debug = Ture, use_reloader = False)

So I tried it out. The code ran, but when I went to the web browser there was error message:

So in short, I just copied the whole official example from the doc and did no adjustments, and still it couldn’t run. I only had problems with pattern-matching callbacks, all the other callbacks ran as expected.

I’m really grateful for any support! Thank you all!

It seems that the Input for your second callback is not being recognized. You need to place the id of the Input and not at dict.

Try using the id as a string in the first output just as ‘filter-dropdown’ and then use that as the input for the second callback.

Hi, thanks for the reply! Through pattern-matching callbacks the id can receive a dictionary as input as well. And this was the exact example on the official doc so it should have worked.

I actually found out where it went wrong. As stated at the beginning of the documentation page, it only works in Dash 1.11.0 and requires dash-renderer 1.4.0 or greater. So I called conda list to check and surely enough my dash-renderer is not updated.

And now it works :smiley: !