Can anyone please advise me how to dynamically “replace” a set of objects (in my case buttons) with a new set objects:
In other words, if I for example was to start up the dash app it initially creates a group of buttons. Upon clicking on one of these buttons all of them disappear and in their place appear a new set of buttons.
The code I have thus far for this issue is as follows:
app = dash.Dash()
app.layout = html.Div(className = “container-fluid”,
children = [
html.Div(className = 'row',
children = [
html.Div(className = 'col-4',
children = [
html.Div([
html.Div([
html.H1('DRQS 100053291',
style={'color': 'black', 'fontSize': '1.6vw', 'border':'1px solid #7f7f7f','background-color': '#f8f8f8', 'padding': '10px', 'border-radius': '4px', 'font-family':'Impact, Charcoal, sans-serif'}),
],
style={'marginBottom': 0, 'marginTop': 10},
),
],style = {'margin-bottom': '11rem'}),
html.Div([
html.Div([
html.H1(i,
style={'color': 'white', 'font-size': '1.4vw', 'font-family': '"Arial Black", Gadget, sans-serif', 'background-clip': 'padding-box', 'border':'5px solid', 'border-color':'#7f7f7f', 'border-style': 'double','background-color': '#5e5e5e', 'padding': '12px', 'border-radius': '4px','font-weight': 'bold',}),
html.Div('This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test This is a test and some more information',
style={'color': '#7f7f7f', 'font-size': '.7vw', 'font-family': 'Courier New', 'border':'5px solid', 'border-style': 'double','background-color': '#f8f8f8', 'padding': '12px', 'border-radius': '4px',}),
],style={'marginBottom': '5rem', 'marginTop': 0}
) for i in ['TITLE','DETAILS','ROOT CAUSE']
]),
]
),
html.Div(className = 'col-4',
children = [
html.Div([
html.Div([
html.H1('ENRICHMENT DASHBOARD',
style={'color': 'black', 'fontSize': '1.7vw', 'font-family':'Impact, Charcoal, sans-serif'}),
],
style={'marginBottom': 0, 'marginTop': 0},
),
],style = {'margin-bottom': '1rem'}),
html.Div([
html.Button('UNDO', id='Undo', accessKey = 'r', title = 'Hotkey: Alt + r',
style = {
'border': '1px solid black',
'fontSize': '1vw',
'autosize': True,
'margin-right': 30,
'font-family': 'Arial Black',
'border-radius': '20px',
},
className = 'btn btn-outline-dark'
),
],style = {'margin-bottom': '8rem'}),
html.Div([
html.Div([
html.H1(i[0],
style={'color': 'black', 'fontSize': '.8vw', 'border':'1px solid #7f7f7f','background-color': '#f8f8f8', 'padding': '10px', 'border-radius': '4px', 'font-family':'"Arial Black", Gadget, sans-serif',}),
html.Div(i[1],
style={'color': 'white', 'font-size': '.9vw', 'font-family': 'Courier New', 'background-clip': 'padding-box', 'border':'5px solid', 'border-color':'#7f7f7f', 'border-style': 'double','background-color': '#909090', 'padding': '12px', 'border-radius': '4px','font-weight': 'bold',}),
],
style={'margin-bottom': '5rem'}
) for i in zip(['RESPONSIBLE GROUP','ADSK + SDSK'],['ENGINEERING','127'])
], style={'marginLeft': 250, 'marginRight': 250}),
],
style = {'text-align':'center'}
),
html.Div(className = 'col-4',
children = [
html.Div([
dcc.Graph(
id = 'Prob-Dist',
figure = {
'data': [
go.Bar(
x = df1.loc[(df1.DRQS == 100053291) & (df1.TARGET == 'LOB1')].nlargest(4, 'PROBABILITY').sort_values(
by = 'PROBABILITY', ascending = True)['PROBABILITY'],
y = df1.loc[(df1.DRQS == 100053291) & (df1.TARGET == 'LOB1')].nlargest(4, 'PROBABILITY').sort_values(
by = 'PROBABILITY', ascending = True)['CLASSES'].map(lambda x: x.replace('_',' ')),
orientation = 'h',
marker = dict(color = cl.scales['11']['qual']['Set3'],
line = dict(width = 1, color = 'black')),
)
],
'layout': go.Layout(
title = '<b>LINE OF BUSINESS<b>',
titlefont = dict(size = 40, family='Courier New, monospace'),
autosize = True,
height = 800,
margin = dict(
l = 175,
),
xaxis = dict(
title = 'PROBABILITY',
tickformat=".0%",
showticklabels=True,
zeroline=True,
ticks = 'outside'
),
yaxis = dict(
showticklabels=True,
zeroline=True,
ticks = 'outside')
),
},
),
], style = {'border':'2px solid', 'marginTop': 0}
),
html.Div(
children = [
html.Div(id = 'Start'),
html.Div(id = 'my-div', n_clicks = 0),
html.Div(id = 'my-div2')
]),
]),
]),
])
def fff(target = ‘LOB1’, drqs = 100053291, display = ‘inline’):
return html.Div([
html.Button(i.replace(’_’,’ ').upper(), id = i, accessKey = e + 1, title = 'Hotkey: Alt + ’ + str(e + 1),
style = {
‘height’: 45,
‘border’: ‘1px solid black’,
‘fontSize’: ‘.6vw’,
‘margin-top’: 5,
‘font-family’: ‘Arial Black’,
‘display’: display,
},
className = ‘btn btn-outline-dark w-100’
) for e, i in enumerate(df1.loc[(df1.TARGET == target) & (df1.DRQS == drqs),(‘CLASSES’,‘PROBABILITY’)].sort_values(by = ‘PROBABILITY’, ascending = False)[‘CLASSES’])
]),
@app.callback(
Output(component_id = ‘my-div’, component_property = ‘children’),
[Input(component_id = ‘Start’, component_property = ‘n_clicks’)],
)
def data_to_div(clicks):
print(clicks)
return fff(display = ‘inline’)