How to update shape or layout in general without redraw via client call back/ or app.callback?

Dash Python
1

Hey

Currently what I’m trying to do I receive a numeric data from a data stream every seconds or so, and I would like to not redraw the entire figure because there are other traces present and data is of large volume, and just update the layout. i.e. what Plotly.js’s relayout does.
I have the following figure:

figure = go.Figure()
figure.add_shape(type="line",
    xref="paper", yref="y",
    x0=0, y0=0, x1=1,
    y1=0,
    line=dict(
        color="DarkOrange",
        width=4,
    ),
)
app.layout = html.Div([
    dcc.Graph(id="graph", figure = figure),
    WebSocket(id="ws")
])

I assumed that the relayoutData property of the dcc.Graph object is for this purpose, and made the following attempts, obviously none worked.

app.clientside_callback(
    """
    function(message,figure) {

        parsed = JSON.parse(message.data)
        layoutupdate = {
            
                shape[0] : {
                    'y0':parsed.value,
                    'y1':parsed.value
                }

        }
        console.log(layoutupdate)
        return layoutupdate;
    }
    """,
    Output('graph', 'relayoutData'),
    Input('ws', 'message'),
    State('graph','figure')
)

nothing on the graph is changed, but the layoutupdate variable is pushed to the front end.

@app.callback(Output("graph", "relayoutData"), [Input("ws", "message")], [State("graph", "figure")])
def update_graph(msg,figure):
    layoutupdate = {
        'shape[0]' : {
            'y0':parsed.value,
            'y1':parsed.value
        } 
    }
    
    return newlayout

no error, no update either.

app.clientside_callback(
    """
    function(message,figure) {

        parsed = JSON.parse(message.data)
        layoutupdate = {
            
                shape[0] : {
                    'y0':parsed.value,
                    'y1':parsed.value
                }

        }
        console.log(layoutupdate)
        Plotly.relayout(graph, layoutupdate)
        return layourupdate;
    }

    """,
    Output('graph', 'relayoutData'),
    Input('ws', 'message'),
    State('graph','figure')
)

produces error: cannot access relayout of undefined(so I guess Plotly.js is not imported here?)

What would be the plotly way to do it?
thanks

2 Likes