feat: better charts by jog1t · Pull Request #4172 · rivet-dev/rivet

jog1t · 2026-02-10T23:25:18Z

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

My code follows the style guidelines of this project
I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes

railway-app · 2026-02-10T23:25:27Z

🚅 Deployed to the rivet-pr-4172 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
website	😴 Sleeping (View Logs)	Web	Feb 27, 2026 at 7:20 pm
mcp-hub	✅ Success (View Logs)	Web	Feb 18, 2026 at 2:55 am
frontend-inspector	❌ Build Failed (View Logs)	Web	Feb 16, 2026 at 7:14 pm
frontend-cloud	❌ Build Failed (View Logs)	Web	Feb 16, 2026 at 7:14 pm
ladle	❌ Build Failed (View Logs)	Web	Feb 16, 2026 at 7:14 pm

jog1t · 2026-02-10T23:25:35Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

feat: better charts #4172 👈 (View in Graphite)
feat: add xyflow #4170 : 1 other dependent PR (#4211 )
feat: add ladle #4168
main

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has enabled the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

claude · 2026-02-10T23:27:18Z

PR Review: Better Charts with Visx

Overview

This PR replaces the existing charting implementation with Visx (from Airbnb), introducing interactive features like brush-based zooming and synchronized crosshairs across charts. The changes include adding 10+ new dependencies and ~1,122 lines of new code.

Positive Aspects

✅ Good Architecture

Clean separation of concerns with dedicated components (visx-area-chart.tsx, visx-brush-chart.tsx, chart-sync-context.tsx)
Well-structured context provider for synchronizing chart interactions across multiple charts
Proper use of React hooks (useMemo, useCallback) for performance optimization

✅ User Experience Improvements

Interactive brushing/zooming capability
Synchronized tooltips and crosshairs across multiple charts
Responsive design with ParentSize wrapper
Clean visual design with gradients and proper theming

✅ Code Quality

Good TypeScript typing throughout
Comprehensive use of useMemo to prevent unnecessary recalculations
Proper cleanup with handleMouseLeave to reset state

Issues & Recommendations

🔴 Critical Issues

1. Missing PR Description

The PR description is completely empty (just a template). Please fill it out with:

What changed and why
How to test these new chart features
Screenshots/GIFs showing the new interactive capabilities
Breaking changes (if any)

2. Potential Division by Zero

frontend/src/app/metrics/visx-brush-chart.tsx:101-104

if (end.getTime() - start.getTime() < 1000) {
    setBrushDomain(null);
    return;
}

While this prevents very small brushes, there's no check before this that ensures end > start. If a user somehow brushes backward, this could cause issues. Consider adding:

if (!domain || x0 >= x1) {
    setBrushDomain(null);
    return;
}

3. Non-null Assertion Operator

frontend/src/app/metrics/visx-area-chart.tsx:48
frontend/src/app/metrics/visx-brush-chart.tsx:51

const innerHeight = height! - MARGIN.top - MARGIN.bottom;

Using ! is risky. While height defaults to 200/50, it's better to be explicit:

const innerHeight = (height ?? 200) - MARGIN.top - MARGIN.bottom;

⚠️ Moderate Issues

4. Empty Data Handling

frontend/src/app/metrics/visx-area-chart.tsx:87-94

const allValues = filteredSeries.flatMap((s) => s.data.map((d) => d.value));
const maxVal = Math.max(...allValues, 0);

If filteredSeries is empty or all series have no data, allValues will be [], and Math.max(...[], 0) returns 0. This is handled, but the fallback domain [0, 1] could be confusing. Consider adding an early return:

if (filteredSeries.length === 0 || allValues.length === 0) {
    return null; // or show an empty state
}

5. Magic Numbers

frontend/src/app/metrics/zero-fill.ts:28-29

const bucket = Math.round(tsMs / resolutionMs) * resolutionMs;

The bucketing logic assumes timestamps align reasonably with resolution boundaries. If the backend returns timestamps that don't align well (e.g., startAt is at 10:00:03 but resolution is 60s), you might get unexpected buckets. Consider documenting this assumption or adding alignment logic.

6. Performance: Unnecessary Re-renders

frontend/src/app/metrics/chart-sync-context.tsx:27-33

const handleSetHovered = useCallback((ts: number | null) => {
    setHoveredTimestamp(ts);
}, []);

These useCallback wrappers don't provide much value since setHoveredTimestamp and setBrushDomain are stable from useState. You can directly pass the setters:

