Code cleaned up

src/app/app.module.ts

@@ -188,7 +188,7 @@ import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/no
 import { NonNegativeValidator } from './validators/non-negative-validator';
 import { RotationValidator } from './validators/rotation-validator';
 import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component';
-import { MapSettingService } from './services/mapsettings.service';
+import { MapSettingsService } from './services/mapsettings.service';
 import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
 import { HelpComponent } from './components/help/help.component';
 import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component';
@@ -397,7 +397,7 @@ if (environment.production) {
     NodeCreatedLabelStylesFixer,
     NonNegativeValidator,
     RotationValidator,
-    MapSettingService,
+    MapSettingsService,
     InfoService
   ],
   entryComponents: [

src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts

@@ -21,7 +21,7 @@ import { MapLabel } from '../../models/map/map-label';
 import { MapLinkNode } from '../../models/map/map-link-node';
 import { select } from 'd3-selection';
 import { MapLink } from '../../models/map/map-link';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 
 describe('DraggableSelectionComponent', () => {
   let component: DraggableSelectionComponent;
@@ -123,7 +123,7 @@ describe('DraggableSelectionComponent', () => {
         { provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
         { provide: GraphDataManager, useValue: mockedGraphDataManager },
         { provide: LinksEventSource, useValue: linksEventSourceStub },
-        { provide: MapSettingService, useClass: MapSettingService }
+        { provide: MapSettingsService, useClass: MapSettingsService }
       ],
       declarations: [DraggableSelectionComponent]
     }).compileComponents();

src/app/cartography/components/draggable-selection/draggable-selection.component.ts

@@ -17,7 +17,7 @@ import { LabelWidget } from '../../widgets/label';
 import { InterfaceLabelWidget } from '../../widgets/interface-label';
 import { MapLinkNode } from '../../models/map/map-link-node';
 import { LinksEventSource } from '../../events/links-event-source';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 
 @Component({
   selector: 'app-draggable-selection',
@@ -44,7 +44,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
     private drawingsEventSource: DrawingsEventSource,
     private graphDataManager: GraphDataManager,
     private linksEventSource: LinksEventSource,
-    private mapSettingsService: MapSettingService
+    private mapSettingsService: MapSettingsService
   ) {}
 
   ngOnInit() {

src/app/components/project-map/project-map-menu/project-map-menu.component.spec.ts

@@ -1,7 +1,7 @@
 import { ProjectMapMenuComponent } from "./project-map-menu.component";
 import { ComponentFixture, async, TestBed } from '@angular/core/testing';
 import { MockedDrawingService } from '../project-map.component.spec';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 import { MatIconModule, MatToolbarModule, MatMenuModule, MatCheckboxModule } from '@angular/material';
 import { CommonModule } from '@angular/common';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -15,7 +15,7 @@ describe('ProjectMapMenuComponent', () => {
     let component: ProjectMapMenuComponent;
     let fixture: ComponentFixture<ProjectMapMenuComponent>;
     let drawingService = new MockedDrawingService();
-    let mapSettingService = new MapSettingService();
+    let mapSettingService = new MapSettingsService();
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -23,7 +23,7 @@ describe('ProjectMapMenuComponent', () => {
             providers: [
               { provide: DrawingService, useValue: drawingService },
               { provide: ToolsService },
-              { provide: MapSettingService, useValue: mapSettingService }
+              { provide: MapSettingsService, useValue: mapSettingService }
             ],
             declarations: [ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
             schemas: [NO_ERRORS_SCHEMA]

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

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
 import { ToolsService } from '../../../services/tools.service';
-import { MapSettingService } from '../../../services/mapsettings.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
 import { DrawingService } from '../../../services/drawing.service';
 
 
@@ -26,7 +26,7 @@ export class ProjectMapMenuComponent implements OnInit, OnDestroy {
 
     constructor(
         private toolsService: ToolsService,
-        private mapSettingsService: MapSettingService,
+        private mapSettingsService: MapSettingsService,
         private drawingService: DrawingService
     ) {}
 

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

@@ -48,7 +48,7 @@ import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles
 import { LabelWidget } from '../../cartography/widgets/label';
 import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label';
 import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter';
-import { MapSettingService } from '../../services/mapsettings.service';
+import { MapSettingsService } from '../../services/mapsettings.service';
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { MockedToasterService } from '../../services/toaster.service.spec';
 import { ToasterService } from '../../services/toaster.service';
@@ -261,7 +261,8 @@ describe('ProjectMapComponent', () => {
         { provide: MapNodesDataSource, useClass: MapNodesDataSource },
         { provide: MapLinksDataSource, useClass: LinksDataSource },
         { provide: MapDrawingsDataSource, useClass: MapDrawingsDataSource },
-        { provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource }
+        { provide: MapSymbolsDataSource, useClass: MapSymbolsDataSource },
+        { provide: MapSettingsService, useClass: MapSettingsService }
       ],
       declarations: [ProjectMapComponent, ProjectMapMenuComponent, D3MapComponent, ...ANGULAR_MAP_DECLARATIONS],
       schemas: [NO_ERRORS_SCHEMA]

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

@@ -52,6 +52,7 @@ import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
+import { MapSettingsService } from '../../services/mapsettings.service';
 
 
 @Component({
@@ -122,11 +123,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private mapNodesDataSource: MapNodesDataSource,
     private mapLinksDataSource: MapLinksDataSource,
     private mapDrawingsDataSource: MapDrawingsDataSource,
-    private mapSymbolsDataSource: MapSymbolsDataSource
+    private mapSymbolsDataSource: MapSymbolsDataSource,
+    private mapSettingsService: MapSettingsService
   ) {}
 
   ngOnInit() {
     this.settings = this.settingsService.getAll();
+    this.isTopologySummaryVisible = this.mapSettingsService.isTopologySummaryVisible;
 
     this.progressService.activate();
     const routeSub = this.route.paramMap.subscribe((paramMap: ParamMap) => {
@@ -397,6 +400,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   public toggleShowTopologySummary(visible: boolean) {
     this.isTopologySummaryVisible = visible;
+    this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
   }
 
   public hideMenu() {

src/app/components/topology-summary/topology-summary.component.html

@@ -14,9 +14,9 @@
     </div>
     <div class="summarySorting">
         Sorting <br/>
-        <div class="radio-group">
+        <div class="radio-group-wrapper">
-            <mat-radio-group aria-label="Sorting">
+            <mat-radio-group class="radio-group" aria-label="Sorting">
-                <mat-radio-button value="1" (click)="setSortingOrder('asc')" checked>By name ascending </mat-radio-button><br/>
+                <mat-radio-button value="1" (click)="setSortingOrder('asc')" checked>By name ascending</mat-radio-button>
                 <mat-radio-button value="2" (click)="setSortingOrder('desc')">By name descending</mat-radio-button>
             </mat-radio-group>
         </div>
@@ -40,21 +40,5 @@
                 none
             </div>
         </div>
-        <!-- <div>
-            <table mat-table [dataSource]="dataSource">
-                <ng-container matColumnDef="name">
-                    <th mat-header-cell *matHeaderCellDef>Name</th>
-                    <td mat-cell *matCellDef="let element">{{element.name}}</td>
-                </ng-container>
-            
-                <ng-container matColumnDef="console">
-                    <th mat-header-cell *matHeaderCellDef>Console</th>
-                    <td mat-cell *matCellDef="let element">{{element.console}}</td>
-                </ng-container>
-            
-                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-            </table>
-        </div> -->
     </div>
 </div>

src/app/components/topology-summary/topology-summary.component.scss

@@ -36,7 +36,7 @@
 .summaryContent {
     margin-left: 5px;
     margin-right: 5px;
-    max-height: 220px;
+    max-height: 240px;
     overflow: auto;
     scrollbar-color: darkgrey #263238;
     scrollbar-width: thin;
@@ -80,10 +80,15 @@ mat-icon {
     outline: 1px solid #263238;
 }
 
-.radio-group {
+.radio-group-wrapper {
     margin-top: 5px;
 }
 
+.radio-group {
+    display: flex;
+    justify-content: space-between;
+}
+
 .closeButton {
     cursor: pointer;
 }

src/app/components/topology-summary/topology-summary.component.spec.ts

@@ -13,7 +13,7 @@ import { Project } from '../../models/project';
 import { Node } from '../../cartography/models/node';
 
 
-fdescribe('TopologySummaryComponent', () => {
+describe('TopologySummaryComponent', () => {
     let component: TopologySummaryComponent;
     let fixture: ComponentFixture<TopologySummaryComponent>;
     let mockedProjectService: MockedProjectService = new MockedProjectService();

src/app/components/topology-summary/topology-summary.component.ts

@@ -23,8 +23,6 @@ export class TopologySummaryComponent implements OnInit, OnDestroy {
     projectsStatistics: ProjectStatistics;
     nodes: Node[] = [];
     filteredNodes: Node[] = [];
-    dataSource: Node[] = [];
-    displayedColumns: string[] = ['name', 'console'];
     sortingOrder: string = 'asc';
     startedStatusFilterEnabled: boolean = false;
     suspendedStatusFilterEnabled: boolean = false;

src/app/services/mapsettings.service.ts

@@ -2,12 +2,17 @@ import { Injectable } from "@angular/core";
 import { Subject } from 'rxjs';
 
 @Injectable()
-export class MapSettingService {
+export class MapSettingsService {
     public isMapLocked = new Subject<boolean>();
+    public isTopologySummaryVisible: boolean = false;
 
     constructor() {}
 
     changeMapLockValue(value: boolean) {
         this.isMapLocked.next(value);
     }
+
+    toggleTopologySummary(value: boolean) {
+        this.isTopologySummaryVisible = value;
+    }
 }