Tabs with dynamic content such as datepickerrange

Dash Python
1

Hi everyone,
Does anybody knows if I could create two tabs with content that changes dynamically such as datepickerrange inside one of these tabs, or maybe in both of them. I’m struggling and I couldn’t find a thread with a matching situation. I’m not sure even if is possible.

My code looks like this now:

tab_layout_email = [… , dcc.Graph(id=graph1)]
tab_layout_chat= [… , dcc.Graph(id=graph2)]

app.layout = html.Div([
html.H1(‘Dash Tabs component demo’),
dcc.Tabs(id=“tabs-example”, value=‘tab_layout_email’, children=[
dcc.Tab(label=‘E-mail’, value=‘tab_layout_email’),
dcc.Tab(label=‘Chat’, value=‘tab_layout_chat’)
]),
html.Div(id=‘tabs-content-example’)
])

@app.callback(Output(‘tabs-content-example’, ‘children’),
[Input(‘tabs-example’, ‘value’)])
def render_content(tab):

if tab == 'tab_layout_email':
    return tab_layout_email
    
elif tab == 'tab_layout_chat':
    return tab_layout_chat

@app.callback([Output(‘graph1’,‘figure’),
Output(‘graph2’,‘figure’)],
[Input(‘submit-button’,‘n_clicks’)],
[State(‘my_date_picker’,‘start_date’),
State(‘my_date_picker’,‘end_date’)
])

def graph_email(n_clicks,start_date,end_date):

start = datetime.strptime(start_date[0:10],'%Y-%m-%d').date()
end = datetime.strptime(end_date[0:10],'%Y-%m-%d').date()

...

fig1 = {'data':data1,
       'layout':layout1}

@app.callback([Output(‘graph2’,‘figure’)],
[Input(‘submit-button’,‘n_clicks’)],
[State(‘my_date_picker’,‘start_date’),
State(‘my_date_picker’,‘end_date’)
])

def graph_chat(n_clicks,start_date,end_date):

start = datetime.strptime(start_date[0:10],'%Y-%m-%d').date()
end = datetime.strptime(end_date[0:10],'%Y-%m-%d').date()

...

fig2 = {'data':data2,
       'layout':layout2}

If there is some sort of typo, it is just because I manipulated in order to fit better here.

Hope someone could help me out on that

2

it’s possible man, I do it like this:

in “main.py” :

app = dash.Dash(__name__, external_stylesheets=external_stylesheets, server=flask.Flask(__name__))

app.layout = html.Div([

    html.Img(id='baniere',
             src=app.get_asset_url('baniere.png'),
             width='1887',
             height='150'),  # 256

    dcc.Tabs(id="tabs",
             value='new_gna',
             colors=colors.tabs_colors,
             children=[

                 dcc.Tab(id='new_gna',
                         label='Create gna',
                         value='new_gna',
                         children=tab1),

                 dcc.Tab(id='import_java_gna',
                         label='Import Java gna',
                         value='import_java_gna',
                         children=tab2),

                 dcc.Tab(id='monitoring',
                         label='Monitoring',
                         value='monitoring',
                         children=tab3)

             ]),

])

def register_callbacks(dash_app):   # the callbacks must be 
    from App.Views.tab_1 import register_populate_universe_selection
    register_populate_universe_selection(dash_app)

and in other file, tab1.py

tab1 = [
    html.Div(id='gna_selection_container',
             children=[

                 html.Div(id='template_selection_container',
                          className="template_selection_container",
                          children=[
                              html.Br(),
                              dcc.RadioItems(  # First radiobutton
                                             id='template_selection',
                                             options=Tab1ToolFuncs.list_gna()),  
                          html.Br()
                          ]),

                 html.Div(id='gna_selection_container',
                          className="template_selection_container",
                          children=[
                              html.Br(),
                              dcc.RadioItems(id='gna_selection'),   # Second radibutton
                              html.Br()
                          ])
             ]),
...
]

def register_populate_gna_selection(app):
    @app.callback(Output('gna_selection', 'options'),
                  [Input('template_selection', 'value')])
    def populate_gna_selection(gna):
        if gna is None:
            raise PreventUpdate
        return Tab1ToolFuncs.list_gna(gna)

My callback will populate dynamically the second radiobutton, base on first radiobutton choice

3

I didn’t understand…

In my case, I have 12 graphs divided in 3 tabs, and these graphs are subject to changes with start and end dates for the datepickerrange (States) and after that I have a Submit button as an Input.
I have 2 modules, app.py and layout.py
In the layout.py I have 3 different callbacks coordinating 4 graphs each and I must grab then and take it to app.py

It seem to me that it would be too unstable to keep that way.

Any suggestions?

Thanks again

4

I might not understand either, but have you tried to put your callbacks (the ones in layout.py) in a function, and import and run this function in your app.py ?