Update position of vertical line

Dash Python
2

Solved this by passing in the figure as State and using dash-extensions to omit the Output that is usually required by dash.

from dash_extensions.enrich import DashProxy, NoOutputTransform, Input, State


app = DashProxy(__name__, transforms=[NoOutputTransform()])

app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='drawVerticalLine'
    ),

    Input('video', 'currentTime'),
    State('graph', 'figure'),
    prevent_initial_call=True
)

The js now looks like this:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {

        // Update the vertical line position
        drawVerticalLine: function(currentTime, fig1) {

            function drawLine (fig, time, id) {
                fig.layout.shapes[0].x0 = time;
                fig.layout.shapes[0].x1 = time;
                Plotly.react(id , fig.data, fig.layout, {displayModeBar: false});
            }

            drawLine(fig1, currentTime, 'graph');

        }
    }
});

To make the line movement smoother you can update the intervalCurrentTime property of the dash-player to e.g. 10ms. Hope this helps anyone who might have a similar issue :slight_smile:

1 Like
Moving vertical line in chart based off video progress