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,6 +409,8 @@ export class HomePageComponent implements OnInit, OnDestroy {
           if ('zone' === node.group) {
             return;
           }
+
+          if (null === __this.selectedNode) {
             nodeElements.classed('unfocused', function (): boolean {
               if (isConnectedNode(node, this as Element)) {
                 return false;
@@ -420,6 +423,21 @@ export class HomePageComponent implements OnInit, OnDestroy {
               }
               return true;
             });
+          } else {
+            nodeElements.classed('focused', function (): boolean {
+              if (isConnectedNode(node, this as Element)) {
+                return true;
+              }
+              return false;
+            });
+            linkElements.classed('focused', function (): boolean {
+              if (isConnectedLink(node, this as Element)) {
+                return true;
+              }
+              return false;
+            });
+          }
+
         })
         .on('mousedown', function () {
           const node = getNodeFromElement(this as Element);
@@ -427,6 +445,15 @@ export class HomePageComponent implements OnInit, OnDestroy {
             return;
           }
 
+          if (null === __this.selectedNode) {
+            __this.selectedNode = node;
+            nodeElements.classed('unfocused', function (): boolean {
+              return false;
+            });
+            linkElements.classed('unfocused', function (): boolean {
+              return false;
+            });
+
             nodeElements.classed('unselected', function (): boolean {
               if (isConnectedNode(node, this as Element)) {
                 return false;
@@ -439,16 +466,28 @@ export class HomePageComponent implements OnInit, OnDestroy {
               }
               return true;
             });
+
+          }
+
         })
         .on('mouseout', function () {
           const node = getNodeFromElement(this as Element);
 
+          if (null === __this.selectedNode) {
             nodeElements.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;
+            });
+          }
         })
         ;