Skip to content

Use rendered path geometry for curved mark interaction - #42

Draft
gillkyle wants to merge 3 commits into
TanStack:mainfrom
gillkyle:codex/exact-curved-interaction-geometry
Draft

Use rendered path geometry for curved mark interaction#42
gillkyle wants to merge 3 commits into
TanStack:mainfrom
gillkyle:codex/exact-curved-interaction-geometry

Conversation

@gillkyle

@gillkyle gillkyle commented Aug 2, 2026

Copy link
Copy Markdown
Contributor

Problem

Curved marks look smooth, but hover selection currently tests the straight polygon connecting their original data points.

In a curved stacked-area chart, the cursor can be visibly inside the top layer while the tooltip selects the layer underneath it.

This PR makes hover selection follow the curve that was actually drawn.

Approach

  • Store the rendered path on the final scene mark.
  • Use that same path for SVG, Canvas, React Native, and hover selection.
  • Keep the existing selection rules: painted shape first, then paint order, then the mark's normal x/y fallback.

Built-in D3 curves get this automatically. Custom marks can use scenePath.

Cost

Every row below is a TanStack Charts bundle or consumer:

TanStack bundle Gzip change
Browser chart runtime +292 B
React line-chart consumer +312 B
Standalone hover resolver +270 B
Core entry without path interaction 0 B
TanStack curved-line example using a D3 curve −674 B

The last row shrinks because our old adapter bundled D3's full line and area generators. The new recorder calls the D3 curve function directly, allowing those larger generators to tree-shake out. This is a TanStack implementation saving, not a comparison against D3.

Curved selection is about 0.3 µs slower per query (3.6 vs 3.3 µs). Point-only selection is unchanged. bundle:check remains red because the standalone resolver is 227 B over its existing 2 KiB budget; this draft leaves that trade-off visible for review.

Validated with 775 tests, typecheck, package/docs checks, production build, benchmarks, and live SVG/Canvas checks.

Not included: frame-by-frame animated picking or parsing arbitrary SVG path strings.

@coderabbitai

coderabbitai Bot commented Aug 2, 2026

Copy link
Copy Markdown

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f294111b-34aa-4464-998c-4ceed8e8e433

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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

Comment @coderabbitai help to get the list of available commands.

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.

1 participant