Bugfix/node title and edges

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/components/modals/RunModal.tsx

@@ -19,7 +19,7 @@ import {
 } from '@heroui/react'
 import { Icon } from '@iconify/react'
 import TextEditor from '../textEditor/TextEditor'
-import { addTestInput, deleteTestInput } from '../../store/flowSlice'
+import { addTestInput, deleteTestInput, updateTestInput } from '../../store/flowSlice'
 import { RootState } from '../../store/store'
 import { AppDispatch } from '../../store/store'
 import { TestInput } from '@/types/api_types/workflowSchemas'
@@ -103,6 +103,11 @@ const RunModal: React.FC<RunModalProps> = ({ isOpen, onOpenChange, onRun, onSave
 
     const handleCellEdit = (rowId: number, field: string, value: string) => {
         setTestData(testData.map((row) => (row.id === rowId ? { ...row, [field]: value } : row)))
+        const rowToUpdate = testData.find((row) => row.id === rowId)
+        if (rowToUpdate) {
+            dispatch(updateTestInput({ ...rowToUpdate, [field]: value }))
+        }
+        saveWorkflow()
     }
 
     const handleBlur = () => {

frontend/src/store/flowSlice.ts

@@ -115,6 +115,7 @@ export interface FlowState {
     nodeConfigs: Record<string, FlowWorkflowNodeConfig>
     workflowID: string | null
     selectedNode: string | null
+    selectedEdgeId: string | null
     sidebarWidth: number
     projectName: string
     workflowInputVariables: Record<string, any>
@@ -394,6 +395,10 @@ const flowSlice = createSlice({
             state.selectedNode = action.payload.nodeId
         },
 
+        setSelectedEdgeId: (state, action: PayloadAction<{ edgeId: string | null }>) => {
+            state.selectedEdgeId = action.payload.edgeId
+        },
+
         deleteNode: (state, action: PayloadAction<{ nodeId: string }>) => {
             const nodeId = action.payload.nodeId
             saveToHistory(state)
@@ -907,6 +912,7 @@ export const {
     updateNodeDataOnly,
     updateNodeConfigOnly,
     setSelectedNode,
+    setSelectedEdgeId,
     deleteNode,
     deleteEdge,
     deleteEdgeByHandle,

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 {