From be16fcfe3d92a81af5e686e8799cf45287ac8b94 Mon Sep 17 00:00:00 2001
From: salam dalloul <salamdalloul93@gmail.com>
Date: Fri, 9 Aug 2024 15:34:02 +0200
Subject: [PATCH] update group style when it's un selected

---
 .../frontend/src/helpers/twoD/twoDHelpers.ts  |  5 ++++-
 .../frontend/src/theme/twoDStyles.ts          | 19 ++++++++++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts b/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts
index 09c6e6f0..d0e7df19 100644
--- a/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts
+++ b/applications/visualizer/frontend/src/helpers/twoD/twoDHelpers.ts
@@ -57,10 +57,13 @@ const createEdgeLongLabel = (workspace: Workspace, synapses: Record<string, numb
 };
 
 export const createNode = (nodeId: string, selected: boolean, attributes: string[], position?: Position, isGroupNode?: boolean): ElementDefinition => {
+  let classes = "";
+  if (isGroupNode) classes += "groupNode ";
+  if (selected) classes += "selected";
   const node: ElementDefinition = {
     group: "nodes",
     data: { id: nodeId, label: nodeId, ...attributes.reduce((acc, attr) => ({ ...acc, [attr]: true }), {}) },
-    classes: isGroupNode ? "groupNode" : selected ? "selected" : "",
+    classes: classes,
   };
   if (position) {
     node.position = { x: position.x, y: position.y };
diff --git a/applications/visualizer/frontend/src/theme/twoDStyles.ts b/applications/visualizer/frontend/src/theme/twoDStyles.ts
index 247ac2bc..52fb3604 100644
--- a/applications/visualizer/frontend/src/theme/twoDStyles.ts
+++ b/applications/visualizer/frontend/src/theme/twoDStyles.ts
@@ -20,7 +20,7 @@ const SELECTED_NODE_STYLE = {
 
 const GROUP_NODE_STYLE = {
   shape: "roundrectangle",
-  "background-color": "#d0d0d0",
+  "background-color": "#ECECE9",
   "pie-size": "100%",
   "font-size": 3,
   width: 20,
@@ -35,6 +35,11 @@ const GROUP_NODE_STYLE = {
   "border-color": "black",
   "font-weight": "semibold",
 };
+const UNSELECTED_GROUP_NODE_STYLE = {
+  ...GROUP_NODE_STYLE,
+  "background-color": "#D3D3CF",
+  "border-width": 0,
+};
 
 const EDGE_STYLE = {
   "line-color": "#63625F",
@@ -46,7 +51,7 @@ const EDGE_STYLE = {
 
 const CHEMICAL_STYLE = { "line-color": "#63625F", width: 0.5 };
 const ELECTRICAL_STYLE = {
-  "line-color": "#63625F",
+  "line-color": "red",
   width: 0.5,
   "curve-style": "segments",
   "target-arrow-color": "#666666",
@@ -115,12 +120,16 @@ export const GRAPH_STYLES = [
     style: NODE_STYLE,
   },
   {
-    selector: "node.selected",
-    style: SELECTED_NODE_STYLE,
+    selector: "node.groupNode.selected",
+    style: GROUP_NODE_STYLE,
   },
   {
     selector: "node.groupNode",
-    style: GROUP_NODE_STYLE,
+    style: UNSELECTED_GROUP_NODE_STYLE,
+  },
+  {
+    selector: "node.selected",
+    style: SELECTED_NODE_STYLE,
   },
   {
     selector: "edge",