🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Client side callback, modifiny layout.shapes, component is not updating

Hey folks,

I’m struggling with client side callbacks. I don’t have any JavaScript experience but i believe that my callback is basically working. I notice the desired change in the figure dictionary when viewing the contents in Google Chrome webinspector. The only thing is, that the affected component is not updating automatically. When i hit the little house button (reset axes) then the component updates as expected.
Unfortunately i cannot share my complete code, but i try to describe as good as possible what i try to achieve.
I have a scattermapbox plot with a gps track and a scattergl plot with some time series data. I added a vertical line via add_vline to the time series plot on the first x index.
The desired callback should work like this:

when moving the mouse over the track on the map, the vertical line shall move to the related x position in the time series plot.

This is my client side callback code:

app.clientside_callback(
    """
    function(hoverData, fig) {
    

        console.log(hoverData)
        console.log(fig)
        
        fig['layout']['shapes'] = [{line: {color: "white", width: 3}, name: "moving bar", type: "line", x0: hoverData['points'][0]['customdata'], x1: hoverData['points'][0]['customdata'], xref: "x", y0: 0, y1: 1, yref: "y domain"}]
        
        return fig;
    }
    """,
    Output('ride_timeseries', 'figure'),
    Input('ride_map', 'hoverData'),
    Input('ride_timeseries','figure')
)

This is how it looks at the beginning:

Please note the vertical white line on the left of the time series plot.

This is how it looks when i hovered over a specific point of the track on the map AND hit the “reset axes” button on the time series plot afterwards:

My question is: how can i force the update of the time series plot so that the white bar moves flawless when hovering over the track?

I hope the provided information is sufficient and someone has the hint i’m looking for! Thanks a lot in advance!

Cheers
Tobi

Hi @toflowbi
Try using this clientside callback Programmatically trigger hover events with Dash from @RenaudLN

@AnnMarieW thanks for pointing me to this.
I tried to implement it like mentioned in this post. But unfortunately it’s not working. I guess the reason is that i’m using a time stamp on the x-axis and not an integer value. Any idea on how to get this running while keeping the time stamp on the x-axis? I tried the string value and also converting it to a date object. But i’m getting this in both cases:

This is my scripts.js

if (!window.dash_clientside) {
    window.dash_clientside = {};
}
window.dash_clientside.clientside = {
    trigger_ts_hover: function(hoverData) {
        var myPlot = document.getElementById("ride_timeseries")
        if (!myPlot.children[1]) {
            return window.dash_clientside.no_update
        }
        myPlot.children[1].id = "ride_timeseries_js"

        if (hoverData) {
            var t = new Date(hoverData.points[0].customdata)
            
            
            
            Plotly.Fx.hover("ride_timeseries_js", {xval: t, yval:0})
        }
        return window.dash_clientside.no_update
    }
}

Thanks!