Show/hide interfaces labels support, Fixes: #133

src/app/cartography/shared/widgets/interface-label.spec.ts

@@ -100,6 +100,15 @@ describe('InterfaceLabelsWidget', () => {
 
   });
 
+  it('should not draw interface labels when disabled', () => {
+    widget.setEnabled(false);
+    widget.draw(linksEnter);
+
+    const drew = svg.canvas.selectAll<SVGGElement, InterfaceLabel>('g.interface_label_container');
+
+    expect(drew.nodes().length).toEqual(0);
+  });
+
   it('should draw interface label with class `selected` when selected', () => {
     links[0].nodes[0].label.is_selected = true;
 

src/app/cartography/shared/widgets/interface-label.ts

@@ -9,11 +9,16 @@ export class InterfaceLabelWidget {
   static SURROUNDING_TEXT_BORDER = 5;
 
   private cssFixer: CssFixer;
+  private enabled = true;
 
   constructor() {
     this.cssFixer = new CssFixer();
   }
 
+  public setEnabled(enabled: boolean) {
+    this.enabled = enabled;
+  }
+
   draw(selection: SVGSelection) {
 
     const labels = selection
@@ -41,7 +46,10 @@ export class InterfaceLabelWidget {
           l.nodes[1].label.is_selected
         );
 
-        return [sourceInterface, targetInterface];
+        if (this.enabled) {
+          return [sourceInterface, targetInterface];
+        }
+        return [];
       });
 
     const enter = labels

src/app/project-map/project-map.component.css

@@ -75,3 +75,9 @@ g.node text,
   border: none;
   -moz-outline-style: none
 }
+
+.options-item {
+  padding-left: 15px;
+  padding-right: 15px;
+
+}

src/app/project-map/project-map.component.html

@@ -21,6 +21,18 @@
         </button>
       </mat-menu>
 
+      <mat-toolbar-row>
+        <button mat-icon-button [matMenuTriggerFor]="viewMenu">
+          <mat-icon>view_module</mat-icon>
+        </button>
+      </mat-toolbar-row>
+
+      <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
+        <div class="options-item">
+          <mat-checkbox [(ngModel)]="showIntefaceLabels" (change)="toggleShowInterfaceLabels($event.checked)">Show interface labels</mat-checkbox>
+        </div>
+      </mat-menu>
+
       <mat-toolbar-row *ngIf="!project.readonly">
         <button mat-icon-button [color]="drawLineMode ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
           <mat-icon>timeline</mat-icon>

src/app/project-map/project-map.component.ts

@@ -314,6 +314,14 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       });
   }
 
+  public toggleShowInterfaceLabels(enabled: boolean) {
+    this.project.show_interface_labels = enabled;
+
+    this.mapChild.graphLayout.getLinksWidget().getInterfaceLabelWidget()
+      .setEnabled(this.project.show_interface_labels);
+    this.mapChild.reload();
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();

src/app/shared/models/project.ts

@@ -9,5 +9,9 @@ export class Project {
   scene_height: number;
   scene_width: number;
   status: string;
-  readonly: boolean = true;
+  readonly: boolean;
+  show_interface_labels: boolean;
+  show_layers: boolean;
+  show_grid: boolean;
+  snap_to_grid: boolean;
 }