How to prevent shapes to go in front of another when dragged?

📊 Plotly Python
1

Hi,
I am using the plotly graphing library with Python to produce an interactive graph the user can tune by dragging ‘circle’ shapes. In order to link the circles and form a line graph, I add ‘lines’ shapes inbetween two consecutive points. The coordinates of the lines are such that when a ‘circle’ is dragged the ‘line’ follows the ‘circle’. Below is a reproducible code reduced to one line and one circle for the example:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

c1=[10, 10]

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    dcc.Graph(
        id='interactiveGraph', 
        config={
            'editable': True,
            'edits': {'shapePosition': True}
        }
    )
])

@app.callback(
    Output('interactiveGraph', 'figure'),
    [Input('interactiveGraph', 'relayoutData')]
)
def display_graph(relayoutData):
    if 'shapes[1].xanchor' in relayoutData:
        c1[0]=relayoutData['shapes[1].xanchor']
        c1[1]=relayoutData['shapes[1].yanchor']
    
    lines=[0, c1[0], 0, c1[1]]

    return {
        'layout': {
            'xaxis': {'range': [0, 100]},
            'yaxis': {'range': [0, 110]},
            'shapes': [
                {
                    'type': 'line',
                    'x0': lines[0],
                    'x1': lines[1],
                    'xref': 'x',
                    'y0': lines[2],
                    'y1': lines[3],
                    'yref': 'y',
                    'line': {'color': 'red'},
                },
                {
                    'type': 'circle',
                    'fillcolor': 'gray',
                    'line': {'color': 'gray'},
                    'x0': -10,
                    'x1': 10,
                    'y0': -10,
                    'y1': 10,
                    'xsizemode': 'pixel',
                    'ysizemode': 'pixel',
                    'xanchor': c1[0],
                    'yanchor': c1[1],
                }
            ]
        }
    }
    
if __name__ == '__main__':
    app.server.run(port=8050, host='127.0.0.1')

My problem is that after the ‘cicrle’ has been dragged the red line is sent in front of the ‘circle’ and I cannot access to the ‘circle’ anymore since I can only catch which is at the foreground: the ‘line’. I saw that we can use ‘layer’: ‘below’ in the shapes properties but it sends the ‘line’ behind the grid which is not convenient to the eyes.

Is there a way to manage the issue ? Thank you very much