Using dcc.Store to store all settings of multi-components Tab in a multi-Tabs app

Dash Python
1

Dear Dash Community,
I hit a ‘road-block’ in my development. I am trying to build an app with three different tabs, each of these tabs have their independent source of data (therefore, no need to interaction between them), but from the user point of view, these data go well together for analysis.
My problem is that, each tab has several dash components (dropdowns, graphs, tables, maps) that allows the user to get many insights. However, when changing tabs, all the settings go back to ‘default values’, which is annoying.
Could you please give some help?

Here is an example of my index.py file, where the callback controls which tab to use.
Each tab, has its own layout with many components.
I am not sure where to insert the dcc.Store components in this case and if I would need one for each of the dash components used on each individual tab?

Thanks a lot indeed!

def build_tabs():
    return html.Div(
        id="tabs",
        className="tabs",
        children=[
 
            dcc.Tabs(
                id="app-tabs",
                value="tab2",
                className="custom-tabs",
                children=[
                    dcc.Tab(
                        id="Tab-1",
                        label="Steel Trade",
                        value="tab1",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),
                    
                    dcc.Tab(
                        id="Tab-2",
                        label="Raw Materials Trade",
                        value="tab2",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),
                    
                    dcc.Tab(
                        id="Tab-3",
                        label="Indeces Prices",
                        value="tab3",
                        className="custom-tab",
                        selected_className="custom-tab--selected",
                    ),

                ],
            ),
        
        ],
        
        
        
    )


# Global layout of the app
app.layout = html.Div(
    
    children=[  
        generate_modal(),

        html.Div(className='ten columns offset-by-one',
            children=[
                    build_banner(get_last_update()),

                    
                    html.Div(id='app-container',
                        children=[build_tabs(),
                        html.Div(id='app-content'),
                                ])
        ])
    ])
        


#  Switching between tabs
@app.callback(Output('app-content', 'children'),
              [Input('app-tabs', 'value')])

def render_content(tab):
    if tab == 'tab1':
        return tab_steel.tab_steel_layout
    elif tab == 'tab2':
        return tab_rawmaterials.tab_rawmaterials_layout
    elif tab == 'tab3':
        return tab_indeces.tab_indeces_layout
2

I have a similar problem. I’d like to be able to exchange data between tabs and read from dcc.Store. Did you ever figure out if you need dcc.Store component in each file and can you then read them in different files?

3

@keval @msouza did you figure it out a solution? I also experience the same issue and look for a solution.