diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
index af33384..c4930c1 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
@@ -1,5 +1,5 @@
 <!--
-~ Copyright 2018-present Open Networking Foundation
+~ Copyright 2019-present Open Networking Foundation
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
@@ -13,76 +13,67 @@
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 -->
-<svg:g class="topo2-force" xmlns:svg="http://www.w3.org/2000/svg">
-    <svg:g id="new-zoom-layer">
-        <svg:g class="topo2-links">
-            <!-- Template explanation: Creates an SVG Group and in
-                line 1) use the svg component onos-linksvg, setting it's link
-                 Input parameter to the link item from the next line
-                line 2) Use the built in NgFor directive to iterate through the
-                 set of links filtered by the filteredLinks() function.
-            -->
-            <svg:g onos-linksvg [link]="link"
-                   *ngFor="let link of filteredLinks()"
-                   (selectedEvent)="updateSelected($event)">
-            </svg:g>
-        </svg:g>
-        <svg:g class="topo2-linkLabels" />
-        <svg:g class="topo2-numLinkLabels" />
-        <svg:g class="topo2-nodes">
-            <!-- Template explanation - create an SVG Group and
-                line 1) use the svg component onos-devicenodesvg, setting it's device
-                 Input parameter to the device item from the next line
-                line 2) Use the built in NgFor directive to iterate through all
-                 of the devices in the chosen layer index. The current iteration
-                 is in the device variable
-                line 3) Use the onosDraggable directive and pass this device in to
-                 its draggableNode Input parameter and setting the draggableInGraph
-                 Input parameter to 'graph'
-                line 4) when the onos-devicenodesvg component emits the selectedEvent
-                 call the updateSelected() method of this (forcesvg) component
-            -->
-            <svg:g onos-devicenodesvg [device]="device"
-                   *ngFor="let device of regionData.devices[visibleLayerIdx()]"
-                   onosDraggableNode [draggableNode]="device" [draggableInGraph]="graph"
-                   (selectedEvent)="updateSelected($event)">
-            </svg:g>
-            <!-- Template explanation - only display the hosts if 'showHosts' is set true -->
-            <svg:g *ngIf="showHosts">
-                <!-- Template explanation - create an SVG Group and
-                    line 1) use the svg component onos-hostnodesvg, setting it's host
-                     Input parameter to the host item from the next line
-                    line 2) Use the built in NgFor directive to iterate through all
-                     of the hosts in the chosen layer index. The current iteration
-                     is in the 'host' variable
-                    line 3) Use the onosDraggable directive and pass this host in to
-                     its draggableNode Input parameter and setting the draggableInGraph
-                     Input parameter to 'graph'
-                    line 4) when the onos-hostnodesvg component emits the selectedEvent
-                     call the updateSelected() method of this (forcesvg) component
-                -->
-                <svg:g onos-hostnodesvg [host]="host"
-                       *ngFor="let host of regionData.hosts[visibleLayerIdx()]"
-                       onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph"
-                       (selectedEvent)="updateSelected($event)">
-                </svg:g>
-            </svg:g>
-            <svg:g onos-subregionnodesvg [subRegion]="subRegion"
-                   *ngFor="let subRegion of regionData.subregions"
-                   onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph">
-            </svg:g>
+<svg:desc xmlns:svg="http://www.w3.org/2000/svg">The force layout layer. This is
+    an SVG component that displays Nodes (Devices, Hosts and SubRegions) and
+    Links. Positions of each are driven by a forces computation engine</svg:desc>
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" class="topo2-links">
+    <svg:desc>Topology links</svg:desc>
+    <!-- Template explanation: Creates an SVG Group and in
+        line 1) use the svg component onos-linksvg, setting it's link
+         Input parameter to the link item from the next line
+        line 2) Use the built in NgFor directive to iterate through the
+         set of links filtered by the filteredLinks() function.
+    -->
+    <svg:g onos-linksvg [link]="link"
+           *ngFor="let link of filteredLinks()"
+           [highlightsEnabled]="highlightPorts"
+           (selectedEvent)="updateSelected($event)">
+    </svg:g>
+</svg:g>
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" class="topo2-nodes">
+    <svg:desc>Topology nodes</svg:desc>
+    <!-- Template explanation - create an SVG Group and
+        line 1) use the svg component onos-devicenodesvg, setting it's device
+         Input parameter to the device item from the next line
+        line 2) Use the built in NgFor directive to iterate through all
+         of the devices in the chosen layer index. The current iteration
+         is in the device variable
+        line 3) Use the onosDraggable directive and pass this device in to
+         its draggableNode Input parameter and setting the draggableInGraph
+         Input parameter to 'graph'
+        line 4) when the onos-devicenodesvg component emits the selectedEvent
+         call the updateSelected() method of this (forcesvg) component
+    -->
+    <svg:g onos-devicenodesvg [device]="device"
+           *ngFor="let device of regionData.devices[visibleLayerIdx()]"
+           onosDraggableNode [draggableNode]="device" [draggableInGraph]="graph"
+           (selectedEvent)="updateSelected($event)">
+        <svg:desc>Device nodes</svg:desc>
+    </svg:g>
+    <!-- Template explanation - only display the hosts if 'showHosts' is set true -->
+    <svg:g *ngIf="showHosts">
+        <!-- Template explanation - create an SVG Group and
+            line 1) use the svg component onos-hostnodesvg, setting it's host
+             Input parameter to the host item from the next line
+            line 2) Use the built in NgFor directive to iterate through all
+             of the hosts in the chosen layer index. The current iteration
+             is in the 'host' variable
+            line 3) Use the onosDraggable directive and pass this host in to
+             its draggableNode Input parameter and setting the draggableInGraph
+             Input parameter to 'graph'
+            line 4) when the onos-hostnodesvg component emits the selectedEvent
+             call the updateSelected() method of this (forcesvg) component
+        -->
+        <svg:g onos-hostnodesvg [host]="host"
+               *ngFor="let host of regionData.hosts[visibleLayerIdx()]"
+               onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph"
+               (selectedEvent)="updateSelected($event)">
+            <svg:desc>Host nodes</svg:desc>
         </svg:g>
     </svg:g>
-    <!--<svg:g class="topo2-portLabels">-->
-        <!--&lt;!&ndash;TODO make each of these in to a component that can be inserted &ndash;&gt;-->
-        <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-src" class="portLabel" opacity="1">-->
-            <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>-->
-            <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>-->
-        <!--</svg:g>-->
-
-        <!--<svg:g *ngIf="selectedLink !== null" id="topo-port-tgt" class="portLabel" opacity="1">-->
-            <!--<rect x="0" y="0" width="1" height="1" [ngStyle]="{'transform': 'scale(1)'}"></rect>-->
-            <!--<text dy="0.3em" [ngStyle]="{'transform': 'scale(1)'}">{{ selectedLink.portA }}</text>-->
-        <!--</svg:g>-->
-    <!--</svg:g>-->
+    <svg:g onos-subregionnodesvg [subRegion]="subRegion"
+           *ngFor="let subRegion of regionData.subregions"
+           onosDraggableNode [draggableNode]="host" [draggableInGraph]="graph">
+        <svg:desc>Subregion nodes</svg:desc>
+    </svg:g>
 </svg:g>