时间戳

首页 > 解决方案 > 保留值 Dash 选项卡

python - 保留值 Dash 选项卡

问题描述

我有一个多标签破折号应用程序。当移动到另一个选项卡并稍后返回上一个选项卡时，将值存储在选项卡中的最佳方法是什么，现在该选项卡已刷新。我有四个选项卡，尤其是在第一个选项卡中，所有内容都是动态生成的。在我的索引页面代码下方：

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)

我尝试使用 dbc.Tabs 上的持久性关键字来做到这一点，但这不起作用。谁知道一个简单的解决方法？

标签： pythontabspersistenceplotly-dash

解决方案

您需要使用要存储值的每个组件的持久性标志。并非所有组件都提供它，您可以在此处找到其中一些：https ://github.com/plotly/dash-core-components/pull/646

only的持久性标志dcc.Tabs存储当前value因此选定的选项卡。

如果您编写自己的组件，则需要将以下道具添加到您的组件中：

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

其余的将或多或少开箱即用。以上所有内容都适用于我在标签之间来回切换。

更多详情请看这里。

推荐阅读