i want to create a dash table where there is a list of image in one column and another column there is a table . under image there are next and previous button . if i click on next button the image will go forward and table will change accordingly . and for previous button it is vice versa . now the problem is if i edit the table cell . ;after editing when i go forward or back ward and comeback to the image the edited value went to the initial value before edit… how can i remain unchange the value ? where i should modify my code ?
import dash
from dash import html, dcc, Input, Output, State, dash_table
import dash_bootstrap_components as dbc
import pandas as pd
app = dash.Dash(
name,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{“name”: “viewport”, “content”: “width=device-width, initial-scale=1.0”}
],
)
image_list = [
“assets/images.jpeg”,
“assets/download.jpeg”,
“assets/images (1).jpeg”,
“assets/dx.png”,
“assets/imagesd1.jpeg”,
“assets/images2.jpeg”
]
data = {
‘A’: [2, 6, 10, 14, 18, 22],
‘B’: [3, 7, 11, 15, 19, 23],
‘C’: [4, 8, 12, 16, 20, 24],
‘D’: [5, 9, 13, 17, 21, 25]
}
data = pd.DataFrame(data)
table_data = [{‘Feature’: col, ‘Value’: data[col][0]} for col in data.columns]
image_index = 0
edited_values = {} # Store edited cell values
row_1 = dbc.Row(
[
dbc.Col(
[
html.H5(‘OCR Validator’, style={“text-align”: “center”}),
]
)
],
style={‘backgroundColor’: ‘lightblue’}
)
row_2 = dbc.Row(
[
dbc.Col(
[
dbc.Row(
[
dbc.Col(
[
html.Br(),
html.Img(
id=‘image’,
src=image_list[0],
style={
‘width’: ‘400px’,
‘height’: ‘500px’,
‘margin-left’: ‘100px’,
‘margin-top’: ‘30px’,
‘margin-bottom’: ‘40px’,
‘margin-right’: ‘150px’
}
),
dbc.Row(
[
dbc.Col(
[
dbc.Button(
“Previous”,
id=“previous-button”,
color=“primary”
),
],
),
dbc.Col(
[
dbc.Button(
“Next”,
id=“next-button”,
color=“primary”,
style={‘margin-left’: ‘197px’, ‘width’: ‘90px’}
),
],
style={‘backgroundColor’: ‘gray’}
)
],
style={‘backgroundColor’: ‘gray’, ‘border-radius’: ‘5px’}
)
],
width=12,
style={
‘border-width’: ‘25px’,
‘backgroundColor’: ‘White’,
‘border-radius’: ‘10px’,
‘border’: ‘2px solid black’,
‘margin-right’: 0,
‘height’: 700
}
)
],
style={
‘height’: 700,
‘margin-left’: ‘0px’,
‘margin-right’: ‘10px’,
‘margin-top’: ‘0px’,
‘backgroundColor’: ‘skyblue’
}
)
],
width=6,
style={‘backgroundColor’: ‘#FAF9F6’}
),
dbc.Col(
[
html.Br(),
html.Br(),
html.Br(),
html.H3(‘Table Section’),
html.Hr(),
html.Br(),
dash_table.DataTable(
id=‘table’,
columns=[{‘name’: ‘Feature’, ‘id’: ‘Feature’}, {‘name’: ‘Value’, ‘id’: ‘Value’}],
data=table_data,
page_action=‘none’,
fixed_rows={‘headers’: True},
editable=True,
style_table={‘width’: ‘500px’, ‘height’: ‘180px’, ‘margin-left’: 30},
page_size=4,
style_cell={
‘textAlign’: ‘center’,
‘padding’: ‘0px’,
‘minWidth’: 90,
‘maxWidth’: 90,
‘width’: 90,
‘overflow’: ‘hidden’,
‘height’: ‘auto’,
‘textOverflow’: ‘ellipsis’,
‘font-family’: ‘monospace’,
‘transform’: ‘rotate(-360deg)’
}
),
html.Br(),
html.Button(‘Save Table’, id=‘save-table-button’, n_clicks=0),
dbc.Alert(
“Table data saved!”,
id=“confirmation-message”,
color=“success”,
dismissable=True,
is_open=False,
)
],
style={
‘backgroundColor’: ‘#fffdd0’,
‘border’: ‘2px solid black’,
‘border-radius’: ‘15px’,
‘margin-right’: ‘13px’
}
)
],
style={‘height’: ‘700px’, ‘backgroundColor’: ‘white’}
)
app.layout = dbc.Container(
[
row_1,
row_2,
],
fluid=False,
style={‘border’: ‘3px solid black’}
)
@app.callback(
Output(‘table’, ‘data’),
Output(‘image’, ‘src’),
Input(‘next-button’, ‘n_clicks’),
Input(‘previous-button’, ‘n_clicks’),
State(‘table’, ‘data’)
)
def update_table_and_image(next_clicks, previous_clicks, table_data):
global image_index
ctx = dash.callback_context
button_id = ctx.triggered[0]['prop_id'].split('.')[0]
if button_id == 'next-button':
image_index = (image_index + 1) % len(image_list)
elif button_id == 'previous-button':
image_index = (image_index - 1) % len(image_list)
next_image = image_list[image_index]
table_data = [{'Feature': col, 'Value': edited_values.get(col, data[col][image_index])} for col in data.columns]
return table_data, next_image
@app.callback(
Output(‘table’, ‘data’),
Input(‘table’, ‘data_previous’),
State(‘table’, ‘data’) # Get the current table data
)
def handle_table_edits(previous_data, current_data):
global edited_values
if previous_data != current_data:
for row in current_data:
feature = row['Feature']
edited_values[feature] = row['Value']
return current_data
@app.callback(
Output(“confirmation-message”, “is_open”),
Output(“save-table-button”, “n_clicks”),
Input(“save-table-button”, “n_clicks”),
prevent_initial_call=True,
)
def display_confirmation_message(n_clicks):
if n_clicks > 0:
return True, 0
return False, 0
if name == ‘main’:
app.run_server(debug=True)