Placing dcc.Graph as children to support callbacks - a bug?

Dash Python
1

I am currently trying to place appended graphs as children of a specified <div>. I am creating my graphs with

graph_div = []
for i in range(10):
    graph_div.append(html.Div(
                    children=[
                    dcc.Graph(id='igraph_{}'.format(i), figure={'data': []},className="four columns"),
                    html.Div(id="graph_{}".format(i))]))

And then using the following code to add them to the layout as seen in a few examples

        html.Div(id='container'),
        html.Div(graph_div),

And just as expected, the HTML ends up looking like

<div id="container"></div>
<div>
    <div id="igraph_0" class="four columns js-plotly-plot">
    <div class="plot-container plotly">
    <div id="igraph_1" class="four columns js-plotly-plot">
    <div class="plot-container plotly">
</div>

This causes some problems when a callback is introduced, such as

@app.callback(Output('container', 'children'),[
.
.
.

which is expected because the graphs are not children of the container.

If I understand correctly I believe the HTML should be formatted as follows

<div id="container"></div>
    <div id="igraph_0" class="four columns js-plotly-plot">
    <div class="plot-container plotly">
    <div id="igraph_1" class="four columns js-plotly-plot">
    <div class="plot-container plotly">
</div>

However, I am unable to come up with the correct syntax to end up with this parent child relationship.

Does anyone know what the trick is?

When I try something like

html.Div(id='container'), children=html.Div(graph_div)),

I end up with the following error from the callback which breaks the application. It seems that when those graphs are children, they never get created.

An invalid input object was used in an Input of a Dash callback. The id of this object is igraph_0 and the property is relayoutData. The list of ids in the current layout is [hidden-div, Signals, container]

My question stems from my example in Show and Tell - Time History Plotting with Dynamic Plots and linked X axis Zooming - #4 by squid which works fine until you remove a signal from the dropdown. Once that happens the app breaks and this issue identifies itself. Primarily because removing the signal from the drop down ends up removing the <div> which identifies the plot required for the callback - and maybe that is a problem I need to address by a different means. Further investigation shows that the combination of

        html.Div(id='container'),
        html.Div(graph_div),

and using callbacks like

@app.callback(Output('container', 'children'),[
.
.
.

creates the associated graphs twice, once in the initial layout, and again from the callback which places the graphs as children under id=container. Unlike the dash-recipes/dash-add-graphs-dynamically.py at master · plotly/dash-recipes · GitHub example which uses an empty graph (which is not a child of the container) the graphs must exist from the beginning to support the programmed callbacks.

I believe what I am trying to do should be possible - but it seems I am making a beginner’s mistake somewhere in my layout. I would appreciate any advice!