保留值 Dash 选项卡

Question

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?

Answer 1

You need to use the persistence flag of each component where you want the values to be stored. Not all components provide for it, you can find some of them here: https://github.com/plotly/dash-core-components/pull/646

The persistence flag of the dcc.Tabs only stores the current value thus the selected tab.

If you write your own components you need to add the following props to your component:

persistence: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.number]),
persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),

The rest will work more or less out of the box. All of the above works fine for me switching between tabs back and forth.

For more details look here .