diff --git a/web/gui/src/main/webapp/app/fw/util/fn.js b/web/gui/src/main/webapp/app/fw/util/fn.js
index 690c8b2..dcc2725 100644
--- a/web/gui/src/main/webapp/app/fw/util/fn.js
+++ b/web/gui/src/main/webapp/app/fw/util/fn.js
@@ -117,6 +117,32 @@
         return -1;
     }
 
+    // search through array to find (the first occurrence of) item,
+    // returning its index if found; otherwise returning -1.
+    function inArray(item, array) {
+        var i;
+        if (isA(array)) {
+            for (i=0; i<array.length; i++) {
+                if (array[i] === item) {
+                    return i;
+                }
+            }
+        }
+        return -1;
+    }
+
+    // remove (the first occurrence of) the specified item from the given
+    // array, if any. Return true if the removal was made; false otherwise.
+    function removeFromArray(item, array) {
+        var found = false,
+            i = inArray(item, array);
+        if (i >= 0) {
+            array.splice(i, 1);
+            found = true;
+        }
+        return found;
+    }
+
     angular.module('onosUtil')
         .factory('FnService', ['$window', function (_$window_) {
             $window = _$window_;
@@ -130,7 +156,9 @@
                 areFunctions: areFunctions,
                 areFunctionsNonStrict: areFunctionsNonStrict,
                 windowSize: windowSize,
-                find: find
+                find: find,
+                inArray: inArray,
+                removeFromArray: removeFromArray
             };
     }]);
 
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index 7bd640d..c0e9228 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -111,8 +111,7 @@
         <div id="quickhelp"></div>
         <div id="veil"
              resize
-             ng-style="resizeWithOffset(0, 0)"
-                ></div>
+             ng-style="resizeWithOffset(0, 0)"></div>
     </div>
 </body>
 </html>
diff --git a/web/gui/src/main/webapp/app/view/topo/topoForce.js b/web/gui/src/main/webapp/app/view/topo/topoForce.js
index e5fc263..e189ef1 100644
--- a/web/gui/src/main/webapp/app/view/topo/topoForce.js
+++ b/web/gui/src/main/webapp/app/view/topo/topoForce.js
@@ -77,7 +77,9 @@
         oblique = false,        // whether we are in the oblique view
         nodeLock = false,       // whether nodes can be dragged or not (locked)
         width, height,          // the width and height of the force layout
-        hovered;                // the node over which the mouse is hovering
+        hovered,                // the node over which the mouse is hovering
+        selections = {},        // what is currently selected
+        selectOrder = [];       // the order in which we made selections
 
     // SVG elements;
     var linkG, linkLabelG, nodeG;
@@ -1323,15 +1325,77 @@
     }
 
 
+    function updateDetailPanel() {
+        // TODO update detail panel
+        $log.debug("TODO: updateDetailPanel() ...");
+    }
+
+
+    // ==========================
+    // === SELECTION / DESELECTION
+
+    function selectObject(obj) {
+        var el = this,
+            ev = d3.event.sourceEvent,
+            n;
+
+        if (zoomingOrPanning(ev)) {
+            return;
+        }
+
+        if (el) {
+            n = d3.select(el);
+        } else {
+            node.each(function (d) {
+                if (d == obj) {
+                    n = d3.select(el = this);
+                }
+            });
+        }
+        if (!n) return;
+
+        if (ev.shiftKey && n.classed('selected')) {
+            deselectObject(obj.id);
+            updateDetailPanel();
+            return;
+        }
+
+        if (!ev.shiftKey) {
+            deselectAll();
+        }
+
+        selections[obj.id] = { obj: obj, el: el };
+        selectOrder.push(obj.id);
+
+        n.classed('selected', true);
+        updateDeviceColors(obj);
+        updateDetailPanel();
+    }
+
+    function deselectObject(id) {
+        var obj = selections[id];
+        if (obj) {
+            d3.select(obj.el).classed('selected', false);
+            delete selections[id];
+            fs.removeFromArray(id, selectOrder);
+            updateDeviceColors(obj.obj);
+        }
+    }
+
+    function deselectAll() {
+        // deselect all nodes in the network...
+        node.classed('selected', false);
+        selections = {};
+        selectOrder = [];
+        updateDeviceColors();
+        updateDetailPanel();
+    }
+
     // ==========================
     // === MOUSE GESTURE HANDLERS
 
-    function selectCb(d) {
-        // this is the selected node
-        $log.debug("\n\n\nSelect Object: ");
-        $log.debug("d is ", d);
-        $log.debug("this is ", this);
-        $log.debug('\n\n');
+    function zoomingOrPanning(ev) {
+        return ev.metaKey || ev.altKey;
     }
 
     function atDragEnd(d) {
@@ -1345,8 +1409,7 @@
     function dragEnabled() {
         var ev = d3.event.sourceEvent;
         // nodeLock means we aren't allowing nodes to be dragged...
-        // meta or alt key pressed means we are zooming/panning...
-        return !nodeLock && !(ev.metaKey || ev.altKey);
+        return !nodeLock && !zoomingOrPanning(ev);
     }
 
     // predicate that indicates when clicking is active
@@ -1406,7 +1469,7 @@
                     .on('tick', tick);
 
                 drag = sus.createDragBehavior(force,
-                    selectCb, atDragEnd, dragEnabled, clickEnabled);
+                    selectObject, atDragEnd, dragEnabled, clickEnabled);
             }
 
             function resize(dim) {