mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 02:45:07 +03:00
Charis
3aec96f9c6
## Summary The homepage instance diagram looks visually off when a project has read replicas — see [FE-3390](https://linear.app/supabase/issue/FE-3390/adjust-homepage-diagram-spacing-for-read-replicas). Root cause: the dagre layout in `InstanceConfiguration.utils.ts` was passing a fake `height: 25` (and a `-70` hack for the load balancer) for every node, regardless of how tall the rendered node actually is. When the Primary card grew taller after #45274 added the compute-metrics row, the gap between the Primary node and the Read Replica node became visually tight while the gap between the Load Balancer and Primary stayed loose — the diagram looked lopsided. ## Fix - Pass the **real measured height** of each node to dagre, sourced from React Flow's internal measurement (`node.measured.height`). - Run the layout in two passes: 1. First pass uses small per-type fallback heights so React Flow has something to render and measure against. 2. Once `useNodesInitialized()` flips true, re-run dagre with the measured heights and fitView. - Keep the diagram at `opacity-0` until the measured pass completes, so the fallback positions are never visible to the user. Subsequent data refetches don't re-hide the diagram — once measured, it stays visible. - Drop `NODE_ROW_HEIGHT` and the load-balancer `-70` hack. Replaced with a small `NODE_HEIGHT_FALLBACKS` table used only on first paint. - `ranksep` reduced from 160 → 60 since dagre now knows real heights. Closes FE-3390. ## Test plan - [x] Open the project homepage for a project with no read replicas — diagram renders centered, single Primary node. - [x] Open the project homepage for a project **with** a read replica — Load Balancer → Primary → Replica spacing is visually balanced; no flash of fallback positions on initial render; the diagram fades in once. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * More accurate infrastructure diagram layout with better node sizing and spacing for initial and measured renders. * Introduced fallback heights so diagrams render correctly on first paint before measurements are available. * Region containers now use a consistent fixed height for stable layout. * Smoother, visually consistent diagram initialization with improved opacity transition during layout setup. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46075?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
