Greptile Overview

Summary

This PR addresses block overlap issues in the workflow autolayout algorithm by implementing live block dimension tracking instead of relying on static default sizes. The changes introduce a comprehensive system where actual rendered block dimensions are measured using ResizeObserver and stored in a new `BlockLayoutState` interface with `measuredWidth` and `measuredHeight` properties.

The solution works by:

1. Enhanced Block Tracking: Added a layout property to BlockState that stores real-time dimensions measured from the DOM
2. Improved Measurement System: Replaced the previous updateBlockHeight method with updateBlockLayoutMetrics to track both width and height simultaneously
3. Live Data Integration: Modified the autolayout API to accept blocks with live measurements from the UI instead of loading stale data from the database
4. Algorithm Refinements: Updated the autolayout positioning, layering, and container logic to use BlockMetrics (expanded from BlockDimensions) with padding and minimum size constraints
5. Starter Block Logic: Removed special alignment treatment for start triggers that appeared mid-flow, implementing proper dependency-based layering instead

The changes span the entire autolayout system, from the UI component level (where ResizeObserver measures blocks) through the store layer (which tracks dimensions) to the algorithm implementation (which now uses live measurements for positioning calculations). This ensures that blocks with dynamic content or varying sizes are positioned accurately, preventing visual overlaps that occurred when the algorithm assumed fixed dimensions.

Important Files Changed

Changed Files

Filename	Score	Overview
apps/sim/stores/workflows/workflow/types.ts	5/5	Added BlockLayoutState interface and layout property to BlockState for tracking measured dimensions
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/auto-layout.ts	5/5	Modified to send live block measurements to autolayout API instead of using stale database data
apps/sim/lib/workflows/autolayout/utils.ts	4/5	Refactored BlockDimensions to BlockMetrics with measured dimension support and improved starter block logic
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx	4/5	Enhanced ResizeObserver to track both width and height, replaced updateBlockHeight with updateBlockLayoutMetrics
apps/sim/lib/workflows/autolayout/positioning.ts	5/5	Updated all references from node.dimensions to node.metrics for live measurement integration
apps/sim/stores/workflows/workflow/store.ts	4/5	Added layout property initialization and replaced updateBlockHeight with updateBlockLayoutMetrics method
apps/sim/lib/workflows/autolayout/containers.ts	4/5	Added prepareBlockMetrics call and switched to node.metrics for container bounds calculation
apps/sim/lib/workflows/autolayout/incremental.ts	4/5	Replaced getBlockDimensions with getBlockMetrics to use live measurements for overlap prevention
apps/sim/lib/workflows/autolayout/types.ts	4/5	Renamed BlockDimensions to BlockMetrics with expanded properties for padding and minimum dimensions
apps/sim/app/api/workflows/[id]/autolayout/route.ts	4/5	Enhanced API to accept optional blocks/edges parameters with live measurements
apps/sim/lib/workflows/autolayout/layering.ts	4/5	Implemented proper topological sort and removed problematic starter block special treatment
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils.ts	4/5	Updated getBlockDimensions to prioritize measured dimensions from layout property
apps/sim/lib/workflows/autolayout/index.ts	4/5	Added debug logging and prepareBlockMetrics integration for live dimension tracking

Confidence score: 4/5

• This PR addresses a specific technical issue (block overlaps) with a well-architected solution using live DOM measurements
• Score reflects the comprehensive nature of changes across multiple autolayout components that work together cohesively
• Pay close attention to the ResizeObserver implementation in workflow-block.tsx and the dimension calculation logic in utils files

_{13 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}