## 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 -->
## Problem
When you have many tables, it's hard to follow the relations between
them in the Schema Visualiser
## Solution
When selecting an edge (the line between tables), highlight it along
with the related tables and columns to make it easier.
Also, if there is enough space, display a popover showing the relation
details
## Screencasts
https://github.com/user-attachments/assets/11d35fa7-3674-4f13-b77f-8ebe25c66b04
* feat(docs), refactor(docs,studio): add regions list to docs
Adds list of supported AWS regions to docs.
Pulls the region information into `shared-data` package to provide common source of truth for dashboard and docs.
* style: format
* Support more granular updates via events for spinning up replica
* Add duration estimates as tooltips
* Show granular error message if error happens during replica set up
* Add support for hours in duration estimates
* Remove size selection and add info on rr billing
* Add prompt in SQL editor if trying to run mutation query in read replica
* Fix
* Fix dropping replica not optimistically updating, and support new replica statuses
* Invalidate load balancers after read replicas are spun up
* fix
* Offer select closest region CTA in project creation
* Update region select CTA to use cloudflare and support all regions
* Auto select region, remove CTA
* Update apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
---------
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* Implement read, create, delete replicas
* Long poll replica statuses if any one of them is coming up
* Support querying replicas in SQL editor
* Add optimistic rendering for setting up and removing replicas
* Small style fix for database selector in SQL editor
* Small fix
* Add Alerts around PITR and PG upgrades RE read replicas
* Small fixes after testing flag off
* Add UI guards to check that project has PITR before deploying replica
* Fix
* Address feedback
* Fix
* Update replicas RQ to enable based on flag
* Init demo world map for read replicas
* Update package.json
* Scaffold and mock data for flow view of project settings infrastructure configuration
* Shift map stuff and install deck.gl to experiment
* Flesh out map view a bit more
* Scaffold deploy new replica panel
* Add restart replica option
* Add animations, shift node generation into utils, attempt to show region nodes
* Experiments
* General improvement to chart and map UI
* Improve some copy writing for restart and drop replica modals
* Simplify loading, error, success states in DatabaseSettings
* Scaffold DB selection in connection string section
* Link replica node to connection string
* Scaffold database selection for SQL editor
* Make DatabaseSelector into a component
* Add database selector to infra activity
* Update
* Hide read replicas UI behind a feature flag
* Update flags
* Update package-lock
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