<ChartSyncContext.Provider
    value={{
        hoveredTimestamp,
        brushDomain,
        setHoveredTimestamp, // Direct reference
        setBrushDomain,       // Direct reference
    }}
>

7. Accessibility Concerns

frontend/src/app/metrics/visx-area-chart.tsx:243-249
frontend/src/app/metrics/visx-brush-chart.tsx:183-189

The charts lack proper ARIA labels and keyboard navigation support. Users with screen readers or those who can't use a mouse won't be able to interact with the charts. Consider adding:

role="img" and aria-label on the SVG
Keyboard navigation for the brush component
ARIA live regions for tooltip updates

8. Date Formatting Locale

frontend/src/app/metrics/visx-area-chart.tsx:206, 272

tickFormat={(d) => format(d as Date, "HH:mm")}
// ...
{format(tooltipData.date, "PPp")}

The date-fns format function uses the default locale. If the app supports internationalization, you should pass a locale option.

💡 Minor Issues / Suggestions

9. Inconsistent Null Checks

frontend/src/app/metrics/visx-area-chart.tsx:142-145

if (hoveredTimestamp == null) return null;

You use == null (loose equality) here but might use === null elsewhere. Be consistent. TypeScript makes == null acceptable for checking both null and undefined, but for clarity, be consistent across the codebase.

10. Type Safety in Bisector

frontend/src/app/metrics/visx-area-chart.tsx:110-120

The bisector logic assumes s.data is sorted by ts. While this is likely true from the zeroFillDataPoints function, it's not enforced. Consider adding a comment:

// Assumes data is sorted by ts (guaranteed by zeroFillDataPoints)
const idx = bisectDate(s.data, date, 1);

11. Reset Button Position

frontend/src/app/metrics/visx-brush-chart.tsx:183-189

className="absolute top-0 right-3 text-xs text-muted-foreground hover:text-foreground transition-colors"

The "Reset zoom" button is positioned absolutely, which might overlap with other UI elements depending on the card header layout. Consider using a more robust positioning strategy or placing it in the card header.

12. Bundle Size Impact

pnpm-lock.yaml:379 additions

Adding 10+ Visx packages and d3-array significantly increases bundle size. Consider:

Code-splitting the metrics page if not already done
Verifying tree-shaking works properly with Visx
Running a bundle analysis to quantify the impact

13. Zero-Fill Logic Documentation

frontend/src/app/metrics/zero-fill.ts:24-30

The bucketing logic aggregates multiple values that fall into the same bucket:

valueMap.set(bucket, (valueMap.get(bucket) ?? 0) + dp.value);

