refactor: extract deltaChartUtils and PropertyComparisonChart from DBDeltaChart

[alex-fedotyev]

Summary

Fixes #1830

Pure refactor — zero behavior change. Extracts inline utility functions and the PropertyComparisonChart component from DBDeltaChart.tsx (601 lines) into separate files.

Changes

Action	File	Lines
NEW	deltaChartUtils.ts	107 lines — flattenData, getPropertyStatistics, mergeValueStatisticsMaps
NEW	PropertyComparisonChart.tsx	130 lines — PropertyComparisonChart, HDXBarChartTooltip, layout constants
MODIFIED	DBDeltaChart.tsx	601 → 344 lines — inline code replaced with imports

+257 / -257 — exact symmetry confirming this is a pure move.

Why

DBDeltaChart.tsx at 601 lines violates the 300-line guideline. More importantly, extracting into separate files enables the Event Deltas improvement series (#1823–#1829) to add features to clean, focused files instead of one monolith.

Review guidance

This is a move-only refactor. To verify:

1. deltaChartUtils.ts contains the exact functions from lines 52–156 of the old DBDeltaChart.tsx, now exported
2. PropertyComparisonChart.tsx contains the exact component from lines 158–259 and constants from lines 261–271, now exported
3. DBDeltaChart.tsx imports from the new files — no logic changes

Test plan

• Existing E2E tests pass
• Event Deltas comparison view works identically
• No visual changes

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: ac4ca01

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	Feb 27, 2026 11:20pm

[github-actions]

E2E Test Results

✅ All tests passed • 77 passed • 4 skipped • 861s

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

Tests ran across 4 shards in parallel.

View full report →

[alex-fedotyev]

@claude - do code review

[claude]

Claude finished @alex-fedotyev's task in 1m 40s —— View job

---

Code Review

Tasks

• Gather context and understand the request
• Read changed files
• Analyze the refactor
• Post review feedback

---

Summary

This is a clean, faithful extraction. The +257/-257 symmetry holds, E2E tests all pass, and the file structure is logical. A few items worth noting below — most are pre-existing, but they're now more visible in isolated files.

---

Issues

CHART_HEIGHT used as magic number in the component it describes

PropertyComparisonChart.tsx line 88 — the exported constant CHART_HEIGHT = 120 exists specifically so grid layout math elsewhere can know the chart's height, but the component itself doesn't consume it:

// Line 29 — exported constant
export const CHART_HEIGHT = 120; // must match PropertyComparisonChart outer div height (px)

// Line 88 — hardcoded in the same file
<div style={{ width: '100%', height: 120 }}>

The comment documents the coupling, but doesn't prevent it from drifting. Since both values are now in the same file, CHART_HEIGHT could be used directly: height: CHART_HEIGHT. This is a trivial one-liner fix.

Fix this →

---

Pre-existing: flattenData empty-array guard never fires

deltaChartUtils.ts lines 15–18 — the let l outer variable is shadowed by the let i = 0, l = cur.length inside the for loop header. With let scoping, the loop-local l is destroyed when the loop exits, leaving the outer l as undefined:

let l;                                          // outer l = undefined
for (let i = 0, l = cur.length; i < l; i++)    // loop-scoped l, doesn't affect outer
  recurse(cur[i], prop + '[' + i + ']');
if (l == 0) result[prop] = [];                  // outer l is undefined, undefined == 0 → false

The if (l == 0) check is never true, so empty arrays ([]) silently produce no entry in the result instead of the intended result[prop] = []. This was already in the original DBDeltaChart.tsx and is not introduced here — but it's worth a follow-up fix now that the function lives in a testable utility file.

---

No unit tests for deltaChartUtils.ts

The module comment ("Pure helpers with no React dependencies — safe to import from tests") is accurate and a welcome signal, but there are currently no tests for flattenData, getPropertyStatistics, or mergeValueStatisticsMaps. The above bug would have been caught by a basic flattenData([]) test. A follow-up test file would make the series of planned improvements (#1823–#1829) safer to iterate on.

---

Minor / Cosmetic (no action needed)

• HDXBarChartTooltip not exported: Correct — it's internal to the file.
• props: any in HDXBarChartTooltip: Pre-existing; not in scope for this PR.
• Error boundary fallback uses Bootstrap-style class names (text-danger, px-2 py-1): Pre-existing; the styles import right below it uses a proper SCSS module.
• flattenData exported but only used internally within the utils file: Intentional — makes it independently testable. Fine.

---

Verdict

Approve with suggestions. The refactor itself is mechanically correct and the motivation (enabling focused follow-on PRs) is solid. The CHART_HEIGHT self-reference is a trivial fix that would be ideal to include here. The flattenData bug and missing tests are pre-existing concerns worth tracking in follow-up issues.

[pulpdrew]

LGTM