Clientside callback selectedpoints

Dash Python
7

Thanks for helping me out.
I tried it like this but it didn’t seem to work.
My current code :


import dash
import pandas as pd
import plotly.graph_objects as go
import dash.dcc as dcc
import dash.html as html
import plotly.express as px
from dash.dependencies import Input, Output, State, ALL


iris_df = px.data.iris()
setosa = iris_df[iris_df["species"] == "setosa"]


def layout():
    figures = []
    measures = ["sepal_length", "sepal_width", "petal_length", "petal_width"]
    plots = [(x, y) for x in measures for y in measures]
    for idx, plot in enumerate(plots):
        if plot[0] == plot[1]:
            continue
        fig = go.Figure()
        fig.add_trace(
            go.Scatter(
                x = setosa[plot[0]],
                y = setosa[plot[1]],
                customdata= list(setosa.index),
                mode="markers"
            )

        )
        fig.update_layout(
                        title="{}: {}".format(plot[0], plot[1]),
                        xaxis_title=str(plot[0]),
                        yaxis_title=str(plot[1]))
        
        graph = dcc.Graph(id= {"type": "graph", "index": idx} , figure=fig)
        figures.append(graph)
    return(html.Div([dcc.Store(id="selection"),html.Div(figures)]))

app = dash.Dash(__name__)
app.layout = layout()

@app.callback(
    Output("selection", 'data'),
    Input({"type": "graph", "index": ALL}, 'selectedData'),
    prevent_initial_call=True
)
def selection(sel):
    points = []
    for i in sel:
        if i is None:
            continue
        for point in i['points']:
            points.append(point['customdata'])
    print(points)
    return list(set(points))


app.clientside_callback(
"""
function(data, figure) {
    console.error(data);
    for (var i = 0; i < figure.length; i++) {
        const ids = figure[i]['data'][0]['customdata']
        const intersect = data.filter(value => ids.includes(value));
        const selected = intersect.map(x => ids.indexOf(x))
        selected.sort();
        figure[i]['data'][0]['selectedpoints'] = selected
    }
    console.error(figure[2]);
    return figure;
}""",
Output({"type": "graph", "index": ALL}, "figure"),
Input("selection","data"),
State({"type": "graph", "index": ALL}, "figure"),
prevent_initial_call=True
)



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