Topo2: Updated selection model

Change-Id: Ib5c953b1a79fe516c1407971b8134e1425958215
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
index 89fbae4..55b5baa 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
@@ -206,6 +206,10 @@
             t2tbs = _t2tbs_;
 
             var onZoom = function () {
+                if (!t2rs.isLoadComplete()) {
+                    return;
+                }
+
                 var nodes = [].concat(
                         t2rs.regionNodes(),
                         t2rs.regionLinks()
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index d79cea9..a03c839 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -58,9 +58,12 @@
 
                     this.model = new RegionModel();
                 },
+                isLoadComplete: function() {
+                    return this.bgRendered && this.regionData && this.peers;
+                },
                 loaded: function (key, value) {
                     this[key] = value;
-                    if (this.bgRendered && this.regionData && this.peers) {
+                    if (this.isLoadComplete()) {
                         this.startRegion();
                     }
                 },
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Select.js b/web/gui/src/main/webapp/app/view/topo2/topo2Select.js
index e172e0d..49fbfe7 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Select.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Select.js
@@ -149,6 +149,7 @@
     var SelectionService = function () {
         instance = this;
         this.selectedNodes = [];
+        this.selectionOrder = [];
     };
 
     SelectionService.prototype = {
@@ -173,16 +174,18 @@
         },
         selectObject: function (node, multiSelectEnabled) {
 
-            var event = d3.event;
-
-            if (multiSelectEnabled && !event.shiftKey || !multiSelectEnabled) {
-                this.clearSelection();
-            }
-
-            var nodeIndex = _.indexOf(this.selectedNodes, node);
+            var event = d3.event,
+                nodeIndex = _.indexOf(this.selectionOrder, node.get('id'));
 
             if (nodeIndex < 0) {
+
+                if (multiSelectEnabled && !event.shiftKey || !multiSelectEnabled) {
+                    this.clearSelection();
+                }
+
                 this.selectedNodes.push(node);
+                this.selectionOrder.push(node.get('id'));
+
                 node.select();
             } else {
                 this.removeNode(node, nodeIndex);
@@ -192,6 +195,7 @@
         },
         removeNode: function (node, index) {
             this.selectedNodes.splice(index, 1);
+            this.selectionOrder.splice(index, 1);
             node.deselect();
         },
         clearSelection: function () {
@@ -200,6 +204,7 @@
             });
 
             this.selectedNodes = [];
+            this.selectionOrder = [];
             this.updateDetails();
         },
         clickConsumed: function (x) {