Merge pull request #219 from MetaCell/feature/SDSV-16

#SDSV-16 - Bring branch up with development
MetaCell · Mar 18, 2024 · a4c5e24 · a4c5e24
2 parents 0068449 + 922b8d3
commit a4c5e24
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git 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
@@ -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;
       }