Skip to content

feat(sql-editor): Compare Keys, Sync column, dual-grid highlight - #191

Merged
huyplb merged 4 commits into
mainfrom
cursor/compare-ux-keys-sync-2d53
Aug 7, 2026
Merged

feat(sql-editor): Compare Keys, Sync column, dual-grid highlight#191
huyplb merged 4 commits into
mainfrom
cursor/compare-ux-keys-sync-2d53

Conversation

@huyplb

@huyplb huyplb commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Summary

Compare data UX for side-by-side SQL Editor results: interactive Keys, destination Sync checkboxes, Sync all / filtered Migrate, and dual-grid insert/delete highlighting (including name-only keys).

Also improves side-by-side grid lock-step UX:

  • Scroll sync by pixel (no React row-index lag on fast flings)
  • Hover sync — hovering a row highlights the same index on sibling grids

Changes

  • Keys: choose compare/migrate key columns in DataMigrateBar; values follow key selection.
  • Sync column: sticky right checkboxes on the destination grid (default checked); Sync all + Migrate respect op filters ∩ row checks.
  • Highlight: insert/delete tints on both panes for key-aligned compares (including key-only / duplicate-key first-wins).
  • Scroll sync: scrollSync.register / broadcast applies peer scrollTop immediately; virtualization stays rAF-throttled.
  • Hover sync: hoverSync bus shares the hovered row index across panes (local state only — no parent re-render).

Test plan

  • Unit tests for name-key align, dual-grid tints, duplicates, filterOpsByKeyLabels
  • tsc --noEmit for apps/web
  • Manual: side-by-side Compare, fast-scroll one grid — peer stays locked
  • Manual: hover a row — peer grid highlights the same index; leave clears both
  • Manual: Keys / Sync / Migrate still work
Open in Web Open in Cursor 

cursoragent and others added 4 commits August 7, 2026 17:58
- DataGrid: optional sticky Sync column (rowSync prop, sky styling)
- DataMigrateBar: controlled Keys checkboxes, selectedSyncKeys filter,
  Sync all button, colorful migrate bar, toast when ops but no sync rows
- ResultsPanel: selectedSyncKeys state, rowSync on dest grid, restyled
  compare toolbar with duplicate-key warning and aligned-row legend
- USER_GUIDE §6-7: document Keys, Sync column, Sync all
- Lib: key-aligned dual-grid insert/delete tint, filterOpsByKeyLabels

Co-authored-by: huy.phan9 <huyplb@users.noreply.github.com>
Ensure ATTRIBUTENAME-only compares pad both grids to the same length and
highlight missing/extra rows on both panes for synced scrolling.

Co-authored-by: huy.phan9 <huyplb@users.noreply.github.com>
Replace row-index React state sync with a peer scrollTop bus so fast
vertical scrolls keep both compare grids locked without parent re-renders.

Co-authored-by: huy.phan9 <huyplb@users.noreply.github.com>
Broadcast the hover row index on a peer bus so compare panes highlight
the same aligned row without parent re-renders.

Co-authored-by: huy.phan9 <huyplb@users.noreply.github.com>
@huyplb
huyplb marked this pull request as ready for review August 7, 2026 18:30
@huyplb
huyplb merged commit 60b148b into main Aug 7, 2026
6 of 7 checks passed
@huyplb
huyplb deleted the cursor/compare-ux-keys-sync-2d53 branch August 7, 2026 18:30
@cursor

cursor Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_498517d4-15a1-487c-8e76-0990b0995568)

cursor Bot pushed a commit that referenced this pull request Aug 7, 2026
Keep Compare UX from this branch (Sync-follows-Ops, Sync scroll, CSV all,
Maximize) over the earlier #191 merge on main.

Co-authored-by: huy.phan9 <huyplb@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants