Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

python - Plotly Dash - Pattern Matching Callbacks Not Working Properly

0 votes
397 views
in Technique[技术] by (71.8m points)

python - Plotly Dash - Pattern Matching Callbacks Not Working Properly

here is some sample code that i have been trying to run from plotly dash's 'pattern matching callbacks examples page'. For the life of me, i cannot see what is wrong - the only error i get in the browser is Syntax Error - unexpected end of JSON input. I can see that the problem only occurs when i try to register the last callback with the pattern matching syntax. If it helps, I am using DjangoDash, so i can integrate dash with Django. My code is below: Thanks!

import dash
import dash_core_components as dcc
import dash_html_components as html
from django_plotly_dash import DjangoDash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State, MATCH, ALL
from dash.exceptions import PreventUpdate
from django_dash.app import app



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



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



@app.callback(
    Output({'type': 'dynamic-output', 'index': MATCH}, 'children'),
    [Input({'type': 'dynamic-dropdown', 'index': MATCH}, 'value')],
    [State({'type': 'dynamic-dropdown', 'index': MATCH}, 'id')]
)
def display_output(value, id):
    return html.Div('Dropdown {} = {}'.format(id['index'], value))

Javascript Console Error in Chrome:

dash_renderer.min.js:20 SyntaxError: Unexpected end of JSON input
    at dash_renderer.min.js:20
Gn @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
li @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
za @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
za @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
Sa @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
observer @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
za @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
Promise.then (async)
uu @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
t @ dash_renderer.min.js:20
notify @ dash_renderer.min.js:20
p @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
dispatch @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
tryCatch @ polyfill.min.js:1
invoke @ polyfill.min.js:1
t.<computed> @ polyfill.min.js:1
Ho @ dash_renderer.min.js:20
a @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
(anonymous) @ dash_renderer.min.js:20
value @ dash_renderer.min.js:20
value @ Location.react.js:104
value @ dash_bootstrap_components.min.js:31
onClick @ dash_bootstrap_components.min.js:31
ki @ react-dom.production.min.js:176
ji @ react-dom.production.min.js:13
mi @ react-dom.production.min.js:13
lf @ react-dom.production.min.js:13
wi @ react-dom.production.min.js:187
Kd @ react-dom.production.min.js:32
pc @ react-dom.production.min.js:32
Wf @ react-dom.production.min.js:34
(anonymous) @ react-dom.production.min.js:236
uf @ react-dom.production.min.js:15
Qd @ react-dom.production.min.js:42
sc @ react-dom.production.min.js:41
unstable_runWithPriority @ react.production.min.js:25
Da @ react-dom.production.min.js:60
mk.Events.current @ react-dom.production.min.js:236
Ei @ react-dom.production.min.js:41
Show 152 more frames
question from:https://stackoverflow.com/questions/65849499/plotly-dash-pattern-matching-callbacks-not-working-properly

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

57.0k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...