将全新布局返回到 Dash 中的同一页面

Question

我正在尝试设置一个具有 2 层的 dash 应用程序：

第 1 页有几个输入表单，基于这些输入 - app_layout
第 2 页 - 有一组不同的输入 (layout_more_inputs)，根据第 1 页输入的内容弹出。

我正在尝试从回调中 return layout_more_inputs 但它不起作用。

app.layout = html.Div([
    html.H3('welcome to app'),html.Br(),
    dcc.Input(id='input-00-state', type='text', value='QQQ'),
    dcc.Input(id='input-01-state', type='text', value='MOVE'),
    html.Button(id='submit-button-state', n_clicks=0, children='Go!'),
    html.Div(id='output-state'),
    dcc.Graph(id='graph-with-slider'),
])

layout_more_inputs = html.Div([
    dcc.Input(id='input-10-state', type='number', value='0.11'),
    dcc.Input(id='input-11-state', type='number', value=0.12),
    html.Button(id='submit-button-state2', n_clicks=0, children='Go Go!'),
])

#front page - 0
@app.callback(
    Output('container', 'children'),
    Input('submit-button-state', 'n_clicks'),
    State('input-00-state', 'value'),
    State('input-01-state', 'value'),
)
def ask_for_more_inputs(n_clicks,asset_str,event_str):
    print("input summary:")
    print(n_clicks,asset_str,event_str)
    return layout_more_inputs #<<--DOES NOT WORK

#front page - 1
@app.callback(
    Output('graph-with-slider', 'figure'),
    Output('output-state', 'children'),
    Input('submit-button-state2', 'n_clicks'),
    State('input-10-state', 'value'),
    State('input-11-state', 'value'),
)
def more_inputs(n_clicks,input0,input1):
    d = {'x': [input0, input1], 'y': [input0, input1]}
    df = pd.DataFrame(data=d)
    filtered_df = df

    fig = px.scatter(filtered_df, x="x", y="y")
    fig.update_layout(transition_duration=500)
    return fig, u'''Button pressed {} times, 1 is "{}", and 2 is "{}"'''.format(n_clicks,state1,state2)

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

Answer 1

我不是 100% 了解您要提供的内容，但一种选择是使用 Dash 的 dcc.Tabs 属性.

我已经开始并为您奠定了基础：


import sys

import dash
from dash import html
from dash import dcc
from dash import no_update
from dash.dependencies import Input, Output, State

# app = dash.Dash(__name__)
app = JupyterDash()

layout = html.Div([
    html.H3('welcome to app'),
    html.Br(),
    dcc.Input(id='input-00-state', type='text', value='QQQ'),
    dcc.Input(id='input-01-state', type='text', value='MOVE'),
    html.Button(id='submit-button-state', n_clicks=0, children='Go!'),
    html.Div(id='output-state'),
    dcc.Graph(id='graph-with-slider'),
])

layout_more_inputs = html.Div([
    dcc.Input(id='input-10-state', type='number', value=0.11),
    dcc.Input(id='input-11-state', type='number', value=0.12),
    html.Button(id='submit-button-state2', n_clicks=0, children='Go Go!'),
])

tabs = [
    dcc.Tab(label="Front Page - 0", children=layout),
    dcc.Tab(label="Front Page - 1", children=layout_more_inputs)
]

multitab_layout = [dcc.Tabs(id="tabs", children=tabs)]

app.layout = html.Div(
    [html.Div(id="multitab_layout", children=multitab_layout)])

# front page - 0

@app.callback(
    Output('container', 'children'),
    Input('submit-button-state', 'n_clicks'),
    [State('input-00-state', 'value'),
    State('input-01-state', 'value')]
)
def ask_for_more_inputs(n_clicks, asset_str, event_str):
    print("input summary:")
    print(n_clicks, asset_str, event_str)
    return layout_more_inputs  # <<--DOES NOT WORK

# front page - 1


@app.callback([
    Output('graph-with-slider', 'figure'),
    Output('output-state', 'children')
], Input('submit-button-state', 'n_clicks'),
    Input('submit-button-state2', 'n_clicks'), [
    State('input-00-state', 'value'),
    State('input-01-state', 'value'),
    State('input-10-state', 'value'),
    State('input-11-state', 'value')
])
def more_inputs(n_clicks, n_cliks2, input0, input1, state0, state1, state10,
                state11):
    d = {'x': [input0, input1], 'y': [input0, input1]}
    df = pd.DataFrame(data=d)
    filtered_df = df

    fig = px.scatter(filtered_df, x="x", y="y")
    fig.update_layout(transition_duration=500)
    return fig, u'''Button pressed {} times, 1 is "{}", and 2 is "{}"'''.format(
        n_clicks, state1, state2)


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

使用您提供的代码；但不完全确定你希望它从这里去哪里。在 UI/EX 行为等方面。也许这可能足以让您按照需要前进...

将全新布局返回到 Dash 中的同一页面

Returning a completely new layout to same page in Dash

python

plotly-dash