Is it possible to return a different layout to the same Output in plotly

Dash Python
10

HI @RalphLawrence23 here an MRE using dash pages, navigation via icons in a navbar

import dash
from dash import dcc, html, callback, Input, Output, ctx
import dash_bootstrap_components as dbc
from collections import deque


external_stylesheets = [
    dbc.themes.FLATLY,
    dbc.icons.BOOTSTRAP,
]

app = dash.Dash(
    __name__,
    use_pages=True,
    suppress_callback_exceptions=True,
    external_stylesheets=external_stylesheets,
)

page_paths = deque([page['path'] for page in dash.page_registry.values() if page['name'] != 'Not found 404'])

# create a navbar
navbar = dbc.Navbar(
    id='navbar',
    children=[
        dbc.Nav(
            [
                html.Div(
                    id='bwd',
                    className='bi bi-arrow-left-square',
                    style={
                        'font-size': '25px',
                        'marginLeft': '5px',
                        'marginRight': '5px',
                        'padding-bottom': '5px',
                        'color': 'white'
                    },
                ),
                html.Div(
                    id='fwd',
                    className='bi bi-arrow-right-square',
                    style={
                        'font-size': '25px',
                        'marginLeft': '5px',
                        'marginRight': '5px',
                        'padding-bottom': '5px',
                        'color': 'white'
                    },
                )
            ],
            navbar=True,
        ),
    ],
    color='primary',
    className='mb-0, p-0',
    # ^^ no margin on bottom
    style={'height': '50px'}
)

app.layout = html.Div(
    [
        navbar,
        html.Div(
            dash.page_container,
            className='container'
        ),
        dcc.Location(id="url", refresh="callback-nav")
    ],
)


@callback(
    Output("url", "href"),
    Input("fwd", "n_clicks"),
    Input("bwd", "n_clicks"),
    prevent_initial_callback=True
)
def generate_chart(*clicks):
    if not any(clicks):
        return "/"

    trigger = ctx.triggered_id

    if trigger == 'fwd':
        page_paths.rotate(-1)
    else:
        page_paths.rotate(1)

    return page_paths[0]


if __name__ == "__main__":
    app.run(debug=True, port=8055)

custom.css:

.container {
    border: 1px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background-color: gray;
    height: 80%;
    width: 90%;
}

ínitial_page.py

from dash import html
import dash

dash.register_page(__name__, path="/", order=0)

layout = html.H1("Start")

page_1.py, page_2.py …

from dash import html
import dash

dash.register_page(__name__, path="/your_slide_1", order=1)

layout = html.Div("Your layout on page 1")

gif

4 Likes