Migrate Service Map to PageLayout

[elizabetdev]

Summary

• Moves Service Map onto PageLayout with a sticky toolbar (source, sampling, time range) and no duplicate title for this top-level tool.

Recreated from #2284 now that the base PageLayout/PageHeader work has landed on main.

Test plan

• /service-map loads with trace source; time range and sampling work
• Empty state when no trace sources still behaves correctly

Made with Cursor

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	May 28, 2026 12:47pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 7a151ca

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

This PR includes changesets to release 3 packages

Name	Type
@hyperdx/app	Patch
@hyperdx/api	Patch
@hyperdx/otel-collector	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

[github-actions]

🔵 Tier 2 — Low Risk

Small, isolated change with no API route or data model modifications.

Why this tier:

• Standard feature/fix — introduces new logic or modifies core functionality

Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns.
SLA: Resolve within 4 business hours.

Stats

• Production files changed: 1
• Production lines changed: 202
• Branch: page-migrate-service-map
• Author: elizabetdev

To override this classification, remove the review/tier-2 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

Deep Review

✅ No critical issues found. This is a clean migration of DBServiceMapPage onto the shared PageLayout/PageHeader primitives and matches the canonical guidance in agent_docs/page_layout.md for a top-level tool (no title, no breadcrumbs, fillViewport, leading + actions). The data-testid="service-map-page" selector is preserved, query params (source, samplingFactor) round-trip unchanged, and no behavioral wiring for source selection, sampling, or time range moved.

🟡 P2 -- recommended

• packages/app/src/DBServiceMapPage.tsx:160 -- The empty-state branch now carries data-testid="service-map-page", whereas the old empty-state Box had no test id, so any E2E assertion that previously treated this selector as proof "trace sources are loaded" will now resolve instantly on an unconfigured account.
  • Fix: Use a distinct id (e.g. service-map-empty-state) on the empty-state PageLayout, or audit Playwright suites referencing service-map-page to confirm they intentionally accept the empty branch as a valid match.
  • _{adversarial, testing}

🔵 P3 nitpicks (1)

• packages/app/src/DBServiceMapPage.tsx:118 -- sourceSelect and headerActions are built unconditionally above the empty-state early return at line 155, so the Slider/TimePicker/SourceSelectControlled JSX subtrees are constructed on the empty-state render even though that branch never consumes them.
  • Fix: Move the sourceSelect (lines 118-128) and headerActions (lines 130-153) declarations below the if (!isLoading && !hasTraceSources) block so they are only built on the loaded path.

Pre-existing (not introduced by this diff)

• packages/app/src/components/PageLayout.module.scss:9 -- fillViewport sets height: 100vh on the page root, which exceeds the #app-content-scroll-container row when the ClickStack banner is open, producing empty space below the canvas. The prior Box also used height: 100vh, so this is not a regression; consider switching to height: 100% (or flex: 1; min-height: 0 inside the scroll container) in a follow-up.

---

Reviewers (8): correctness, testing, maintainability, project-standards, kieran-typescript, adversarial, agent-native, learnings-researcher.

Testing gaps:

• No E2E coverage exercises the empty-state branch (no trace sources) — a render regression in the rewritten no-sources path would not be caught.
• No assertion verifies that the new leading=sourceSelect and actions=headerActions slots actually mount their controls; the existing service-map-page testid check would pass even if SourceSelectControlled or TimePicker silently failed to render in the header.

[github-actions]

E2E Test Results

❌ 1 test failed • 189 passed • 3 skipped • 1299s

Status	Count
✅ Passed	189
❌ Failed	1
⚠️ Flaky	5
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →