Jitter / stuttering while zooming around on GL scatter plot

[agusterodin]

I am experiencing jitteriness/stuttering while zooming around on a GL scatter plot. I don't remember seeing this before switching over to an M1 MacBook Pro about a year ago. I have been lazy and haven't had time to file the issue in the past.

My setup
MacBook Pro (13-inch, M1, 2020)
Google Chrome: 102.0.5005.115 (official build, arm64)
Plotly JS: 2.x
React Plotly: 2.x

Video demonstration
The video demonstration shows me simply zooming in and out via the trackpad. The closer I zoom in, the worse it appears to get.

Screen.Recording.2022-06-18.at.5.27.06.PM.mov

Minimal reproduction
Run by simply executing yarn command followed by yarn dev

https://github.com/agusterodin/plotly-scatter-gl-jitter-reproduction

[agusterodin]

Could you consider taking a look at it? We really appreciate your hard work and recently sponsored.

[brifordwylie]

In my testing, the jitter happens when either the x-axis or y-axis labels/precision changes, this changes the spacing of the axis and the internal scatter plot, the change in scatter plot size 'jitters' the zoom logic. You can get rid of the jitter by

• Removing the axis ticks
• Using something like tickformat='.2f'
• Fixing the size of the internal plot

None of these are good options, but I wanted to give some details on why, at least in my use case, the jitter was happening.

[brifordwylie]

Here's a replication script... just run this, zoom in and out and when the Y-axis is around the '10' boundary at the top.. then you'll see the jitter. Here's what I think is happening... the y-axis layout changes/expands when it makes room for the 2 digit 10 (instead of the 1-9 which are one digit).. so when that automatic adjustment happens to give a bit more room for the Y-axis display.. that propagates to the data plot, since the data plot width changes that messes up the zoom logic :)

import dash
from dash import dcc, html
import plotly.graph_objects as go
import numpy as np

# Generate random data
x_data = np.random.rand(100)
y_data = np.random.rand(100) * 12

# Create the scatter plot
fig = go.Figure(
    data=go.Scattergl(
        x=x_data,
        y=y_data,
        mode="markers"
    )
)

# Fine-tuning of the plot
fig.update_layout(
    margin={"t": 40, "b": 40, "r": 40, "l": 40, "pad": 0},
    xaxis=dict(title="X Axis", tickformat=".2f"),
    yaxis=dict(title="Y Axis", tickformat=".2f"),
    showlegend=False,
    dragmode="pan",
)

# Initialize the Dash app
app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(
        id='scatter-plot',
        figure=fig,
        config={'scrollZoom': True}
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

@BSd3v just wondering if you could take a peek at this :)

[BSd3v]

Hello @brifordwylie,

I checked out your code, I see the jitter, for me its happening constantly. It's snapping back and forth between the old setting and the new setting. Is this what you are seeing as well?

---

Actually, you may be on to something, the jitter seems to be happening as well when adding negative numbers to the ticks.

[BSd3v]

Another thing, this doesnt seem to be limited to GL plots, but plots in general.

[BSd3v]

The issue seems to be here:

plotly.js/src/plots/cartesian/dragbox.js

Lines 535 to 547 in 8b1f5bd

	// then replot after a delay to make sure
	// no more scrolling is coming
	redrawTimer = setTimeout(function() {
	if(!gd._fullLayout) return;
	scrollViewBox = [0, 0, pw, ph];
	dragTail();
	}, REDRAWDELAY);
	e.preventDefault();
	return;
	}

If you call dragTail within this function, the zooming is smooth and doesnt fight you. The scroll function doesnt look like it takes into account the data's position or something initially (when adjusting the scale where the string width will increase), so if you delay the drag tail for a long time, you can see how the canvas "pops" back into place.

dragTail obviously fixes this, but making this an async call causes the "stutter".

[brifordwylie]

@BSd3v any chance you might be able to submit a PR on this? My JavaScript skills are 'not good' :)

[alexcjohnson]

There are two separate issues here.

The original one (2022, GL-specific on Apple silicon) looks like a variant of #6820 so may have been fixed by #6830, we'd need to test this on Apple silicon (which would be much easier if we had a codepen than a repo that needs cloning and building)

The newer one (2024, not dependent on GL or Apple silicon) looks to me like it's an unpleasant interaction between axis automargin and scroll zoom. I see it happening when the length of the longest y-axis tick label changes, and this is what triggers automargin to change. I don't think the solution is to call dragTail immediately, that'll seriously degrade performance for plots with more data. Really what we want, I think, is to somehow prevent automargin from running until the redrawTimer function finally runs after you're done scrolling.

[brifordwylie]

Okay, so just a circle back on this... my comment on July 7th has a simple reproduction script and @alexcjohnson second paragraph does a good job describing the issue. As an open source project maintainer myself I know that there's a jillion issues and no money :) Would be fun to put 'bounties' on tickets, it's a win/win. Anyway happy to chip in $100 to get this corner case fixed... github sponsor/paypal/venmo :)

[gvwilson]

Hi @brifordwylie - thanks very much for the offer. We're currently trying to get the 3.0 release out the door (was supposed to be mid-October, but has slipped); we'll be back in the world once that's done, and I'd be happy to chat then.