Add Patch callbacks

[T4rk1n]

Add

• dash.Patch: return a Patch instance to do a partial update of the target prop without transferring the previous in a State. This object is like a proxy of the value on the frontend, you instantiate a patch and return it in callback: p = Patch(). You can set the subprop with attribute access or number index for array and keys which may not be a valid Python variable name: p.attribute = "attr" is same as p["attribute"] = "attr". Available operations:
  • Assign: p.assigned = "Assigned";
  • Append: `p.array.append()
• allow_duplicate argument to Output to allow multiple callbacks to target the same Output.

Example

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                dcc.Input(id="set-value"),
                html.Button("Set", id="set-btn"),
            ]
        ),
        html.Div(
            [
                dcc.Input(id="append-value"),
                html.Button("Append", id="append-btn"),
            ]
        ),
        html.Div(
            [
                dcc.Input(id="prepend-value"),
                html.Button("prepend", id="prepend-btn"),
            ]
        ),
        dcc.Store(
            data={
                "value": "unset",
                "n_clicks": 0,
                "array": ["initial"],
                "delete": "Delete me",
            },
            id="store",
        ),
        html.Div(id="store-content"),
    ]
)

app.clientside_callback(
    "function(value) {return JSON.stringify(value)}",
    Output("store-content", "children"),
    Input("store", "data"),
)

@app.callback(
    Output("store", "data"),
    Input("set-btn", "n_clicks"),
    State("set-value", "value"),
    prevent_initial_call=True,
)
def on_click(_, value):
    p = Patch()
    p.value = value
    p.n_clicks += 1

    return p

@app.callback(
    Output("store", "data", allow_duplicate=True),
    Input("append-btn", "n_clicks"),
    State("append-value", "value"),
    prevent_initial_call=True,
)
def on_click(_, value):
    p = Patch()
    p.array.append(value)
    p.n_clicks += 1

    return p

@app.callback(
    Output("store", "data", allow_duplicate=True),
    Input("prepend-btn", "n_clicks"),
    State("prepend-value", "value"),
    prevent_initial_call=True,
)
def on_click(_, value):
    p = Patch()
    p.array.prepend(value)
    p.n_clicks += 1

    return p

[alexcjohnson]

Beautiful. Can't wait to get this into peoples' hands! 💃

[FatHare]

Good afternoon.

Thanks for allow_duplicate, it's a very nice addition.
Everything works well, except for clientside_callback. Support for clientside_callback was supposed to be? When adding allow_duplicate, an error occurs:

If you specify several ouputs(with and without allow_duplicate), then even though there will be an error, the value will be updated for ouput without allow_duplicate, but not for output with allow_duplicate, example:

Tell me, am I doing something wrong? Thank you very much.

Full code sample (with one callback, but I think this is enough to show the error):

import dash

from dash import Dash, html, Input, Output

app = Dash(__name__)
app.layout = html.Div(
    children=[
        html.Div(
            children=['Last pressed button: ', html.Span(id='span', children='empty')]
        ),
        html.Button(
            id='button-right',
            children='right'
        )
    ]
)

# NOT WORKING FOR "SPAN", BUT WARKING FOR BUTTON-RIGHT
dash.clientside_callback(
    """
    function(n_clicks){
        return ["right", `right ${n_clicks}`];
    }
    """,
    [
        Output('span', 'children', allow_duplicate=True),
        Output('button-right', 'children')
    ],
    Input('button-right', 'n_clicks'),
    prevent_initial_call=True
)

# WORKING EXAMPLE TO UNDERSTAND HOW IT SHOULD BE (THE ONLY DIFFERENCE IS THAT NO ALLOW_DUPLICATE)
# dash.clientside_callback(
#     """
#     function(n_clicks){
#         return ["right", `right ${n_clicks}`];
#     }
#     """,
#     [
#         Output('span', 'children'),
#         Output('button-right', 'children')
#     ],
#     Input('button-right', 'n_clicks'),
#     prevent_initial_call=True
# )

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