Dash Tabs Callback Issue

Hi,

I’m new to dash and python and I’ve hit a wall in my knowledge gap. I’ve been trying to research a solution since I can logically tell what my problem is but I don’t think I’m searching for the correct terms.

Any help/insight would be greatly appreciated.

Basically, i’m trying to create a multi app dash board using the tabs dash core component.

I’m following method 1, ‘Content as Callback’ as outlined here:
https://dash.plot.ly/dash-core-components/tabs

I’m using the following file structure: (As mentioned here:)

File structure:

- app.py
- index.py
- apps
   |-- __init__.py
   |-- app1.py
   |-- app2.py

The only change I made to Index.py from the above tabs example link is that i changed the render_content(tab) to return the select app;s layout:

@app.callback(Output(‘tabs-content-example’, ‘children’),
[Input(‘tabs-example’, ‘value’)])
def render_content(tab):
if tab == ‘tab-1-example’:
return app1.layout
elif tab == ‘tab-2-example’:
return app2.layout

That part works fine. Clicking the tabs will load the layout of each file.

My issue is that app1.py uses a callback to populate the graph depending on the value chosen in a dropdown.

app1.py Code:
##################
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd

from app import app

df = pd.read_csv(’…/data/mpg.csv’)

features = df.columns

layout = html.Div([

    html.Div([
        dcc.Dropdown(
            id='xaxis',
            options=[{'label': i.title(), 'value': i} for i in features],
            value='displacement'
        )
    ],
    style={'width': '48%', 'display': 'inline-block'}),

    html.Div([
        dcc.Dropdown(
            id='yaxis',
            options=[{'label': i.title(), 'value': i} for i in features],
            value='acceleration'
        )
    ],style={'width': '48%', 'float': 'right', 'display': 'inline-block'}),

dcc.Graph(id='feature-graphic')

], style={‘padding’:10})

@app.callback(
Output(‘feature-graphic’, ‘figure’),
[Input(‘xaxis’, ‘value’),
Input(‘yaxis’, ‘value’)])
def update_graph(xaxis_name, yaxis_name):
return {
‘data’: [go.Scatter(
x=df[xaxis_name],
y=df[yaxis_name],
text=df[‘name’],
mode=‘markers’,
marker={
‘size’: 15,
‘opacity’: 0.5,
‘line’: {‘width’: 0.5, ‘color’: ‘white’}
}
)],
‘layout’: go.Layout(
xaxis={‘title’: xaxis_name.title()},
yaxis={‘title’: yaxis_name.title()},
margin={‘l’: 40, ‘b’: 40, ‘t’: 10, ‘r’: 0},
hovermode=‘closest’
)
}

########################

So when I click the tab for app1, I get the drop downs and the graph but no data points are displayed when you make a selection from the drop down.

I know the issue is that index.py is only returning app1.layout but i can’t seen to find or figure out what I need to change.

I know I’m not fundamentally thinking of something correctly, but I don’t know what to look into.
Should I just not use Dash tabs and maybe use Dash Bootstrap Components for nav? I really liked how tabs allows you to change outputs without having to reload the page.

Thoughts?

Thanks in advance,
T