selectedData is empty

šŸ“Š Plotly Python
1

hi. I want that when selecting relayoutData, the grid is updated for the selected range x, when selecting selectedDate, the grid is updated for x of this data. and children received the last selected value for the corresponding data, and the previous value was reset to zero.
tell me what Iā€™m doing wrong. when selecting the selected data, get print:
store output data {}
store input data {}.
layout:

app.layout = html.Div([
    dcc.Store(id='data-store'),
    dcc.Graph(
        id='scatter1',
        figure=fig1,
    ),
    html.Div(children=[], id='relayout-data'),
    html.Div(children=[], id='selected-data'),
    html.Div(children=[grid],
             id='ag-grid-div'),
])

@app.callback(
    Output('data-store', 'data'),  
    [Input('scatter1', 'relayoutData'),
     Input('scatter1', 'selectedData')],
    prevent_initial_call=True
)
def update_data_store(relayout_data, selected_data):  
    data = {}
  
    if relayout_data and not selected_data:
        rd_raw_from = relayout_data.get('xaxis.range[0]', None)
        rd_raw_to = relayout_data.get('xaxis.range[1]', None)
        data['relayoutData'] = [rd_raw_from, rd_raw_to]
    elif selected_data and not relayout_data:
        selected_points = selected_data['points'] if selected_data else []
        sd_x = selected_points[0].get('x', None) if selected_points else None
        data['selectedData'] = [sd_x]
    
    print('store output data', data)
    return data


@app.callback(
    [Output('relayout-data', 'children'),
     Output('selected-data', 'children'),
     Output('ag-grid-div', 'children')],
    [Input('data-store', 'data')],  
)
def update_grid(data):
    print('store input data', data)
    if data is not None:
        if 'relayoutData' in data:
            relayout_data = data.get('relayoutData', None)
            output1 = f'relayoutData: {relayout_data}'
            output2 = f'selectedData: None'
            if relayout_data and (relayout_data[0] is not None or relayout_data[1] is not None):
                return output1, output2, create_dash_aggrid(data_df, relayout_data[0], relayout_data[1])
        elif 'selectedData' in data:
            selected_data = data.get('selectedData', None)
            output1 = f'relayoutData: None'
            output2 = f'selectedData: {selected_data}'
            if selected_data is not None:
                return output1, output2, create_dash_aggrid(data_df, selected_data, selected_data)
    return no_update, no_update, no_update
2

Hey @AlesiaSel what do you mean by that? The relayoutData event is fired due to different interactions with the figure. Zooming or pan would be such an interaction. But if you change the dragmodeby clicking on of the modebar buttons, the event is fired too.

A while ago I created an example app for learning about the different events and properties of a dcc.Graph(), maybe it helps you.