Unexplained callback behavior

dales · December 25, 2022, 3:26pm

I am trying to understand something in my application callback flow.
I am using pure Dash (2.7.0) and dash-extensions (0.1.8) @Emil

When i have an in Input updating an Output of a different component, my callbacks get triggered everytime i update the children of my parent component. In my example I have a button that adds 2 elements to the UI each time i click it. When I click the new button added, I expect the corresponding Output to update (ONLY when I click it) but it also gets fired everytime I add more buttons

In the screenshot below you can see that I only clicked the add button, but the trigger for each child button gets fired each time. I would only expect the text next to each button to be updated when it is clicked.

Can anyone suggest a workaround/hack or some kind of change I can make to get this to work. The code is written to mock part of my real code so I cant completely rewrite it all

Untitled

from dash import html, Output, Input, State, ctx, MATCH, ALL, dcc
from dash_extensions.enrich import DashProxy, OperatorTransform, OperatorOutput, Operator, MultiplexerTransform

app = DashProxy( __name__, transforms=[OperatorTransform(), MultiplexerTransform()], suppress_callback_exceptions=True)

def new_view2(index):
    return html.Div(f"Triggered 0", id={"type": "second-txt", "index": index}, style={"height": "23px"})


def new_view(index):
    return html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"})

@app.callback(
    Output({"type": "second-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "second-txt", "index": MATCH}, "children"),
    prevent_initial_call=True
)
def inc_counter_for_view(clicks, triggered):
    return f"Triggered {int(triggered.split()[1]) + 1}"

app.layout = html.Div([
        html.Button("Add View", id="add-view"),
        dcc.Store("items-store", data=[], storage_type="memory"),

        html.Div([
            html.Div([], id="v1", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
            html.Div([], id="v2", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
    ],
    style={"display": "flex", "flex-direction": "row", "gap": "5px", "margin-top": "5px"}
        )]
)

app.clientside_callback(
    """
    function(data, v1, v2) {
        v1.push(data.v1)
        v2.push(data.v2)
        return [v1, v2]
    }
    """,
    Output("v1", "children"),
    Output("v2","children"),
    Input("items-store", "data"),
    State("v1","children"),
    State("v2","children"),
    prevent_initial_call=True
)

@app.callback(
    Output("items-store", "data"),
    Input("add-view", "n_clicks"),
    State({"type": "action-card", "index": ALL}, "id"),
    prevent_initial_call=True,
)
def add_view(index, views):
    return {
            "v1": new_view(index),
            "v2": new_view2(index)
        }


app.run_server(debug=False)

jcuypers · December 25, 2022, 4:09pm

Not an expert but I think you would need to use a context and check which item triggered the the actual callback. Based on this you have a logic inside of your callback. refer to advanced callback documentation

section " Determining which Input Has Fired with dash.callback_context

Emil · December 25, 2022, 5:33pm

I believe callbacks are triggered, when components are added to the layout dynamically. In your clientside callback, you are re-adding all the buttons to the layout, thus triggering a callback for each of them.

dales · December 25, 2022, 5:58pm

I dont think this is entirely true…If i change the callback to be like below, then it does not trigger every time a new button is added to layout.

@app.callback(
    Output({"type": "action-btn", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "action-btn", "index": MATCH}, "children"),
    prevent_initial_call=True
)

instead of

@app.callback(
    Output({"type": "second-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "second-txt", "index": MATCH}, "children"),
    prevent_initial_call=True
)

dales · December 25, 2022, 6:03pm

Unfortunatelly the callback context indicates it was n_clicks that triggered the callback…when it wasn’t. The value of the triggered prop remains 0 but the callback is triggered

jinnyzor · December 25, 2022, 6:17pm

Hey @dales,

Same issue different day. Haha.

The only way I can think of is to store the total of n_clicks and compare against it each time. This should make sure that you don’t update unless there is an actual increase in the value triggers.

You could probably just use a memory store to accomplish this.

dales · December 25, 2022, 7:36pm

It is a different part of my app…similar behaviour to previous issue I have raised but in a different part with a different reason for triggering the callbacks…and I was hoping that this example would be somehow different. My biggest problem with some kind of timestamp hack is mainly due to the nature of my application. Several other teams will be writing plugins to the system for various visualisations. So I was looking for a solution that would not need them to implement something like this for each visualization.

I wonder why there can’t be some indication in the ctx that that was not a direct callback trigger rather from layout update. Like ctx.triggered_initiator or something

jinnyzor · December 26, 2022, 7:58am

@dales,

I had another thought, what if, whenever you went to add another element, you reset all the n_click values to 0 of all the children.

Then, in your callback, you check to make sure n > 0.

dales · December 26, 2022, 8:39am

This would mean that whoever writes a plugin needs to worry about these kind of behaviors which I am trying to avoid

dales · December 26, 2022, 8:51am

What I dont understand is why this does not reproduce if move the button to have a shared parent DIV vs having it placed somewhere else. The callbacks do not change, the only thing that changes is there the output-txt DIV is moved

@AnnMarieW, @adamschroeder do you have any explanation as to why this occurs in this case?

THIS DOES NOT CAUSE CALLBACKS TO FIRE WHEN NEW ELEMENTS ADDED TO LAYOUT
gif2

def right_view(index):
    return html.Div([
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])

THIS DOES CAUSE CALLBACKS TO FIRE WHEN NEW ELEMENTS ADDED TO LAYOUT
gif1

def right_view(index):
    return html.Div([
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
    ])

FULL CODE

from dash import html, Output, Input, State, ctx, MATCH, ALL, dcc, Dash

app = Dash( __name__, suppress_callback_exceptions=True)

def right_view(index):
    return html.Div([
        # This causes callbacks to fire whenever added to the layout
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])


def left_view(index):
    return html.Div([
        html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"}),
        # Moving the div here does not cause the callbacks to fire when added to the layout
        # html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])

@app.callback(
    Output({"type": "output-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "output-txt", "index": MATCH}, "children"),
    prevent_initial_call=True
)
def inc_counter_for_view(clicks, triggered):
    return f"Triggered {int(triggered.split()[1]) + 1}"

app.layout = html.Div([
        html.Button("Add View", id="add-view"),
        dcc.Store("items-store", data=[], storage_type="memory"),

        html.Div([
            html.Div([], id="left", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
            html.Div([], id="right", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
    ],
    style={"display": "flex", "flex-direction": "row", "gap": "5px", "margin-top": "5px"}
        )]
)

app.clientside_callback(
    """
    function(data, left, right) {
        left.push(data.left)
        right.push(data.right)
        return [left, right]
    }
    """,
    Output("left", "children"),
    Output("right","children"),
    Input("items-store", "data"),
    State("left","children"),
    State("right","children"),
    prevent_initial_call=True
)

@app.callback(
    Output("items-store", "data"),
    Input("add-view", "n_clicks"),
    prevent_initial_call=True,
)
def add_view(index):
    return {
            "left": left_view(index),
            "right": right_view(index)
        }

app.run_server(debug=True)

AnnMarieW · December 27, 2022, 4:38pm

Hi @dales

I ran your code and could replicate the issue. I’m not sure why it behaves differently depending on the which div the output-txt in, but maybe it’s the timing of when it’s added? (Just guessing)

You could check for n_clicks > 0 . I see your Triggered #message counter is updated manually in your example but the n_clicks remains at 0

jinnyzor · December 27, 2022, 6:33pm

Ooo, this is interesting.

As a rule of thumb, I always check to see if what I am using to trigger info actually exists.

However, checking to see if the value is above 0 or there wont work once you click a button once and then add it back. The n_clicks does not increase though.

So, if I do this, the value doesnt increase, but the callback is still triggered, I’m assuming due to the nature and reason why prevent_initial_call is necessary in most cases:

@app.callback(
    Output({"type": "output-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "output-txt", "index": MATCH}, "children"),
    prevent_initial_call=True
)
def inc_counter_for_view(clicks, triggered):
    if clicks:
        return f"Triggered {clicks}"
    return dash.no_update

prevent_initial_call will not work in this case because the layout has already loaded as we are adding to it.

This seems like an issue with outputs, and how they are parsed, but not even sure how you would go about tackling this…

dales · December 27, 2022, 6:53pm

Glad everyone sees the problem. And I can’t check the callback context because I don’t know how to differentiate between active and passive triggering

dales · December 27, 2022, 6:55pm

As @jinnyzor mentioned. Once the user interacts with the button then n_clicks will be > 0 so that check won’t work in this case.

jcuypers · December 27, 2022, 8:05pm

A crazy idea… not sure if it has any value though. What happens to disabled buttons? will they trigger a click/callback event when added? in theory it shouldn’t be possible. so imagine you add them disabled and then enable them through a client callback with a timer of 250 ms or something? Might still generate the callback then… but it might be worth a try

jinnyzor · December 27, 2022, 8:49pm

Nice thought, but this does not work.

Just as functions can be called on webpages even if the button is disabled, this still triggers a callback with the buttons disabled.

(disabling a button only works with people who play nice)

jcuypers · December 27, 2022, 8:53pm

Well, true the function is called but now you can pass in disabled as a state and block the update suboptimal but nice people can get mean too

jinnyzor · December 27, 2022, 8:54pm

@jcuypers,

I tried it, it still triggers the callback. Even with a disabled prop.

jcuypers · December 27, 2022, 8:55pm

i know, but this is where the disabled state comes in for the matching of the action buttons. if disabled dont fire

@app.callback(
    Output({"type": "output-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "output-txt", "index": MATCH}, "children"),
    State({"type": "action-btn", "index": MATCH}, "disabled"),
    prevent_initial_call=True
)
def inc_counter_for_view(clicks, triggered, disabled):

    if not disabled:
        return f"Triggered {int(triggered.split()[1]) + 1}"
    else: 
        return f"Triggered {int(triggered.split()[1])}"

jinnyzor · December 27, 2022, 9:12pm

Unfortunately, unless you were to have a button that toggles it independently, you end up with a circular callback with this. If you are really interested in a workaround:

from dash import html, Output, Input, State, ctx, MATCH, ALL, dcc, Dash
import dash

app = Dash( __name__, suppress_callback_exceptions=True)

def right_view(index):
    return html.Div([
        #html.Button(f"Button {index}", id={"type": "action-btn", "index": index}, n_clicks=0, style={"height": "23px"})
        # This causes callbacks to fire whenever added to the layout
        html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})
    ])


def left_view(index):
    return html.Div([
        html.Div([html.Button(f"Button {index}", id={"type": "action-btn", "index": index},
                              n_clicks=0, style={"height": "23px"})]),
        # Moving the div here does not cause the callbacks to fire when added to the layout
        #html.Div([html.Div(f"Triggered 0", id={"type": "output-txt", "index": index}, style={"height": "23px"})])

    ])

@app.callback(
    Output({"type": "output-txt", "index": MATCH}, "children"),
    Input({"type": "action-btn", "index": MATCH}, "n_clicks"),
    Input({"type": "output-txt", "index": MATCH}, "children"),
    State('added-store', 'data'),
    State({"type": "action-btn", "index": ALL}, "n_clicks"),
    prevent_initial_call=True
)
def inc_counter_for_view(clicks, triggered, s, _):
    if s != sum(_):
        return f"Triggered {int(triggered.split()[1]) + 1}"
    return dash.no_update

@app.callback(
    Output('added-store', 'data'),
    Input({"type": "action-btn", "index": ALL}, "n_clicks"),
)
def updateLast(n):
    return sum(n)

app.layout = html.Div([
        html.Button("Add View", id="add-view"),
        dcc.Store("items-store", data=[], storage_type="memory"),
        dcc.Store('added-store', data=[], storage_type='memory'),

        html.Div([
            html.Div([], id="left", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
            html.Div([], id="right", style={"display": "flex", "flex-direction": "column", "gap": "5px"}),
    ],
    style={"display": "flex", "flex-direction": "row", "gap": "5px", "margin-top": "5px"}
        )]
)

app.clientside_callback(
    """
    function(data, left, right) {
        left.push(data.left)
        right.push(data.right)
        return [left, right]
    }
    """,
    Output("left", "children"),
    Output("right","children"),
    Input("items-store", "data"),
    State("left","children"),
    State("right","children"),
    prevent_initial_call=True
)

@app.callback(
    Output("items-store", "data"),
    Input("add-view", "n_clicks"),
    prevent_initial_call=True,
)
def add_view(index):
    return {
            "left": left_view(index),
            "right": right_view(index)
        }

app.run_server(debug=True, port=12345)

This uses a dcc.Store to store the values of the n_clicks, if the value doesnt increase, then there is no update.

@dales,

I think you should make an issue on github. It seems to be associated with parsing info with different outputs in the same callback.

Topic		Replies	Views
Unwanted callback on page load Dash Python	10	6919	March 8, 2022
Button callbacks firing on every render Dash Python	2	421	January 29, 2021
Dash-extensions 0.0.45 to 0.0.47 - GroupTransform to MultiplexerTransform and Inputs trigger Dash Python	48	4249	July 17, 2022
Dash_table updates with chained callbacks Dash Python	11	3480	March 30, 2020
Chained callback is called in unexpected way Dash Python	3	244	April 27, 2023

Unexplained callback behavior

Related topics