Skip to content

fix: preserve line continuity at zoom viewport edges - #53

Open
Fefedu973 wants to merge 4 commits into
TanStack:mainfrom
Fefedu973:fix/zoom-line-viewport-continuity
Open

fix: preserve line continuity at zoom viewport edges#53
Fefedu973 wants to merge 4 commits into
TanStack:mainfrom
Fefedu973:fix/zoom-line-viewport-continuity

Conversation

@Fefedu973

@Fefedu973 Fefedu973 commented Aug 3, 2026

Copy link
Copy Markdown

Summary

Fix the zoomable time-window example so continuous lines reach the viewport boundaries correctly while zooming and panning.

Problem

The example filtered the line to observations strictly inside the accepted time window. When a boundary fell between observations, the crossing segment disappeared and the line stopped short of the plot edge.

Using raw offscreen neighbors restores the segment, but it also lets offscreen values distort the inferred y domain.

Changes

  • Keep dots restricted to real observations inside the viewport.
  • Build the decorative line from visible observations plus exact boundary rows interpolated from the nearest chronological observations.
  • Sort line input without mutating source data, while preserving stable duplicate timestamps and intentional invalid-value gaps.
  • Clip marks to the plot so boundary symbols and round line caps match the viewport crop.
  • Report line geometry from the complete visible line segment.
  • Add focused model, scene, driver, type, and browser coverage, including an observation-free weekend and a retained fractional-boundary screenshot.

Verification

  • Full pnpm validate passed, including 1,934 tests, packages, adapters, docs, catalog artifacts, benchmarks, and bundle checks.
  • The focused 19-test suite passed.
  • The paired quick browser matrix passed every behavior, visual, geometry, and strict-type gate at 98.6 percent geometry similarity.

Result

The line now reaches both viewport edges without offscreen extrema compressing the visible y scale, dots remain limited to real visible observations, and exact-boundary and gap behavior remains stable.

Summary by CodeRabbit

  • Bug Fixes

    • Improved zoomable time-window charts so decorative lines remain continuous at viewport boundaries.
    • Added interpolated boundary segments when a zoomed window contains no visible observations.
    • Preserved gaps for invalid values and correctly handled duplicate timestamps, clipped lines, and one-sided data.
  • Tests

    • Added coverage for boundary interpolation, empty windows, zooming, panning, clipping, and line continuity.
    • Added a fractional-boundary screenshot for visual verification.

@coderabbitai

coderabbitai Bot commented Aug 3, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Team

Run ID: 568091b6-4bd2-44e6-bda9-0bf2600e3016

📥 Commits

Reviewing files that changed from the base of the PR and between 258ed39 and 5d629a3.

⛔ Files ignored due to path filters (1)
  • benchmarks/conformance/previews/90-zoomable-time-window.svg is excluded by !**/*.svg
📒 Files selected for processing (9)
  • API-FRICTION.md
  • benchmarks/conformance/cases/90-zoomable-time-window/case.json
  • benchmarks/conformance/cases/90-zoomable-time-window/example.tsx
  • benchmarks/conformance/cases/90-zoomable-time-window/model.test.ts
  • benchmarks/conformance/cases/90-zoomable-time-window/model.ts
  • benchmarks/conformance/cases/90-zoomable-time-window/tanstack.test.ts
  • benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts
  • benchmarks/conformance/catalog-index.json
  • benchmarks/conformance/previews/manifest.json

Included review availability: Your plan provides up to 4 included reviews per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

The zoomable time-window case now separates dot and line data. Line data includes interpolated rows at fractional viewport boundaries, while dots remain tied to visible observations. Scene clipping, geometry tests, screenshots, and preview metadata were updated.

Changes

Zoom window rendering

Layer / File(s) Summary
Interpolated line data
benchmarks/conformance/cases/90-zoomable-time-window/model.ts, benchmarks/conformance/cases/90-zoomable-time-window/model.test.ts
Adds ZoomLineRow and visibleZoomLineData. The model sorts rows, interpolates missing boundaries, preserves gaps and duplicate timestamps, and rejects invalid or insufficient windows.
Separate line and dot geometry
benchmarks/conformance/cases/90-zoomable-time-window/example.tsx, benchmarks/conformance/cases/90-zoomable-time-window/tanstack.ts, benchmarks/conformance/cases/90-zoomable-time-window/tanstack.test.ts
The line uses interpolated rows and the dots use visible rows. Scene clipping and geometry assertions cover viewport edges and observation-free windows.
Screenshot and validation updates
benchmarks/conformance/cases/90-zoomable-time-window/case.json, benchmarks/conformance/catalog-index.json, benchmarks/conformance/previews/manifest.json, API-FRICTION.md
Adds fractional-boundary screenshots, updates preview hashes and size, and documents the focused and full validation coverage.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Merge Risk: ⚪ Minimal · up to 5d629

The zoomable time-window example now maintains clipped line continuity across viewport boundaries while keeping dots limited to visible observations. No merge-blocking risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant ChartDefinition
  participant visibleZoomLineData
  participant GeometryDriver
  ChartDefinition->>visibleZoomLineData: compute lineRows for the window
  visibleZoomLineData-->>ChartDefinition: return boundary-interpolated rows
  GeometryDriver->>visibleZoomLineData: compute linePoints for the window
  GeometryDriver-->>ChartDefinition: render clipped line geometry
Loading

Suggested reviewers: tannerlinsley

🚥 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 10 functions across 5 files. (4 skipped: 4… Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
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.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and concisely describes the main change: preserving line continuity at zoom viewport edges. It matches the pull request objectives and changeset.
Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 10 functions across 5 files. (4 skipped: 4 unsupported.)

  • Fix all pre-merge checks with AI
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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: 2

🤖 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/90-zoomable-time-window/model.ts`:
- Around line 56-60: The neighbor scan in visibleZoomDataWithNeighbors must not
break when a timestamp exceeds end, because rows may be out of order. Remove the
early termination and scan every row, preserving selection of the first visible
row and collecting neighbors based on each row’s timestamp within the window;
alternatively, explicitly enforce and document an ascending Date invariant
before retaining the break.

In `@benchmarks/conformance/cases/90-zoomable-time-window/view.tsx`:
- Around line 73-86: Update the line geometry bounds in the chart definition
around lineY and visibleZoomDataWithNeighbors to use the rendered lineRows data,
while keeping visibleRows for the dot mark. Build the role: 'line' bounds from
lineRows and clip the resulting rectangle to the chart area so it remains within
the geometry contract.
🪄 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: acf98fd1-a1c1-4cdb-a976-6eb880e9f732

📥 Commits

Reviewing files that changed from the base of the PR and between 583129a and 9542886.

📒 Files selected for processing (2)
  • benchmarks/conformance/cases/90-zoomable-time-window/model.ts
  • benchmarks/conformance/cases/90-zoomable-time-window/view.tsx

Comment thread benchmarks/conformance/cases/90-zoomable-time-window/model.ts Outdated
Comment thread benchmarks/conformance/cases/90-zoomable-time-window/view.tsx Outdated
@coderabbitai

coderabbitai Bot commented Sep 3, 2026

Copy link
Copy Markdown

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

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