fix: clean invisible edge when toggling tool mode (#4795)

* Fix invisible edges bug

* Removed elevate edges on select

* Fix style of reconnecting edge

src/frontend/src/App.css

@@ -144,6 +144,12 @@ body {
   transition-duration: 150ms;
   stroke-width: 2px !important;
 }
+.react-flow__connection path {
+  transition: color;
+  stroke: var(--connection) !important;
+  transition-duration: 150ms;
+  stroke-width: 2px !important;
+}
 
 .react-flow__edge.running .react-flow__edge-path {
   stroke: hsl(var(--foreground)) !important;

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -54,7 +54,6 @@ import { useTypesStore } from "../../../../stores/typesStore";
 import { APIClassType } from "../../../../types/api";
 import { NodeType } from "../../../../types/flow";
 import {
-  checkOldComponents,
   generateFlow,
   generateNodeFromFlow,
   getNodeId,
@@ -535,7 +534,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
             onSelectionEnd={onSelectionEnd}
             onSelectionStart={onSelectionStart}
             connectionRadius={30}
-            elevateEdgesOnSelect={true}
             edgeTypes={edgeTypes}
             connectionLineComponent={ConnectionLineComponent}
             onDragOver={onDragOver}

src/frontend/src/stores/flowStore.ts

@@ -32,7 +32,6 @@ import { FlowStoreType, VertexLayerElementType } from "../types/zustand/flow";
 import { buildFlowVerticesWithFallback } from "../utils/buildUtils";
 import {
   checkChatInput,
-  checkOldComponents,
   cleanEdges,
   detectBrokenEdgesEdges,
   getHandleId,
@@ -278,6 +277,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
         return node;
       });
 
+      const newEdges = cleanEdges(newNodes, get().edges);
+
       if (callback) {
         // Defer the callback execution to ensure it runs after state updates are fully applied.
         queueMicrotask(callback);
@@ -286,6 +287,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       return {
         ...state,
         nodes: newNodes,
+        edges: newEdges,
       };
     });
   },