Added styling to unpinned nodes.

Also wired up the radio buttons to suppress nodes/links appropriately.

@@ -156,7 +156,53 @@
             if (id !== viewMode) {
                 radioButton('displayModes', id);
                 viewMode = id;
-                alert('action: ' + id);
+                doRadioAction(id);
+            }
+        });
+    }
+
+    function doRadioAction(id) {
+        showAllLayers();
+        if (id === 'showPkt') {
+            showPacketLayer();
+        } else if (id === 'showOpt') {
+            showOpticalLayer();
+        }
+    }
+
+    function showAllLayers() {
+        network.node.classed('inactive', false);
+        network.link.classed('inactive', false);
+    }
+
+    function showPacketLayer() {
+        network.node.each(function(d) {
+            // deactivate nodes that are not hosts or switches
+            if (d.class === 'device' && d.type !== 'switch') {
+                d3.select(this).classed('inactive', true);
+            }
+        });
+
+        network.link.each(function(lnk) {
+            // deactivate infrastructure links that have opt's as endpoints
+            if (lnk.source.type === 'roadm' || lnk.target.type === 'roadm') {
+                d3.select(this).classed('inactive', true);
+            }
+        });
+    }
+
+    function showOpticalLayer() {
+        network.node.each(function(d) {
+            // deactivate nodes that are not optical devices
+            if (d.type !== 'roadm') {
+                d3.select(this).classed('inactive', true);
+            }
+        });
+
+        network.link.each(function(lnk) {
+            // deactivate infrastructure links that have opt's as endpoints
+            if (lnk.source.type !== 'roadm' || lnk.target.type !== 'roadm') {
+                d3.select(this).classed('inactive', true);
             }
         });
     }
@@ -216,6 +262,7 @@
     function unpin() {
         if (hovered) {
             hovered.fixed = false;
+            findNodeFromData(hovered).classed('fixed', false);
             network.force.resume();
         }
         console.log('Unpin - context = ' + contextLabel());
@@ -434,9 +481,10 @@
                 d.fixed &= ~6;
 
                 // once we've finished moving, pin the node in position,
-                // if it is a device
+                // if it is a device (not a host)
                 if (d.class === 'device') {
                     d.fixed = true;
+                    d3.select(this).classed('fixed', true)
                 }
             });
 

@@ -94,13 +94,19 @@ svg .link.host {
 }
 
 svg .node.device rect {
-    stroke-width: 1.5px;
+    stroke-width: 3.0px;
+    stroke: white;
+    stroke-dasharray: 2,2;
 
     transition: opacity 250ms;
     -webkit-transition: opacity 250ms;
     -moz-transition: opacity 250ms;
 }
 
+svg .node.device.fixed rect {
+    stroke-width: 0;
+}
+
 svg .node.device.roadm rect {
     fill: #229;
 }
@@ -142,7 +148,7 @@ svg .node.inactive rect,
 svg .node.inactive circle,
 svg .node.inactive text,
 svg .node.inactive image {
-    opacity: .2;
+    opacity: .05;
 }
 
 svg .node.inactive.selected rect,