fix(workflow): hide idle nested subflow end handles

Author: Bill Leoutsakos

apps/docs/components/workflow-preview/docs-container-node.tsx

@@ -8,6 +8,7 @@ interface DocsContainerData {
   name: string
   blockType: string
   size?: { width: number; height: number }
+  parentId?: string
 }
 
 /**
@@ -24,6 +25,7 @@ export const DocsContainerNode = memo(function DocsContainerNode({
     name: data.name,
     width: data.size?.width,
     height: data.size?.height,
+    parentId: data.parentId,
     isPreview: true,
   }
 

apps/docs/components/workflow-preview/workflow-data.ts

@@ -103,6 +103,7 @@ export function toReactFlowElements(
         tools: block.tools,
         hideTargetHandle: block.hideTargetHandle,
         size: block.size,
+        parentId: block.parentId,
         index,
         animate,
         isHighlighted: highlightBlock === block.id || selectedBlock === block.id,

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx

@@ -12,6 +12,7 @@ interface WorkflowPreviewSubflowData {
   width?: number
   height?: number
   kind: 'loop' | 'parallel'
+  parentId?: string
   /** Whether this subflow is enabled */
   enabled?: boolean
   /** Whether this subflow is selected in preview mode */

packages/workflow-renderer/src/subflow/subflow-node-view.tsx

@@ -5,6 +5,7 @@ import {
   Handle,
   internalsSymbol,
   Position,
+  useStore as useReactFlowStore,
   useStoreApi as useReactFlowStoreApi,
   useUpdateNodeInternals,
 } from 'reactflow'
