fix(umap): render landmark triangles with scattergl to fix touch-pan desync#295
Merged
Merged
Conversation
…desync The main UMAP point traces use scattergl (WebGL) while the landmark triangle trace used scatter (SVG). During a touch pan, Plotly translates the SVG layer immediately but only repaints the WebGL scene once the gesture settles. On tablets, a touch-and-immediately-drag therefore made the triangles slide alone on the SVG layer while the dots stayed frozen. Switching the landmark trace to scattergl keeps it in the same WebGL pipeline as the points, so the triangles freeze-and-snap together with the rest of the plot. The invisible click-target trace stays SVG to avoid GL point-size clamping on its large (up to 256px) hit squares. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On tablets, touching the UMAP plot and immediately dragging to pan made only the colored landmark triangles move with the finger while the dots and the rest of the plot stayed frozen. Touching, pausing briefly, then dragging worked fine.
Cause
The main point traces use
scattergl(WebGL) while the landmark triangle trace usedscatter(SVG). During a touch pan, Plotly translates the SVG layer immediately but only repaints the WebGL scene once the gesture settles. So a touch-and-immediately-drag translated the SVG layer (the triangles — the only visible SVG element on the plot) while the WebGL scene (the dots) stayed put until release.Fix
Switch the
landmarkTracetotype: "scattergl"so the triangles live in the same WebGL pipeline as the points and freeze-and-snap together with the rest of the plot.The invisible
clickableTraceis intentionally left as SVGscatter: its hit squares can be up to 256px and would risk GL point-size clamping, and being invisible its drag-time position is never seen. Landmark hit-testing (umap-helpers.js) is pure x/y geometry and the trace is located byname === "Landmarks", so neither depends on the renderer type.Testing
npm test— 343/343 frontend tests pass; ESLint and Prettier clean.🤖 Generated with Claude Code