Lag when adding small scatters to large heatmap animations

[Alex17Li]

I've noticed that adding a very small scatter to a large animation will make the lag when moving between frames very bag when working on a project requiring visualization of bboxes of segmentation outputs. If I don't have the bboxes then then there is no lag after startup. With bboxes it becomes very noticeable that the rerender is happening, and as the size of the heatmap increases it becomes worse. Is there a way to make it more smooth?

ADD_BBOXES=True
import numpy as np
import plotly.graph_objects
mock_segmentation_1 = plotly.graph_objects.Heatmap(
    z=np.random.randint(0, 100, (2000,512)),
)
mock_segmentation_2 = plotly.graph_objects.Heatmap(
    z=np.random.randint(0, 2, (2000,512)),
)
mock_bbox_1 = plotly.graph_objects.Scatter(
                                x=[100,100,400,400],
                                y=[200,500,500,200],
                                fillcolor="rgba(255,255,255)",
                                fill="toself",
                                hoveron="fills",
                                hoverinfo="text",
                                text='bbox1',
                                mode="lines",
                                showlegend=False,
                            )
mock_bbox_2 = plotly.graph_objects.Scatter(
                                x=[100,100,2000,2000],
                                y=[2000,500,500,2000],
                                fillcolor="rgba(255,255,255)",
                                fill="toself",
                                hoveron="fills",
                                hoverinfo="text",
                                text='bbox1',
                                mode="lines",
                                showlegend=False,
                            )


data1 = [mock_segmentation_1]
data2 = [mock_segmentation_2]
if ADD_BBOXES:
    data1 = [mock_segmentation_1, mock_bbox_1]
    data2 = [mock_segmentation_2, mock_bbox_2]


frames = [{'data': data1, 'name': '1'}, {'data': data2, 'name': '2'}]
figure_dict = {
    "data": frames[0]["data"],
    "frames": frames,
    "layout": {
        "sliders": [
            {
                "steps": [
                    {
                        "method": "animate",
                        "label": f"Frame {fname}",
                        "args": [
                            [fname],
                            {
                                "mode": "immediate",
                                "frame": {"redraw": True},
                                "transition": {'duration': 0},
                            },
                        ],
                    }
                    for fname in ['1', '2']
                ]
            }
        ],
    },
}
plotly.graph_objects.Figure(figure_dict)

Screencast.from.12-01-2025.02.25.08.PM.webm

Screencast.from.12-01-2025.02.29.02.PM.webm

I tried to fix this by turning off the visibility of the scatter frames, adding this to the layout. However, the lag persists as long as the bboxes exist, even if they are not visible.

"updatemenus": [
            {
                'buttons': [
                    {
                        'args': [{'visible': [True, True]}],
                        'label': 'Enable BBoxes',
                        'method': 'update'
                    }, {
                        'args': [{'visible': [True, False]}],
                        'label': 'Disable BBoxes',
                        'method': 'update'
                    }
                ]
            }
        ]

[robertclaus]

Thank you for reporting this issue. We likely won't get to fixing this particular issue in the immediate future, but are very open to community contributions! You may also be able to find a workaround by asking the community at community.plotly.com.