ing

src/app/pages/home/home-page.component.scss

@@ -67,6 +67,10 @@
   font-size: 14px;
 }
 
+.focused {
+  opacity: 1 !important;
+}
+
 .unfocused {
   opacity: 0.3;
 }

src/app/pages/home/home-page.component.ts

@@ -330,11 +330,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
         return __this.getNode(nodeId);
       }
 
-      nodeElements.on('click', function () {
-        const node = getNodeFromElement(this as Element);
-        __this.onTargetClick(node);
-      });
-
       // drag
       nodeElements.call(
         d3.drag()
@@ -391,9 +386,15 @@ export class HomePageComponent implements OnInit, OnDestroy {
         return false;
       }
 
+      nodeElements.on('click', function () {
+        const node = getNodeFromElement(this as Element);
+        __this.onTargetClick(node);
+      });
+
       // Highlight
       const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
       discoveryContainer.on('click', function () {
+        __this.selectedNode = null;
         nodeElements.classed('unselected', function (): boolean {
           return false;
         });
@@ -408,18 +409,35 @@ export class HomePageComponent implements OnInit, OnDestroy {
           if ('zone' === node.group) {
             return;
           }
-          nodeElements.classed('unfocused', function (): boolean {
+
-            if (isConnectedNode(node, this as Element)) {
+          if (null === __this.selectedNode) {
+            nodeElements.classed('unfocused', function (): boolean {
+              if (isConnectedNode(node, this as Element)) {
+                return false;
+              }
+              return true;
+            });
+            linkElements.classed('unfocused', function (): boolean {
+              if (isConnectedLink(node, this as Element)) {
+                return false;
+              }
+              return true;
+            });
+          } else {
+            nodeElements.classed('focused', function (): boolean {
+              if (isConnectedNode(node, this as Element)) {
+                return true;
+              }
               return false;
-            }
+            });
-            return true;
+            linkElements.classed('focused', function (): boolean {
-          });
+              if (isConnectedLink(node, this as Element)) {
-          linkElements.classed('unfocused', function (): boolean {
+                return true;
-            if (isConnectedLink(node, this as Element)) {
+              }
               return false;
-            }
+            });
-            return true;
+          }
-          });
+
         })
         .on('mousedown', function () {
           const node = getNodeFromElement(this as Element);
@@ -427,28 +445,49 @@ export class HomePageComponent implements OnInit, OnDestroy {
             return;
           }
 
-          nodeElements.classed('unselected', function (): boolean {
+          if (null === __this.selectedNode) {
-            if (isConnectedNode(node, this as Element)) {
+            __this.selectedNode = node;
+            nodeElements.classed('unfocused', function (): boolean {
               return false;
-            }
+            });
-            return true;
+            linkElements.classed('unfocused', function (): boolean {
-          });
-          linkElements.classed('unselected', function (): boolean {
-            if (isConnectedLink(node, this as Element)) {
               return false;
-            }
+            });
-            return true;
+
-          });
+            nodeElements.classed('unselected', function (): boolean {
+              if (isConnectedNode(node, this as Element)) {
+                return false;
+              }
+              return true;
+            });
+            linkElements.classed('unselected', function (): boolean {
+              if (isConnectedLink(node, this as Element)) {
+                return false;
+              }
+              return true;
+            });
+
+          }
+
         })
         .on('mouseout', function () {
           const node = getNodeFromElement(this as Element);
 
-          nodeElements.classed('unfocused', function (): boolean {
+          if (null === __this.selectedNode) {
-            return false;
+            nodeElements.classed('unfocused', function (): boolean {
-          });
+              return false;
-          linkElements.classed('unfocused', function (): boolean {
+            });
-            return false;
+            linkElements.classed('unfocused', function (): boolean {
-          });
+              return false;
+            });
+          } else {
+            nodeElements.classed('focused', function (): boolean {
+              return false;
+            });
+            linkElements.classed('focused', function (): boolean {
+              return false;
+            });
+          }
         })
         ;