Skip to content

fix: map SVG pointer input through rendered transform - #44

Merged
tannerlinsley merged 5 commits into
mainfrom
taren/svg-letterbox-calendar-heatmap
Aug 2, 2026
Merged

fix: map SVG pointer input through rendered transform#44
tannerlinsley merged 5 commits into
mainfrom
taren/svg-letterbox-calendar-heatmap

Conversation

@tannerlinsley

@tannerlinsley tannerlinsley commented Aug 2, 2026

Copy link
Copy Markdown
Member

Supersedes #27 on current main while preserving Kyle Gill's implementation commit.\n\n- map SVG client coordinates through the inverse screen CTM, with the existing bounds fallback when no matrix is available\n- retain the token-usage calendar example and reconcile its catalog identity, counts, docs, and bundle baselines\n- add a real Chromium regression that letterboxes the calendar viewport and asserts the exact Aug 3 cell/tooltip\n\nNegative control: reverting the runtime fix makes the regression resolve Aug 5 or Aug 6 at 320/640px across both revisions.\n\nValidated with pnpm validate, React Native type checks, focused Chromium conformance, unit tests, bundle policy, and comparison benchmark baseline.

Summary by CodeRabbit

  • Bug Fixes

    • Improved SVG pointer interactions when charts are letterboxed or have differing aspect ratios.
    • Enhanced pointer-tooltip behavior to report the correct focused date and tooltip content.
  • New Examples

    • Added a token-usage calendar heatmap with daily activity levels, month labels, tooltips, keyboard focus, responsive sizing, and accessibility support.
  • Documentation

    • Documented calendar heatmap use cases, UTC-based day aggregation, zero-value handling, accessibility, and daylight-saving considerations.
  • Tests

    • Expanded coverage for calendar heatmaps, pointer interactions, responsive layouts, and tooltip behavior.

@tannerlinsley tannerlinsley added the full-conformance Run the complete standard conformance matrix for this pull request label Aug 2, 2026
@coderabbitai

coderabbitai Bot commented Aug 2, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@tannerlinsley, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 41 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: cfaba83f-cc32-459c-ba97-c058bb188ada

📥 Commits

Reviewing files that changed from the base of the PR and between adc83f9 and 16af82f.

📒 Files selected for processing (3)
  • benchmarks/conformance/cases/118-token-usage-calendar/plot.ts
  • benchmarks/conformance/cases/118-token-usage-calendar/shell.ts
  • benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
📝 Walkthrough

Walkthrough

This change adds a token-usage calendar conformance case, responsive interaction handling, and documentation. It corrects SVG pointer coordinate conversion for transformed viewports and updates conformance, catalog, bundle, comparison, and friction records.

Changes

Calendar conformance and interactions

