Skip to content

fix(charts): zoom drag after Escape, after a lost release, and its label at the plot's edge - #2575

Merged
Makisuo merged 3 commits into
mainfrom
fix/chart-zoom-missed-release
Nov 13, 2026
Merged

Makisuo merged 3 commits into
mainfrom
fix/chart-zoom-missed-release

Conversation

@Makisuo

@Makisuo Makisuo commented Nov 13, 2026 •

Copy link
Copy Markdown
Collaborator

Follow-up to #2571, which merged before its review fixes were pushed and before its preview check finished. Three fixes to the drag gesture, and the DOM tests it did not have.

What changes

  • Escape no longer leaves the tooltip pinned. Found on the feat(charts): drag across a linked chart group to zoom its page to that span #2571 preview: drag, press Escape, release, and the chart's tooltip froze at the release point and stopped following the pointer. Cancelling dropped the drag at once, so the click that follows the release was no longer recognised as the drag's and reached the chart, which pins its tooltip on a click. A cancelled drag now clears its band and stays until its release, so that click is swallowed like any other drag's.
  • A drag whose release never arrived ends. If the pointerup is lost (the window loses focus mid-drag), the drag stayed set: later moves kept painting the band and the chart got no pointer events. A move with no button down now drops it. From review.
  • The label stays inside the plot. It was centred on the band, so a band at the plot's edge pushed it past the edge and the card clipped it. The label is now a sibling of the band, centred on it and held within the plot.
  • Tests for the gesture itself, in a DOM (linked-cursor.dom.test.ts): a drag reports its span and labels it, a small move is a click, Escape cancels, a missed release ends the drag, a press on a page overlay or a touch starts nothing, and the click after a drag or after an Escape never reaches the chart.

Verified

  • bunx vitest run src/charts in packages/views: 146 passed (8 new).
  • bunx oxlint -c .oxlintrc.effect.json --quiet and bunx oxfmt --check on the changed files, bun run --filter=@maple/web typecheck: clean.
  • In a real browser on /lab/bench/service-detail: a drag to the right edge puts the label's right edge exactly on the plot's (621px and 621px); after a drag cancelled with Escape the tooltip follows the pointer again (10:55 AM at 20% of the plot, 04:55 PM at 70%).

Before and after

The label at the plot's right edge, 2x. "Before" is from the #2571 preview.

Before After
before after

After Escape: the tooltip pinned at the release point (before, from the preview), and following the pointer (after).

Before After
before after

Not in this PR

After a zoom the header shows the range as raw UTC bounds ("2026-11-13 13:33:59 - 2026-11-13 17:08:31") while the drag label and the axes read in the viewer's zone. That is how the header has always shown an absolute range (TODO(range-label) in time-controls.ts); zoom makes it more visible. It touches every page's time controls, so it is its own change.


Autofix with [code]smith
Open in [code]smith · Need help on this PR? Tag @codesmith-bot with what you need.

A pointerup lost to a window switch left the drag set: later moves kept
painting the band and the chart stopped getting pointer events. A move
with no button down now cancels it.
…in the plot

Escape dropped the drag at once, so the click after the release reached
the chart and pinned its tooltip. A cancelled drag now clears its band
and waits for its release, which is swallowed like any other drag's.

The label was centred on the band and clipped at the plot's edge. It is
a sibling of the band now, centred on it and held inside the plot.
@maple-review-bot

maple-review-bot Bot commented Nov 13, 2026 •

Copy link
Copy Markdown

Maple review

🟢 Confidence 10/10 · safe to merge. Each of the three gesture fixes is pinned by a DOM test that fails without it; only the label's px placement rests on the labelLeft unit test, since happy-dom has no layout.
no findings · tests covered · risk medium

Fixes three drag-gesture defects in the linked zoom: Escape now keeps the drag so its trailing click is swallowed, a lost pointerup ends the drag, and the label is clamped inside the plot. Safe to merge.

  • cancel() marks the drag cancelled and keeps it until its release
  • onDragMove drops a drag whose event.buttons has no primary button
  • The label leaves the band and labelLeft holds it inside the plot
  • Eight DOM tests for the gesture in linked-cursor.dom.test.ts

