6. ERD Auto-Layouts #399
Description
Summary
Implement an auto-layout system using React Flow to automatically position and organize dictionary schema entities in the ERD diagram modal. Cleanly render 17+ schema nodes within a modal viewport with configurable layout options.
Note
This ticket may require further discussion on implementation details
Requirements
1. Configurable Layout
- Configurable default layout via props (e.g. node and edge spacing)
2. Modal Viewport Optimization
- Auto-fit entire diagram to viewport on modal open
- Calculate appropriate zoom level for 17+ nodes
- Smooth transitions between full view and focused/highlighted states
- "Fit to view" reset functionality
3. Node Organization
- Position related entities near their connections
- Minimize edge crossings
- Node sizes adjust to content (entity names, field lists)
- Maintain consistent spacing between nodes
4. Edge Routing
- Clear visualization of One-to-One, One-to-Many, Many-to-Many relationships
- Configurable routing style
- Edge bundling for multiple relationships between same entities
Acceptance Criteria
- Default layout settings/algorithms configurable via props
- All 17+ nodes visible and readable within modal viewport
- Auto-fit works on modal open and "clear highlights"
- Smooth transitions between layout states
- Performance targets met for 17+ node schemas
- Zoom and pan interactions work smoothly
- Edge crossings minimized
- Related entities positioned logically near connections