Links on different layer

src/app/cartography/shared/models/link-status.model.ts

@@ -1,11 +1,3 @@
 export class LinkStatus {
-  x: number;
+  public constructor(public x: number, public y: number, public status: string) {}
-  y: number;
-  status: string;
-
-  public constructor(x: number, y: number, status: string) {
-    this.x = x;
-    this.y = y;
-    this.status = status;
-  }
 }

src/app/cartography/shared/widgets/links.widget.ts

@@ -101,8 +101,14 @@ export class LinksWidget implements Widget {
 
     this.multiLinkCalculatorHelper.assignDataToLinks(links);
 
-    const link = view
+    const linksLayer = view.selectAll("g.links").data([{}]);
-      .selectAll("g.link")
+    linksLayer
+      .enter()
+        .append<SVGGElement>('g')
+          .attr("class", "links");
+
+    const link = linksLayer
+      .selectAll<SVGGElement, Link>("g.link")
       .data(links.filter((l: Link) => {
         return l.target && l.source;
       }));

src/app/shared/node-select-interface/node-select-interface.component.html

@@ -2,7 +2,7 @@
   <span [matMenuTriggerFor]="selectInterfaceMenu"></span>
   <mat-menu #selectInterfaceMenu="matMenu">
       <button mat-menu-item *ngFor="let port of node.ports" (click)="chooseInterface(port)">
-        <mat-icon>info</mat-icon>
+        <mat-icon>add_circle_outline</mat-icon>
         <span>{{ port.name }}</span>
       </button>
   </mat-menu>