dcc.Tabs: can't pass tabs parameter in callback


#1

Hi, I am doing a fun project and get stuck in this problem. If I do this

icao_flt_phs = ['Ground', 'Take-off', 'Climb', 'Cruise', 'Descent', 'Approach', 'Landing', 'Post Landing']
causes_dict = {
    'Ground': ['High taxi speed - Straight', 'High taxi speed - turns'],
    'Take-off': ['High Pitch Rate', 'High climb out speed'],
    'Climb': ['Low energy state', 'Overspeed'],
    'Cruise': ['Low energy state', 'Overspeed', 'Flight near or at Max. Rec ALT.'],
    'Descent': ['Overspeed'],
    'Approach': ['Overspeed (Configuration)', 'High energy state', 'Unstabilised approach'],
    'Landing': ['High Vertical energy- Hard landing', 'Long float', 'High lateral energy'],
    'Post Landing': ['High taxi speed', 'Single Engine High thrust setting']
}
app = dash.Dash()

app.layout = html.Div([
    html.H1('Safety App'),
    
    dcc.Tabs(
        tabs=[{'label': p, 'value': p} for p in icao_flt_phs],
        value='Landing',
        id='phase-tabs'
    ),
    
    html.Div([
        html.Div(
            dcc.RadioItems(id='cause-tabs'),
            style={'width': '20%', 'float': 'left'}
        ),
        html.Div(
            html.Div(id='tab-output'),
            style={'width': '80%', 'float': 'right'}
        )
    ])
])

@app.callback(Output('cause-tabs', 'options'), [Input('phase-tabs', 'value')])
def set_cause_options(value):
    causes = causes_dict[value]
    tabs = [{'label': c, 'value': c} for c in causes]
    return tabs

@app.callback(Output('cause-tabs', 'value'), [Input('phase-tabs', 'value')])
def set_cause_value(value):
    causes = causes_dict[value]
    value = causes[0]
    return value

@app.callback(Output('tab-output', 'children'), [Input('cause-tabs', 'value')])
def display_content(value):
    num = 0
    for k, l in causes_dict.items():
        found = [i for i, v in enumerate(l) if v == value]
        if len(found) > 0: 
            num = found[0]
            break
    data = [
        {
            'x': [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                  2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
            'y': [219, 146, 112, 127, 124, 180, 236, 207, 236, 263,
                  350, 430, 474, 526, 488, 537, 500, 439],
            'name': 'Rest of world',
            'marker': {
                'color': 'rgb(55, 83, 109)'
            },
            'type': ['bar', 'scatter', 'box'][num]
        },
        {
            'x': [1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003,
                  2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012],
            'y': [16, 13, 10, 11, 28, 37, 43, 55, 56, 88, 105, 156, 270,
                  299, 340, 403, 549, 499],
            'name': 'China',
            'marker': {
                'color': 'rgb(26, 118, 255)'
            },
            'type': ['bar', 'scatter', 'box'][num]
        }
    ]

    return html.Div([
        dcc.Graph(
            id='graph',
            figure={
                'data': data,
                'layout': {
                    'margin': {
                        'l': 30,
                        'r': 0,
                        'b': 30,
                        't': 0
                    },
                    'legend': {'x': 0, 'y': 1}
                }
            }
        )
    ])

then it works fine, but if I replace the RadioItems with Tabs i.e. dcc.RadioItems(id='cause-tabs') and update tabs instead of options in the callback i.e. @app.callback(Output('cause-tabs', 'tabs'), [Input('phase-tabs', 'value')]), I get Error loading dependencies.

Can somebody please help me? Thanks in advance.