Changed how link highlight text is updated

Also added in widening of text box and different kerning options

Change-Id: I141251a2b3258de2cd8f7b0d47510ea9b7340fd4
(cherry picked from commit 00e56d0efb4600eddf0d623703c45b2838c9bcfa)
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index 3114a51..3b838bb 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -60,7 +60,7 @@
     <svg:rect
             class="node-container" x="-18" y="-18"
             width="36" height="36"
-            [@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: (36 + labelTextLen() * 1.1)+'px' }}"
+            [@deviceLabelToggle]="{ value: labelToggle, params: {txtWidth: (36 + labelTextLen() + (labelTextLen() > 0 ? 10 : 0))+'px' }}"
             filter= "url(#drop-shadow)">
     </svg:rect>
     <!-- Template explanation: Creates an SVG Rectangle slightly smaller and
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
index b691417..6e1d219 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -72,6 +72,9 @@
     ngOnChanges(changes: SimpleChanges) {
         if (changes['linkHighlight']) {
             const hl: LinkHighlight = changes['linkHighlight'].currentValue;
+            if (hl === undefined) {
+                return;
+            }
             clearTimeout(this.lastTimer);
             this.isHighlighted = true;
             this.log.debug('Link highlighted', this.link.id);