Layer / File(s) Summary
SVG pointer coordinate mapping
.changeset/accurate-svg-pointers.md, packages/charts-core/src/svg-surface.ts, packages/charts-core/src/svg-surface.test.ts, benchmarks/conformance/cases/34-pointer-tooltip/*, API-FRICTION.md
Pointer conversion uses the SVG screen transformation matrix with bounds-based fallback behavior. Pointer conformance state reports the selected date.
Token-usage calendar model and rendering
benchmarks/conformance/cases/118-token-usage-calendar/*, docs/examples/heatmaps-and-densities.md, packages/charts-core/docs/examples/heatmaps-and-densities.md, benchmarks/conformance/cases/25-calendar-heatmap/case.json, docs/framework/octane/quick-start.md, packages/charts-core/docs/framework/octane/quick-start.md
Added deterministic UTC event aggregation, calendar sizing, Observable Plot and TanStack renderers, tooltips, accessibility metadata, and calendar documentation.
Responsive calendar shell behavior
benchmarks/conformance/cases/118-token-usage-calendar/shell.*, benchmarks/conformance/types.ts, scripts/compare-plot-catalog.mjs, API-FRICTION.md
Added responsive sizing, label alignment, tooltip state extraction, cleanup, and explicit behavior-mode inputs for interactive conformance mounts.
Catalog and benchmark records
scripts/catalog-artifact.mjs, scripts/catalog-definition-shapes.test.mjs, benchmarks/bundle-size/universal-baseline.json, benchmarks/comparison/bundle-baseline.json, scripts/measure-bundles.mjs, docs/comparison.md, packages/charts-core/docs/comparison.md, API-FRICTION.md
Updated catalog counts, responsive definition expectations, bundle metrics, bundle budget, comparison metadata, and friction-log records.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ConformanceInput
  participant CalendarModel
  participant CalendarRenderer
  participant CalendarShell
  participant Tooltip
  ConformanceInput->>CalendarRenderer: provide revision and chart input
  CalendarRenderer->>CalendarModel: generate UTC calendar data
  CalendarModel-->>CalendarRenderer: return daily usage levels
  CalendarRenderer->>CalendarShell: mount responsive calendar
  CalendarShell->>Tooltip: expose focused date and tooltip state
Loading

Possibly related PRs

  • TanStack/charts#29: Both changes use SVG pointer coordinate conversion for geometry-aware hit testing.
  • TanStack/charts#39: Both changes update TanStack bundle baseline metadata and metrics.
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the primary change: mapping SVG pointer input through the rendered transform.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch taren/svg-letterbox-calendar-heatmap

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (1)
packages/charts-core/src/svg-surface.ts (1)

115-124: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Remove the unreachable try/catch around matrix.inverse().

DOMMatrixReadOnly.inverse() does not throw for a non-invertible matrix; it returns a matrix with NaN components. The existing Number.isFinite(x) || Number.isFinite(y) guard already returns null in that case.

♻️ Suggested simplification
-  let inverse: DOMMatrix
-  try {
-    inverse = matrix.inverse()
-  } catch {
-    return null
-  }
-
+  const inverse = matrix.inverse()
   const x = inverse.a * clientX + inverse.c * clientY + inverse.e
   const y = inverse.b * clientX + inverse.d * clientY + inverse.f
   if (!Number.isFinite(x) || !Number.isFinite(y)) return null
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/charts-core/src/svg-surface.ts` around lines 115 - 124, Remove the
try/catch surrounding matrix.inverse() in the coordinate conversion flow, assign
the inverse directly, and retain the existing Number.isFinite checks on x and y
to return null when the inverse contains NaN values.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@benchmarks/conformance/cases/118-token-usage-calendar/shell.ts`:
- Around line 157-179: Update tanstackInteractionState to identify the hovered
day by its dateKey from target.anchor or chart markup rather than matching
tooltip text with formatTokenUsage and days.find. Preserve tooltip visibility
and text extraction, but pass the resolved dateKey to interactionState so
similarly formatted token counts cannot select the wrong day.
- Around line 143-155: Update calendarCells to narrow the Plot fallback query to
the legend swatch rects created by Plot’s ordinal color scale, rather than all
svg rect elements. Select and return the expected legend rect collection when it
matches expectedCount, while preserving the TanStack selector and empty-array
fallback.

In `@benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts`:
- Around line 101-105: Update resolveTarget’s getScreenCTM handling so a null
matrix uses the existing bounding-rectangle projection to resolve the pointer
target instead of returning null; preserve the current matrix-based projection
when a matrix is available.

---

Nitpick comments:
In `@packages/charts-core/src/svg-surface.ts`:
- Around line 115-124: Remove the try/catch surrounding matrix.inverse() in the
coordinate conversion flow, assign the inverse directly, and retain the existing
Number.isFinite checks on x and y to return null when the inverse contains NaN
values.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 00acd27d-da1a-4f60-84e1-608f0793d77d

📥 Commits

Reviewing files that changed from the base of the PR and between bdad073 and e331a7c.

📒 Files selected for processing (27)
  • .changeset/accurate-svg-pointers.md
  • API-FRICTION.md
  • benchmarks/bundle-size/universal-baseline.json
  • benchmarks/comparison/bundle-baseline.json
  • benchmarks/conformance/cases/118-token-usage-calendar/case.json
  • benchmarks/conformance/cases/118-token-usage-calendar/layout.ts
  • benchmarks/conformance/cases/118-token-usage-calendar/model.test.ts
  • benchmarks/conformance/cases/118-token-usage-calendar/model.ts
  • benchmarks/conformance/cases/118-token-usage-calendar/plot.ts
  • benchmarks/conformance/cases/118-token-usage-calendar/shell.test.ts
  • benchmarks/conformance/cases/118-token-usage-calendar/shell.ts
  • benchmarks/conformance/cases/118-token-usage-calendar/tanstack.ts
  • benchmarks/conformance/cases/25-calendar-heatmap/case.json
  • benchmarks/conformance/cases/34-pointer-tooltip/case.json
  • benchmarks/conformance/cases/34-pointer-tooltip/plot.ts
  • benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
  • benchmarks/conformance/types.ts
  • docs/examples/heatmaps-and-densities.md
  • docs/framework/octane/quick-start.md
  • packages/charts-core/docs/examples/heatmaps-and-densities.md
  • packages/charts-core/docs/framework/octane/quick-start.md
  • packages/charts-core/src/svg-surface.test.ts
  • packages/charts-core/src/svg-surface.ts
  • scripts/catalog-artifact.mjs
  • scripts/catalog-definition-shapes.test.mjs
  • scripts/compare-plot-catalog.mjs
  • scripts/measure-bundles.mjs

Comment thread benchmarks/conformance/cases/118-token-usage-calendar/shell.ts
Comment thread benchmarks/conformance/cases/118-token-usage-calendar/shell.ts
Comment thread benchmarks/conformance/cases/34-pointer-tooltip/tanstack.ts
@tannerlinsley
tannerlinsley merged commit d731966 into main Aug 2, 2026
24 checks passed
@github-actions github-actions Bot mentioned this pull request Aug 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

full-conformance Run the complete standard conformance matrix for this pull request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants