Spinner - init

src/app/app.module.ts

@@ -14,7 +14,9 @@ import {
   MatFormFieldModule,
   MatInputModule,
   MatTableModule,
-  MatDialogModule, MatProgressBarModule
+  MatDialogModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule
 } from '@angular/material';
 
 import { D3Service } from 'd3-ng2-service';
@@ -33,6 +35,7 @@ import { SnapshotService } from "./shared/services/snapshot.service";
 import { ProgressDialogService } from "./shared/progress-dialog/progress-dialog.service";
 import { NodeService } from "./shared/services/node.service";
 import { ApplianceService } from "./shared/services/appliance.service";
+import { LinkService } from "./shared/services/link.service";
 
 import { ProjectsComponent } from './projects/projects.component';
 import { DefaultLayoutComponent } from './default-layout/default-layout.component';
@@ -47,7 +50,7 @@ import { StopNodeActionComponent } from './shared/node-context-menu/actions/stop
 import { ApplianceComponent } from './appliance/appliance.component';
 import { ApplianceListDialogComponent } from './appliance/appliance-list-dialog/appliance-list-dialog.component';
 import { NodeSelectInterfaceComponent } from './shared/node-select-interface/node-select-interface.component';
-import {LinkService} from "./shared/services/link.service";
+
 
 
 @NgModule({
@@ -86,6 +89,7 @@ import {LinkService} from "./shared/services/link.service";
     MatTableModule,
     MatDialogModule,
     MatProgressBarModule,
+    MatProgressSpinnerModule,
     CdkTableModule
   ],
   providers: [

src/app/cartography/map/map.component.scss

@@ -1,3 +1,8 @@
 svg {
   display: block;
 }
+
+image.over {
+  fill: #000;
+}
+

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

@@ -115,10 +115,10 @@ export class LinksWidget implements Widget {
 
     const link_enter = link.enter()
       .append<SVGGElement>('g')
-      .attr('class', 'link')
-      .attr('link_id', (l: Link) => l.link_id)
-      .attr('map-source', (l: Link) => l.source.node_id)
-      .attr('map-target', (l: Link) => l.target.node_id);
+        .attr('class', 'link')
+        .attr('link_id', (l: Link) => l.link_id)
+        .attr('map-source', (l: Link) => l.source.node_id)
+        .attr('map-target', (l: Link) => l.target.node_id)
 
     this.revise(link.merge(link_enter));
 
@@ -126,4 +126,5 @@ export class LinksWidget implements Widget {
       .exit()
         .remove();
   }
+
 }

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

@@ -89,6 +89,12 @@ export class NodesWidget implements Widget {
         })
         .attr('width', (n: Node) => n.width)
         .attr('height', (n: Node) => n.height);
+        // .on('mouseover', function (this, n: Node) {
+        //   select(this).attr("class", "over");
+        // })
+        // .on('mouseout', function (this, n: Node) {
+        //   select(this).attr("class", "");
+        // });
 
     node_enter
       .append<SVGTextElement>('text')

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

@@ -13,6 +13,9 @@
   /*height: 100%;*/
 /*}*/
 
+g.node:hover {
+  background-color: #0097a7;
+}
 
 .project-map {
   background-color: #F0F0F0;
@@ -25,3 +28,7 @@
   left: 20px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
+
+.loading-spinner {
+  display: flex; justify-content: center; align-items: center;
+}

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

@@ -46,3 +46,9 @@
   <app-node-select-interface (onChooseInterface)="onChooseInterface($event)"></app-node-select-interface>
 </div>
 
+<div class="loading-spinner">
+  <mat-spinner color="primary">
+  </mat-spinner>
+</div>
+
+

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

@@ -52,7 +52,7 @@ export class ProjectMapComponent implements OnInit {
 
   private ws: Subject<any>;
   private drawLineMode =  false;
-
+  private isLoading = true;
 
   @ViewChild(MapComponent) mapChild: MapComponent;
 
@@ -123,6 +123,7 @@ export class ProjectMapComponent implements OnInit {
 
         this.setUpMapCallbacks(project);
         this.setUpWS(project);
+        this.isLoading = true;
       });