Topo2: Fixed incorrect link highlighting and port locations
JIRA Tasks; ONOS-6276

Change-Id: Id9affd2cdc1bfa335654111655a413abad63ffc7
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
index fe30587..15c5463 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
@@ -169,14 +169,11 @@
 
                         t2zs.panAndZoom([x, y], scale, 1000);
                     },
+                    setLinkPosition: function (link) {
+                        link.setPosition.bind(link)();
+                    },
                     tick: function () {
 
-                        this.link
-                            .attr("x1", function (d) { return d.get('source').x; })
-                            .attr("y1", function (d) { return d.get('source').y; })
-                            .attr("x2", function (d) { return d.get('target').x; })
-                            .attr("y2", function (d) { return d.get('target').y; });
-
                         this.node
                             .attr({
                                 transform: function (d) {
@@ -185,6 +182,13 @@
                                     return sus.translate(dx, dy);
                                 }
                             });
+
+                        this.link
+                            .each(this.setLinkPosition)
+                            .attr("x1", function (d) { return d.get('position').x1; })
+                            .attr("y1", function (d) { return d.get('position').y1; })
+                            .attr("x2", function (d) { return d.get('position').x2; })
+                            .attr("y2", function (d) { return d.get('position').y2; });
                     },
 
                     start: function () {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js b/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
index 4897052..d3f449c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
@@ -211,6 +211,28 @@
                 this.set('enhanced', false);
                 d3.select('.topo2-portLabels').selectAll('.portLabel').remove();
             },
+            setPosition: function () {
+                this.set({
+                    position: {
+                        x1: this.get('source').x,
+                        y1: this.get('source').y,
+                        x2: this.get('target').x,
+                        y2: this.get('target').y
+                    }
+                });
+
+                if (this.get('enhanced')) {
+                    this.updatePortPosition();
+                }
+            },
+            updatePortPosition: function () {
+                var sourcePos = this.locatePortLabel(1),
+                    targetPos = this.locatePortLabel();
+                d3.select('#topo2-port-src')
+                    .attr('transform', sus.translate(sourcePos.x, sourcePos.y));
+                d3.select('#topo2-port-tgt')
+                    .attr('transform', sus.translate(targetPos.x, targetPos.y));
+            },
             getSelected: function () {
                 return this.collection.filter(function (m) {
                     return m.get('selected');