How to update the result in a Dash data table and Dash graphs from the new row in the input data table

Viewed 857

I'm new to Dash and trying to add a new row to a Dash DataTable (editable-input-table). The new row will update the result in another Dash DataTable (info-table) and 2 graphs.

I'm following the instruction in Editable DataTable but the 2nd table and the graphs don't update automatically after I add a new row. I guess it's probably because of my validate_new_data callback?

Here's my code.

def editable_input_table(df):
    editable_input = html.Div(
                children=[dash_table.DataTable(
                id="editable-input-table",
                data=df.to_dict('records'),  # the contents of the table...
    return editable_input


def insert_row():
    new_row = html.Div(dbc.Button('Add Row', id='adding-rows-button', n_clicks=0,
                                  color='secondary', outline=True))
    return new_row


def table(df):
    datatable = html.Div(
        children=[dash_table.DataTable(
            id='info-table',
            columns=[{...}]
            data=df.to_dict('records'),  # the contents of the table
    return datatable


@app.callback(
    Output('editable-input-table', 'data'),
    Input('adding-rows-button', 'n_clicks'),
    State('editable-input-table', 'data'),
    State('editable-input-table', 'columns')
)
def add_row(n_clicks, rows, columns):
    if n_clicks > 0:
        rows.append({c['id']: '' if columns.index(c) != 0 else len(rows) for c in columns})
    return rows


@app.callback(
    [Output('editable-input-table', 'children'),
    Output('validation-alert', 'children'),
    Output('validation-alert', 'is_open')],
    Input('editable-input-table', 'data_timestamp'),
    [State('editable-input-table', 'data'),
     State('validation-alert', 'is_open')]
)
def validate_new_data(timestamp, data, is_open):
    for row in data:
        if not (type(row['centre']) == str) or row['centre']=='':
            is_open = True
            return [dash.no_update, '"centre" must be a unique string', is_open]
        ....
    return data.to_dict("records")


@app.callback(
    [Output('slider-output', 'children'),
    Output('info-table','data'),
    Output('bar-chart', 'figure'),
    Output('pie-chart', 'figure')],
    [Input('my-slider', 'value'),
    Input('editable-input-table', 'data'),
    Input('editable-input-table', 'columns')],

)
def update_output(value, rows, columns):
    df = pd.DataFrame([[row.get(c['id'], None) for c in columns] for row in rows],
                      columns=[c['name'] for c in columns])

    res = build(df, value)
    
    bar_fig ....
    pie_fig ....

    return '{}'.format(value), res.to_dict("records"), bar_fig, pie_fig

Please tell me what I did wrong. Thank you!

0 Answers
Related