diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java b/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java
index a4443062..4e78525 100644
--- a/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/topo/Traffic2Monitor.java
@@ -90,6 +90,7 @@
 
     @Override
     protected void sendSelectedIntentTraffic() {
+        log.debug("sendSelectedIntentTraffic: NOT IMPLEMENTED YET");
     }
 
     @Override
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
index b759997..b4bff8e 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
@@ -321,7 +321,7 @@
      */
     updateSelected(selectedNode: SelectedEvent): void {
         this.log.debug('Node or link ',
-            selectedNode.uiElement,
+            selectedNode.uiElement ? selectedNode.uiElement.id : '--',
             selectedNode.deselecting ? 'deselected' : 'selected',
             selectedNode.isShift ? 'Multiple' : '');
 
@@ -336,6 +336,12 @@
             this.selectedNodes.push(selectedNode.uiElement);
 
         } else if (selectedNode.deselecting) {
+            this.devices
+                .forEach((d) => d.deselect());
+            this.hosts
+                .forEach((h) => h.deselect());
+            this.links
+                .forEach((l) => l.deselect());
             this.selectedNodes = [];
 
         } else {
@@ -495,7 +501,7 @@
      * @param hosts - an array of host highlights
      * @param links - an array of link highlights
      */
-    handleHighlights(devices: Device[], hosts: Host[], links: LinkHighlight[]): void {
+    handleHighlights(devices: Device[], hosts: Host[], links: LinkHighlight[], fadeMs: number = 0): void {
 
         if (devices.length > 0) {
             this.log.debug(devices.length, 'Devices highlighted');
@@ -526,12 +532,15 @@
         if (links.length > 0) {
             this.log.debug(links.length, 'Links highlighted');
             links.forEach((lh) => {
-                const linkComponent: LinkSvgComponent = this.links.find((l) => l.link.id === lh.id );
+                const linkComponent: LinkSvgComponent =
+                    this.links.find((l) => l.link.id === Link.linkIdFromShowHighlights(lh.id) );
                 if (linkComponent) { // A link might not be present is hosts viewing is switched off
+                    if (fadeMs > 0) {
+                        lh.fadems = fadeMs;
+                    }
                     linkComponent.ngOnChanges(
                         {'linkHighlight': new SimpleChange(<LinkHighlight>{}, lh, true)}
                     );
-                    // this.log.debug('Highlighting link', linkComponent.link.id, lh.css, lh.label);
                 }
             });
         }
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/models/link.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/models/link.ts
index 28f0b7c..7192de0 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/models/link.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/models/link.ts
@@ -59,6 +59,29 @@
         return ep;
     }
 
+    /**
+     * The WSS event showHighlights is sent up with a slightly different
+     * name format on the link id using the "-" separator rather than the "~"
+     * @param linkId The id of the link in either format
+     */
+    public static linkIdFromShowHighlights(linkId: string) {
+        if (linkId.includes('-')) {
+            const parts: string[] = linkId.split('-');
+            const part0 = Link.removeHostPortNum(parts[0]);
+            const part1 = Link.removeHostPortNum(parts[1]);
+            return part0 + '~' + part1;
+        }
+        return linkId;
+    }
+
+    private static removeHostPortNum(hostStr: string) {
+        if (hostStr.includes('/None/')) {
+            const subparts = hostStr.split('/');
+            return subparts[0] + '/' + subparts[1];
+        }
+        return hostStr;
+    }
+
     constructor(source, target) {
         this.source = source;
         this.target = target;
@@ -88,4 +111,5 @@
     id: string;
     css: string;
     label: string;
+    fadems: number;
 }
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index 8a5e1b5..35c3fd4 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -67,7 +67,7 @@
         overlaid on the above. This is the blue box, and its width and height does
         not change
     -->
-    <svg:rect x="-16" y="-16" width="32" height="32" style="fill: url(#diagonal_blue)">
+    <svg:rect x="-16" y="-16" width="32" height="32" [ngStyle]="{'fill': panelColour(0)}">
     </svg:rect>
     <svg:path *ngIf="device.location && device.location.locType != 'none'"
               d="M-15 12 v3 h5" style="stroke: white; stroke-width: 1; fill: none"></svg:path>
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
index b490605..b2f0592 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.spec.ts
@@ -16,7 +16,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DeviceNodeSvgComponent } from './devicenodesvg.component';
-import {IconService, LogService} from 'gui2-fw-lib';
+import {FnService, IconService, LogService} from 'gui2-fw-lib';
 import {ActivatedRoute, Params} from '@angular/router';
 import {of} from 'rxjs';
 import {ChangeDetectorRef} from '@angular/core';
@@ -35,9 +35,11 @@
 }
 
 describe('DeviceNodeSvgComponent', () => {
+    let fs: FnService;
     let logServiceSpy: jasmine.SpyObj<LogService>;
     let component: DeviceNodeSvgComponent;
     let fixture: ComponentFixture<DeviceNodeSvgComponent>;
+    let windowMock: Window;
     let ar: MockActivatedRoute;
     let testDevice: Device;
 
@@ -48,6 +50,19 @@
         testDevice = new Device('test:1');
         testDevice.online = true;
 
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
         TestBed.configureTestingModule({
             imports: [ BrowserAnimationsModule ],
             declarations: [ DeviceNodeSvgComponent ],
@@ -55,7 +70,8 @@
                 { provide: LogService, useValue: logSpy },
                 { provide: ActivatedRoute, useValue: ar },
                 { provide: ChangeDetectorRef, useClass: ChangeDetectorRef },
-                { provide: IconService, useClass: MockIconService }
+                { provide: IconService, useClass: MockIconService },
+                { provide: 'Window', useValue: windowMock },
             ]
         })
         .compileComponents();
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
index 90bd2d3..d40f413 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
@@ -23,7 +23,7 @@
     SimpleChanges,
 } from '@angular/core';
 import {Device, LabelToggle, UiElement} from '../../models';
-import {IconService, LocMeta, LogService, MetaUi, ZoomUtils} from 'gui2-fw-lib';
+import {IconService, LocMeta, LogService, MetaUi, SvgUtilService, ZoomUtils} from 'gui2-fw-lib';
 import {NodeVisual, SelectedEvent} from '../nodevisual';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {LocationType} from '../../../backgroundsvg/backgroundsvg.component';
@@ -73,6 +73,7 @@
     constructor(
         protected log: LogService,
         private is: IconService,
+        protected sus: SvgUtilService,
         private ref: ChangeDetectorRef
     ) {
         super();
@@ -131,4 +132,12 @@
             return 'm_' + this.device.type;
         }
     }
+
+    /**
+     * Get a colour for the banner of the nth panel
+     * @param idx The index of the panel (0-6)
+     */
+    panelColour(idx: number): string {
+        return this.sus.cat7().getColor(idx, false, '');
+    }
 }
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
index 9853889..85ef536 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -71,11 +71,14 @@
             this.highlighted = hl.css;
             this.label = hl.label;
             this.isHighlighted = true;
-            setTimeout(() => {
-                this.isHighlighted = false;
-                this.highlighted = '';
-                this.ref.markForCheck();
-            }, 4990);
+            this.log.debug('Link hightlighted', hl);
+            if (hl.fadems > 0) {
+                setTimeout(() => {
+                    this.isHighlighted = false;
+                    this.highlighted = '';
+                    this.ref.markForCheck();
+                }, hl.fadems);
+            }
 
         }
 
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/mapsvg/mapsvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/mapsvg/mapsvg.component.html
index cc2a794..d400ad5 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/mapsvg/mapsvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/mapsvg/mapsvg.component.html
@@ -14,7 +14,7 @@
 ~ limitations under the License.
 -->
 <svg:desc xmlns:svg="http://www.w3.org/2000/svg">Map of {{map.id}} in SVG format</svg:desc>
-<svg:path class="topo-map"
+<svg:path id="bgmap" class="topo-map"
         *ngFor="let f of geodata?.features"
         xmlns:svg="http://www.w3.org/2000/svg"
         [attr.d]="pathGenerator(f)">
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts
index 509a468..1f68444 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/topology.service.ts
@@ -78,6 +78,9 @@
                     this.log.debug('Region Data updated from WSS as topo2UiModelEvent', event.subject, event.data);
                 }
             ],
