Change Tab automatically during Callback

Dash Python
1

Hi,

I would like to have my tabs changed automatically during each callback,
and also the content of each tab. Both tabs should always be visible.
This is what I have come up with so far.

import dash
import dash_html_components as html
import dash_core_components as dcc
from numpy.random import randint
from dash.dependencies import Input, Output
import random

def one():
    num = str(randint(0,9))
    return num

def two():
    num = str(randint(0,9))
    return num

def three():
    string = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
    return random.choice(string)

def four():
    string = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
    return random.choice(string)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)

app.layout = html.Div([
    dcc.Tabs(id="tabs-live", children=[
        dcc.Tab(label='Tab one', id = "tab-1-live", value='tab-1', children=[
            html.Div(id = "one-two-live", className = "row", children=[
                html.Div(),
                html.Div()
            ])]),
        dcc.Tab(label="Tab two", id = "tab-2-live", value='tab-2', children=[
            html.Div(id = "three-four-live", className = "row", children=[
                html.Div(),
                html.Div()
            ])]),
    ]),
    dcc.Interval(
        id='one-two-update',
        interval=2*1000,
        n_intervals = 0
    ),
    dcc.Interval(
        id='three-four-update',
        interval=2*1000,
        n_intervals = 0
    ),
    dcc.Interval(
        id='tabs-update',
        interval=2*1000,
        n_intervals = 0
    )
])

@app.callback(Output(component_id='one-two-live', component_property='children'), 
              [Input(component_id='one-two-update', component_property='n_intervals')]) 
def update_one_two(interval):
    return html.Div(className = "row", children=[html.Div([one()]), html.Div([two()])])

@app.callback(Output(component_id='three-four-live', component_property='children'),
              [Input(component_id='three-four-update', component_property='n_intervals')])
def update_three_four(interval):
    return html.Div(className = "row", children=[html.Div([three()]), html.Div([four()])])

@app.callback(Output('tabs-live', 'children'),
              [Input('tabs-update', 'n_intervals')])
def display_tab(interval):
    
    if interval % 2 == 0:
        return (html.Div(id='one-two-live', children=update_one_two(interval))) 
            
    
    if interval % 2 == 1:
        return (html.Div(id='three-four-live', children=update_one_two(interval))) 

if __name__ == '__main__':
    app.run_server(debug=True, threaded=True)

Also, when I run this code, there is sometimes some code visible for a millisecond while the page updates, why is that?

2

Your final component should be changing the value prop and not children for the output.