From 0cc687f2436c0a5e4479d7980869468563295b2b Mon Sep 17 00:00:00 2001
From: Ziyu Bai <baiziyu@inspur.com>
Date: Mon, 23 Dec 2019 19:38:07 +0800
Subject: [PATCH] Add unselect node in Entity Graph

Users can click blank area to unselect a node.

Change-Id: Id17e5d1a465917e4407b39bfe67414d67b168e2e
---
 .../project/entities/entities.controller.js   |  6 ++
 .../graph/entities-graph.directive.js         | 67 ++++++++++++++-----
 2 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/vitrage_dashboard/dashboard/static/dashboard/project/entities/entities.controller.js b/vitrage_dashboard/dashboard/static/dashboard/project/entities/entities.controller.js
index e53f88c..153d88a 100644
--- a/vitrage_dashboard/dashboard/static/dashboard/project/entities/entities.controller.js
+++ b/vitrage_dashboard/dashboard/static/dashboard/project/entities/entities.controller.js
@@ -49,6 +49,12 @@
             }
         });
 
+        $scope.$on('unselectNode', function(event) {
+            _this.selectedItem = undefined;
+            _this.model.selected = {};
+            $scope.$digest();
+        });
+
         $scope.$on('graphItemClicked', function (event, data) {
             data.timezone = timezone;
             data.dateFormat = dateFormat;
diff --git a/vitrage_dashboard/dashboard/static/dashboard/project/entities/graph/entities-graph.directive.js b/vitrage_dashboard/dashboard/static/dashboard/project/entities/graph/entities-graph.directive.js
index ce5da19..d173f86 100644
--- a/vitrage_dashboard/dashboard/static/dashboard/project/entities/graph/entities-graph.directive.js
+++ b/vitrage_dashboard/dashboard/static/dashboard/project/entities/graph/entities-graph.directive.js
@@ -34,7 +34,9 @@ function hzEntitiesGraph() {
             node,
             link,
             linksMap,
-            content;
+            content,
+            mouseDownX,
+            mouseDownY;
 
         (function() {
             var p = $('.panel.panel-primary');
@@ -65,8 +67,6 @@ function hzEntitiesGraph() {
               .filter(function(d, i){ return this.classList.contains("node"); })
               .selectAll("circle");
 
-            //console.log('all nodes: ', allNodes.length);
-
             allNodes
               .transition()
               .duration(200)
@@ -133,6 +133,20 @@ function hzEntitiesGraph() {
 
         svg.call(zoom);
 
+        svg.on('mousedown', function() {
+            mouseDownX = d3.event.clientX;
+            mouseDownY = d3.event.clientY;
+        });
+
+        svg.on('mouseup', function() {
+            var x = d3.event.clientX,
+                y = d3.event.clientY;
+            if (x === mouseDownX && y === mouseDownY) {
+                // means click rather than drag
+                svgClick();
+            }
+        });
+
         var svg_g = svg.append('g')
             .attr('width', '100%')
             .attr('height', '100%')
@@ -534,6 +548,40 @@ function hzEntitiesGraph() {
             force.start();
         }
 
+        function setAllNodesHighlight() {
+            svg_g.selectAll('.node')
+                .classed('selected', function(d) {
+                    return d.high;
+                })
+                .select('circle')
+                .style('stroke-width', function(d) {
+                    return d.high ? (Math.max(d.highDepth + 1, 1) * 2) : null;
+                })
+
+            svg_g.selectAll('.link').classed('selected', function(d) {
+                return d.source.high && d.target.high;
+            });
+        }
+
+        function svgClick() {
+            scope.selected = undefined;
+            svg_g.selectAll('.node')
+                .classed('selected', false);
+
+            _.each(scope.data.nodes, function(node) {
+                node.high = false;
+                node.highDepth = 0;
+            });
+
+            _.each(scope.data.links, function(link) {
+                link.high = false;
+            })
+
+            setAllNodesHighlight();
+
+            scope.$emit('unselectNode');
+        }
+
         function nodeClick(d) {
             scope.selected = d;
             //scope.itemSelected(scope.selected);
@@ -568,18 +616,7 @@ function hzEntitiesGraph() {
                 link.high = false;
             })
 
-            svg_g.selectAll('.node')
-                .classed('selected', function(d) {
-                    return d.high;
-                })
-                .select('circle')
-                .style('stroke-width', function(d) {
-                    return d.high ? (Math.max(d.highDepth + 1, 1) * 2) : null;
-                })
-
-            svg_g.selectAll('.link').classed('selected', function(d) {
-                return d.source.high && d.target.high;
-            });
+            setAllNodesHighlight();
         }
 
         function selectNone(d) {