@@ -343,6 +344,14 @@ export function SubflowNodeView({
   const isPreviewSelected = data?.isPreviewSelected || false
 
   const endHandleId = data.kind === 'loop' ? 'loop-end-source' : 'parallel-end-source'
+  const hasDisplayedEndEdge = useReactFlowStore(
+    useCallback(
+      (state) =>
+        state.edges.some((edge) => edge.source === id && edge.sourceHandle === endHandleId),
+      [endHandleId, id]
+    )
+  )
+  const showFixedEndPort = !data.parentId || hasDisplayedEndEdge
   const BlockIcon = data.kind === 'loop' ? Repeat : Split
   const blockName = data.name || (data.kind === 'loop' ? 'Loop' : 'Parallel')
   const blockTypeLabel = data.kind === 'loop' ? 'Loop' : 'Parallel'
@@ -474,13 +483,16 @@ export function SubflowNodeView({
         position: HANDLE_POSITIONS.SUBFLOW_CONNECTION_Y,
         plateau: CURSOR_SWELL_LENGTH_PX,
       },
-      {
+    ]
+
+    if (showFixedEndPort) {
+      ports.push({
         id: endHandleId,
         side: 'right',
         position: HANDLE_POSITIONS.SUBFLOW_CONNECTION_Y,
         plateau: CURSOR_SWELL_LENGTH_PX,
-      },
-    ]
+      })
+    }
 
     if (showActionMenu) {
       ports.push({
@@ -495,7 +507,7 @@ export function SubflowNodeView({
     }
 
     return ports
-  }, [actionMenuSwellOpen, actionMenuWidth, endHandleId, showActionMenu])
+  }, [actionMenuSwellOpen, actionMenuWidth, endHandleId, showActionMenu, showFixedEndPort])
 
   return (
     <div

packages/workflow-renderer/src/workflow-block/workflow-block-border-mount.test.tsx

@@ -5,13 +5,13 @@
  * a knob-paint bug once threw only when a card had a coloured knob — invisible
  * on an idle canvas, fatal on node creation.
  */
-import { act } from 'react'
+import { act, useLayoutEffect } from 'react'
 import {
   normalizeWorkflowEdgeSourceHandle,
   normalizeWorkflowEdgeTargetHandle,
 } from '@sim/workflow-types/workflow'
 import { createRoot, type Root } from 'react-dom/client'
-import { ReactFlowProvider } from 'reactflow'
+import { type Edge, ReactFlowProvider, useStoreApi as useReactFlowStoreApi } from 'reactflow'
 import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
 import { CONTAINER_DIMENSIONS } from '../dimensions'
 import {
@@ -83,6 +83,47 @@ function mount(element: React.ReactElement) {
   return { host, root }
 }
 
+const NO_EDGES: Edge[] = []
+
+function SubflowMountFixture({
+  id,
+  kind,
+  parentId,
+  edges = NO_EDGES,
+}: {
+  id: string
+  kind: 'loop' | 'parallel'
+  parentId?: string
+  edges?: Edge[]
+}) {
+  const reactFlowStore = useReactFlowStoreApi()
+
+  useLayoutEffect(() => {
+    reactFlowStore.setState({ edges })
+  }, [edges, reactFlowStore])
+
+  return (
+    <SubflowNodeView
+      id={id}
+      data={{ kind, name: kind === 'loop' ? 'Loop' : 'Parallel', parentId, isPreview: true }}
+      isEnabled
+      isLocked={false}
+      isFocused={false}
+      nestingLevel={parentId ? 1 : 0}
+      canEditWorkflow={false}
+      onSelect={() => undefined}
+    />
+  )
+}
+
+function getSubflowSilhouette(host: HTMLElement, caseName: string) {
+  const path = host.querySelector<SVGPathElement>(
+    `[data-subflow-case="${caseName}"] [data-type="subflowNode"] > svg > path[fill="var(--border-1)"]`
+  )
+  expect(path).toBeTruthy()
+  return path?.getAttribute('d')
+}
+
 afterEach(() => {
   act(() => {
     mountedRoots.forEach((root) => root.unmount())
@@ -980,6 +1021,62 @@ describe('WorkflowBlockBorder mount', () => {
     )
   })
 
+  it.each(['loop', 'parallel'] as const)(
+    'only paints the fixed %s end port when its topology needs it',
+    (kind) => {
+      const endHandleId = `${kind}-end-source`
+      const nestedConnectedEdges: Edge[] = [
+        {
+          id: `${kind}-end-edge`,
+          source: `${kind}-nested-connected`,
+          sourceHandle: endHandleId,
+          target: `${kind}-sibling`,
+          targetHandle: 'target',
+        },
+      ]
+      const { host } = mount(
+        <div>
+          <ReactFlowProvider>
+            <div data-subflow-case='top-level'>
+              <SubflowMountFixture id={`${kind}-top-level`} kind={kind} />
+            </div>
+          </ReactFlowProvider>
+          <ReactFlowProvider>
+            <div data-subflow-case='nested-idle'>
+              <SubflowMountFixture
+                id={`${kind}-nested-idle`}
+                kind={kind}
+                parentId={`${kind}-parent`}
+              />
+            </div>
+          </ReactFlowProvider>
+          <ReactFlowProvider>
+            <div data-subflow-case='nested-connected'>
+              <SubflowMountFixture
+                id={`${kind}-nested-connected`}
+                kind={kind}
+                parentId={`${kind}-parent`}
+                edges={nestedConnectedEdges}
+              />
+            </div>
+          </ReactFlowProvider>
+        </div>
+      )
+
+      const topLevelPath = getSubflowSilhouette(host, 'top-level')
+      const nestedIdlePath = getSubflowSilhouette(host, 'nested-idle')
+      const nestedConnectedPath = getSubflowSilhouette(host, 'nested-connected')
+
+      expect(nestedIdlePath).not.toBe(topLevelPath)
+      expect(nestedConnectedPath).toBe(topLevelPath)
+      for (const caseName of ['top-level', 'nested-idle', 'nested-connected']) {
+        const subflow = host.querySelector(`[data-subflow-case="${caseName}"]`)
+        expect(subflow?.querySelector('[data-handleid="target"]')).toBeTruthy()
+        expect(subflow?.querySelector(`[data-handleid="${endHandleId}"]`)).toBeTruthy()
+      }
+    }
+  )
+
   it('retracts a selected loop action swell after hover ends', () => {
     vi.useFakeTimers()
     vi.stubGlobal(