Dash plotly use clientside_callback to update color_continuous_scale

Dash Python
1

I have a large amount of data and I hope updating the colors can be achieved via client side drawing or partial updates.
This is my implementation, it works badly, what should I do?

import plotly.express as px
df = px.data.tips()
fig = px.scatter(df, x="total_bill", y="tip", color="size",
                 title="Numeric 'size' values mean continuous color")


from dash import Dash, dcc, html,Output,Input,State,clientside_callback

app = Dash()
app.layout = html.Div([
    html.Button("motify colorscale",id = "test"),
    dcc.Graph(figure=fig,id = "fig"),
])

clientside_callback(
    """
    function(n_clicks,figure) {
        if(figure === undefined) {
            return window.dash_clientside.no_update;
        }

         // type = figure["data"]["type"];
        var layout = figure["layout"];
        var old_colorscale = layout["coloraxis"]["colorscale"];
        // loop modify colors
        colorscale = ['#440154',
            '#482878',
            '#3e4989',
            '#31688e',
            '#26828e',
            '#1f9e89',
            '#35b779',
            '#6ece58',
            '#b5de2b',
            '#fde725'
        ];
        for (let i = 0; i < old_colorscale.length; i++) {
            old_colorscale[i][1] = colorscale[i];
        }
        layout["coloraxis"]["colorscale"] = old_colorscale;
        const fig = Object.assign({}, figure, {
            'layout': layout
        });
        return fig;
    }
    """,
    Output('fig', 'figure',allow_duplicate=True),
    Input("test","n_clicks"),
    State('fig', 'figure'),
    prevent_initial_call=True
)
if __name__ == "__main__":
    app.run_server(debug = True)
3

It solved by using Patch. example:

@callback(
    Output("dim-plot","figure",allow_duplicate=True),
    Input("test","n_clicks")
    prevent_initial_call=True
)
def update_colors(n_clicks):
    patched_figure = Patch()
    colors=  ['#440154',
            '#482878',
            '#3e4989',
            '#31688e',
            '#26828e',
            '#1f9e89',
            '#35b779',
            '#6ece58',
            '#b5de2b',
            '#fde725'
        ]
    for index,color in enumerate(colors):
            patched_figure["data"][index]["marker"]["color"] = color
    return patched_figure