From 91b71d7580bece172493ccc9da7e523ae18183f9 Mon Sep 17 00:00:00 2001
From: Liviu Popa <liviu-constantin.popa@ing.com>
Date: Mon, 9 May 2022 16:00:20 +0300
Subject: [PATCH] Added link (edge) details on 'mouseover' and selection on
 'click'

Signed-off-by: Liviu Popa <liviu-constantin.popa@ing.com>
---
 happi-graph.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/happi-graph.js b/happi-graph.js
index ca042eb..6206635 100644
--- a/happi-graph.js
+++ b/happi-graph.js
@@ -106,6 +106,10 @@ class HappiGraph extends PolymerElement {
       mousePosition: {
         type: Object,
         value: null
+      },
+      mousePositionEventListener: {
+        type: Object,
+        value: null
       }
     };
   }
@@ -362,11 +366,21 @@ class HappiGraph extends PolymerElement {
     this.allGroup ? this.allGroup.remove() : (this.debug ? console.log('ALL_GROUP_EMPTY') : 0);
   }
 
+  createMousePositionEventListener(){
+    this.mousePositionEventListener = function (event) {
+      this.mousePosition = {x: event.x, y: event.y};
+    };
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener(this, this.mousePositionEventListener);
+  }
+
   initGraph() {
     this.svg = d3.select(this.$.svg);
-    this.addEventListener('mousemove', function (event) {
-      this.mousePosition = {x: event.x, y: event.y};
-    })
+
+    this.createMousePositionEventListener();
+    this.addEventListener('mousemove', this.mousePositionEventListener);
 
     this.allGroup =
       this.svg