bece67a · What was checked, coverage and telemetry details are on the Maple / review check. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.

@coderabbitai

coderabbitai Bot commented Nov 13, 2026

Copy link
Copy Markdown

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 19 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 4 included reviews currently available.

Learn how review limits work.

Review configuration:

Run configuration

  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 57c9c1b4-91a8-4043-b5ea-80601330c294
Commits

Reviewing files that changed from the base of the PR and between e0a436f and bece67a.

Files selected for processing: 3

  • packages/views/src/charts/linked-cursor.dom.test.ts
  • packages/views/src/charts/linked-cursor.test.ts
  • packages/views/src/charts/linked-cursor.ts
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

@Makisuo Makisuo changed the title fix(charts): zoom drag keeps its release after Escape, ends when the release is lost, and keeps its label in the plot fix(charts): zoom drag after Escape, after a lost release, and its label at the plot's edge Nov 13, 2026
@Makisuo Makisuo added the preview:web Deploy a Workers-only PR preview (no ingest/Electric); see docs/pr-previews.md label Nov 13, 2026
@Makisuo
Makisuo deployed to pr-preview November 13, 2026 18:43 — with GitHub Actions Active
@Makisuo
Makisuo deployed to preview-tinybird November 13, 2026 18:43 — with GitHub Actions Active
@github-actions

github-actions Bot commented Nov 13, 2026 •

Copy link
Copy Markdown
Contributor

🍁 Maple PR preview

Note

Preview resources were removed when this pull request closed.

Final commit bece67a · View workflow run

@Makisuo
Makisuo deployed to pr-preview November 13, 2026 18:51 — with GitHub Actions Active
@Makisuo

Makisuo commented Nov 13, 2026

Copy link
Copy Markdown
Collaborator Author

Preview check

Driven on app-pr-2575.maple.dev/services/demo-api in a real browser (Playwright, signed in as the preview reviewer), on the Latency chart:

  • Escape then release. Drag, press Escape, release, move: the tooltip read 10:55 AM at 25% of the plot and 03:40 PM at 65%, so it follows the pointer again, and the URL stayed /services/demo-api. On the feat(charts): drag across a linked chart group to zoom its page to that span #2571 preview the same steps left it pinned at the release point.
  • Label at the edge. A drag released 50px past the plot's right edge: the label ("5:41 PM to 7:50 PM · 2h 9m") ends at 825px, the plot ends at 825px.
  • A plain drag still zooms. Label "12:41 PM to 3:03 PM · 2h 23m", URL became ?startTime=2026-11-13+11:41:00&endTime=2026-11-13+14:04:00, and Back returned to /services/demo-api.
  • No page errors.
Label at the plot's edge After Escape, the tooltip follows
edge escape

Not checked on a preview: the lost-release case (it needs the window to lose focus mid-drag, which a headless browser does not do); it is covered by the DOM test. No server code changes here, so there are no new traces to look at.

@Makisuo
Makisuo merged commit 348a1f3 into main Nov 13, 2026
34 checks passed
@Makisuo
Makisuo deleted the fix/chart-zoom-missed-release branch November 13, 2026 19:38
@Makisuo
Makisuo deployed to pr-preview November 13, 2026 19:38 — with GitHub Actions Active
@Makisuo
Makisuo deployed to preview-tinybird November 13, 2026 19:38 — with GitHub Actions Active

This branch was successfully deployed

2 active deployments
pr-preview — bece67a5 Deployed Nov 13, 2026 by Makisuo via deploy-pr-preview #11919
preview-tinybird — bece67a5 Deployed Nov 13, 2026 by Makisuo via branch #1497
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

preview:web Deploy a Workers-only PR preview (no ingest/Electric); see docs/pr-previews.md

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant