fix edge selection state

src/frontend/src/App.css

@@ -174,3 +174,12 @@ body {
   border: none !important;
   outline: none;
 }
+
+/* selected */
+.react-flow__edge.selected .react-flow__edge-path {
+  stroke: var(--selected) !important;
+}
+
+.react-flow__edge .react-flow__edge-path {
+  stroke: var(--connection) !important;
+}

src/frontend/src/stores/flowStore.ts

@@ -315,8 +315,6 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
           targetHandle,
           id,
           data: cloneDeep(edge.data),
-          style: { stroke: "#555" },
-          className: "stroke-gray-900 ",
           selected: false,
         },
         newEdges.map((edge) => ({ ...edge, selected: false })),
@@ -396,8 +394,8 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
             targetHandle: scapeJSONParse(connection.targetHandle!),
             sourceHandle: scapeJSONParse(connection.sourceHandle!),
           },
-          style: { stroke: "#555" },
-          className: "stroke-foreground stroke-connection",
+          // style: { stroke: "#555" },
+          // className: "stroke-foreground stroke-connection",
         },
         oldEdges,
       );

src/frontend/src/utils/reactflowUtils.ts

@@ -179,7 +179,7 @@ export const processFlows = (DbData: FlowType[], skipUpdate = true) => {
         ] = cloneDeep((flow.data.nodes[0].data as NodeDataType).node!);
         return;
       }
-      if (!skipUpdate) processDataFromFlow(flow, false);
+      processDataFromFlow(flow, !skipUpdate);
     } catch (e) {
       console.log(e);
     }
@@ -345,7 +345,7 @@ export function updateEdges(edges: Edge[]) {
       const targetHandleObject: targetHandleType = scapeJSONParse(
         edge.targetHandle!,
       );
-      edge.className = "stroke-gray-900 stroke-connection";
+      edge.className = "";
     });
 }
 
@@ -1005,11 +1005,6 @@ export function processFlowEdges(flow: FlowType) {
     const newEdges = updateEdgesHandleIds(flow.data);
     flow.data.edges = newEdges;
   }
-  //update edges colors
-  flow.data.edges.forEach((edge) => {
-    edge.className = "";
-    edge.style = { stroke: "#555" };
-  });
 }
 
 export function expandGroupNode(