+            ['showHighlights', (event) => {
+                force.handleHighlights(event.devices, event.hosts, event.links);
+            }]
             // topo2Highlights is handled by TrafficService
         ]));
         this.handlers.push('topo2AllInstances');
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 1f6c07e..e7425d1 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
@@ -56,7 +56,7 @@
         are driven by the d3.force engine
     -->
     <svg:svg #svgZoom xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" id="topo2"
-        preserveAspectRatio="xMaxYMax meet">
+        preserveAspectRatio="xMaxYMax meet" (click)="backgroundClicked($event)">
         <svg:desc>The main SVG canvas of the Topology View</svg:desc>
         <svg:g *ngIf="force.regionData?.devices[0].length +
                         force.regionData?.devices[1].length +
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 601159d..8ce1a6e 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
@@ -69,6 +69,7 @@
 import {ZoomableDirective} from '../layer/zoomable.directive';
 import {MapObject} from '../layer/maputils';
 import {LayoutService, LayoutType} from '../layout.service';
+import {SelectedEvent} from '../layer/forcesvg/visuals/nodevisual';
 
 const TOPO2_PREFS = 'topo2_prefs';
 const TOPO_MAPID_PREFS = 'topo_mapid';
@@ -86,6 +87,11 @@
 const PREF_TOOLBAR = 'toolbar';
 const PREF_PINNED = 'pinned';
 
+const BACKGROUND_ELEMENTS = [
+    'svg topo2',
+    'path bgmap'
+];
+
 /**
  * Model of the topo2_prefs object - this is a subset of the overall Prefs returned
  * by the server
@@ -599,7 +605,7 @@
     }
 
     protected equalizeMasters() {
-        this.wss.sendEvent('equalizeMasters', null);
+        this.wss.sendEvent('equalizeMasters', {});
         this.flashMsg = this.lionFn('fl_eq_masters');
         this.log.debug('equalizing masters');
     }
@@ -700,6 +706,18 @@
         this.log.debug('Map zoom prefs updated', zoomMapExtents);
     }
 
+    backgroundClicked(event: MouseEvent) {
+        const elemTagName = event.target['tagName'] + ' ' + event.target['id'];
+        if (BACKGROUND_ELEMENTS.includes(elemTagName)) {
+            this.force.updateSelected(
+                <SelectedEvent>{
+                    uiElement: undefined,
+                    deselecting: true
+                }
+            );
+        }
+    }
+
     /**
      * Read the LION bundle for Toolbar and set up the lionFn
      */
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/traffic.service.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/traffic.service.ts
index 9aff0c7..6864414 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/traffic.service.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/traffic.service.ts
@@ -54,7 +54,7 @@
     init(force: ForceSvgComponent) {
         this.wss.bindHandlers(new Map<string, (data) => void>([
             ['topo2Highlights', (data) => {
-                  force.handleHighlights(data.devices, data.hosts, data.links);
+                  force.handleHighlights(data.devices, data.hosts, data.links, 5000);
                 }
             ]
         ]));
@@ -75,6 +75,7 @@
     destroy() {
         this.wss.sendEvent('topo2CancelTraffic', {});
         this.wss.unbindHandlers(this.handlers);
+        this.handlers.pop();
         this.log.debug('Traffic monitoring canceled');
     }