From e63cace20a8a1e7d1d78b8343d1c880927292d40 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 7 Nov 2024 12:53:40 -0300
Subject: [PATCH] fix: Improve Connection Line Styling and Cleanup Unused Code
 in FlowPage Components (#4449)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ (ConnectionLineComponent/index.tsx): introduce accentColor variable to dynamically set stroke and accent color based on handleDragging color
♻️ (PageComponent/index.tsx): refactor code to remove unused variables zoomIn, zoomOut, fitView, and zoom to improve code readability and maintainability

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
---
 .../FlowPage/components/ConnectionLineComponent/index.tsx    | 5 +++--
 .../src/pages/FlowPage/components/PageComponent/index.tsx    | 2 --
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index 157eeb865..6a33b66a6 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -10,6 +10,7 @@ const ConnectionLineComponent = ({
 }: ConnectionLineComponentProps): JSX.Element => {
   const handleDragging = useFlowStore((state) => state.handleDragging);
   const color = handleDragging?.color;
+  const accentColor = `hsl(var(--accent-${color}))`;
 
   return (
     <g>
@@ -19,7 +20,7 @@ const ConnectionLineComponent = ({
         strokeWidth={2}
         className={`animated`}
         style={{
-          stroke: handleDragging ? handleDragging.color : "",
+          stroke: handleDragging ? accentColor : "",
           ...connectionLineStyle,
         }}
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
@@ -29,7 +30,7 @@ const ConnectionLineComponent = ({
         cy={toY}
         fill="#fff"
         r={5}
-        stroke={color}
+        stroke={accentColor}
         className=""
         strokeWidth={1.5}
       />
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index c0e8b1e73..da1f6c510 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -125,8 +125,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
   const [isHighlightingCursor, setIsHighlightingCursor] = useState(false);
 
   const addComponent = useAddComponent();
-  const { zoomIn, zoomOut, fitView } = useReactFlow();
-  const { zoom } = useViewport();
 
   useEffect(() => {
     const handleVisibilityChange = () => {