How use plotly_click and plotly_selected simultaneously?

So I have a signal graph that is displayed on my html page. I want to give to the user the possibility to click at specific point to create a vertical line : Image with vertical bar. I want also let the user to draw a box in a specific area : Image with box area

Both code are working but when I combine them I can’t click to display those vertical lines anymore (but can still draw boxes) . I think the click event is passed to the plotly_selected event do you know how I can fix that ?

// draw vertical line
plotDiv.on('plotly_click', function(data){
        var pts = '';
        for(var i=0; i < data.points.length; i++){
            pts = 'x = '+data.points[i].x +'ny = '+
            data.points[i].y.toPrecision(4) + 'nn';
            console.log("Vous voulez ajouter une rupture au point : ",data.points[i].x );
            layout["shapes"].push({
                'type': 'line',
                'x0':data.points[i].x,
                'y0':line_bottom,
                'x1':data.points[i].x,
                'y1':line_top,
                'line': {
                    'color': 'black',
                     dash: 'dot',
                    'width':3,
                }
            })
            Plotly.redraw('myDiv');
        }
    });

// create box 
    plotDiv.on('plotly_selected', (eventData) => {
        var xRange = eventData.range.x;
        var yRange = eventData.range.y;
        console.log("x0 = ",xRange[0]," x1 = ",xRange[1]," y0 = ",yRange[0]," y1 = ",yRange[1]);
        // trait vertical en x0
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[0],
            'y0':yRange[0],
            'x1':xRange[0],
            'y1':yRange[1],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        //vertical at x1
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[1],
            'y0':yRange[0],
            'x1':xRange[1],
            'y1':yRange[1],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        //horizontal at y1
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[0],
            'y0':yRange[1],
            'x1':xRange[1],
            'y1':yRange[1],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        // horizontal at y0
        layout["shapes"].push({
            'type': 'line',
            'x0':xRange[0],
            'y0':yRange[0],
            'x1':xRange[1],
            'y1':yRange[0],
            'line': {
                'color': 'red',
                 dash: 'dot',
                'width':3,
            }
        })
        Plotly.redraw('myDiv');
    });

Thank you in advance !

Answer

I think all you’re missing in order to get this working is to simply check the event data in your plotly_selected handler and return early if it isn’t available.

plotDiv.on('plotly_selected', (eventData) => {
  if (!eventData) return;
  ...
});

A single click without dragging can trigger both the plotly_click and plotly_selected handlers. However, the latter handler won’t have any event data associated, which is why the code doesn’t appear to be working as you’d expect.

A click with dragging should only trigger the plotly_selected handler, so you don’t need to do a similar early return in the plotly_click to prevent reading empty event data.