Use Tabs only to change data but keep interactivity

Dash Python
1

Hi,

I had a running app which mechanism could be checked here: https://resnet56.herokuapp.com/

I am now trying to include the 4 graphs within a Tab in a Panel, and create the same graph in another Tab but with different data. The data is stored for both tabs in the same dictionary as data[‘tab1’], data[‘tab2’].

While attempting it I decided to include the callbacks that affected those graphs within the function that is updated when changing the graph, but it still doesn’t recognized them. I.e, the error is:

dash.exceptions.NonExistantIdException:
Attempting to assign a callback to the
component with the id “train_graph” but no
components with id “train_graph” exist in the
app’s layout.

This is my current approach:

app = dash.Dash()
server = app.server
auth = dash_auth.BasicAuth(app, USERNAME_PASSWORD_PAIRS)

app.layout = html.Div([

    # GLOBAL CONTENT
    # --------------------

    html.Div([html.H1('Title')]),   
    html.Div([
        dcc.Graph(id='table_nets', figure=draw_Table(table))
    ], className = 'row', style = {'text-align':'center', 'margin-bottom':'20px'}),
        
    # PANEL TABS
    # -------------
    
    dcc.Tabs(id="tab_picker", value='t1', children=[
        dcc.Tab(label='T1', value='t1'),
        dcc.Tab(label='T2', value='t2'),
    ]),
    
    # PANEL CONTENT
    # -------------
    html.Div(id='tabs_content')   ## Each Tab should have 4 graphs here ##
            
])
    
@app.callback(Output('tabs_content', 'children'), [Input('tab_picker', 'value')])
def tab_content(R):
    
    def time_graph():
                    
        d = data[R]['timer']
        # Logic for creating the traces
        return {'data': traces, 'layout':layout}
    
    def test_graph():
        
        d = data[R]['timer']
        # Logic for creating the traces
        return {'data': traces, 'layout':layout}

    html.Div([
        dcc.Graph(id='table_nets', figure=draw_Table(table))
    ], className = 'row', style = {'text-align':'center'}),
        
    html.Div([
        
        # Training results
        html.Div([       
                
            # Dropdowns
            html.Div([            
                    
                # Metric Dropdown
                html.Div([                    
                    dcc.Dropdown(
                        id='measure_picker',
                        options = measurements,
                        value = 'test'),
                ], className = 'six columns'),                
                            
                # Metric Dropdown
                html.Div([
                    dcc.Dropdown(
                        id='resolution_picker',
                        options = resolutions,
                        value = 'epoch')
                ], className = 'six columns')
                
            ],  className = 'row'),
                
            # Graph
            html.Div([
                dcc.Graph(id='train_graph')
            ])
                    
        ], className = 'six columns'),
                
        # Validation results
        html.Div([
            
            # Dropdown
            html.Div([            
                    
                # Metric Dropdown
                html.Div([       
                    dcc.Dropdown(
                        id='valid_measure_picker',
                        options = measurements,
                        value = 'test')
                ], className = 'six columns'),
                    
                # Metric Dropdown
                html.Div([], className = 'six columns')
                
            ], className = 'row'), 
                
            # Graph
            html.Div([
                dcc.Graph(id='valid-graph'),
            ])
                    
        ], className = 'six columns')
            
    ], className = 'row'),
    
        
    html.Div([
        
        # Time Analysis
        html.Div([                
             
            dcc.Graph(
                id='time_graph', figure=time_graph())
        ], className = 'six columns'),
                
        # Test results
        html.Div([
            dcc.Graph(id='test_graph', figure=test_graph())                
        ], className = 'six columns')
            
    ], className = 'row'),
       
    @app.callback(Output('train_graph', 'figure'),
                  [Input('measure_picker', 'value'), Input('resolution_picker', 'value'),])    
    def train_graph(measure, resolution, tab):
        
        df = data[R]['train'][resolution][measure]
        # Logic for creating the traces
        return {'data': traces, 'layout': layout}
    
    
    @app.callback(Output('valid_graph', 'figure'),
                  [Input('valid_measure_picker', 'value')])    
    def valid_graph(measure):
        
        df = data[R]['valid'][measure]
        # Logic for creating the traces
        return {'data': traces, 'layout': layout}    
    

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

How can I solve this?