"Duplicate Page" functionality for multi-tab work

Dash Python
2

Hello @davzup89,

Yes, this is possible in Dash.

image
image1087×214 3.18 KB

app.py

import dash
from dash import Dash, Input, Output, State, html, dcc, no_update, Patch

app = Dash(__name__)

import dash_mantine_components as dmc

app.layout = html.Div([
    html.Button('Duplicate', id='dup', n_clicks=0),
    dmc.Tabs(
        [
            dmc.TabsList(
                [
                    dmc.Tab("Gallery", value="gallery"),
                    dmc.Tab("Messages", value="messages"),
                    dmc.Tab("Settings", value="settings"),
                ],
                id='tabsList'
            ),
            dmc.TabsPanel("Gallery tab content", value="gallery", pb="xs"),
            dmc.TabsPanel("Messages tab content", value="messages", pb="xs"),
            dmc.TabsPanel("Settings tab content", value="settings", pb="xs"),
        ],
        value="gallery",
        id='tabs'
    )
    ]
)

@app.callback(
    Output('tabs', 'children'), Output('tabs', 'value'), Output('tabsList', 'children'),
    Input('dup', 'n_clicks'), State('tabs', 'value'), State('tabs', 'children')
)
def dupTab(n, v, s):
    if n:
        newChildren = Patch()
        newList = Patch()
        newInt = '1'
        try:
            newInt = str(int(v.split('-')[1])+1)
        except:
            pass
        newValue = v.split('-')[0] + '-' + newInt
        for children in s[1:]:
            if children['props']['value'] == v:
                newChild = children
                newChild['props']['value'] = newValue
                newChildren.append(newChild)
        for children in s[0]['props']['children']:
            if children['props']['value'] == v:
                newChild = children
                newChild['props']['value'] = newValue
                newChild['props']['children'] = newValue
                newList.append(newChild)
        return newChildren, newValue, newList
    return [no_update]*3

app.run(debug=True)

As far as pulling data from a figure to go to another chart, yes, this is possible, you’d just need to select it from the ‘data’ that corresponds to the selected plot in the figure.

4 Likes