progress on autolayout improvements

Author: icecrasher321

apps/sim/lib/workflows/autolayout/constants.ts

@@ -13,7 +13,7 @@ export const DEFAULT_HORIZONTAL_SPACING = 180
 /**
  * Vertical spacing between blocks in the same layer
  */
-export const DEFAULT_VERTICAL_SPACING = 200
+export const DEFAULT_VERTICAL_SPACING = 80
 
 /**
  * Default offset when duplicating blocks
@@ -84,6 +84,13 @@ export const ESTIMATED_SUBBLOCK_HEIGHT = 45
  */
 export const ESTIMATED_BLOCK_BOTTOM_PADDING = 20
 
+/**
+ * Maximum estimated block height when no measurement is available.
+ * Prevents wildly over-estimated heights for blocks with many conditional
+ * subblocks (e.g. agent blocks define ~20 subblocks but only ~5 are visible).
+ */
+export const MAX_ESTIMATED_BLOCK_HEIGHT = 350
+
 /**
  * Default layout options
  */

apps/sim/lib/workflows/autolayout/targeted.ts

@@ -90,9 +90,10 @@ export function applyTargetedLayout(
 
 /**
  * Selects the best anchor block for offset computation.
- * Prefers an unchanged block that is a direct edge-neighbor of a block
- * that needs layout, so the offset aligns new blocks relative to their
- * actual graph neighbors rather than an arbitrary/outlier block.
+ * Prefers an upstream (predecessor) anchor over a downstream one because
+ * upstream blocks keep their layer assignment when new blocks are inserted
+ * after them, giving a stable offset. Downstream blocks shift to later
+ * layers in the ideal layout, producing a large incorrect offset.
  */
 function selectBestAnchor(
   eligibleIds: string[],
@@ -107,14 +108,17 @@ function selectBestAnchor(
   const candidateSet = new Set(candidates)
 
   for (const edge of edges) {
-    if (needsLayoutSet.has(edge.source) && candidateSet.has(edge.target)) {
-      return edge.target
-    }
     if (needsLayoutSet.has(edge.target) && candidateSet.has(edge.source)) {
       return edge.source
     }
   }
 
+  for (const edge of edges) {
+    if (needsLayoutSet.has(edge.source) && candidateSet.has(edge.target)) {
+      return edge.target
+    }
+  }
+
   return candidates[0]
 }
 
@@ -213,11 +217,77 @@ function layoutGroup(
     block.position = snapPositionToGrid({ x: newPos.x + offsetX, y: newPos.y + offsetY }, gridSize)
   }
 
+  shiftDownstreamFrozenBlocks(
+    needsLayoutSet,
+    layoutEligibleChildIds,
+    blocks,
+    edges,
+    horizontalSpacing,
+    gridSize
+  )
+
   if (parentBlock) {
     updateContainerDimensions(parentBlock, childIds, blocks)
   }
 }
 
+/**
+ * Shifts frozen (unchanged) blocks rightward when a newly placed block
+ * overlaps with them in the X-axis. Traverses the DAG forward from changed
+ * blocks via BFS, cascading shifts through downstream frozen blocks so that
+ * insertions between existing layers push everything after them to the right.
+ *
+ * Only considers edges within the current layout group (scoped to subflow).
+ */
+function shiftDownstreamFrozenBlocks(
+  needsLayoutSet: Set<string>,
+  eligibleIds: string[],
+  blocks: Record<string, BlockState>,
+  edges: Edge[],
+  horizontalSpacing: number,
+  gridSize?: number
+): void {
+  const eligibleSet = new Set(eligibleIds)
+
+  const downstreamMap = new Map<string, string[]>()
+  for (const edge of edges) {
+    if (!eligibleSet.has(edge.source) || !eligibleSet.has(edge.target)) continue
+    if (!downstreamMap.has(edge.source)) downstreamMap.set(edge.source, [])
+    downstreamMap.get(edge.source)!.push(edge.target)
+  }
+
+  const shifted = new Set<string>()
+  const queue: string[] = Array.from(needsLayoutSet)
+
+  while (queue.length > 0) {
+    const sourceId = queue.shift()!
+    const sourceBlock = blocks[sourceId]
+    if (!sourceBlock) continue
+
+    const sourceMetrics = getBlockMetrics(sourceBlock)
+    const sourceRight = sourceBlock.position.x + sourceMetrics.width
+
+    const successors = downstreamMap.get(sourceId) || []
+    for (const targetId of successors) {
+      if (needsLayoutSet.has(targetId)) continue
+      if (shifted.has(targetId)) continue
+
+      const targetBlock = blocks[targetId]
+      if (!targetBlock) continue
+
+      if (targetBlock.position.x < sourceRight + horizontalSpacing) {
+        const shiftX = sourceRight + horizontalSpacing - targetBlock.position.x
+        targetBlock.position = snapPositionToGrid(
+          { x: targetBlock.position.x + shiftX, y: targetBlock.position.y },
+          gridSize
+        )
+        shifted.add(targetId)
+        queue.push(targetId)
+      }
+    }
+  }
+}
+
 /**
  * Computes layout positions for a subset of blocks using the core layout function
  */

apps/sim/lib/workflows/autolayout/utils.ts

@@ -6,6 +6,7 @@ import {
   CONTAINER_PADDING_Y,
   ESTIMATED_BLOCK_BOTTOM_PADDING,
   ESTIMATED_SUBBLOCK_HEIGHT,
+  MAX_ESTIMATED_BLOCK_HEIGHT,
   ROOT_PADDING_X,
   ROOT_PADDING_Y,
 } from '@/lib/workflows/autolayout/constants'
@@ -134,19 +135,23 @@ function getContainerMetrics(block: BlockState): BlockMetrics {
 
 /**
  * Estimates block height from subblock count when no measurement is available.
- * Provides a reasonable approximation to prevent overlaps in layout before
- * the block has been rendered and measured by the browser.
+ * Only counts subblocks with non-null values to avoid over-counting conditional
+ * fields (e.g. agent blocks define ~20 subblocks but only ~5 are typically visible).
+ * The result is capped at MAX_ESTIMATED_BLOCK_HEIGHT to prevent massive layout gaps.
  */
 function estimateBlockHeight(block: BlockState): number {
-  const subBlockCount = Object.keys(block.subBlocks || {}).length
-  if (subBlockCount === 0) return BLOCK_DIMENSIONS.MIN_HEIGHT
+  const subBlocks = block.subBlocks || {}
+  const visibleCount = Object.values(subBlocks).filter(
+    (sb) => sb && sb.value !== null && sb.value !== undefined
+  ).length
+  if (visibleCount === 0) return BLOCK_DIMENSIONS.MIN_HEIGHT
 
-  return Math.max(
+  const estimated =
     BLOCK_DIMENSIONS.HEADER_HEIGHT +
-      subBlockCount * ESTIMATED_SUBBLOCK_HEIGHT +
-      ESTIMATED_BLOCK_BOTTOM_PADDING,
-    BLOCK_DIMENSIONS.MIN_HEIGHT
-  )
+    visibleCount * ESTIMATED_SUBBLOCK_HEIGHT +
+    ESTIMATED_BLOCK_BOTTOM_PADDING
+
+  return Math.min(Math.max(estimated, BLOCK_DIMENSIONS.MIN_HEIGHT), MAX_ESTIMATED_BLOCK_HEIGHT)
 }
 
 /**