10

I have a basic datatable in plotly/dash. My goal is to upload (or print for the sake of the example...) after I press the upload-button.

The issue is, that I can't figure out how to get the n_clicks attribute of the button back to zero. So what happens is that after I clicked the button for the first time it prints continuously whenever something changes (row added or number changed/added), but what I want is for it to print only once whenever I click the button.

This is the code:

import dash
from dash.dependencies import Input, Output, State
import dash_table
import dash_daq as daq

import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']


df = pd.read_csv('.../dummy_csv.csv')


app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(id='my-div'),

    dash_table.DataTable(
        id='adding-rows-table',
        style_data={
            'whiteSpace': 'normal',
            'height': 'auto'
        },
        style_table={
            'maxHeight': '800px'
            , 'overflowY': 'scroll'
        },
        columns=[
            {'name': i, 'id': i} for i in df.columns
        ],
        data=df.to_dict('records'),
        editable=True,
        row_deletable=True

    ),

    html.Button('+ Row', id='editing-rows-button', n_clicks=0),

    html.Button('Update', id='btn-nclicks-1', n_clicks=0 ),

])


@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input('btn-nclicks-1', 'n_clicks'), Input('adding-rows-table', 'data')]
)
def update_output_div(n_clicks, data):
    if n_clicks > 0:
        print(data)
        # n_clicks = 0
        # return n_clicks

    else:
        print("else loop")


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


if __name__ == '__main__':
    app.run_server(debug=True)

This the CSV:

a,b,c,d
1,1,5,1
2,2,5,1
2,33,6,2
3,4,6,2

And this is the "faulty" output.

Flavia Giammarino
  • 7,987
  • 11
  • 30
  • 40
tristan
  • 105
  • 1
  • 2
  • 12

3 Answers3

14

You could use the dash.callback_context property to trigger the callback only when the number of clicks has changed rather than after the first click. See the section on "Determining which Button Changed with callback_context" in the Dash documentation. The following is an example of how you could update your callback.

@app.callback(Output(component_id='my-div', component_property='children'),
    [Input('btn-nclicks-1', 'n_clicks'), Input('adding-rows-table', 'data')])
def update_output_div(n_clicks, data):

    changed_id = [p['prop_id'] for p in dash.callback_context.triggered][0]

    if 'btn-nclicks-1' in changed_id:

        print(data)
        # n_clicks = 0
        # return n_clicks

    else:

        print("else loop")
Flavia Giammarino
  • 7,987
  • 11
  • 30
  • 40
  • 1
    Thanks very much! This worked - although even with looking up the documentation you mentioned I don't really understand why it works. could you maybe elaborate your solution a bit further? – tristan Jul 01 '20 at 08:41
  • @tristan, if it helps--the `dash.callback_context.triggered` captures the properties that have changed since last call back. That means even after `n_clicks` becomes positive, it may not be part of `dash.callback_context.triggered`. Thus, use of the latter prevents unwanted firing of callbacks based on `n_clicks`. – tash Oct 05 '21 at 00:58
2

You can reset the n_clicks=None attribute, and it won't trigger an infinite loop when used in combination with a PreventUpdate null condition that you are probably already using.

@callback(
    Output('some_btn', 'n_clicks'),
    Input('some_btn', 'n_clicks')
)
def upon_click(n_clicks):
    if (n_clicks is None): raise PreventUpdate
    print(n_clicks)#1
    return None

It's a bit more explicit and faster than callback_context ‍♂️ For example, my button's id contained a complex "pattern-matching callback" so I didn't want to parse the callback context for that id

Kermit
  • 4,922
  • 4
  • 42
  • 74
0

An option that worked for me is: n_clicks = 0 in the button declaration. create list and add click data, then check if next index is greater than current index.

An approximate example with your code would be:

list_clicks = []
@app.callback(
    Output('adding-rows-table', 'data'),
    [Input('editing-rows-button', 'n_clicks')],
    [State('adding-rows-table', 'data'),
     State('adding-rows-table', 'columns')])
def add_row(n_clicks, rows, columns):

    list_clicks.append(n_clicks)

    for index in range(len(list_clicks)-1):
        if list_clicks[index + 1] > list_clicks[index]:
            list_clicks.clear()
            rows.append({c['id']: '' for c in columns})
    
    return rows

clicking on the button n_clicks is increased by 1. What the code block does is compare if the current index is greater than the previous one. If it is greater, it means that the button was clicked.

list_clicks.clear() it is to clean the list and not iterate over the same passed values.

maybe you could adapt it better to your code!

NicolasDiaz
  • 1
  • 1