refactor: Add ChartContainer component with toolbar

[pulpdrew]

Closes HDX-2748

Summary

This PR introduces a new ChartContainer component which is used to wrap various Chart components, and provides a standardized way to put titles and toolbar icons above charts.

Motivation: we have various items above charts already (display switchers, titles, materialized view optimization icons) and we plan to add additional ones (for noting when time ranges have been updated to align with chart or MV granularities). With this change, we can put all of the items in the same row, which does not overlap with the chart data (Closes HDX-2748) and consolidate some logic.

Demo

Preset Dashboards

Custom Dashboards

Chart Explorer

Infra Side Panel

[changeset-bot]

🦋 Changeset detected

Latest commit: 378adc9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
hyperdx-v2-oss-app	Ready	Preview, Comment	Jan 7, 2026 8:05pm

[claude]

Code Review - PR #1560

✅ No critical issues found.

The refactoring introduces a clean ChartContainer abstraction that consolidates chart toolbar logic across multiple components. The implementation follows existing patterns and maintains type safety.

Observations (non-blocking):

• Good: Keys are properly added to toolbar items (commit e5f29b0)
• Good: Consistent API design with toolbarPrefix/toolbarSuffix for flexibility
• Good: Proper memoization of toolbar items to prevent unnecessary re-renders
• Good: Tests updated to reflect new component structure

Minor notes:

• Line 21 in ChartContainer.tsx: The condition check could be slightly simplified to match the outer condition, but current implementation works fine
• Consider adding PropTypes or more detailed TSDoc for the new ChartContainer component to document the intended usage patterns

Overall, this is a solid refactoring that improves code organization and maintainability. ✅

[github-actions]

E2E Test Results

✅ All tests passed • 56 passed • 4 skipped • 719s

Status	Count
✅ Passed	56
❌ Failed	0
⚠️ Flaky	0
⏭️ Skipped	4

Tests ran across 4 shards in parallel.

View full report →

[brandon-pereira]

Overall, change looks good. A couple minor feedback items:

Thoughts on swapping these button groups? I feel like the edit/delete icons should be on the outside.

Doesn't look like the reset button uses the new component, not super urgent but if it's easy for uniformity, maybe we update?

Also noticed the search page time chart does not use this component, but that one seems pretty complex so definitely fine to punt that

[pulpdrew]

Thoughts on swapping these button groups? I feel like the edit/delete icons should be on the outside.

My concern there is that the edit/delete icons only appear on hover, which would then push the display switcher to the left when the user goes to click it

We could make the edit/delete buttons persistent (ie. show up even without hovering) but my thought was that that might be too many icons then, so I kept the current behavior.

[brandon-pereira]

Thoughts on swapping these button groups? I feel like the edit/delete icons should be on the outside.

My concern there is that the edit/delete icons only appear on hover, which would then push the display switcher to the left when the user goes to click it

We could make the edit/delete buttons persistent (ie. show up even without hovering) but my thought was that that might be too many icons then, so I kept the current behavior.

Good point - I agree! Disregard :)

[brandon-pereira]

At some point- we should bump recharts version :P