dcc.Graph Invalid argument id passed into Div with ID

[akheng]

Thank you so much for helping improve the quality of Dash!

We do our best to catch bugs during the release process, but we rely on your help to find the ones that slip through.

Describe your context
Please provide us your environment so we can easily reproduce the issue.

• replace the result of pip list | grep dash below

dash                      1.0.2                    
dash-core-components      1.0.0                    
dash-html-components      1.0.0                    
dash-renderer             1.0.0                    
dash-table                4.0.2

• if frontend related, tell us your Browser, Version and OS

  • OS: [e.g. iOS] Windows 10
  • Browser [e.g. chrome, safari] Chrome
  • Version [e.g. 22] Version 75.0.3770.142 (Official Build) (64-bit)

Describe the bug

When embedding "dcc.Graph" component under 2 level of html.Div component, encountering following error,

Error: Invalid argument `id` passed into Div with ID "[object Object]".
Expected `string`.
Was supplied type `object`.
Value provided: 
{
"props": {
    "id": "my-graph"
  },
  "type": "Graph",
  "namespace": "dash_core_components"
}
    at propTypeErrorHandler (exceptions.js:118)
    at CheckedComponent (TreeContainer.js:74)
    at Td (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:82)
    at hi (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:102)
    at Qg (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:144)
    at Rg (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:145)
    at Sc (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:158)
    at Z (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:156)
    at Kc (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:155)
    at ya (react-dom@16.8.6.min.js?v=1.0.0&m=1563329113:153)

You may try to run the following program by comment and uncomment out the html.Div indicated.

import pandas as pd

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

import plotly.graph_objs as go


df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

app_name = 'dash-shapesplot'

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

app.layout = html.Div([
    html.Div([html.H1("Country Demographic Data by Continent")], style={'textAlign': "center", "padding-bottom": "30"}),

    html.Div( # Try comment and uncomment this component

        html.Div(
            [dcc.Dropdown(id="continent-selected", 
                          options=[{'label': i, 'value': i} for i in df['continent'].unique()[:4]],
                          value="Asia",
                          style={"display": "block", "margin-left": "auto", "margin-right": "auto", "width": "30%"})]),
        dcc.Graph(id="my-graph")

    )
], className="container")


@app.callback(
    dash.dependencies.Output("my-graph", "figure"),
    [dash.dependencies.Input("continent-selected", "value")])
def update_figure(selected):
    dff = df[df['continent'] == selected]
    trace = go.Scatter(x=dff["gdpPercap"], y=dff["lifeExp"], text=dff["country"], hoverinfo="text", mode="markers",
                       name=selected,
                       marker={'size': 10, 'line': {'width': 0.5, 'color': '#43a2ca'}, "color": "#7bccc4"}, )
    return {"data": [trace],
            "layout": go.Layout(title="Life Expectancy vs. GDP Per Capita", hovermode='closest',
                                xaxis={"title": 'GDP Per Capita (USD)', "range": [0, 40000], "tick0": 0, "dtick": 5000,
                                       "showline": True},
                                yaxis={"title": "Life Expectancy (Years)", "range": [20, 100], "tick0": 20, "dtick": 10,
                                       "showline": False},
                                shapes=[{'type': 'circle', 'xref': "x", 'yref': "y",
                                         'x0': dff["gdpPercap"].quantile(q=0.25), 'y0': dff["lifeExp"].quantile(q=0.25),
                                         'x1': dff["gdpPercap"].quantile(q=0.75), 'y1': dff["lifeExp"].quantile(q=0.75),
                                         'opacity': 0.6, 'fillcolor': '#cbebe8', 'line': {'color': '#69ded3'}}])}
										 
if __name__ == '__main__':
    app.run_server(debug=True)

Expected behavior

A clear and concise description of what you expected to happen.

With or without the additional html.Div, the apps should run.

Screenshots

If applicable, add screenshots or screen recording to help explain your problem.

[alexcjohnson]

Hi @akheng - this one slipped through the cracks, apologies, hopefully you already resolved it!

You need the html.Div([dcc.Dropdown(id="continent-selected"... and dcc.Graph(id="my-graph") to be wrapped in a list. As it is, the outer Div is interpreting the inner Div as children, the Graph as id.

This is an easy mistake to make, and unfortunately we haven't figured out an easy way to identify it in the error messages - particularly since a single element is valid for the children prop.

[mainadwitiya]

html.Div(
id="graph-container",
children=[
html.P(id="chart-selector", children="Select graph:"),
dcc.Dropdown(

                        options=[
                            {
                                "label": "Bar graph of China and Rest of the World",
                                "value": "graph_5",
                            },
                            {
                                "label": "Time Series graph of Corona Virus outbreak in China",
                                "value": "graph-0",
                            },
                            {
                                "label": "TIme series graph of confirmed cases in China",
                                "value": "graph-1",
                            },
                            {
                                "label": "Time series graph of Deaths in China",
                                "value": "graph-2",
                            },
                            {
                                "label": "Time series graph of Recovered in China",
                                "value": "graph-3",
                            },
                            {
                                "label": "Time series graph of Fatality Rate in China",
                                "value": "graph-4",
                            },
                        ],
                        value="graph_5",
                        id="chart-dropdown",
                    ),
                    dcc.Graph(
                        id="selected-data",
                        figure=(fig)


                    )

                ],
            ),
        ],
    ),
],

)

@app.callback(Output('select-data', 'figure'), [Input('chart-dropdown', 'value')])
def display_graphs(graph_5):
graphs = []
if 'graph-0' in graph_5:
graphs.append(html.Div(

        dcc.Graph(
            id='graph-0',
            figure=(fig_all)
        ),

    )),
    if 'graph-1' in graph_5:
        graphs.append(html.Div(

        dcc.Graph(
            id='graph-1',
            figure=(fig_china_confirmed)
        ),

    )),
    if 'graph-2' in graph_5:
        graphs.append(html.Div(

        dcc.Graph(
            id='graph-2',
            figure=(fig_china_deaths)
        ),

    )),
    if 'graph-3' in graph_5:
        graphs.append(html.Div(

        dcc.Graph(
            id='graph-3',
            figure=(fig_china_recovered)

        ),


    )),
    if 'graph-4' in graph_5:
        graphs.append(html.Div(

        dcc.Graph(
            id='graph-4',
            figure=(fig_china_fatality)
        ),

    ))

return graphs

this also shows the same error