I have created a dash app that uses the dbc.modal command to display detailed data when a button is clicked.
The modal displays all the elements requested accept a data table i created with plotly.
The modal includes two drop downs, an html string, the data table and a subplot. All display except the table. No error is displayed and the placeholder coordinate frame is displayed but the table is not.
Here is the code:
html.Div(
[
dbc.Modal(
children = [
dbc.ModalHeader(
children = [
dbc.ModalTitle('Decorating Machine Details',style={"textAlign": "center"}),
]
),
dbc.ModalBody(children = [
dcc.Dropdown(['Bander 4', 'Bander 3', 'Cerinnov','Kammann 1','Kammann 2','Kammann 3','Rotary Screen 1','Rotary Screen 2','Isimat'],
id={'type': 'decdropdown','index': 'finishing'},
value = 'Bander 4',
placeholder="Select Decorating Machine",
),
dcc.Dropdown(['A1', 'A2', 'C1','C2','D1','D2'], id={'type': 'lehr-dropdown','index': 'finishing'},placeholder = "Select Lehr Lane",value = 'D2'),
html.Pre(id={'type': 'lehrproduct','index': 'finishing'},
style={
'textAlign': 'left','fontSize': 19,'marginBottom': 0, 'marginTop': 1, 'font-family':'Arial Black'
}),
dcc.Graph(id={'type': 'pickupTable','index': 'finishing'},
style={"height":300}),
dcc.Graph(id={'type': "modaltrends",'index': 'finishing'})
]),
],
id="decmachine-modal",
size="xl",
centered=True,
is_open=False,
),
],
className="mb-3",
),
And here is the code for the callback that builds the table and the “lehrproduct” element.
@callback(
Output({‘type’: ‘lehrproduct’,‘index’: MATCH}, ‘children’),
Output({‘type’: ‘pickupTable’,‘index’: MATCH}, ‘children’),
Input({‘type’: ‘fini_process’,‘index’:MATCH},‘children’),
Input({‘type’: ‘lehr-dropdown’,‘index’: MATCH}, ‘value’),
Input({‘type’: ‘lehrPickupType’,‘index’:MATCH},“children”),
Input({‘type’: ‘finimajors’,‘index’:MATCH},“children”),
Input({‘type’: ‘finiminors’,‘index’:MATCH},“children”),
)
def buildfinishingqualitytable(products_json,lehr,QCAction,dffinimajors_json,dffiniminors_json):
dfproducts = pd.read_json(products_json,orient =‘split’)
dffinimajors=pd.read_json(dffinimajors_json,orient =‘split’)
dffiniminors=pd.read_json(dffiniminors_json,orient =‘split’)
print(‘getFinishingproduct’)
title = "{} - {} - {} - {}".format(lehr,str(dfproducts['product'].loc[lehr]),str(dfproducts['process'].loc[lehr]),QCAction)
#titleD2 = "<b>D2 - {} Sel: {} spd:{}</b>".format(str(dfproducts.loc['523'].values[0]),str(poss523),str(speed523))
headerColor = 'grey'
rowEvenColor = 'lightgrey'
rowOddColor = 'white'
print(title)
#header=dict(
# values=['<b>Lehr</b>','<b>D1</b>','<b>D2</b>','<b>C1</b>','<b>C2</b>','<b>A1</b>','<b>A2</b>'],
#
# fill_color=['white'],
## align=['center'],
# font=dict(color='black', size=16),
# line=dict(color='black')
# ),
print(dffinimajors['result'].loc[0])
print(dffiniminors['result'].loc[0])
figtab = go.Figure(data=[go.Table(
header=dict(
values=['Class'],
fill_color=['white'],
align=['center'],
font=dict(color='black', size=16),
line=dict(color='black')
),
cells=dict(
values=[
['Majors','Minors'],
],
line_color='darkslategray',
align = ['center'],
font = dict(color = 'black', size = 12),
)
),
])
figtab.update_layout(
margin=dict(
l=10,
r=10,
b=1,
t=20,
pad=2
),
showlegend=False
)
print(figtab)
return title, \
figtab
I know the callback is executing correctly because “lehrproduct” is correctly returned when the modal is entered. I am using dash 2.6.2
This is how the modal is displayed:
