Merge remote-tracking branch 'origin/master'

@@ -211,6 +211,8 @@
     function showAllLayers() {
     function showAllLayers() {
         network.node.classed('inactive', false);
         network.node.classed('inactive', false);
         network.link.classed('inactive', false);
         network.link.classed('inactive', false);
+        d3.selectAll('svg .port').classed('inactive', false)
+        d3.selectAll('svg .portText').classed('inactive', false)
     }
     }
 
 
     function showPacketLayer() {
     function showPacketLayer() {
@@ -227,6 +229,9 @@
                 d3.select(this).classed('inactive', true);
                 d3.select(this).classed('inactive', true);
             }
             }
         });
         });
+
+        // deactivate non-packet ports
+        d3.selectAll('svg .optPort').classed('inactive', true)
     }
     }
 
 
     function showOpticalLayer() {
     function showOpticalLayer() {
@@ -243,6 +248,9 @@
                 d3.select(this).classed('inactive', true);
                 d3.select(this).classed('inactive', true);
             }
             }
         });
         });
+
+        // deactivate non-packet ports
+        d3.selectAll('svg .pktPort').classed('inactive', true)
     }
     }
 
 
     function setUpKeyHandler() {
     function setUpKeyHandler() {
@@ -582,42 +590,39 @@
             pw = config.labels.port.width,
             pw = config.labels.port.width,
             ph = config.labels.port.height;
             ph = config.labels.port.height;
 
 
-        network.link.filter('.infra').each(function(d, i) {
+        network.link.filter('.infra').each(function(d) {
+            var srcType = d.source.type === 'roadm' ? 'optPort' : 'pktPort',
+                tgtType = d.target.type === 'roadm' ? 'optPort' : 'pktPort';
+
+            if (d.source.type)
+
             network.linkSrcPort.append('rect').attr({
             network.linkSrcPort.append('rect').attr({
                 id: 'srcPort-' + safeId(d.id),
                 id: 'srcPort-' + safeId(d.id),
-                class: 'port',
+                class: 'port ' + srcType,
                 width: pw,
                 width: pw,
                 height: ph,
                 height: ph,
-                Xx: i * 20,
-                Xy: 0,
                 rx: 4,
                 rx: 4,
                 ry: 4
                 ry: 4
             }).style('visibility', portVis);
             }).style('visibility', portVis);
 
 
             network.linkTgtPort.append('rect').attr({
             network.linkTgtPort.append('rect').attr({
                 id: 'tgtPort-' + safeId(d.id),
                 id: 'tgtPort-' + safeId(d.id),
-                class: 'port',
+                class: 'port ' + tgtType,
                 width: pw,
                 width: pw,
                 height: ph,
                 height: ph,
-                Xx: i * 20,
-                Xy: 20,
                 rx: 4,
                 rx: 4,
                 ry: 4
                 ry: 4
             }).style('visibility', portVis);
             }).style('visibility', portVis);
 
 
             network.linkSrcPort.append('text').attr({
             network.linkSrcPort.append('text').attr({
                 id: 'srcText-' + safeId(d.id),
                 id: 'srcText-' + safeId(d.id),
-                class: 'portText',
-                Xx: i * 20,
-                Xy: 0
+                class: 'portText ' + srcType
             }).text(d.srcPort)
             }).text(d.srcPort)
                 .style('visibility', portVis);
                 .style('visibility', portVis);
 
 
             network.linkTgtPort.append('text').attr({
             network.linkTgtPort.append('text').attr({
                 id: 'tgtText-' + safeId(d.id),
                 id: 'tgtText-' + safeId(d.id),
-                class: 'portText',
-                Xx: i * 20,
-                Xy: 20
+                class: 'portText ' + tgtType
             }).text(d.tgtPort)
             }).text(d.tgtPort)
                 .style('visibility', portVis);
                 .style('visibility', portVis);
         });
         });

@@ -93,7 +93,6 @@ svg .link {
     stroke: #666;
     stroke: #666;
     stroke-width: 2.0px;
     stroke-width: 2.0px;
     opacity: .7;
     opacity: .7;
-    /*marker-end: url(#end);*/
 
 
     transition: opacity 250ms;
     transition: opacity 250ms;
     -webkit-transition: opacity 250ms;
     -webkit-transition: opacity 250ms;
@@ -110,7 +109,6 @@ svg g.portLayer rect.port {
 }
 }
 
 
 svg g.portLayer text {
 svg g.portLayer text {
-    Xstroke: #fff;
     font: 8pt sans-serif;
     font: 8pt sans-serif;
     pointer-events: none;
     pointer-events: none;
 }
 }
@@ -126,7 +124,6 @@ svg .node.device rect {
 svg .node.device.fixed rect {
 svg .node.device.fixed rect {
     stroke-width: 1.5;
     stroke-width: 1.5;
     stroke: #ccc;
     stroke: #ccc;
-    Xstroke-dasharray: 4,2;
 }
 }
 
 
 svg .node.device.roadm rect {
 svg .node.device.roadm rect {
@@ -166,6 +163,8 @@ svg .node.selected circle {
 }
 }
 
 
 svg .link.inactive,
 svg .link.inactive,
+svg .port.inactive,
+svg .portText.inactive,
 svg .node.inactive rect,
 svg .node.inactive rect,
 svg .node.inactive circle,
 svg .node.inactive circle,
 svg .node.inactive text,
 svg .node.inactive text,