I have created a ‘wizard’ in my app Using two dash tables. How it works is that I select a plant from the dropdown which then populates the table on the left. I think have two buttons in the middle which allow me to go back and forth. It works perfectly fine for any given plant.
However, when I try to change plants, it doesn’t reset. The biggest issue is that I have the right arrow set to disable after 4 selections (the max we are allowing). But when I change plants, it’s not registering that there are now zero selections, it’s still waiting for that to change.
I’m sure it’s a simple thing but I’ve been working on this for hours today and have spent too long looking at it so I’m hoping a fresh set of eyes will help. The layout and callback codes are below the image.
Thanks in advance!
dbc.Modal([
dbc.ModalHeader(dbc.ModalTitle('Settings'), close_button=True),
dbc.ModalBody([
html.Div([
html.Center([
html.H5('Select a Plant'),
dcc.Dropdown(
id='diag-plant-drop',
options=np.sort(all_with_areas_names_df.Area_0.unique()),
placeholder='Plant',
style={'width': '300px', 'text-align': 'left'},
clearable=True,
)
],
style={'margin-top': '10px', 'margin-bottom': '25px'}
),
]),
html.Div([
dbc.Row([
html.Center([
html.H5('Select up to 4 points to display'),
],
style={'margin-bottom': '10px'}
)
]),
dbc.Row([
dbc.Input(
id='search-points',
placeholder='Search',
type='text',
style={'width': '30%', 'margin-left': '5%'}
),
],
style={'margin-bottom': '10px'}
),
dbc.Row([
dbc.Col([
dash_table.DataTable(
id={
'type': 'table',
'index': 'modal-point-table-left'
},
data=[],
columns=[{'id': 'points', 'name': 'Points'}],
style_cell={'text-align': 'left',
'border': '1px solid rgb(200,200,200)',
'maxHeight': '8px', 'padding': '0px',
'font-family': 'Arial'},
style_table={'height': '400px', 'overflowY': 'auto',
'border': '1px solid grey'},
style_data={
'font-size': '12px',
'whiteSpace': 'normal',
'height': '10px',
'lineHeight': '10px',
'color': 'black',
'backgroundColor': 'white',
},
)
],
width=5
),
dbc.Col([
html.Div([
dbc.Button([
html.I(
className="fa-solid fa-arrow-right",
style={'font-size': '24px'}
),
],
color='secondary',
outline=True,
style={'width': '70px'},
id='add-modal-select',
disabled=False,
),
dbc.Button([
html.I(
className="fa-solid fa-arrow-left",
style={'font-size': '24px'}
),
],
color='secondary',
outline=True,
style={'width': '70px'},
id='remove-modal-select',
disabled=False
)
],
style={'display': 'flex', 'flex-direction': 'column',
'gap': '100px', 'justify-content': 'space-around',
'align-items': 'center', 'height': '400px'}
)
],
width=2
),
dbc.Col([
dash_table.DataTable(
id={
'type': 'table',
'index': 'modal-point-table-right'
},
data=[],
columns=[{'id': 'Selections', 'name': 'Selections'}],
style_cell={'text-align': 'left',
'border': '1px solid rgb(200,200,200)',
'maxHeight': '8px', 'padding': '0px',
'font-family': 'Arial'},
style_table={'height': '400px', 'border': '1px solid grey'},
style_data={
'font-size': '12px',
'whiteSpace': 'normal',
'height': '10px',
'lineHeight': '10px',
'color': 'black',
'backgroundColor': 'white',
},
)
],
width=5
),
]),
dbc.Row([
html.Div(
html.Center(
html.H5('Select a Date Range')
)
),
html.Div([
dmc.DatePicker(
id='modal-start-date',
maxDate=dt.today(),
style={'width': '200px'},
clearable=True,
inputFormat='MM-DD-YYYY'
),
html.P('to'),
dmc.DatePicker(
id='modal-end-date',
maxDate=dt.today(),
style={'width': '200px'},
clearable=True,
inputFormat='MM-DD-YYYY'
)
],
style={'display': 'flex', 'justify-content': 'center',
'gap': '20px', 'align-items': 'baseline'}
)
],
style={'margin-top': '35px'}
)
],
id='wizard-div',
)
],
style={'height': '750px'}
),
dbc.ModalFooter(
dbc.Button(
'Create View',
id='modal-create-btn',
n_clicks=0,
style={'width': '125px'},
color='secondary'
)
)
],
id='view-modal',
centered=True,
is_open=False,
size='xl',
)
@app.callback(
Output({'type': 'table', 'index': 'modal-point-table-left'}, 'data'),
Output({'type': 'table', 'index': 'modal-point-table-left'}, 'columns'),
Output({'type': 'table', 'index': 'modal-point-table-right'}, 'data'),
Output('add-modal-select', 'disabled'),
Output('diag-plant-drop', 'value'),
Input('diag-plant-drop', 'value'),
State('store', 'data'),
Input('add-modal-select', 'n_clicks'),
Input('remove-modal-select', 'n_clicks'),
State({'type': 'table', 'index': 'modal-point-table-left'}, 'active_cell'),
State({'type': 'table', 'index': 'modal-point-table-right'}, 'active_cell'),
State({'type': 'table', 'index': 'modal-point-table-left'}, 'data'),
State({'type': 'table', 'index': 'modal-point-table-right'}, 'data'),
State('add-modal-select', 'disabled'),
Input('search-points', 'value')
)
def create_wizard(value, data, add_row, remove_row, left_cell, right_cell, left_table, right_table, add_enabled,
search_value):
df = pd.DataFrame(data['df'])
df_points = df[['Area_0', 'Short_Description']].copy()
df_points.rename(columns={'Short_Description': 'Points'}, inplace=True)
if not value:
return [], dash.no_update, [], dash.no_update, ''
else:
df_plant_spec = df_points[df_points['Area_0'] == value]
df_plant_spec = df_plant_spec[['Points']]
df_plant_spec.sort_values(by='Points', inplace=True)
if search_value:
df_plant_spec = df_plant_spec[df_plant_spec['Points'].str.contains(search_value, case=False)]
if len(right_table) == 0:
if ctx.triggered_id == 'add-modal-select':
row = left_cell['row']
info = left_table[row]
spec_point = info['Points']
right_table = [{'Selections': spec_point}]
left_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, dash.no_update, \
value
else:
return df_plant_spec.to_dict('records'), [{'id': i, 'name': i} for i in df_plant_spec.columns], \
right_table, dash.no_update, value
elif len(right_table) == 1:
if ctx.triggered_id == 'add-modal-select':
row = left_cell['row']
info = left_table[row]
spec_point = info['Points']
right_table.append({'Selections': spec_point})
left_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, dash.no_update, \
value
elif ctx.triggered_id == 'remove-modal-select':
row = right_cell['row']
info = right_table[row]
spec_point = info['Selections']
left_table.append({'Points': spec_point})
left_table = sorted(left_table, key=lambda x: x['Points'])
right_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, dash.no_update, \
value
elif len(right_table) == 2:
if ctx.triggered_id == 'add-modal-select':
row = left_cell['row']
info = left_table[row]
spec_point = info['Points']
right_table.append({'Selections': spec_point})
left_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, dash.no_update, \
value
elif ctx.triggered_id == 'remove-modal-select':
row = right_cell['row']
info = right_table[row]
spec_point = info['Selections']
left_table.append({'Points': spec_point})
left_table = sorted(left_table, key=lambda x: x['Points'])
right_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, dash.no_update, \
value
elif len(right_table) == 3:
if ctx.triggered_id == 'add-modal-select':
row = left_cell['row']
info = left_table[row]
spec_point = info['Points']
right_table.append({'Selections': spec_point})
left_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, not add_enabled, \
value
elif ctx.triggered_id == 'remove-modal-select':
row = right_cell['row']
info = right_table[row]
spec_point = info['Selections']
left_table.append({'Points': spec_point})
left_table = sorted(left_table, key=lambda x: x['Points'])
right_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, dash.no_update, \
value
elif len(right_table) == 4:
if ctx.triggered_id == 'remove-modal-select':
row = right_cell['row']
info = right_table[row]
spec_point = info['Selections']
left_table.append({'Points': spec_point})
left_table = sorted(left_table, key=lambda x: x['Points'])
right_table.remove(info)
return left_table, [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, False,\
value
return df_plant_spec.to_dict('records'), [{'id': i, 'name': i} for i in df_plant_spec.columns], right_table, \
False, ''