From 176303a810dd322b3520e273c0e681354d0dfde9 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 14 Jan 2025 15:02:18 -0800
Subject: [PATCH] Added select edge color change

---
 app/w/[id]/workflow.tsx | 41 +++++++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/app/w/[id]/workflow.tsx b/app/w/[id]/workflow.tsx
index abd4c746ac..9c42df4e46 100644
--- a/app/w/[id]/workflow.tsx
+++ b/app/w/[id]/workflow.tsx
@@ -16,6 +16,9 @@ import ReactFlow, {
   useReactFlow,
   ReactFlowProvider,
   ConnectionLineType,
+  BaseEdge,
+  EdgeProps,
+  getSmoothStepPath,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 import { getBlock } from '../components/blocks/configs'
@@ -48,6 +51,34 @@ const nodeTypes: NodeTypes = {
   workflowBlock: WorkflowNode,
 }
 
+// Add this custom edge component
+const CustomEdge = (props: EdgeProps) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  })
+
+  return (
+    <BaseEdge
+      {...props}
+      path={edgePath}
+      style={{
+        stroke: props.selected ? '#475569' : '#94a3b8',
+        strokeWidth: 2,
+        strokeDasharray: '5',
+        strokeDashoffset: '0',
+        animation: 'dashdraw 1s linear infinite',
+      }}
+    />
+  )
+}
+
+const edgeTypes: EdgeTypes = {
+  custom: CustomEdge,
+}
+
 // Main Canvas Component
 function WorkflowCanvas() {
   // State
@@ -130,15 +161,9 @@ function WorkflowCanvas() {
         maxZoom={1.1}
         panOnScroll
         defaultEdgeOptions={{
-          type: 'smoothstep',
-          style: {
-            stroke: '#94a3b8',
-            strokeWidth: 2,
-            strokeDasharray: '5',
-            strokeDashoffset: '0',
-            animation: 'dashdraw 1s linear infinite',
-          },
+          type: 'custom',
         }}
+        edgeTypes={edgeTypes}
         connectionLineStyle={{
           stroke: '#94a3b8',
           strokeWidth: 2,