From 7090c1570e90e01dc0ee91dccce1560e86c0c5a4 Mon Sep 17 00:00:00 2001
From: Gondragos <gondragos@gmail.com>
Date: Wed, 8 Jan 2025 15:35:34 +0000
Subject: [PATCH 1/3] fix: LEAP-1708: improve styling for relation overlays

Added dynamic classes to handle highlighting, ensuring better user interaction and clarity.
---
 .../InteractiveOverlays/RelationsOverlay.jsx  | 26 +++++++++++++++++--
 .../RelationsOverlay.module.scss              | 16 ++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss

diff --git a/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx
index 0c57c8f6a70e..ee031ebae17a 100644
--- a/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx
+++ b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx
@@ -8,6 +8,8 @@ import { FF_DEV_3391, isFF } from "../../utils/feature-flags";
 import { isDefined } from "../../utils/utilities";
 import NodesConnector from "./NodesConnector";
 
+import styles from "./RelationsOverlay.module.scss";
+
 const ArrowMarker = ({ id, color }) => {
   return (
     <marker
@@ -110,8 +112,14 @@ const RelationItem = ({ id, startNode, endNode, direction, rootRef, highlight, d
     return () => relation.destroy();
   }, []);
   if (start.width < 1 || start.height < 1 || end.width < 1 || end.height < 1) return null;
+
+  const itemStyles = [styles.relationItem];
+  if (highlight) {
+    itemStyles.push(styles._highlighted);
+  }
+
   return (
-    <g opacity={dimm && !highlight ? 0.5 : 1} visibility={hideConnection ? "hidden" : "visible"}>
+    <g id={id} className={itemStyles.join(" ")} visibility={hideConnection ? "hidden" : "visible"}>
       <RelationItemRect {...start} />
       <RelationItemRect {...end} />
       <RelationConnector
@@ -202,12 +210,26 @@ class RelationsOverlay extends PureComponent {
       zIndex: 100,
     };
 
+    const containerStyles = ["relations-overlay", styles.container];
+    if (hasHighlight) {
+      containerStyles.push(styles._highlighting);
+    }
+
     return (
       <AutoSizer onResize={this.onResize}>
         {() => (
-          <svg className="relations-overlay" ref={this.rootNode} xmlns="http://www.w3.org/2000/svg" style={style}>
+          <svg
+            className={containerStyles.join(" ")}
+            ref={this.rootNode}
+            xmlns="http://www.w3.org/2000/svg"
+            style={style}
+          >
             <title>{this.state.shouldRender ? "Arrow Marker" : ""}</title>
             {this.state.shouldRender && this.renderRelations(relations, visible, hasHighlight, highlighted)}
+            {
+              // mowing a highlighted relation into the foreground
+              highlighted ? <use xlinkHref={`#${highlighted.id}`} /> : null
+            }
           </svg>
         )}
       </AutoSizer>
diff --git a/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss
new file mode 100644
index 000000000000..e83669b7bea1
--- /dev/null
+++ b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss
@@ -0,0 +1,16 @@
+
+.container {
+  .relationItem {
+    transition: opacity 300ms;
+  }
+
+  &._highlighting {
+    & .relationItem {
+      opacity: 0.2;
+
+      &._highlighted {
+        opacity: 1;
+      }
+    }
+  }
+}

From adaca73c87ed176fae7559aec9eda12217f6ccf7 Mon Sep 17 00:00:00 2001
From: Sergey <sergey.koshevarov@humansignal.com>
Date: Wed, 8 Jan 2025 16:38:12 +0000
Subject: [PATCH 2/3] Update
 web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss

Co-authored-by: hlomzik <hlomzik@gmail.com>
---
 .../components/InteractiveOverlays/RelationsOverlay.module.scss  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss
index e83669b7bea1..7933c17ce14f 100644
--- a/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss
+++ b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.module.scss
@@ -1,4 +1,3 @@
-
 .container {
   .relationItem {
     transition: opacity 300ms;

From 36717a6c9be011b83d683a51354fb0238e219fa5 Mon Sep 17 00:00:00 2001
From: Sergey <sergey.koshevarov@humansignal.com>
Date: Fri, 10 Jan 2025 14:10:46 +0000
Subject: [PATCH 3/3] Fix comment

---
 .../src/components/InteractiveOverlays/RelationsOverlay.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx
index ee031ebae17a..431198f5b35b 100644
--- a/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx
+++ b/web/libs/editor/src/components/InteractiveOverlays/RelationsOverlay.jsx
@@ -227,7 +227,7 @@ class RelationsOverlay extends PureComponent {
             <title>{this.state.shouldRender ? "Arrow Marker" : ""}</title>
             {this.state.shouldRender && this.renderRelations(relations, visible, hasHighlight, highlighted)}
             {
-              // mowing a highlighted relation into the foreground
+              // moving a highlighted relation into the foreground
               highlighted ? <use xlinkHref={`#${highlighted.id}`} /> : null
             }
           </svg>