From 960e823d80a789c2acaf671bca7c089acac0f667 Mon Sep 17 00:00:00 2001
From: salam dalloul <salamdalloul93@gmail.com>
Date: Wed, 14 Feb 2024 11:07:47 +0100
Subject: [PATCH] #16 apply different style to previously selected nodes

---
 src/components/GraphViewer/GraphViewer.js | 29 ++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/GraphViewer/GraphViewer.js b/src/components/GraphViewer/GraphViewer.js
index 372bf70..6f8cee2 100644
--- a/src/components/GraphViewer/GraphViewer.js
+++ b/src/components/GraphViewer/GraphViewer.js
@@ -30,7 +30,9 @@ const GRAPH_COLORS = {
   textHoverRect: '#3779E1',
   textHover: 'white',
   textColor: '#2E3A59',
-  collapsedFolder : 'red'
+  collapsedFolder : 'red',
+  nodeSeen: '#E1E3E8',
+  textBGSeen: '#6E4795'
 };
 const TOP_DOWN = {
   label : "Tree View",
@@ -211,6 +213,7 @@ const GraphViewer = (props) => {
   const nodeSelected = useSelector(state => state.sdsState.instance_selected.graph_node);
   const groupSelected = useSelector(state => state.sdsState.group_selected.graph_node);
   const [collapsed, setCollapsed] = React.useState(true);
+  const [previouslySelectedNodes, setPreviouslySelectedNodes] = useState(new Set());
 
   const handleLayoutClick = (event) => {
     setLayoutAnchorEl(event.currentTarget);
@@ -504,6 +507,25 @@ const GraphViewer = (props) => {
         );
         // reset canvas fill color
         ctx.fillStyle = GRAPH_COLORS.textHover;
+      } else if (previouslySelectedNodes.has(node.id)) {
+        // Apply different style previously selected nodes
+        roundRect(
+            ctx,
+            ...hoverRectPosition,
+            ...hoverRectDimensions,
+            hoverRectBorderRadius,
+            GRAPH_COLORS.nodeSeen,
+            0.3
+        );
+        roundRect(
+            ctx,
+            ...textHoverPosition,
+            hoverRectDimensions[0],
+            hoverRectDimensions[1] / 4,
+            hoverRectBorderRadius,
+            GRAPH_COLORS.textBGSeen
+        );
+        ctx.fillStyle = GRAPH_COLORS.textHover;
       } else {
         ctx.fillStyle = GRAPH_COLORS.textColor;
       }
@@ -521,6 +543,11 @@ const GraphViewer = (props) => {
     },
     [hoverNode]
   );
+  useEffect(() => {
+    if (selectedNode) {
+      setPreviouslySelectedNodes(prev => new Set([...prev, selectedNode.id]));
+    }
+  }, [selectedNode]);
 
   return (
     <div className={'graph-view'}>