Hi,
I am facing difficulty with callbacks on properties of dcc.Graph. The callbacks are not getting triggered at all
Following is the layout
layout = html.Div([
dcc.Loading(
[dbc.Row(
[
dbc.Col([
html.H6(children='Select Project', style={'textAlign': 'center'}),
dcc.Dropdown(id='project_id')
]),
dbc.Col([
html.H6(children='Select GT Version', style={'textAlign': 'center'}),
dcc.Dropdown(id='insert_id', disabled=True)
])
],
id='data_filters',
style={'padding-top': 10}
)], fullscreen=False
),
dcc.Loading(
[dbc.Row(
[
dbc.Col([
html.H6(children='Select Weather', style={'textAlign': 'center'}),
dcc.Dropdown(id='weather_condition', multi=True, disabled=True,
options=[
{'label': 'snow', 'value': 'snow'},
{'label': 'rain', 'value': 'rain'},
{'label': 'fog', 'value': 'fog'},
{'label': 'cloud', 'value': 'cloud'},
{'label': 'sleet', 'value': 'sleet'},
{'label': 'clear', 'value': 'clear'},
{'label': 'all', 'value': 'all'}], value='all')
]),
dbc.Col([
html.H6(children='Select Time', style={'textAlign': 'center'}),
dcc.Dropdown(id='time_condition', multi=True, disabled=True,
options=[
{'label': 'dawn', 'value': 'dawn'},
{'label': 'day', 'value': 'day'},
{'label': 'dusk', 'value': 'dusk'},
{'label': 'night', 'value': 'night'},
{'label': 'all', 'value': 'all'}], value='all')
])
]
)], fullscreen=False
),
dbc.Row(id='filter-geo-dist-separator', style={'padding-top': 10}),
dcc.Loading(
html.Div(
[
html.H6('Geographical Distribution of Videos'),
html.Iframe(id='map', width='100%', height='600px', hidden=True)
], className='container', id='geo_dist'
)
),
dcc.Loading(
[dbc.Row(
[
dbc.Col([
dcc.Dropdown(
id="video_id_input", disabled=True
)
], width=4),
],
id='video_selector',
style={'padding-top': 10}
)], fullscreen=False
),
dbc.Row(
[
dbc.Col(dbc.Button('Previous', id='previous-image', color='success'),
width=.75),
dbc.Col(dbc.Button('Next', id='next-image', color='info'), width=1),
dbc.Col(dbc.Label(id='frame_id', color='primary', size='lg', align='start'),
width=.5)
],
id='image-navigate-button-row',
style={'padding-top': 10}
),
dbc.Row(id='button-image-separator', style={'padding-top': 10}),
# html.Button('Next', style='primary', id='next-image'),
html.Div(
id='object-image',
className='container',
style={'background-image': '',
'background-size': 'contain', 'background-repeat': 'no-repeat',
'background-position': 'center', 'max-width': '1920px',
'max-height': '1080px'}
),
html.Div(
html.Pre(id='lasso', style={'overflowY': 'scroll', 'height': '100px'}),
className="three columns"
),
# dbc.Row(
# html.Div(
dbc.Row(
[dcc.Graph(
id='graph_map',
figure={
'data': [{'type': 'scattermapbox'}],
'layout': {
'mapbox': {
'accesstoken': (
'pk.eyJ1IjoiYW51Ymhhdi1uZXRyYSIsImEiOiJjazNmcW9zOGM' +
'wNWlrM2xubjN5bHdqYmVrIn0.nXp3hT-p1dNcjx8BrGiTrA'
)
},
'margin': {
'l': 0, 'r': 0, 'b': 0, 't': 0
},
}
}
)]),
# )
# ),
html.Div(id='dummy', style={'display': 'none'})
])
Following is my sample callback function:
@app.callback(Output('lasso', 'children'),
[Input('graph_map', 'clickData')])
def check_callback1(selectedData):
style = {'overflowY': 'scroll', 'height': '100px'}
return []
This callback is getting triggered only on page load but not on clicking the data points on the graph once the page loads. Could you please help?
Note: Callbacks on all o ther functions are working just fine