fix: Validate column name for metrics when creating charts

[fleon]

When creating a chart, validate input before executing the query, so that we show a validation error instead of a query execution error if the column name is empty. The error state on a particular input is cleared once the input is populated.

Fixes HDX-1792.

Screenshots

Before:

After:

Error state:

Video:

CleanShot.2026-01-13.at.19.58.01.mp4

[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 15, 2026 3:13pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 9f97813

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

[claude]

PR Review: Metric Name Validation

✅ Good changes:

• Validation prevents query execution errors
• Tests are comprehensive and cover edge cases
• Error clearing on focus improves UX

⚠️ Issues to address:

• Missing import in test file → Test uses renderWithMantine (line 166) but doesn't import it. Based on setupTests.tsx, this is a global function but tests should explicitly import it if not using a setup file that auto-imports it.

• Type safety concern in validation → In DBEditTimeChartForm.tsx:603, the condition series.metricType && !series.metricName assumes metricType presence means validation is needed. However, if metricType can be falsy but still valid (e.g., empty string vs undefined), this could miss validation cases. Consider explicit check: series.metricType != null && !series.metricName.

• Error propagation inconsistency → The validation returns early (line 612) without calling onChartConfigChanged or other callbacks that might be expected. Verify this doesn't break any parent component expectations.

• Test mock accuracy → Test mock for MetricNameSelect (lines 66-86) simplifies the component but doesn't test the actual MetricNameSelect component behavior. Consider if integration tests should test against the real component.

Recommendation: Fix the missing import issue before merge. Other items are low-risk but worth considering.

[github-actions]

E2E Test Results

✅ All tests passed • 60 passed • 4 skipped • 753s

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

Tests ran across 4 shards in parallel.

View full report →

[teeohhem]

@fleon looks like a small linting/ts error is present in this PR.

[fleon]

@teeohhem Ready to take another look. I also cleaned up the test file to reduce the number of mocks (only mocking what is necessary to test this particular bug fix).

[pulpdrew]

LGTM on the Chart Explorer page. One additional related thing that could be good is to do the same validation when saving dashboard tiles:

Screen.Recording.2026-01-15.at.9.33.50.AM.mov

[teeohhem]

Good callout @pulpdrew . Up to you @fleon whether you want to take that suggestion as a part of this ticket or create a follow up ticket and handle it there. Thanks!

[fleon]

Thanks for the feedback @pulpdrew. I'll create a new ticket to update the dashboard page as well. I'll also think about if we can abstract the logic into a separate file to share between the two components.

Edit: Tracking in HDX-3222

[teeohhem]

Good stuff. TY!