'Children' Property in Dash Python html

user_10075944 0
Viewed 6311

I'm pretty confused by what 'children' even does in Dash html. Why does it even exist? Why would you use it? I tried reading the documentation, but it hasn't been very helpful.

With reference to the block of code below:

  • What does the children property even do in the first line?
  • Couldn't you replace children with something like 'figure' for the plots?

Block of Code:

app.layout = html.Div(children=[
    # TODO1: Add title to the dashboard
    html.H1("Airline Dashboard by CK", style = {'text-align':'center'}),
    # REVIEW2: Dropdown creation
    # Create an outer division
    html.Div([
        # Add an division
        html.Div([
            # Create an division for adding dropdown helper text for report type
            html.Div(
                [
                    html.H2('Report Type:', style={'margin-right': '2em'}),
                ]
            ),
            # TODO2: Add a dropdown
                dcc.Dropdown(id = 'input-type',
                    options = [{'label':'Yearly Airline Performance Report', 'value': 'OPT1'},
                    {'label':'Yearly Average Flight Delay Statistics', 'value': 'OPT2'}],
                    multi = False,
                    placeholder = 'Select a Report Type',
                    style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}
            )
            # Place them next to each other using the division style
        ], style={'display': 'flex'}),

        # Add next division
        html.Div([
            # Create an division for adding dropdown helper text for choosing year
            html.Div(
                [
                    html.H2('Choose Year:', style={'margin-right': '2em'})
                ]
            ),
            dcc.Dropdown(id='input-year',
                         # Update dropdown values using list comphrehension
                         options=[{'label': i, 'value': i} for i in year_list],
                         placeholder="Select a year",
                         style={'width': '80%', 'padding': '3px', 'font-size': '20px', 'text-align-last': 'center'}),
            # Place them next to each other using the division style
        ], style={'display': 'flex'}),
    ]),

    # Add Computed graphs
    # REVIEW3: Observe how we add an empty division and providing an id that will be updated during callback
    html.Div([], id='plot1'),

    html.Div([
        html.Div([], id='plot2'),
        html.Div([], id='plot3')
    ], style={'display': 'flex'}),

    # TODO3: Add a division with two empty divisions inside. See above disvision for example.
    html.Div([
        html.Div([], id='plot4'),
        html.Div([], id='plot5')
    ], style = {'display':'flex'})
])


# Callback function definition
# TODO4: Add 5 ouput components
@app.callback(
              [Input(component_id='input-type', component_property='value'),
               Input(component_id='input-year', component_property='value')],
              # REVIEW4: Holding output state till user enters all the form information. In this case, it will be chart type and year
              [Output("plot1", 'children'), Output("plot2", "children"),
               Output("plot3", "children"), Output("plot4", "children"),
               Output("plot5", "children")
               ])
plotly-dash python
1 Answers

From this page of the docs:

  1. The children property is special. By convention, it's always the first attribute which means that you can omit it: html.H1(children='Hello Dash') is the same as html.H1('Hello Dash'). Also, it can contain a string, a number, a single component, or a list of components.

Some components, such as html.Div and html.P, accept a value for their children prop. Others, such as dcc.Graph or dcc.Dropdown do not, and require other props in order to function properly.

As @KarlKnechtel mentioned in his comment, when one component is a child of another, it represents a nesting of the first component inside the other. The following are analogous:

In Dash:

html.Div(
    children=[
        html.H1('This is some text'),
        html.P('This is also some text'),
    ]
)

In HTML:

<div>
  <h1>This is some text</h1>
  <p>This is also some text</p>
</div>

I hope that answers your questions.

Edit:

Adding style after children to this html.Div would allow you to change the styles of the Div, which may impact the styles of the components nested inside it, but that is not the purpose of the children prop. As the docs mention, you can either explicitly set children= whatever, or you can pass the same value in first, with no explicit key word argument, and Dash will treat that as the children prop. Either way, behind the scenes, the component is still receiving a value for its children property.

The purpose of the children property is to allow users to nest components, just as we do in raw HTML. Without the children prop, it would not be possible to do things like group related items together by containing them in the same parent element (ex. putting navigation items inside a top navigation bar).

user_50940440
Related