feat(ui): premium refinement pass + React Flow service map#111
Merged
Conversation
…p polish Iterates on the v0.3.0 map-centric redesign with a batch of UI refinements. Inspector - Drop the docked category rail; the details popup is the sole surface, carrying the Overview/Why/Impact/Dependencies tabs on every breakpoint. - Top-anchor the popup so switching tabs no longer re-centers/jumps it. - Prominent, explicitly-coloured service name. Service map (FlowMap) - Fix node clicks being swallowed: defer pointer capture until a drag passes DRAG_SLOP, so a tap falls through to onSelect (setPointerCapture-on-down was retargeting the click to the <svg>). Pan/pinch unchanged. - Outline-led nodes: full status-hue border + neutral (--bg-inset) fill. - Node size scales with edge count; clean label truncation; light grid bg. Side panel - Status groups are collapsible (chevron + always-visible count); Healthy starts collapsed. Add a collapsible "Anomalies" group. - ServiceRow drops the inline rps/err/p99 columns so names stay legible; full stats live in the popup. Shell / chrome - Remove the single-item nav rail; the canvas fills the width. - Remove the top anomalies strip (anomalies now live in the side panel). - Remove the investigation TrailBar. Type + colour - Vendor Martian Grotesk + Martian Mono (Evil Martians, OFL; sans subset 36KB, mono 24KB) replacing Inter + JetBrains Mono. - Refine the accent to indigo; deepen surfaces; theme-color + ErrorBoundary fallbacks updated. tsc clean, 413 unit tests pass, bundle budgets met. Tests updated across App/Shell/Inspector/FlowMap/ConstellationHome. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LDQVJrixs2nJoea67a8pEG
Replace the hand-rolled SVG service map with React Flow (@xyflow/react, MIT) while keeping our own deterministic radial layout. React Flow now owns pan/zoom/pinch, fit-view, the grid background and a11y focus, so a large amount of bespoke interaction code is gone. - FlowMap.tsx: feed radialLayout positions into <ReactFlow>; a token-themed chip as a custom node; straight centre-to-centre floating edges (failing edges keep the marching-dash style); grid <Background>; node click → inspector; fit() exposed via the ref. (Edges were straightened first — quadratic bow → a line — which is now native to React Flow.) - FlowMap.module.css: theme React Flow's own DOM to the dark token system. - @xyflow/react@12.11.0 added (peer react>=17; transitives zustand/classcat/ d3-zoom, all permissive; npm audit clean). Fully lazy — it lives in the ConstellationHome chunk (+~52 KB gz), so initial JS is unchanged (~103 KB); budgets.json gains a ConstellationHome lazy-chunk exception. - Tests: FlowMap.test rewritten for React Flow; ConstellationHome.test map assertions adapted (async node queries; fireEvent click to dodge a jsdom d3-zoom crash); test-setup gains React Flow jsdom shims. Cleanup (dead after this + prior refactors): - Remove the unused AnomalyStrip component + CSS + test (the top strip was dropped; anomalies live in the side panel now). - Remove orphaned lib/sheet.ts + test (bottom-sheet → popup). - Drop dead CSS: ServiceInspector .tabs/.sheet*/.srOnly, FlowMap .minimap. CLAUDE.md updated to document React Flow as the sanctioned map library. tsc clean, 377 unit tests pass, build + bundle budgets green, jscpd 0.45%, and a CDP browser click-through confirms nodes/edges/grid render and a node click opens the inspector. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LDQVJrixs2nJoea67a8pEG
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
SonarCloud S2871 (CRITICAL/HIGH reliability) flagged the bare `.sort()` on the shape-hash edge-key strings in FlowMap — the default sort coerces to UTF-16 code units, so it's not a reliable alphabetical sort. Add a `localeCompare` comparator (mirrors the sibling `.sort(compareIds)` on the ids line). The shape hash stays deterministic; no behaviour change. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LDQVJrixs2nJoea67a8pEG
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two commits, building on the v0.3.0 map-centric "Service Map" redesign:
1. Premium refinement pass —
feat(ui)setPointerCaptureswallowing the click), node size by edge count, outline-led status chips, light grid, straight edges.2. React Flow service map —
refactor(ui)@xyflow/react, MIT) while keeping our own deterministic radial layout (radialLayout.ts). React Flow owns pan/zoom/pinch, fit-view, grid background and a11y focus; nodes are token-themed React components; edges are straight centre-to-centre.@xyflow/react@12.11.0is fully lazy (lands in theConstellationHomechunk, +~52 KB gz) — initial JS unchanged (~103 KB gz).npm auditclean; transitives (zustand / classcat / d3-zoom) all permissive.AnomalyStrip,lib/sheet, and assorted dead CSS.Validation
tscclean · 377 unit tests pass · production build + bundle budgets green · jscpd 0.45%Notes
dagLayout/radialLayoutkeep a few exports the app no longer calls (edgePath,walkFrom,zoomAt,fitTransform,layoutGraph,walkRadial) — tree-shaken out of the bundle, still unit-tested; can be pruned in a follow-up.🤖 Generated with Claude Code
https://claude.ai/code/session_01LDQVJrixs2nJoea67a8pEG