Scattergl and updating go.Figure.frames --> r[v] undefined


I have a scattergl with many datapoints. Therefore, created an animation using shapes. It works wonderful until I update the frames for the second time in the callback. I check that all data still exists, and it does, so it should be drawn. But checking the dev console in the brower it says:

Uncaught TypeError: r[v] is undefined

Code is functional if I use go.Scatter instead of go.Scattergl. I traced the error back to the source code:

    // form batch arrays, and check for selected points
    var dragmode = fullLayout.dragmode;
    var isSelectMode = selectMode(dragmode);
    var clickSelectEnabled = fullLayout.clickmode.indexOf('select') > -1;

    for(i = 0; i < count; i++) {
        var cd0 = cdata[i][0];  //This is what causes "r[v] is undefined" in the plotly.min.js
        var trace = cd0.trace;
        var stash = cd0.t;


So in plotly.min.js, r[v][0] refers to cdata[i][0]

This is as far as Iโ€™ve gotten. Iโ€™m unable to figure it out and could really use some help.

My code

Figure setup:

  fig = go.Figure(
                            args=[None, dict(frame=dict(duration=60//1000, redraw=False))])])]

  for cluster in range(cluster_ids):
      msk = cluster_labels == cluster
      x, y = embedding[msk].T
              name=f'Cluster {cluster}',
              marker=dict(color=CLUSTER_COLORS[cluster], size=MARKER_SIZE),

#update layout...

Code for creating frames

        for H, T in zip(head, tail):
            head_circle = get_svg_circular_path(H[0], H[1], r)  # calculates circle as svg to prevent resizing
            tail_circle = get_svg_circular_path(T[0], T[1], r)  # calculates circle as svg to prevent resizing
            frame = go.Frame(
                        dict(type="line", x0=T[0], y0=T[1], x1=H[0], y1=H[1], fillcolor='#636EFA'),
                        dict(type='path', path=head_circle, **path_kwargs),
                        dict(type='path', path=tail_circle, **path_kwargs),



        Output('graph-id', 'figure'),
            Input('calculate-button', 'n_clicks'),
            State({'type': 'value-sliders', 'index': ALL}, 'value'),
            # State('graph-id', 'figure') <-- using the fig's data object has same effect
    def calculate_new_fig(n_clicks, values):
        # removed some code for readability
        # but the essence is that I use to the values to update the animation location
        fig = get_initial_map()  # this get the figure earlier code snippet
        if n_clicks:
            frames = get_frames() 
            return fig
        return fig

What Iโ€™ve tried

Iโ€™ve tried re-creating the figure, using the dcc.Graph figure atribute, extending the list with frames instead of overriding, reduce scattergl size (as in number of datapoints), adding data dict to go.Frame, and redraw True.

Notable observations

Code 100% works if I replace the go.Scattergl with go.Scatter.

First time the frame are added the animation plays perfectly smooth. When I then update the frames with a new animation, the animation is shown, but the points in the Scattergl dissappear. So animation - yes, data - no.

Additionally, when printing the[0] datastructure, everything is EXACTLY the same each iteration. So, first, second, third, nth animation frames. It just DOES NOT get drawn and I see and Uncaught TypeError: r[v] is undefined in the console. Note that app doesnโ€™t crash.

Help! :slight_smile:

I found a workaround, see go.Scattergl disappears but go.Scatter does not (Animation using Shapes) - #2 by daeverb