Black Lives Matter. Please consider donating to Black Girls Code today.

Python dash issues with loading static and dynamic graphs in combination

Using dash I am trying to load a graph and also generate few other graphs in runtime. Methods I am using in my code are generateMainGraph and generateRuntimeGraph . If I use either of the methods alone, it works fine but in a combination, it does not work. Errors I get range from ‘syntax error’ to ‘The children property of a component is a list of lists, instead of just a list’ . Help to overcome the issue is much appreciated.

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

SUBCATEGORY_LIST = [['a1', 'a2'], ['b1', 'b2', 'b3', 'b4'],['c1', 'c2']]

app = dash.Dash(__name__)
    
def generateSubcategoryCards():
    ddvaluearray = ['a1', 'a2']
    return html.Div(id='dynamic_subparam_card',
        children=[
            dcc.Dropdown(
                id='dynamic-subparam_dd',
                options=[{'label': i, 'value': i}
                         for i in ddvaluearray],
                value=[i for i in ddvaluearray],
                multi=True,
            ),
            dcc.Graph(id='dynamic_subparam-graph'),
        ],
    ),

def generateMainGraph():
    return html.Div(id="priority-tab", children=[
        html.B("Main Category"),
        dcc.Tabs(id="tabs-styled-with-inline", value='tab-graph', children=[
            dcc.Tab(label='Graph Tab', value='tab-graph',   children=[
                        html.Div(id="pcard",
                            children=[dcc.Graph(id="main-graph")],
                        )
                    ]
                    ),
            dcc.Tab(label='Data Table Tab', value='tab-datatable', children=[
                        html.Div(id="pcard2")]
                    ),
        ], 
        ),
        html.Div(id='tabs-content-inline')
    ])
    
def generateRuntimeGraph(n_value):
    params = SUBCATEGORY_LIST[n_value]
    return html.Div(
        id={
            'type': 'dynamic_subparam_card',
            'index': n_value
        },
        children=[
            html.B("Subcategory'" + str(n_value) + "' graphs by parameters"),
            dcc.Dropdown(
                id={
                    'type': 'dynamic-subparam_dd',
                    'index': n_value
                },
                options=[{'label': i, 'value': i} for i in params],
                value=[i for i in params],
                multi=True,
            ), html.Hr(),
            dcc.Graph(
                id={
                    'type': 'dynamic_subparam-graph',
                    'index': n_value
                },
                figure={}
            ),
        ],
    )

app.layout = html.Div(
    id="app-container",
    children=[
        generateMainGraph(), # This works if below method is commented and vice versa
        [generateRuntimeGraph(i) for i in range(len(SUBCATEGORY_LIST))]
            ]
)

if __name__ == "__main__":
    app.run_server(debug=True)