Black Lives Matter. Please consider donating to Black Girls Code today.

Is it possible to replace first set of buttons with a second set of buttons upon clicking on any of the first set of buttons?

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’)

Answered:

all_options = {}
for i in [‘LOB1’, ‘SEVERITY’, ‘OUTAGE_TYPE’, ‘EFFECT’, ‘OUTAGE_CAUSE’]:
all_options[i] = list(df[i].unique())

app = dash.Dash()

app.layout = html.Div(className = “container-fluid”,
children = [

     html.Div(className = 'row',
         children = [    
  
            html.Div(className = 'col-4', id = 'text-left'),
        


             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(id = 'text-mid', style = {'marginLeft': 250, 'marginRight': 250}),
                    
                ], style = {'text-align':'center'}
              ),
            
             
             html.Div(className = 'col-4',                         
                     
                children = [
                    
                    html.Div(id = 'prob-graph', style = {'border':'2px solid', 'marginTop': 0}),
                    html.Div(id = 'init-buttons', n_clicks = 1),
                    

            ]),
                 
    ]),

])

@app.callback(
Output(component_id = ‘init-buttons’, component_property = ‘children’),
[Input(component_id = ‘init-buttons’, component_property = ‘n_clicks’)],
)
def data_to_div(clicks):
return func_dummy_iteration(my_input = clicks, func = func_buttonset)

@app.callback(
Output(component_id = ‘prob-graph’, component_property = ‘children’),
[Input(component_id = ‘init-buttons’, component_property = ‘n_clicks’)],
)
def data_to_graph(clicks):
return func_dummy_iteration(my_input = clicks, func = func_prob_graph)

@app.callback(
Output(component_id = ‘text-left’, component_property = ‘children’),
[Input(component_id = ‘init-buttons’, component_property = ‘n_clicks’)],
)
def data_to_graph(clicks):
return func_dummy_iteration(my_input = clicks, func = func_left_textset)

@app.callback(
Output(component_id = ‘text-mid’, component_property = ‘children’),
[Input(component_id = ‘init-buttons’, component_property = ‘n_clicks’)],
)
def data_to_graph(clicks):
return func_dummy_iteration(my_input = clicks, func = func_mid_textset)

def func_dummy_iteration(my_input, func):

print(my_input, df['DRQS'][math.floor((my_input - 1)/5)])

v_drqs = df['DRQS'][math.floor((my_input - 1)/5)]

if my_input%5 == 1:
    return func(drqs = v_drqs, target = 'LOB1')
if my_input%5 == 2:
    return func(drqs = v_drqs, target = 'EFFECT')
if my_input%5 == 3:
    return func(drqs = v_drqs, target = 'SEVERITY')
if my_input%5 == 4:
    return func(drqs = v_drqs, target = 'OUTAGE_TYPE')
if my_input%5 == 0:
    return func(drqs = v_drqs, target = 'OUTAGE_CAUSE')

def func_left_textset(drqs, target):
return html.Div([
html.Div([
html.Div([
html.H1(‘DRQS ’ + str(drqs),
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[0],
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(i[1],
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 zip([‘TITLE’,‘DETAILS’,‘ROOT CAUSE’], [df.loc[df.DRQS == drqs, ‘TITLE_ORIG’],df.loc[df.DRQS == drqs, ‘DETAILS_ORIG’],df.loc[df.DRQS == drqs, ‘ROOT_CAUSE_ORIG’]])
]),
])

def func_mid_textset(drqs, target):
return html.Div(
children = [
html.Div(children = [
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’],[k for k in [df.loc[df.DRQS == drqs, ‘OUTAGE_TYPE_RESPONSIBLE_PARTY_ORIG’], df.loc[df.DRQS == drqs, ‘ADSK_SDSK_COUNT’]]])
])

def func_buttonset(drqs, target):
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’,
},
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’])
])

def func_prob_graph(drqs, target):
return html.Div([
dcc.Graph(
figure = {
‘data’: [go.Bar(
x = df1.loc[(df1.DRQS == drqs) & (df1.TARGET == target)].nlargest(4, ‘PROBABILITY’).sort_values(by = ‘PROBABILITY’, ascending = True)[‘PROBABILITY’],
y = df1.loc[(df1.DRQS == drqs) & (df1.TARGET == target)].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 = ‘’ + target + ‘’,
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’)
),
},
)
])