This is additive, which makes sense for counter metrics but might not be correct for gauge metrics (where you'd want the latest value or an average). Consider documenting this or making it configurable.

14. Tooltip Positioning Edge Cases

frontend/src/app/metrics/visx-area-chart.tsx:254-269

The tooltip uses TooltipWithBounds which should handle edge cases, but verify this works well at chart boundaries where the tooltip might go off-screen.

15. Error Boundaries

The new chart components don't have error boundaries. If Visx throws an error (e.g., from invalid data), it could crash the entire metrics page. Consider wrapping charts in error boundaries.

📋 Testing Recommendations

Since the PR checklist is incomplete, here are specific tests to run:

Interactive Features
- Hover over multiple charts simultaneously - verify crosshair syncs
- Drag a brush selection - verify all charts zoom to the same time range
- Click "Reset zoom" - verify all charts return to full range
- Verify brush handles appear and are draggable
Edge Cases
- Empty data (no metrics available)
- Single data point
- Very large values (test Y-axis scaling)
- Very small time ranges (< 1 second brush)
- Multiple namespaces with different data ranges
Responsive Behavior
- Resize browser window - charts should resize smoothly
- Mobile viewport - verify touch interactions work
- Very narrow widths - verify charts don't break
Performance
- 10+ namespaces with many data points - verify no lag
- Fast mouse movement across charts - verify smooth tooltips
- Monitor re-renders with React DevTools
Accessibility
- Keyboard navigation
- Screen reader announcement
- High contrast mode

🔒 Security Considerations

No significant security concerns. The code properly handles user input (mouse events) and doesn't introduce XSS vectors.

📦 Dependencies

New dependencies added:

@visx/* (9 packages)
@types/d3-array
d3-array

All are well-maintained, reputable libraries from Airbnb. No security concerns.

Recommendations Summary

Before Merging:

Fill out the PR description
Fix the non-null assertions (height!)
Add validation for brush direction (x0 >= x1)
Add basic accessibility attributes
Test all the scenarios listed above
Check bundle size impact

Future Improvements:

Add error boundaries
Implement keyboard navigation
Add comprehensive accessibility support
Consider locale support for date formatting
Document the zero-fill aggregation behavior

Conclusion

This is a solid improvement to the metrics UI with good code organization and useful interactive features. The main concerns are around edge case handling and accessibility. With the critical issues addressed, this will be a great enhancement to the user experience.

Recommendation: Request changes for critical issues, then approve once addressed.

pkg-pr-new · 2026-02-16T19:16:38Z

More templates

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4172

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4172

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4172

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4172

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4172

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4172

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4172

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4172

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4172

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4172

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4172

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4172

commit: 67a6ab1

railway-app bot had a problem deploying to rivet-frontend / rivet-pr-4172 February 10, 2026 23:25 Failure

jog1t mentioned this pull request Feb 10, 2026

feat: add ladle #4168

Closed

6 tasks

jog1t mentioned this pull request Feb 10, 2026

feat: add xyflow #4170

Closed

8 tasks

jog1t force-pushed the 02-11-feat_add_xyflow branch 3 times, most recently from 8bf01e3 to 95291ff Compare February 16, 2026 16:42

jog1t force-pushed the 02-11-feat_better_charts branch from 109e7fa to 2519b04 Compare February 16, 2026 16:42

railway-app bot had a problem deploying to rivet-frontend / rivet-pr-4172 February 16, 2026 16:42 Failure

feat: better charts

67a6ab1

jog1t force-pushed the 02-11-feat_add_xyflow branch from 95291ff to 7b2929d Compare February 16, 2026 19:13

jog1t force-pushed the 02-11-feat_better_charts branch from 2519b04 to 67a6ab1 Compare February 16, 2026 19:13

railway-app bot had a problem deploying to rivet-frontend / rivet-pr-4172 February 16, 2026 19:13 Failure

This was referenced Feb 16, 2026

feat: add database inspector #4211

Closed

refactor(inspector): separate inspector app from dashboard #4227

Closed

refactor(inspector): serve inspector from manager (localhost:6420/ui) #4228

Closed

fix: invalid changelog ping position #4236

Merged

NathanFlurry changed the base branch from 02-11-feat_add_xyflow to graphite-base/4172 February 19, 2026 23:05

This was referenced Feb 19, 2026

chore: multiplayer cookbook #4200

Merged

chore: multiplayer examples #4201

Closed

chore(repo): ignore openspec #4202

Closed

chore: multiplayer game examples #4203

Closed

fix(rivetkit): repair setupDatabase merge after restack #4243

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: better charts#4172

feat: better charts#4172
jog1t wants to merge 1 commit intographite-base/4172from
02-11-feat_better_charts

jog1t commented Feb 10, 2026

Uh oh!

railway-app bot commented Feb 10, 2026 •

edited

Loading

Uh oh!

jog1t commented Feb 10, 2026 •

edited

Loading

Uh oh!

claude bot commented Feb 10, 2026 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Feb 16, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

jog1t commented Feb 10, 2026

Description

Type of change

How Has This Been Tested?

Checklist:

Uh oh!

railway-app bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jog1t commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

claude bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Review: Better Charts with Visx

Overview

Positive Aspects

Issues & Recommendations

🔴 Critical Issues

1. Missing PR Description

2. Potential Division by Zero

3. Non-null Assertion Operator

⚠️ Moderate Issues

4. Empty Data Handling

5. Magic Numbers

6. Performance: Unnecessary Re-renders

7. Accessibility Concerns

8. Date Formatting Locale

💡 Minor Issues / Suggestions

9. Inconsistent Null Checks

10. Type Safety in Bisector

11. Reset Button Position

12. Bundle Size Impact

13. Zero-Fill Logic Documentation

14. Tooltip Positioning Edge Cases

15. Error Boundaries

📋 Testing Recommendations

🔒 Security Considerations

📦 Dependencies

Recommendations Summary

Conclusion

Uh oh!

pkg-pr-new bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

railway-app bot commented Feb 10, 2026 •

edited

Loading

jog1t commented Feb 10, 2026 •

edited

Loading

claude bot commented Feb 10, 2026 •

edited

Loading

pkg-pr-new bot commented Feb 16, 2026 •

edited

Loading