From 6f904dc947b96a4dc839f93929f082e1d749f693 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 8 Feb 2025 21:58:09 -0800
Subject: [PATCH] Fixed edge re-render on handle port toggle

---
 .../components/action-bar/action-bar.tsx      |  2 +-
 .../workflow-block/workflow-block.tsx         |  5 ---
 .../workflow-node/workflow-node.tsx           | 35 +++++++++++++------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx b/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
index d0400c44c6..3ae575b233 100644
--- a/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
@@ -19,7 +19,7 @@ export function ActionBar({ blockId }: ActionBarProps) {
   )
 
   return (
-    <div className="absolute top-0 -right-20 flex flex-col items-center gap-2 p-2 bg-white rounded-md shadow-sm border border-gray-200 animate-in fade-in slide-in-from-left-2">
+    <div className="absolute top-0 -right-20 flex flex-col items-center gap-2 p-2 bg-white rounded-md shadow-sm border border-gray-200">
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
diff --git a/app/w/[id]/components/workflow-block/workflow-block.tsx b/app/w/[id]/components/workflow-block/workflow-block.tsx
index 780553f345..d055b6c075 100644
--- a/app/w/[id]/components/workflow-block/workflow-block.tsx
+++ b/app/w/[id]/components/workflow-block/workflow-block.tsx
@@ -19,11 +19,6 @@ interface WorkflowBlockProps {
   selected?: boolean
 }
 
-interface SubBlockPosition {
-  id: string
-  top: number
-}
-
 export function WorkflowBlock({ id, type, config, name, selected }: WorkflowBlockProps) {
   const { toolbar, workflow } = config
   const [isConnecting, setIsConnecting] = useState(false)
diff --git a/app/w/[id]/components/workflow-node/workflow-node.tsx b/app/w/[id]/components/workflow-node/workflow-node.tsx
index 7bde3cff7c..585a57cfc1 100644
--- a/app/w/[id]/components/workflow-node/workflow-node.tsx
+++ b/app/w/[id]/components/workflow-node/workflow-node.tsx
@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react'
 import { NodeProps } from 'reactflow'
+import { useWorkflowStore } from '@/stores/workflow/store'
 import { BlockConfig } from '../../../../../blocks/types'
 import { WorkflowBlock } from '../workflow-block/workflow-block'
 
@@ -8,13 +10,26 @@ interface WorkflowNodeData {
   name: string
 }
 
-export const WorkflowNode = ({ data, id, xPos, yPos, selected }: NodeProps<WorkflowNodeData>) => (
-  <WorkflowBlock
-    id={id}
-    type={data.type}
-    position={{ x: xPos, y: yPos }}
-    config={data.config}
-    name={data.name}
-    selected={selected}
-  />
-)
+export const WorkflowNode = ({ data, id, xPos, yPos, selected }: NodeProps<WorkflowNodeData>) => {
+  const [key, setKey] = useState(0)
+  const horizontalHandles = useWorkflowStore(
+    (state) => state.blocks[id]?.horizontalHandles ?? false
+  )
+
+  // Add effect to trigger immediate re-render after handle toggle
+  useEffect(() => {
+    setKey((prev) => prev + 1)
+  }, [horizontalHandles])
+
+  return (
+    <WorkflowBlock
+      key={key}
+      id={id}
+      type={data.type}
+      position={{ x: xPos, y: yPos }}
+      config={data.config}
+      name={data.name}
+      selected={selected}
+    />
+  )
+}