Chained callbacks in tabs cause error msg. 'Div' object has no attribute 'keys'

Dash Python
2

Good news. I have found a nice soultion here.

Code:

import dash
import pandas as pd
import plotly.graph_objs as go
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

app = dash.Dash(__name__)

# generate data
import numpy as np
df = pd.DataFrame(np.random.randint(0,100,size=(100, 7)), columns=list('ABCDEFG'))
# get feature names
available_indicators = df.columns.values

# Tab layout
tab1_layout = [
    html.Div([
        html.H2("TBD. 2 FFTs")
    ])
]

tab2_layout = [
    html.Div(children=[
        dcc.Dropdown(id='feature',
            options=[{'label': i, 'value': i} for i in available_indicators],
            value=['C'],
            multi=False 
        ),
        html.Div(id='tab2_content'),
    ])
]

tab3_layout = [
    html.Div([
        html.H2("TBD.")
    ])
]

# App layout
app.layout = html.Div([
    dcc.Tabs(id="tabs", value='tab_b', children=[
        dcc.Tab(label='Tab A', value='tab_a', children=tab1_layout),
        dcc.Tab(label='Tab B', value='tab_b', children=tab2_layout),
        dcc.Tab(label='Tab C', value='tab_c', children=tab3_layout)
    ]),
])

@app.callback(
    Output('tab2_content', 'children'),
    [Input('feature', 'value')])
def update_plots(feature):
    ddf = df[feature]
    return dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': df.index, 'y': ddf.values, 'type': 'line', 'name': feature},
            ],
            'layout': {
                'title': feature
            }
        }
    )

if __name__ == '__main__':
    app.run_server(debug=1)