Skip to content

fix(explore): disable drop transition on group-by sortable items#110676

Merged
JoshuaKGoldberg merged 1 commit intomasterfrom
JoshuaKGoldberg/fix/group-by-drop-animation
Mar 16, 2026
Merged

fix(explore): disable drop transition on group-by sortable items#110676
JoshuaKGoldberg merged 1 commit intomasterfrom
JoshuaKGoldberg/fix/group-by-drop-animation

Conversation

@JoshuaKGoldberg
Copy link
Copy Markdown
Member

@JoshuaKGoldberg JoshuaKGoldberg commented Mar 13, 2026

Disable the dnd-kit drop transition on group-by sortable items in the explore toolbar to fix a visual animation glitch when reordering.

The state update on drop already handles visual reordering instantly. The dnd-kit drop transition conflicts with this, causing items to briefly animate from a stale position. Setting transition: null in useSortable matches the pattern already used in SortableVisualizeFieldWrapper and SortableQueryField.

I'd noticed & fixed this same kind of bug when QAing #110648. Example place where this one pops up: Explore > Traces.

Screen.Recording.2026-03-13.at.3.57.00.PM.mov

Fixes EXP-842.

Made with Cursor

Same animation glitch as the metrics toolbar — the dnd-kit drop
transition conflicts with the state update that reorders the DOM.
Matches the pattern already used in SortableVisualizeFieldWrapper
and SortableQueryField.

Co-Authored-By: Claude Sonnet 4 <[email protected]>
Made-with: Cursor
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Mar 13, 2026
@JoshuaKGoldberg JoshuaKGoldberg changed the title fix(explore): Disable drop transition on group-by sortable items fix(explore): disable drop transition on group-by sortable items Mar 13, 2026
@linear-code
Copy link
Copy Markdown

linear-code bot commented Mar 13, 2026

@JoshuaKGoldberg JoshuaKGoldberg marked this pull request as ready for review March 13, 2026 20:09
@JoshuaKGoldberg JoshuaKGoldberg requested a review from a team as a code owner March 13, 2026 20:09
@JoshuaKGoldberg JoshuaKGoldberg merged commit 53066ed into master Mar 16, 2026
72 checks passed
@JoshuaKGoldberg JoshuaKGoldberg deleted the JoshuaKGoldberg/fix/group-by-drop-animation branch March 16, 2026 15:50
JoshuaKGoldberg added a commit that referenced this pull request Mar 18, 2026
…0842)

Add drag-and-drop reordering to the Visualize toolbar in Explore >
Traces, matching the pattern already used in the Group By toolbar.

When 2+ visualize items (charts or equations) are present, each toolbar
row shows a grabbable drag handle. Reordering the rows updates the URL
state, which automatically reorders the chart panels below since both
derive from the same query params.

Uses the existing `DragNDropContext` wrapper and `useSortable` hook with
`transition: null` (to avoid the drop animation glitch fixed in
#110676). No new dependencies.

<img width="967" height="452" alt="Screenshot of Explore > Traces with
an equation and a chart in Visualize, with drag-n-drop button
indicators"
src="https://github.com/user-attachments/assets/03780d77-a182-4581-abac-efa4ddce9f35"
/>


Fixes EXP-843

Made with [Cursor](https://cursor.com)
JonasBa pushed a commit that referenced this pull request Mar 18, 2026
…0842)

Add drag-and-drop reordering to the Visualize toolbar in Explore >
Traces, matching the pattern already used in the Group By toolbar.

When 2+ visualize items (charts or equations) are present, each toolbar
row shows a grabbable drag handle. Reordering the rows updates the URL
state, which automatically reorders the chart panels below since both
derive from the same query params.

Uses the existing `DragNDropContext` wrapper and `useSortable` hook with
`transition: null` (to avoid the drop animation glitch fixed in
#110676). No new dependencies.

<img width="967" height="452" alt="Screenshot of Explore > Traces with
an equation and a chart in Visualize, with drag-n-drop button
indicators"
src="https://github.com/user-attachments/assets/03780d77-a182-4581-abac-efa4ddce9f35"
/>


Fixes EXP-843

Made with [Cursor](https://cursor.com)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Scope: Frontend Automatically applied to PRs that change frontend components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants