Access selectedData from html.Div children - graph

Question

In order to avoid displaying empty graph axes when no information is available to plot, I replaced a dcc.Graph return object with a html.Div() which gets an Output callback of either [] or [dcc.Graph(...)].
Now, I'd like to enable other actions on the selectedData (if the Div has a child Graph). Previously I could do this like:
#app.callback(Output('something', 'children'),
[Input('graph', 'selectedData')])
def do_stuff(selectedData):
pass
Now that I've changed the layout item from a dcc.Graph(...) to a html.Div([dcc.Graph(...)]), I can't figure out how to access the selectedData:
#app.callback(Output('something', 'children'),
[Input('graph_div', 'children')])
def do_stuff(children):
if len(children) > 0:
graph = children[0]
# wheres the selectedData now?
Alternatively, it might be easier if there's a way to get the Input id directly to nested dcc.Graph's id? When I try this I get an error saying no components with this id exist in the app's layout.

Answer 1

For each component, it should be possible to register a callback in Dash,
Here is a simple example which replicates what you are trying to do,
import dash
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div(id="graph-div",
children=[
dcc.Graph(
id='graph',
figure={
'data': [
{
'x': [1, 2, 3, 4],
'y': [4, 1, 3, 5],
'text': ['a', 'b', 'c', 'd'],
'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
'name': 'Trace 1',
'mode': 'markers',
'marker': {'size': 12}
},
{
'x': [1, 2, 3, 4],
'y': [9, 4, 1, 4],
'text': ['w', 'x', 'y', 'z'],
'customdata': ['c.w', 'c.x', 'c.y', 'c.z'],
'name': 'Trace 2',
'mode': 'markers',
'marker': {'size': 12}
}
],
'layout': {
'clickmode': 'event+select'
}
}
),
]
),
html.Div(id="output")
])
#app.callback(Output('output', 'children'),
[Input('graph', 'selectedData')])
def do_stuff(selectedData):
print(selectedData)
if __name__ == '__main__':
app.run_server(debug=True)
If you can post a simple re-creatable code it will be easier to debug.
Update:
If you are dynamically trying to load the component you might face the mentioned issue,
https://community.plot.ly/t/dcc-tabs-filling-tabs-with-dynamic-content-how-to-organize-the-callbacks/6377/2
One easy way to solve it would be to set this app configuration,
app.config['suppress_callback_exceptions']=True
Here is the working example,
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import pandas as pd
#
#https://stackoverflow.com/questions/57580240/access-selecteddata-from-html-div-children
#
graph_layout = dcc.Graph(
id='graph',
figure={
'data': [
{
'x': [1, 2, 3, 4],
'y': [4, 1, 3, 5],
'text': ['a', 'b', 'c', 'd'],
'customdata': ['c.a', 'c.b', 'c.c', 'c.d'],
'name': 'Trace 1',
'mode': 'markers',
'marker': {'size': 12}
},
{
'x': [1, 2, 3, 4],
'y': [9, 4, 1, 4],
'text': ['w', 'x', 'y', 'z'],
'customdata': ['c.w', 'c.x', 'c.y', 'c.z'],
'name': 'Trace 2',
'mode': 'markers',
'marker': {'size': 12}
}
],
'layout': {
'clickmode': 'event+select'
}
}
)
app = dash.Dash(__name__)
app.config['suppress_callback_exceptions']=True
app.layout = html.Div([
dcc.Dropdown(id="toggle-graph",
options=[
{'label': 'on', 'value': 'on'},
{'label': 'off', 'value': 'off'},
],
value='on'
) ,
html.Div(id="graph-div",
children=[
]
),
html.Div(id="output")
])
#app.callback(Output('graph-div', 'children'),
[Input('toggle-graph', 'value')])
def do_stuff(value):
if(value == 'on'):
return graph_layout
else:
return []
#app.callback(Output('output', 'children'),
[Input('graph', 'selectedData')])
def do_stuff(selectedData):
print(selectedData)
if __name__ == '__main__':
app.run_server(debug=True)

Answer 2

Looks like what I needed was a way to toggle the graph display rather than conditionally returning the entire graph object:
#app.callback(Output('graph', 'style'), [Input('drop-down', 'value')])
def toggle_container(dropdown_value):
if something
return {'display': 'none'}
else:
return {'display': 'block'}