From 55d07fdb6814e4f22cc444e4286ffb37867fcd26 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 14 Jan 2025 14:33:11 -0800
Subject: [PATCH] Implemented connection UI

---
 app/w/[id]/workflow.tsx                       | 33 ++++++++++++++++++-
 .../workflow-block/workflow-block.tsx         | 17 ++++++++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/app/w/[id]/workflow.tsx b/app/w/[id]/workflow.tsx
index 69fe2fe95d..abd4c746ac 100644
--- a/app/w/[id]/workflow.tsx
+++ b/app/w/[id]/workflow.tsx
@@ -15,6 +15,7 @@ import ReactFlow, {
   XYPosition,
   useReactFlow,
   ReactFlowProvider,
+  ConnectionLineType,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 import { getBlock } from '../components/blocks/configs'
@@ -104,6 +105,18 @@ function WorkflowCanvas() {
 
   return (
     <div className="w-full h-[calc(100vh-56px)]">
+      <style>
+        {`
+          @keyframes dashdraw {
+            from {
+              stroke-dashoffset: 10;
+            }
+            to {
+              stroke-dashoffset: -10;
+            }
+          }
+        `}
+      </style>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -114,8 +127,26 @@ function WorkflowCanvas() {
         onDrop={onDrop}
         onDragOver={(e) => e.preventDefault()}
         fitView
-        maxZoom={1}
+        maxZoom={1.1}
         panOnScroll
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+          style: {
+            stroke: '#94a3b8',
+            strokeWidth: 2,
+            strokeDasharray: '5',
+            strokeDashoffset: '0',
+            animation: 'dashdraw 1s linear infinite',
+          },
+        }}
+        connectionLineStyle={{
+          stroke: '#94a3b8',
+          strokeWidth: 2,
+          strokeDasharray: '5',
+          strokeDashoffset: '0',
+          animation: 'dashdraw 1s linear infinite',
+        }}
+        connectionLineType={ConnectionLineType.SmoothStep}
       >
         <Background />
       </ReactFlow>
diff --git a/app/w/components/blocks/components/workflow-block/workflow-block.tsx b/app/w/components/blocks/components/workflow-block/workflow-block.tsx
index a7648a4777..01a5e5c59a 100644
--- a/app/w/components/blocks/components/workflow-block/workflow-block.tsx
+++ b/app/w/components/blocks/components/workflow-block/workflow-block.tsx
@@ -2,6 +2,7 @@ import { Card } from '@/components/ui/card'
 import { BlockConfig, SubBlockConfig } from '../../types/block'
 import { SubBlock } from './sub-block/sub-block'
 import { Handle, Position } from 'reactflow'
+import { cn } from '@/lib/utils'
 
 interface WorkflowBlockProps {
   id: string
@@ -45,7 +46,13 @@ export function WorkflowBlock({ id, type, config, name }: WorkflowBlockProps) {
       <Handle
         type="target"
         position={Position.Top}
-        className="w-3 h-3 bg-white border-2 border-blue-500"
+        className={cn(
+          '!w-3 !h-3',
+          '!bg-white !rounded-full !border !border-gray-200',
+          '!opacity-0 group-hover:!opacity-100',
+          '!transition-opacity !duration-200 !cursor-crosshair',
+          'hover:!border-blue-500'
+        )}
       />
 
       <div className="flex items-center gap-3 p-3 border-b">
@@ -78,7 +85,13 @@ export function WorkflowBlock({ id, type, config, name }: WorkflowBlockProps) {
       <Handle
         type="source"
         position={Position.Bottom}
-        className="w-3 h-3 bg-white border-2 border-blue-500"
+        className={cn(
+          '!w-3 !h-3',
+          '!bg-white !rounded-full !border !border-gray-200',
+          '!opacity-0 group-hover:!opacity-100',
+          '!transition-opacity !duration-200 !cursor-crosshair',
+          'hover:!border-blue-500'
+        )}
       />
     </Card>
   )