feat: Implement edge selection functionality in flow canvas

Author: preet-bhadra

frontend/src/components/canvas/FlowCanvas.tsx

@@ -14,7 +14,7 @@ import {
 import '@xyflow/react/dist/style.css'
 import { useSelector, useDispatch } from 'react-redux'
 import Operator from './footer/Operator'
-import { setSelectedNode, deleteNode, setNodes, FlowWorkflowNode, FlowWorkflowEdge } from '../../store/flowSlice'
+import { setSelectedNode, deleteNode, setNodes, FlowWorkflowNode, FlowWorkflowEdge, setSelectedEdgeId } from '../../store/flowSlice'
 import NodeSidebar from '../nodes/nodeSidebar/NodeSidebar'
 import { Dropdown, DropdownMenu, DropdownSection, DropdownItem, DropdownTrigger } from '@heroui/react'
 import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts'
@@ -83,6 +83,7 @@ const FlowCanvasContent: React.FC<FlowCanvasProps> = (props) => {
     const edges = useSelector((state: RootState) => state.flow.edges, isEqual)
     const nodeConfigs = useSelector((state: RootState) => state.flow.nodeConfigs, isEqual)
     const selectedNodeID = useSelector((state: RootState) => state.flow.selectedNode)
+    const selectedEdgeId = useSelector((state: RootState) => state.flow.selectedEdgeId)
 
     const saveWorkflow = useSaveWorkflow()
 
@@ -156,6 +157,7 @@ const FlowCanvasContent: React.FC<FlowCanvasProps> = (props) => {
         edges,
         hoveredNode,
         hoveredEdge,
+        selectedEdgeId,
         handlePopoverOpen,
     })
 
@@ -189,12 +191,19 @@ const FlowCanvasContent: React.FC<FlowCanvasProps> = (props) => {
         [dispatch]
     )
 
+    const onEdgeClick = useCallback((_event: React.MouseEvent, edge: Edge) => {
+        dispatch(setSelectedEdgeId({ edgeId: edge.id }))
+    }, [dispatch])
+
     const onPaneClick = useCallback(() => {
         if (selectedNodeID) {
             dispatch(setSelectedNode({ nodeId: null }))
         }
+        if (selectedEdgeId) {
+            dispatch(setSelectedEdgeId({ edgeId: null }))
+        }
         dispatch(setNodePanelExpanded(false))
-    }, [dispatch, selectedNodeID])
+    }, [dispatch, selectedNodeID, selectedEdgeId])
 
     const onNodesDelete = useCallback(
         (deletedNodes: FlowWorkflowNode[]) => {
@@ -353,6 +362,7 @@ const FlowCanvasContent: React.FC<FlowCanvasProps> = (props) => {
                         fitView
                         onInit={onInit}
                         onNodeClick={onNodeClick}
+                        onEdgeClick={onEdgeClick}
                         onPaneClick={onPaneClick}
                         onNodesDelete={onNodesDelete}
                         proOptions={proOptions}

frontend/src/utils/flowUtils.tsx

@@ -283,6 +283,7 @@ interface StyledEdgesOptions {
     edges: Edge[]
     hoveredNode: string | null
     hoveredEdge: string | null
+    selectedEdgeId: string | null
     handlePopoverOpen?: (params: { sourceNode: Node; targetNode: Node; edgeId: string }) => void
     readOnly?: boolean
 }
@@ -291,6 +292,7 @@ export const useStyledEdges = ({
     edges,
     hoveredNode,
     hoveredEdge,
+    selectedEdgeId,
     handlePopoverOpen,
     readOnly = false,
 }: StyledEdgesOptions) => {
@@ -303,7 +305,7 @@ export const useStyledEdges = ({
             type: 'custom',
             style: {
                 stroke: readOnly
-                    ? edge.id === hoveredEdge
+                    ? edge.id === hoveredEdge || edge.id === selectedEdgeId
                         ? isDark
                             ? '#fff'
                             : '#000'
@@ -314,31 +316,31 @@ export const useStyledEdges = ({
                           : isDark
                             ? '#888'
                             : '#555'
-                    : hoveredEdge === edge.id || hoveredNode === edge.source || hoveredNode === edge.target
+                    : hoveredEdge === edge.id || edge.id === selectedEdgeId || hoveredNode === edge.source || hoveredNode === edge.target
                       ? isDark
                           ? '#fff'
                           : '#555'
                       : isDark
                         ? '#666'
                         : '#999',
                 strokeWidth: readOnly
-                    ? edge.id === hoveredEdge
+                    ? edge.id === hoveredEdge || edge.id === selectedEdgeId
                         ? 4
                         : edge.source === hoveredNode || edge.target === hoveredNode
                           ? 4
                           : 2
-                    : hoveredEdge === edge.id || hoveredNode === edge.source || hoveredNode === edge.target
+                    : hoveredEdge === edge.id || edge.id === selectedEdgeId || hoveredNode === edge.source || hoveredNode === edge.target
                       ? 3
                       : 1.5,
             },
             data: {
                 ...edge.data,
-                showPlusButton: edge.id === hoveredEdge,
+                showPlusButton: edge.id === hoveredEdge || edge.id === selectedEdgeId,
                 onPopoverOpen: handlePopoverOpen,
             },
             key: edge.id,
         }))
-    }, [edges, hoveredNode, hoveredEdge, handlePopoverOpen, readOnly, isDark])
+    }, [edges, hoveredNode, hoveredEdge, selectedEdgeId, handlePopoverOpen, readOnly, isDark])
 }
 
 interface NodesWithModeOptions {