From f4bb0836296741229b5a29b8715e166624ed32fa Mon Sep 17 00:00:00 2001
From: Ross Keenan <rossk29@gmail.com>
Date: Sun, 15 Aug 2021 18:27:17 +0200
Subject: [PATCH] feat(Vis View): :sparkles: Force Directed Graph: Transition
 to hovering node fade-out

---
 src/Visualisations/ForceDirectedG.ts | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/Visualisations/ForceDirectedG.ts b/src/Visualisations/ForceDirectedG.ts
index 428b712c..6a19be80 100644
--- a/src/Visualisations/ForceDirectedG.ts
+++ b/src/Visualisations/ForceDirectedG.ts
@@ -216,14 +216,20 @@ export const forceDirectedG = (
 
   node
     .on("mouseover", (event: MouseEvent, d: { index: number }) => {
-      node.style("opacity", (o) => {
-        return linked(d.index, o.index) ? 1 : 0.1;
-      });
-      link.style("opacity", function (o) {
-        return o.source.index === d.index || o.target.index === d.index
-          ? 1
-          : 0.1;
-      });
+      node
+        .transition()
+        .duration(150)
+        .style("opacity", (o) => {
+          return linked(d.index, o.index) ? 1 : 0.2;
+        });
+      link
+        .transition()
+        .duration(150)
+        .style("opacity", function (o) {
+          return o.source.index === d.index || o.target.index === d.index
+            ? 1
+            : 0.2;
+        });
 
       // Highlight path from hovered node to currNode
       const hoveredNode = nameFromIndex(d);