diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
index e49ae9e..22ab277 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.html
@@ -44,38 +44,73 @@
     <!-- Template explanation -
     Line 0) This is the root of the whole SVG canvas of the Topology View - all
         components beneath it are SVG components only (no HTML)
-    line 1) the No Devices Connected banner is shown if the force component
-        (from line 4) does not contain any devices
-    line 2) Create an SVG Grouping and apply the onosZoomableOf directive to it,
-        passing in the whole SVG canvas (#svgZoom)
-    line 3) Add in the Background Svg Component (if showBackground is true - toggled
-        by toolbar and by keyboard shortcut 'B'
-    line 4) Add in the layer of the Force Svg Component. If any item is selected on it, pass
-        to the details view and deselect all others. This is node and line graph
-        whose contents are supplied through the Topology Service, and whose positions
-        are driven by the d3.force engine
+    Line 1) if the background is clicked then send the event to the function
+        where it is filtered to make sure it really applied to the background
+        or the map and then used to clear any selections made
     -->
     <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2"
-        preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)">
+        preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)"
+        transform="'translate(0,0), scale(1.0)'">
         <svg:desc>The main SVG canvas of the Topology View</svg:desc>
+        <!-- Template explanation -
+        line 0) the No Devices Connected banner is shown if the force component
+            (from later) does not contain any devices
+        -->
         <svg:g *ngIf="force.regionData?.devices[0].length +
                         force.regionData?.devices[1].length +
                         force.regionData?.devices[2].length=== 0"
                onos-nodeviceconnected />
+        <!-- Template explanation -
+        line 0) Create an SVG Grouping and apply the onosZoomableOf directive to it,
+            passing in the whole SVG canvas (#svgZoom)
+        -->
         <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom">
             <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc>
+            <!-- Template explanation
+            Line 0) Create an instance of the onos-gridsvg component with the name gridFull
+                    All Inputs to that component will use default values
+                    This is the grey grid of 1000x1000 with origin at top left
+                    Only show it if the grid prefs value is 1 or 3
+            -->
             <svg:g #gridFull *ngIf="prefsState.grid == 1 || prefsState.grid == 3" onos-gridsvg>
             </svg:g>
+            <!-- Template explanation
+            Line 0) Create another instance of the onos-gridsvg component with the name geoGrid
+                    This is the blue geo grid of -180 to +180 longitude and -75
+                    to +75 latitude with with origin in the centre
+                    Only show it if the grid prefs value is 2 or 3
+            Line 1) Set the Inputs for the longitude extents
+            Line 2) Set the Inputs for the latitude extents and set the minor line
+                    spacing at 15 degrees long and lat
+            Line 3) Invert the vertical axis - positive in the y direction is up
+                    Set the vertical extents of this grid to 1000 units high in SVG terms
+                    Set the aspect ratio to 5/6 - this is because it is an eqi-
+                    rectangular projection and looks stretched out horizontally
+                    otherwise. This balances the distortion of equi-rect between
+                    equator and the poles
+            Line 4) Set the color of the grid to light blue
+            -->
             <svg:g #geoGrid *ngIf="prefsState.grid == 2 || prefsState.grid == 3"
                    onos-gridsvg [horizLowerLimit]="-180" [horizUpperLimit]="180"
                    [vertLowerLimit]="-75" [vertUpperLimit]="75" [spacing]="15"
                    [invertVertical]="true" [fit]="'fit1000high'" [aspectRatio]="0.83333"
                    [gridcolor]="'#bfe7fb'">
             </svg:g>
+            <!-- Template explanation -
+            line 0) Add in the Background Svg Component (if showBackground is true - toggled
+                by toolbar and by keyboard shortcut 'B'
+            -->
             <svg:g *ngIf="prefsState.bg"
                    onos-backgroundsvg [map]="mapIdState" (zoomlevel)="mapExtentsZoom($event)">
                 <svg:desc>The Background SVG component - contains maps</svg:desc>
             </svg:g>
+            <!-- Template explanation -
+            line 0) Add in the layer of the Force Svg Component.
+                This is node and line graph
+                whose contents are supplied through the Topology Service, and whose positions
+                are driven by the d3.force engine
+            line 6) If any item is selected on it, pass to the details view and deselect all others.
+            -->
             <svg:g #force onos-forcesvg
                    [deviceLabelToggle]="prefsState.dlbls"
                    [hostLabelToggle]="prefsState.hlbls"
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
index 8c6b953..7a59801 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology/topology.component.ts
@@ -144,7 +144,7 @@
   templateUrl: './topology.component.html',
   styleUrls: ['./topology.component.css']
 })
-export class TopologyComponent implements AfterContentInit, OnInit, OnDestroy {
+export class TopologyComponent implements OnInit, OnDestroy {
     @Input() bannerHeight: number = 48;
     // These are references to the components inserted in the template
     @ViewChild(InstanceComponent) instance: InstanceComponent;
@@ -285,20 +285,20 @@
         // Service just to compartmentalize things a bit
         this.ts.init(this.instance, this.background, this.force);
 
-        this.ps.addListener((data) => this.prefsUpdateHandler(data));
+        // For the 2.1 release to not listen to updates of prefs as they are
+        // only the echo of what we have sent down and the event mechanism
+        // does not discern between users. Can get confused if multiple windows open
+        // this.ps.addListener((data) => this.prefsUpdateHandler(data));
+
         this.prefsState = this.ps.getPrefs(TOPO2_PREFS, this.prefsState);
         this.mapIdState = this.ps.getPrefs(TOPO_MAPID_PREFS, this.mapIdState);
         this.trs.init(this.force);
 
-        this.log.debug('Topology component initialized');
-    }
-
-    ngAfterContentInit(): void {
         // Scale the window initially - then after resize
         const zoomMapExtents = ZoomUtils.zoomToWindowSize(
             this.bannerHeight, this.window.innerWidth, this.window.innerHeight);
         this.zoomDirective.changeZoomLevel(zoomMapExtents, true);
-        this.log.debug('Topology zoom initialized',
+        this.log.debug('TopologyComponent initialized',
             this.bannerHeight, this.window.innerWidth, this.window.innerHeight,
             zoomMapExtents);
     }
@@ -462,8 +462,6 @@
     bindCommands(additional?: any) {
 
         const am = this.actionMap();
-        const add = this.fs.isO(additional);
-
         this.ks.keyBindings(am);
 
         this.ks.gestureNotes([
@@ -610,7 +608,7 @@
     protected toggleHosts() {
         const current: boolean = !Boolean(this.prefsState.hosts);
         this.flashMsg = this.lionFn('hosts') + ' ' +
-                        this.lionFn(this.force.showHosts ? 'visible' : 'hidden');
+                        this.lionFn(current ? 'visible' : 'hidden');
         this.updatePrefsState(PREF_HOSTS, current ? 1 : 0);
         this.log.debug('toggling hosts: ', this.prefsState.hosts ? 'Show' : 'Hide');
     }