From 922b8d31c6aeca86682f3b7cf3496b6d44ab6498 Mon Sep 17 00:00:00 2001
From: jrmartin <yeshuarmartinez@gmail.com>
Date: Mon, 18 Mar 2024 11:33:18 -0700
Subject: [PATCH] #SDSV-16 Bring branch up with development

---
 src/components/GraphViewer/GraphViewer.js | 11 ++++++++--
 src/utils/GraphViewerHelper.js            | 25 +++++++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/GraphViewer/GraphViewer.js b/src/components/GraphViewer/GraphViewer.js
index fbc39b8..7c0d0f1 100644
--- a/src/components/GraphViewer/GraphViewer.js
+++ b/src/components/GraphViewer/GraphViewer.js
@@ -47,6 +47,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);
@@ -208,7 +209,13 @@ const GraphViewer = (props) => {
       graphRef?.current?.ggv?.current.centerAt(groupSelected.x, groupSelected.y, ONE_SECOND);
       graphRef?.current?.ggv?.current.zoom(2, ONE_SECOND);
     }
-  },[groupSelected]) 
+  },[groupSelected])
+  
+  useEffect(() => {
+    if (selectedNode) {
+      setPreviouslySelectedNodes(prev => new Set([...prev, selectedNode.id]));
+    }
+  }, [selectedNode]);
 
   useEffect(() => {
     if ( nodeSelected ) { 
@@ -290,7 +297,7 @@ const GraphViewer = (props) => {
         linkCanvasObjectMode={'replace'}
         onLinkHover={handleLinkHover}
         // Override drawing of canvas objects, draw an image as a node
-        nodeCanvasObject={(node, ctx) => paintNode(node, ctx, hoverNode, selectedNode, nodeSelected)}
+        nodeCanvasObject={(node, ctx) => paintNode(node, ctx, hoverNode, selectedNode, nodeSelected, previouslySelectedNodes)}
         nodeCanvasObjectMode={node => 'replace'}
         nodeVal = { node => {
           if ( selectedLayout.layout === TOP_DOWN.layout ){
diff --git a/src/utils/GraphViewerHelper.js b/src/utils/GraphViewerHelper.js
index bb0dd7d..3bb0c87 100644
--- a/src/utils/GraphViewerHelper.js
+++ b/src/utils/GraphViewerHelper.js
@@ -12,7 +12,9 @@ export const GRAPH_COLORS = {
   textHoverRect: '#3779E1',
   textHover: 'white',
   textColor: '#2E3A59',
-  collapsedFolder : 'red'
+  collapsedFolder : 'red',
+  nodeSeen: '#E1E3E8',
+  textBGSeen: '#6E4795'
 };
 export const TOP_DOWN = {
   label : "Tree View",
@@ -64,7 +66,7 @@ const roundRect = (ctx, x, y, width, height, radius, color, alpha) => {
   ctx.fill();
 };
 
-export const paintNode = (node, ctx, hoverNode, selectedNode, nodeSelected) =>  {
+export const paintNode = (node, ctx, hoverNode, selectedNode, nodeSelected, previouslySelectedNodes) =>  {
       const size = 7.5;
       const nodeImageSize = [size * 2.4, size * 2.4];
       const hoverRectDimensions = [size * 4.2, size * 4.2];
@@ -128,6 +130,25 @@ export const paintNode = (node, ctx, hoverNode, selectedNode, nodeSelected) =>
         );
         // 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;
       }