improved autolayout

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -10,7 +10,8 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createMcpToolId } from '@/lib/mcp/shared'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
 import type { FilterRule, SortRule } from '@/lib/table/types'
-import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
+import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
+import { calculateWorkflowBlockDimensions } from '@/lib/workflows/blocks/deterministic-dimensions'
 import { getConditionRows, getRouterRows } from '@/lib/workflows/dynamic-handle-topology'
 import {
   buildCanonicalIndex,
@@ -1145,33 +1146,14 @@ export const WorkflowBlock = memo(function WorkflowBlock({
   useBlockDimensions({
     blockId: id,
     calculateDimensions: () => {
-      const shouldShowDefaultHandles =
-        config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode
-      const hasContentBelowHeader = subBlockRows.length > 0 || shouldShowDefaultHandles
-
-      const defaultHandlesRow = shouldShowDefaultHandles ? 1 : 0
-
-      let rowsCount = 0
-      if (type === 'condition') {
-        rowsCount = conditionRows.length + defaultHandlesRow
-      } else if (type === 'router_v2') {
-        // +1 for context row, plus route rows
-        rowsCount = 1 + routerRows.length + defaultHandlesRow
-      } else {
-        const subblockRowCount = subBlockRows.reduce((acc, row) => acc + row.length, 0)
-        rowsCount = subblockRowCount + defaultHandlesRow
-      }
-
-      const contentHeight = hasContentBelowHeader
-        ? BLOCK_DIMENSIONS.WORKFLOW_CONTENT_PADDING +
-          rowsCount * BLOCK_DIMENSIONS.WORKFLOW_ROW_HEIGHT
-        : 0
-      const calculatedHeight = Math.max(
-        BLOCK_DIMENSIONS.HEADER_HEIGHT + contentHeight,
-        BLOCK_DIMENSIONS.MIN_HEIGHT
-      )
-
-      return { width: BLOCK_DIMENSIONS.FIXED_WIDTH, height: calculatedHeight }
+      return calculateWorkflowBlockDimensions({
+        blockType: type,
+        category: config.category,
+        displayTriggerMode,
+        visibleSubBlockCount: subBlockRows.reduce((acc, row) => acc + row.length, 0),
+        conditionRowCount: conditionRows.length,
+        routerRowCount: routerRows.length,
+      })
     },
     dependencies: [
       type,

apps/sim/lib/copilot/tools/server/workflow/edit-workflow/index.ts

@@ -9,7 +9,11 @@ import {
   type ServerToolContext,
 } from '@/lib/copilot/tools/server/base-tool'
 import { env } from '@/lib/core/config/env'
-import { applyTargetedLayout, getTargetedLayoutImpact } from '@/lib/workflows/autolayout'
+import {
+  applyTargetedLayout,
+  getTargetedLayoutImpact,
+  transferBlockHeights,
+} from '@/lib/workflows/autolayout'
 import {
   DEFAULT_HORIZONTAL_SPACING,
   DEFAULT_VERTICAL_SPACING,
@@ -235,17 +239,19 @@ export const editWorkflowServerTool: BaseServerTool<EditWorkflowParams, unknown>
     // Persist the workflow state to the database
     const finalWorkflowState = validation.sanitizedState || modifiedWorkflowState
 
-    const { layoutBlockIds, shiftSourceBlockIds } = getTargetedLayoutImpact({
+    const { layoutBlockIds, resizedBlockIds, shiftSourceBlockIds } = getTargetedLayoutImpact({
       before: workflowState,
       after: finalWorkflowState,
     })
 
     let layoutedBlocks = finalWorkflowState.blocks
 
-    if (layoutBlockIds.length > 0 || shiftSourceBlockIds.length > 0) {
+    if (layoutBlockIds.length > 0 || resizedBlockIds.length > 0 || shiftSourceBlockIds.length > 0) {
       try {
+        transferBlockHeights(workflowState.blocks, finalWorkflowState.blocks)
         layoutedBlocks = applyTargetedLayout(finalWorkflowState.blocks, finalWorkflowState.edges, {
           changedBlockIds: layoutBlockIds,
+          resizedBlockIds,
           shiftSourceBlockIds,
           horizontalSpacing: DEFAULT_HORIZONTAL_SPACING,
           verticalSpacing: DEFAULT_VERTICAL_SPACING,

apps/sim/lib/workflows/autolayout/change-set.test.ts

@@ -1,13 +1,43 @@
 /**
  * @vitest-environment node
  */
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import {
   getTargetedLayoutChangeSet,
   getTargetedLayoutImpact,
 } from '@/lib/workflows/autolayout/change-set'
 import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'
 
+const { mockGetBlock } = vi.hoisted(() => ({
+  mockGetBlock: vi.fn(),
+}))
+
+vi.mock('@/blocks', () => ({
+  getBlock: mockGetBlock,
+}))
+
+const JIRA_TEST_BLOCK_CONFIG = {
+  category: 'tools',
+  subBlocks: [
+    { id: 'operation', type: 'dropdown' },
+    { id: 'domain', type: 'short-input' },
+    { id: 'credential', type: 'oauth-input', mode: 'basic' },
+    { id: 'issueKey', type: 'short-input', condition: { field: 'operation', value: 'read' } },
+    { id: 'projectId', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'summary', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'description', type: 'long-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'priority', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'labels', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'issueType', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'parentIssue', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'assignee', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'reporter', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'environment', type: 'long-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'components', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+    { id: 'fixVersions', type: 'short-input', condition: { field: 'operation', value: 'write' } },
+  ],
+} as const
+
 function createBlock(
   id: string,
   overrides: Partial<BlockState> = {},
@@ -39,7 +69,44 @@ function createWorkflowState({
   }
 }
 
+function createJiraBlock(
+  id: string,
+  operation: 'read' | 'write',
+  overrides: Partial<BlockState> = {}
+): BlockState {
+  return createBlock(id, {
+    type: 'jira',
+    position: { x: 100, y: 100 },
+    height: 100,
+    layout: { measuredWidth: 250, measuredHeight: 100 },
+    subBlocks: {
+      operation: {
+        id: 'operation',
+        type: 'dropdown',
+        value: operation,
+      },
+      domain: {
+        id: 'domain',
+        type: 'short-input',
+        value: 'company.atlassian.net',
+      },
+      credential: {
+        id: 'credential',
+        type: 'oauth-input',
+        value: 'credential-1',
+      },
+    },
+    ...overrides,
+  })
+}
+
 describe('getTargetedLayoutChangeSet', () => {
+  beforeEach(() => {
+    mockGetBlock.mockImplementation((type: string) =>
+      type === 'jira' ? JIRA_TEST_BLOCK_CONFIG : undefined
+    )
+  })
+
   it('does not relayout newly added blocks that already have valid positions', () => {
     const before = createWorkflowState({
       blocks: {
@@ -77,7 +144,15 @@ describe('getTargetedLayoutChangeSet', () => {
   it('keeps subblock-only edits anchored', () => {
     const before = createWorkflowState({
       blocks: {
-        start: createBlock('start'),
+        start: createBlock('start', {
+          subBlocks: {
+            prompt: {
+              id: 'prompt',
+              type: 'long-input',
+              value: 'old value',
+            },
+          },
+        }),
       },
     })
 
@@ -98,10 +173,40 @@ describe('getTargetedLayoutChangeSet', () => {
     expect(getTargetedLayoutChangeSet({ before, after })).toEqual([])
   })
 
+  it('reopens edited blocks when an operation change increases their visible height', () => {
+    const before = createWorkflowState({
+      blocks: {
+        jira: createJiraBlock('jira', 'read'),
+      },
+    })
+
+    const after = createWorkflowState({
+      blocks: {
+        jira: createJiraBlock('jira', 'write'),
+      },
+    })
+
+    expect(getTargetedLayoutChangeSet({ before, after })).toEqual([])
+    expect(getTargetedLayoutImpact({ before, after })).toEqual({
+      layoutBlockIds: [],
+      resizedBlockIds: ['jira'],
+      shiftSourceBlockIds: [],
+    })
+  })
+
   it('does not relayout a pre-existing block legitimately placed at the origin', () => {
     const before = createWorkflowState({
       blocks: {
-        start: createBlock('start', { position: { x: 0, y: 0 } }),
+        start: createBlock('start', {
+          position: { x: 0, y: 0 },
+          subBlocks: {
+            prompt: {
+              id: 'prompt',
+              type: 'long-input',
+              value: 'old value',
+            },
+          },
+        }),
       },
     })
 
@@ -167,6 +272,7 @@ describe('getTargetedLayoutChangeSet', () => {
 
     expect(getTargetedLayoutImpact({ before, after })).toEqual({
       layoutBlockIds: ['function1'],
+      resizedBlockIds: [],
       shiftSourceBlockIds: [],
     })
   })
@@ -231,6 +337,7 @@ describe('getTargetedLayoutChangeSet', () => {
 
     expect(getTargetedLayoutImpact({ before, after })).toEqual({
       layoutBlockIds: [],
+      resizedBlockIds: [],
       shiftSourceBlockIds: ['source'],
     })
   })
@@ -279,6 +386,7 @@ describe('getTargetedLayoutChangeSet', () => {
 
     expect(getTargetedLayoutImpact({ before, after })).toEqual({
       layoutBlockIds: [],
+      resizedBlockIds: [],
       shiftSourceBlockIds: ['a-b'],
     })
   })
@@ -327,6 +435,7 @@ describe('getTargetedLayoutChangeSet', () => {
 
     expect(getTargetedLayoutImpact({ before, after })).toEqual({
       layoutBlockIds: ['inserted'],
+      resizedBlockIds: [],
       shiftSourceBlockIds: ['inserted'],
     })
   })

apps/sim/lib/workflows/autolayout/change-set.ts

@@ -1,4 +1,5 @@
 import type { Edge } from 'reactflow'
+import { getBlockMetrics } from '@/lib/workflows/autolayout/utils'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
 interface TargetedLayoutChangeSetOptions {
@@ -8,18 +9,21 @@ interface TargetedLayoutChangeSetOptions {
 
 export interface TargetedLayoutImpact {
   layoutBlockIds: string[]
+  resizedBlockIds: string[]
   shiftSourceBlockIds: string[]
 }
 
 /**
- * Computes the minimal structural change set that should be reopened for
- * targeted layout after a workflow edit.
+ * Computes the minimal change set that should be reopened for targeted layout
+ * after a workflow edit. `layoutBlockIds` are fully repositioned, while
+ * `resizedBlockIds` keep their existing position and only shift neighbors.
  */
 export function getTargetedLayoutImpact({
   before,
   after,
 }: TargetedLayoutChangeSetOptions): TargetedLayoutImpact {
   const layoutBlockIds = new Set<string>()
+  const resizedBlockIds = new Set<string>()
   const afterBlockIds = new Set(Object.keys(after.blocks || {}))
   const beforeBlockIds = new Set(Object.keys(before.blocks || {}))
 
@@ -40,6 +44,9 @@ export function getTargetedLayoutImpact({
     const previousParentId = before.blocks[blockId]?.data?.parentId ?? null
     const currentParentId = after.blocks[blockId]?.data?.parentId ?? null
     if (previousParentId === currentParentId) {
+      if (hasLayoutRelevantSizeChange(before.blocks[blockId], after.blocks[blockId])) {
+        resizedBlockIds.add(blockId)
+      }
       continue
     }
 
@@ -57,6 +64,7 @@ export function getTargetedLayoutImpact({
   if (addedEdges.length === 0) {
     return {
       layoutBlockIds: Array.from(layoutBlockIds),
+      resizedBlockIds: Array.from(resizedBlockIds),
       shiftSourceBlockIds: [],
     }
   }
@@ -94,6 +102,7 @@ export function getTargetedLayoutImpact({
 
   return {
     layoutBlockIds: Array.from(layoutBlockIds),
+    resizedBlockIds: Array.from(resizedBlockIds),
     shiftSourceBlockIds: Array.from(shiftSourceBlockIds),
   }
 }
@@ -123,6 +132,24 @@ function getBlocksWithInvalidPositions(
   })
 }
 
+/**
+ * Returns true when a persisted block changed size enough that anchored layout
+ * should reopen its column and shift affected siblings.
+ */
+function hasLayoutRelevantSizeChange(
+  beforeBlock: WorkflowState['blocks'][string] | undefined,
+  afterBlock: WorkflowState['blocks'][string] | undefined
+): boolean {
+  if (!beforeBlock || !afterBlock) {
+    return false
+  }
+
+  const beforeMetrics = getBlockMetrics(beforeBlock)
+  const afterMetrics = getBlockMetrics(afterBlock)
+
+  return beforeMetrics.height !== afterMetrics.height || beforeMetrics.width !== afterMetrics.width
+}
+
 /**
  * Returns added edges that participate in layout within a shared parent scope.
  */