Keep values when moving to other tab

Dash Python
1

Hi,

I’ve a multiple tab dash App. What is the best way to keep values stored in a tab when moving to another tab and later going back to the previous tab, right now the tab is refreshed. I’ve four tabs and especially in the first tab everything is generated dynamically. Below my index page code:

import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_auth
import dash_core_components as dcc
import pandas as pd

from Hotspot_App_Local import app
from apps import GeoPlot, Scatter, Moran, Table

import os

VALID_USERNAME_PASSWORD_PAIRS = {###": "###"}


app.title = "Hotspot Analysis"
auth = dash_auth.BasicAuth(app, VALID_USERNAME_PASSWORD_PAIRS)

nav_item = dbc.Tabs(id = 'tabs', active_tab = '/page-1', className="mt-3", persistence= True, persistence_type = 'session',
    children = [
        dbc.Tab(label= "World Map", tab_id= '/page-1', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'}),
        html.Br(),
        dbc.Tab(label= "Table", tab_id= '/page-2', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'}),
        html.Br(),
        dbc.Tab(label= "Moran's I", tab_id= '/page-3', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'}),
        html.Br(),
        dbc.Tab(label= "Scatter Plots", tab_id= '/page-4', label_style={"color": "#000080", 'font-size': 20, 'font-weight': 'bold'})
    ],

)

navbar = dbc.Navbar(
    [
        html.A(
            # Use row and col to control vertical alignment of logo / brand
            dbc.Row(
                [
                    dbc.Col(html.Img(src= app.get_asset_url('logo_2.png'), height="100px"), className="ml-5"),
                ],
                align="center",
                no_gutters=True,
            ),
            href= "###",
        ),
        dbc.NavbarToggler(id="navbar-toggler"),
        dbc.Nav([nav_item], navbar=True, style= {'margin-left': '40em',})
    ],
    color="white",
    dark=False,
    className = "mb-5"
)

labels = pd.read_csv('CSV/Labels.csv')
label_dict = {}
for i in range(len(labels)):
    label_dict[labels['parameter'].loc[i]] = labels['label'].loc[i] + f"  ({labels['units'].loc[i]})"

label_back = {}
for i in range(len(labels)):
    label_back[labels['label'].loc[i] + f"  ({labels['units'].loc[i]})"] = labels['parameter'].loc[i]

merged_df = pd.read_csv('CSV/Merged.csv')
merged_dict = merged_df.to_dict('list')

app.layout = html.Div(
    [
        dcc.Store(id= 'label_back', data= label_back, storage_type= 'local'),
        dcc.Store(id= 'labels', data= label_dict, storage_type= 'local'),
        dcc.Store(id="scatter_layers_glob", storage_type= 'local'),
        dcc.Store(id="scatter_layers_cont", storage_type= 'local'),
        dcc.Store(id="store_columns", storage_type= 'local'),
        dcc.Store(id="selected_columns", data= [], storage_type= 'local'),
        dcc.Store(id= 'range_store', storage_type= 'local'),
        dcc.Store(id= 'store_setting', storage_type= 'local'),
        html.Br(),
        navbar,
        html.Div(id="page"),
    ]
)

app.validation_layout = html.Div([navbar, GeoPlot.layout, Table.layout, Moran.layout, Scatter.layout])


@app.callback(Output("page", "children"), [Input("tabs", "active_tab")])
def display_page(pathname):
    if pathname == "/page-1":
        return GeoPlot.layout
    if pathname == "/page-2":
        return Table.layout
    if pathname == "/page-3":
        return Moran.layout
    if pathname == "/page-4":
        return Scatter.layout
    # if not recognised, return 404 message
    return html.P("404 - page not found")


IN_CONTAINER = os.environ.get("IN_CONTAINER", False)

if __name__ == "__main__":
    if IN_CONTAINER:
        app.run_server(host="0.0.0.0", port=8050)
    else:
        app.run_server(debug= True)

I tried to do it with the persistance keyword on dbc.Tabs but this did not work. Anyone who knows an easy workaround for this?

2

Hi @DantevdH could you have dcc.Store objects which would be updated when one tab is updated, and you would have these stores as State to read from them when the active_tab value is changed?