From c33eec9c8827e9698c5f20a59a7b87b2a02ce32e Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Fri, 2 Feb 2024 01:19:43 -0300
Subject: [PATCH] Feat: Make edges change color when hover it

---
 .../FlowPage/components/PageComponent/index.tsx   | 15 +++++++++++++++
 src/frontend/src/stores/flowStore.ts              |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index fb81aa93b..40d4d2361 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -316,6 +316,19 @@ export default function Page({
     setFilterEdge([]);
   }, []);
 
+  function onMouseAction(edge: Edge, color: string): void {
+    const edges = useFlowStore.getState().edges
+    const newEdges = _.cloneDeep(edges)
+    const style = { stroke: color, transition: "stroke 0.25s" };
+    const updatedEdges = newEdges.map((obj) => {
+      if (obj.id === edge.id) {
+        return { ...obj, style }
+      }
+      return obj
+    })
+    setEdges(updatedEdges);
+  }
+
   return (
     <div className="flex h-full overflow-hidden">
       {!view && <ExtraSidebar />}
@@ -358,6 +371,8 @@ export default function Page({
                   panOnDrag={!view}
                   proOptions={{ hideAttribution: true }}
                   onPaneClick={onPaneClick}
+                  onEdgeMouseEnter={(event, edge) => onMouseAction(edge, "#473A5C")}
+                  onEdgeMouseLeave={(event, edge) => onMouseAction(edge, "#555")}
                 >
                   <Background className="" />
                   {!view && (
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 93080d2ee..344bf6726 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -131,7 +131,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   },
   setEdges: (change) => {
     let newChange = typeof change === "function" ? change(get().edges) : change;
-
+    console.log(newChange)
     set({
       edges: newChange,
       flowState: undefined,