diff --git a/src/app/instances/ns-topology/NSTopologyComponent.html b/src/app/instances/ns-topology/NSTopologyComponent.html
new file mode 100644
index 0000000..0a3051c
--- /dev/null
+++ b/src/app/instances/ns-topology/NSTopologyComponent.html
@@ -0,0 +1,173 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<ng-sidebar-container class="ns-instance-topology-sidebar-container">
+    <!-- A sidebar -->
+    <ng-sidebar [(opened)]="sideBarOpened" position="left">
+        <div class="sidebar-header">
+            <span class="topology_title" *ngIf="isShowNSDetails">{{'NS' | translate}} {{'VIEW' | translate}}</span>
+            <span class="topology_title" *ngIf="isShowVLetails">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
+            <span class="topology_title" *ngIf="isShowVNFRDetails">{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
+        </div>
+        <div class="sidebar-body">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="isShowNSDetails && nsInfo">
+                <div class="row">
+                    <div class="col-12 p-0">
+                        <table class="table table-bordered text-dark custom-table">
+                            <tr>
+                                <td>{{'NS' | translate}} {{'INSTANCE' | translate}} Id</td>
+                                <td>{{(nsInfo.nsInstanceID)?nsInfo.nsInstanceID:'-'}}</td>
+                            </tr>
+                            <tr>
+                                <td>{{'NSDNAME' | translate}}</td>
+                                <td>{{(nsInfo.nsName)?nsInfo.nsName:'-'}}</td>
+                            </tr>
+                            <tr>
+                                <td>{{'OPERATIONALSTATUS' | translate}}</td>
+                                <td>{{(nsInfo.nsOperationalStatus)?nsInfo.nsOperationalStatus:'-'}}</td>
+                            </tr>
+                            <tr>
+                                <td>{{'CONFIGSTATUS' | translate}}</td>
+                                <td>{{(nsInfo.nsConfigStatus)?nsInfo.nsConfigStatus:'-'}}</td>
+                            </tr>
+                            <tr>
+                                <td>{{'DETAILEDSTATUS' | translate}}</td>
+                                <td>{{(nsInfo.nsDetailedStatus)?nsInfo.nsDetailedStatus:'-'}}</td>
+                            </tr>
+                            <tr>
+                                <td>{{'RESOURCEORCHESTRATOR' | translate}}</td>
+                                <td>{{(nsInfo.nsResourceOrchestrator)?nsInfo.nsResourceOrchestrator:'-'}}</td>
+                            </tr>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="isShowVLetails && virtualLink">
+                <div class="row">
+                    <div class="col-12 p-0">
+                        <table class="table table-bordered text-dark custom-table">
+                            <tbody>
+                                <tr>
+                                    <td>short-name</td>
+                                    <td>{{(virtualLink.shortName)?virtualLink.shortName:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Name</td>
+                                    <td>{{(virtualLink.name)?virtualLink.name:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Vim network name</td>
+                                    <td>{{(virtualLink.vimNetworkName)?virtualLink.vimNetworkName:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Type</td>
+                                    <td>{{(virtualLink.type)?virtualLink.type:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Id</td>
+                                    <td>{{(virtualLink.id)?virtualLink.id:'-'}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="isShowVNFRDetails && vnfr">
+                <div class="row">
+                    <div class="col-12 p-0">
+                        <table class="table table-bordered text-dark custom-table">
+                            <tbody>
+                                <tr>
+                                    <td>VIM Id</td>
+                                    <td>{{(vnfr.vimID)?vnfr.vimID:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>_id</td>
+                                    <td>{{(vnfr._id)?vnfr._id:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>IP</td>
+                                    <td>{{(vnfr.ip)?vnfr.ip:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Nsr Id</td>
+                                    <td>{{(vnfr.nsrID)?vnfr.nsrID:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Id</td>
+                                    <td>{{(vnfr.id)?vnfr.id:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Vnfd Ref</td>
+                                    <td>{{(vnfr.vnfdRef)?vnfr.vnfdRef:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Vnfd Id</td>
+                                    <td>{{(vnfr.vnfdID)?vnfr.vnfdID:'-'}}</td>
+                                </tr>
+                                <tr>
+                                    <td>Member index</td>
+                                    <td>{{(vnfr.memberIndex)?vnfr.memberIndex:'-'}}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ng-sidebar>
+    <!-- Page content -->
+    <div ng-sidebar-content>
+        <button (click)="toggleSidebar()" class="btn btn-default" placement="right" ngbTooltip="{{'OPEN' | translate }}">
+            <i class="fa fa-arrow-right detail-sidebar" aria-hidden="true"></i>
+        </button>
+    </div>
+</ng-sidebar-container>
+<div class="container-fluid text-dark">
+    <div class="row ns-instance-form justify-content-end ">
+        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
+            <div class="row">
+                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pl-0">
+                    <div class="btn-group list" role="group" aria-label="Basic example">
+                        <button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"
+                            [class.pinned]="classApplied" placement="top" container="body"
+                            ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
+                            <i class="fas fa-thumbtack"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right pr-0 badgegroup">
+                    <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
+                        <img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
+                        <br>VNFR</span>
+                    <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
+                        <img src="assets/images/VL.svg" class="ns-svg" draggable="false"/>
+                        <br>VL</span>
+                    <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
+                        <img src="assets/images/CP.svg" class="ns-svg" draggable="false"/>
+                        <br>CP</span>
+                </div>
+            </div>
+            <div class="row border-all">
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 svg-container">
+                    <svg preserveAspectRatio="xMidYMin slice" id="graphContainer" #graphContainer></svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/instances/ns-topology/NSTopologyComponent.scss b/src/app/instances/ns-topology/NSTopologyComponent.scss
new file mode 100644
index 0000000..d750ccc
--- /dev/null
+++ b/src/app/instances/ns-topology/NSTopologyComponent.scss
@@ -0,0 +1,17 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
\ No newline at end of file
diff --git a/src/app/instances/ns-topology/NSTopologyComponent.ts b/src/app/instances/ns-topology/NSTopologyComponent.ts
new file mode 100644
index 0000000..44c6309
--- /dev/null
+++ b/src/app/instances/ns-topology/NSTopologyComponent.ts
@@ -0,0 +1,573 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+/**
+ * @file NS Topology Component
+ */
+/* tslint:disable:no-increment-decrement */
+import { Component, ElementRef, Injector, ViewChild, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { ERRORDATA } from 'CommonModel';
+import * as d3 from 'd3';
+import { environment } from 'environment';
+import * as HttpStatus from 'http-status-codes';
+import { VNFDCONNECTIONPOINTREF } from 'NSDModel';
+import { COMPOSERNODES, CONNECTIONPOINT, NSD, NSDVLD, NSINFO, NSInstanceDetails, NSINSTANCENODES, VLINFO, VNFRINFO } from 'NSInstanceModel';
+import { GRAPHDETAILS, Tick, TickPath } from 'NSTopologyModel';
+import { RestService } from 'src/services/RestService';
+import { isNullOrUndefined } from 'util';
+
+/**
+ * Creating component
+ * @Component takes NSTopologyComponent.html as template url
+ */
+@Component({
+  selector: 'app-ns-topology',
+  templateUrl: './NSTopologyComponent.html',
+  styleUrls: ['./NSTopologyComponent.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+/** Exporting a class @exports NSTopologyComponent */
+export class NSTopologyComponent {
+  /** Injector to invoke other services @public */
+  public injector: Injector;
+  /** View child contains graphContainer ref @public  */
+  @ViewChild('graphContainer', { static: true }) public graphContainer: ElementRef;
+  /** Holds the basic information of NS @public */
+  public nsInfo: NSINFO;
+  /** Contains tranlsate instance @private */
+  public translateService: TranslateService;
+  /** Add the activeclass for the selected @public */
+  public activeClass: string = 'active';
+  /** Add the fixed class for the freeze @public */
+  public fixedClass: string = 'fixed';
+  /** Check the loading results @public */
+  public isLoadingResults: boolean = true;
+  /** Give the message for the loading @public */
+  public message: string = 'PLEASEWAIT';
+  /** Assign the forcesimulation active @public */
+  public forceSimulationActive: boolean = false;
+  /** Assign pinned class for the button when freezed @public */
+  public classApplied: boolean = false;
+  /** Contains sidebar open status @public */
+  public sideBarOpened: boolean = true;
+  /** Need to show the NS Details @public */
+  public isShowNSDetails: boolean = true;
+  /** Need to show the VL Details @public */
+  public isShowVLetails: boolean = false;
+  /** Need to show the VNFR Details @public */
+  public isShowVNFRDetails: boolean = false;
+  /** Show right side info of Virtual Link @public */
+  public virtualLink: VLINFO;
+  /** Show right side info of Virtual Link @public */
+  public vnfr: VNFRINFO;
+
+  /** Contains lastkeypressed instance @private */
+  private lastKeyDown: number = -1;
+  /** Instance of the rest service @private */
+  private restService: RestService;
+  /** Holds the instance of AuthService class of type AuthService @private */
+  private activatedRoute: ActivatedRoute;
+  /** Holds the NS Id @private */
+  private nsIdentifier: string;
+  /** Contains SVG attributes @private */
+  // tslint:disable-next-line:no-any
+  private svg: any;
+  /** Contains forced node animations @private */
+  // tslint:disable-next-line:no-any
+  private force: any;
+  /** Contains path information of the node */
+  // tslint:disable-next-line:no-any
+  private path: any;
+  /** Contains node network @private */
+  // tslint:disable-next-line:no-any
+  private network: any;
+  /** Contains node square @private */
+  // tslint:disable-next-line:no-any
+  private square: any;
+  /** Contains node circle @private */
+  // tslint:disable-next-line:no-any
+  private circle: any;
+  /** Contains the NS information @private */
+  private nsData: NSInstanceDetails;
+  /** Contains NDS information of a descriptors */
+  private nsdData: NSD;
+  /** Contains node information @private */
+  private nodes: NSINSTANCENODES[] = [];
+  /** Contains links information @private */
+  private links: {}[] = [];
+  /** holds cp count/iteration @private */
+  private cpCount: number;
+  /** VNFD nodes @private */
+  private vnfdNodes: {}[] = [];
+  /** VLD nodes @private */
+  private vldNodes: {}[] = [];
+  /** Connection CP nodes @private */
+  private cpNodes: {}[] = [];
+  /** Set timeout @private */
+  private TIMEOUT: number = 2000;
+  /** Rendered nodes represent vnf @private */
+  // tslint:disable-next-line:no-any
+  private gSquare: any;
+  /** Rendered nodes represent network @private */
+  // tslint:disable-next-line:no-any
+  private gNetwork: any;
+  /** Rendered nodes represent network @private */
+  // tslint:disable-next-line:no-any
+  private gCircle: any;
+  /** Service holds the router information @private */
+  private router: Router;
+
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.restService = this.injector.get(RestService);
+    this.activatedRoute = this.injector.get(ActivatedRoute);
+    this.translateService = this.injector.get(TranslateService);
+    this.router = this.injector.get(Router);
+  }
+
+  /**
+   * Lifecyle Hooks the trigger before component is instantiate @public
+   */
+  public ngOnInit(): void {
+    // tslint:disable-next-line:no-backbone-get-set-outside-model
+    this.nsIdentifier = this.activatedRoute.snapshot.paramMap.get('id');
+    this.generateData();
+  }
+  /** Event to freeze the animation @public */
+  public onFreeze(): void {
+    this.classApplied = !this.classApplied;
+    const alreadyFixedIsActive: boolean = d3.select('svg#graphContainer').classed(this.fixedClass);
+    d3.select('svg#graphContainer').classed(this.fixedClass, !alreadyFixedIsActive);
+    if (alreadyFixedIsActive) {
+      this.force.stop();
+    }
+    this.forceSimulationActive = alreadyFixedIsActive;
+    this.nodes.forEach((d: COMPOSERNODES) => {
+      d.fx = (alreadyFixedIsActive) ? null : d.x;
+      d.fy = (alreadyFixedIsActive) ? null : d.y;
+    });
+    if (alreadyFixedIsActive) {
+      this.force.restart();
+    }
+  }
+  /** Events handles when dragended @public */
+  public toggleSidebar(): void {
+    this.sideBarOpened = !this.sideBarOpened;
+    this.deselectAllNodes();
+    this.showRightSideInfo(true, false, false);
+  }
+  /** Get the default Configuration of containers @private */
+  private getGraphContainerAttr(): GRAPHDETAILS {
+    return {
+      width: 700,
+      height: 400,
+      nodeHeight: 50,
+      nodeWidth: 35,
+      textX: -35,
+      textY: 30,
+      radius: 5,
+      distance: 50,
+      strength: -500,
+      forcex: 2,
+      forcey: 2,
+      sourcePaddingYes: 17,
+      sourcePaddingNo: 12,
+      targetPaddingYes: 4,
+      targetPaddingNo: 3,
+      alphaTarget: 0.3,
+      imageX: -25,
+      imageY: -25,
+      shiftKeyCode: 17
+    };
+  }
+  /** Show the right-side information @private */
+  private showRightSideInfo(nsDetails: boolean, vlDetails: boolean, vnfrDeails: boolean): void {
+    this.isShowNSDetails = nsDetails;
+    this.isShowVLetails = vlDetails;
+    this.isShowVNFRDetails = vnfrDeails;
+  }
+  /** De-select all the selected nodes @private */
+  private deselectAllNodes(): void {
+    this.square.select('image').classed(this.activeClass, false);
+    this.network.select('image').classed(this.activeClass, false);
+    this.circle.select('image').classed(this.activeClass, false);
+  }
+  /** Prepare all the information for node creation @private */
+  private generateData(): void {
+    this.restService.getResource(environment.NSINSTANCESCONTENT_URL + '/' + this.nsIdentifier).subscribe((nsData: NSInstanceDetails) => {
+      this.nsData = nsData;
+      this.nsInfo = {
+        nsInstanceID: nsData._id,
+        nsName: nsData.name,
+        nsOperationalStatus: nsData['operational-status'],
+        nsConfigStatus: nsData['config-status'],
+        nsDetailedStatus: nsData['detailed-status'],
+        nsResourceOrchestrator: nsData['resource-orchestrator']
+      };
+      if (this.nsData['constituent-vnfr-ref'] !== undefined) {
+        this.generateVNFRCPNodes();
+      }
+      if (this.nsData.vld !== undefined) {
+        this.generateVLDNetworkNodes();
+      }
+      setTimeout(() => {
+        this.pushAllNodes();
+        this.generateVNFDCP();
+        this.generateVLDCP();
+        this.isLoadingResults = false;
+        this.createNode(this.nodes, this.links);
+      }, this.TIMEOUT);
+    }, (error: ERRORDATA) => {
+      this.isLoadingResults = false;
+      if (error.error.status === HttpStatus.NOT_FOUND || error.error.status === HttpStatus.UNAUTHORIZED) {
+        this.router.navigateByUrl('404', { skipLocationChange: true }).catch();
+      } else {
+        this.restService.handleError(error, 'get');
+      }
+    });
+  }
+
+  /** Fetching all the VNFR Information @private */
+  private generateVNFRCPNodes(): void {
+    this.nsData['constituent-vnfr-ref'].forEach((vnfdrID: string) => {
+      this.restService.getResource(environment.VNFINSTANCES_URL + '/' + vnfdrID).subscribe((vndfrDetail: NSD) => {
+        this.nodes.push({
+          id: vndfrDetail['vnfd-ref'] + ':' + vndfrDetail['member-vnf-index-ref'],
+          nodeTypeRef: 'vnfd',
+          cp: vndfrDetail['connection-point'],
+          vdur: vndfrDetail.vdur,
+          vld: vndfrDetail.vld,
+          nsID: vndfrDetail['nsr-id-ref'],
+          vnfdID: vndfrDetail['vnfd-id'],
+          vimID: vndfrDetail['vim-account-id'],
+          vndfrID: vndfrDetail.id,
+          ipAddress: vndfrDetail['ip-address'],
+          memberIndex: vndfrDetail['member-vnf-index-ref'],
+          vnfdRef: vndfrDetail['vnfd-ref'],
+          selectorId: 'nsInst-' + vndfrDetail.id
+        });
+        // Fetching all the connection point of VNF & Interface
+        vndfrDetail['connection-point'].forEach((cp: CONNECTIONPOINT) => {
+          this.nodes.push({
+            id: cp.name + ':' + vndfrDetail['member-vnf-index-ref'],
+            vndfCPRef: vndfrDetail['vnfd-ref'] + ':' + vndfrDetail['member-vnf-index-ref'],
+            nodeTypeRef: 'cp',
+            name: cp.name
+          });
+        });
+      }, (error: ERRORDATA) => {
+        this.restService.handleError(error, 'get');
+      });
+    });
+  }
+
+  /** Fetching all the VLD/Network Information @private */
+  private generateVLDNetworkNodes(): void {
+    this.nsdData = this.nsData.nsd;
+    this.nsdData.vld.forEach((ref: NSDVLD) => {
+      this.nodes.push({
+        id: ref.id,
+        nodeTypeRef: 'vld',
+        name: ref.name,
+        type: ref.type,
+        vnfdCP: ref['vnfd-connection-point-ref'],
+        vimNetworkName: ref['vim-network-name'],
+        shortName: ref['short-name'],
+        selectorId: 'nsInst-' + ref.id
+      });
+    });
+  }
+
+  /** Pushing connection points of path/links nodes @private */
+  private pushAllNodes(): void {
+    this.nodes.forEach((nodeList: NSINSTANCENODES) => {
+      if (nodeList.nodeTypeRef === 'vnfd') {
+        this.vnfdNodes.push(nodeList);
+      } else if (nodeList.nodeTypeRef === 'vld') {
+        this.vldNodes.push(nodeList);
+      } else if (nodeList.nodeTypeRef === 'cp') {
+        this.cpNodes.push(nodeList);
+      }
+    });
+  }
+
+  /** Get CP position based on vndf @private */
+  private generateVNFDCP(): void {
+    this.vnfdNodes.forEach((list: NSINSTANCENODES) => {
+      const vndfPos: number = this.nodes.map((e: NSINSTANCENODES) => { return e.id; }).indexOf(list.id);
+      this.cpCount = 0;
+      this.nodes.forEach((res: NSINSTANCENODES) => {
+        if (res.nodeTypeRef === 'cp' && res.vndfCPRef === list.id) {
+          this.links.push({ source: this.nodes[vndfPos], target: this.nodes[this.cpCount] });
+        }
+        this.cpCount++;
+      });
+    });
+  }
+
+  /** Get CP position based on vld @private */
+  private generateVLDCP(): void {
+    let vldPos: number = 0;
+    this.vldNodes.forEach((list: NSINSTANCENODES) => {
+      if (!isNullOrUndefined(list.vnfdCP)) {
+        list.vnfdCP.forEach((cpRef: VNFDCONNECTIONPOINTREF) => {
+          this.cpCount = 0;
+          this.nodes.forEach((res: NSINSTANCENODES) => {
+            if (res.nodeTypeRef === 'cp' && res.id === cpRef['vnfd-connection-point-ref'] + ':' + cpRef['member-vnf-index-ref']) {
+              this.links.push({ source: this.nodes[vldPos], target: this.nodes[this.cpCount] });
+            }
+            this.cpCount++;
+          });
+        });
+        vldPos++;
+      }
+    });
+  }
+
+  /** Node is created and render at D3 region @private */
+  private createNode(nodes: NSINSTANCENODES[], links: {}[]): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    d3.selectAll('svg#graphContainer > *').remove();
+    d3.select(window).on('keydown', () => { this.keyDown(); });
+    d3.select(window).on('keyup', () => { this.keyUp(); });
+    this.svg = d3.select('#graphContainer')
+      .attr('oncontextmenu', 'return false;')
+      .attr('width', graphContainerAttr.width)
+      .attr('height', graphContainerAttr.height);
+    this.force = d3.forceSimulation()
+      .force('charge', d3.forceManyBody().strength(graphContainerAttr.strength))
+      .force('link', d3.forceLink().id((d: TickPath) => d.id).distance(graphContainerAttr.distance))
+      .force('center', d3.forceCenter(graphContainerAttr.width / graphContainerAttr.forcex,
+        graphContainerAttr.height / graphContainerAttr.forcey))
+      .force('x', d3.forceX(graphContainerAttr.width / graphContainerAttr.forcex))
+      .force('y', d3.forceY(graphContainerAttr.height / graphContainerAttr.forcey))
+      .on('tick', () => { this.tick(); });
+    // handles to link and node element groups
+    this.path = this.svg.append('svg:g').selectAll('path');
+    this.network = this.svg.append('svg:g').selectAll('network');
+    this.square = this.svg.append('svg:g').selectAll('rect');
+    this.circle = this.svg.append('svg:g').selectAll('circle');
+    this.restart(nodes, links);
+  }
+
+  /** Update force layout (called automatically each iteration) @private */
+  private tick(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    // draw directed edges with proper padding from node centers
+    this.path.attr('class', 'link').attr('d', (d: Tick) => {
+      const deltaX: number = d.target.x - d.source.x;
+      const deltaY: number = d.target.y - d.source.y;
+      const dist: number = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      const normX: number = deltaX / dist;
+      const normY: number = deltaY / dist;
+      const sourcePadding: number = d.left ? graphContainerAttr.sourcePaddingYes : graphContainerAttr.sourcePaddingNo;
+      const targetPadding: number = d.right ? graphContainerAttr.targetPaddingYes : graphContainerAttr.targetPaddingNo;
+      const sourceX: number = d.source.x + (sourcePadding * normX);
+      const sourceY: number = d.source.y + (sourcePadding * normY);
+      const targetX: number = d.target.x - (targetPadding * normX);
+      const targetY: number = d.target.y - (targetPadding * normY);
+      return `M${sourceX},${sourceY}L${targetX},${targetY}`;
+    });
+    this.network.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
+    this.square.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
+    this.circle.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
+  }
+
+  /** Update graph (called when needed) @private */
+  private restart(nodes: NSINSTANCENODES[], links: {}[]): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.path = this.path.data(links);
+    const vnfdNodes: {}[] = []; const vldNodes: {}[] = []; const cpNodes: {}[] = []; // NB: Nodes are known by id, not by index!
+    nodes.forEach((nodeList: NSINSTANCENODES) => {
+      if (nodeList.nodeTypeRef === 'vnfd') { vnfdNodes.push(nodeList); }
+      else if (nodeList.nodeTypeRef === 'vld') { vldNodes.push(nodeList); }
+      else if (nodeList.nodeTypeRef === 'cp') { cpNodes.push(nodeList); }
+    });
+    this.square = this.square.data(vnfdNodes, (d: { id: number }) => d.id);
+    this.network = this.network.data(vldNodes, (d: { id: number }) => d.id);
+    this.circle = this.circle.data(cpNodes, (d: { id: number }) => d.id);
+    this.resetAndCreateNodes();
+    this.force.nodes(nodes).force('link').links(links); //Set the graph in motion
+    this.force.alphaTarget(graphContainerAttr.alphaTarget).restart();
+  }
+
+  /** Rest and create nodes @private */
+  private resetAndCreateNodes(): void {
+    this.path.exit().remove();
+    this.square.exit().remove();
+    this.network.exit().remove();
+    this.circle.exit().remove();
+    // tslint:disable-next-line:no-any
+    const gPath: any = this.path.enter().append('svg:path').attr('class', 'link');
+    this.getgSquare();
+    this.getgNetwork();
+    this.getgCircle();
+    this.square = this.gSquare.merge(this.square);
+    this.network = this.gNetwork.merge(this.network);
+    this.path = gPath.merge(this.path);
+    this.circle = this.gCircle.merge(this.circle);
+  }
+
+  /** Events handles when Shift Click to perform create cp @private */
+  // tslint:disable-next-line: no-any
+  private singleClick(nodeSelected: any, d: COMPOSERNODES): void {
+    this.selectNodeExclusive(nodeSelected, d);
+  }
+  /** Selected nodes @private */
+  // tslint:disable-next-line: no-any
+  private selectNodeExclusive(nodeSelected: any, d: COMPOSERNODES): void {
+    const alreadyIsActive: boolean = nodeSelected.select('#' + d.selectorId).classed(this.activeClass);
+    this.deselectAllNodes();
+    nodeSelected.select('#' + d.selectorId).classed(this.activeClass, !alreadyIsActive);
+    if (d.nodeTypeRef === 'vld' && !alreadyIsActive) {
+      this.virtualLink = {
+        id: d.id,
+        name: d.name,
+        type: d.type,
+        shortName: d.shortName,
+        vimNetworkName: d.vimNetworkName
+      };
+      this.showRightSideInfo(false, true, false);
+    } else if (d.nodeTypeRef === 'vnfd' && !alreadyIsActive) {
+      this.vnfr = {
+        vimID: d.vimID,
+        _id: d.vndfrID,
+        ip: d.ipAddress,
+        nsrID: d.nsID,
+        id: d.selectorId,
+        vnfdRef: d.vnfdRef,
+        vnfdId: d.vnfdID,
+        memberIndex: d.memberIndex
+      };
+      this.showRightSideInfo(false, false, true);
+    } else {
+      this.showRightSideInfo(true, false, false);
+    }
+  }
+  /** Setting all the square/vnf attributes of nodes @private */
+  private getgSquare(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.gSquare = this.square.enter().append('svg:g');
+    this.gSquare.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
+    this.gSquare.append('svg:image')
+      .style('opacity', 1)
+      .attr('x', graphContainerAttr.imageX)
+      .attr('y', graphContainerAttr.imageY)
+      .attr('id', (d: COMPOSERNODES) => { return d.selectorId; })
+      .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
+      .attr('xlink:href', 'assets/images/VNFD.svg')
+      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.gSquare, d); this.onNodeClickToggleSidebar(); });
+    this.gSquare.append('svg:text')
+      .attr('class', 'node_text')
+      .attr('y', graphContainerAttr.textY)
+      .text((d: COMPOSERNODES) => d.id);
+  }
+
+  /** Settings all the network attributes of nodes @private */
+  private getgNetwork(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.gNetwork = this.network.enter().append('svg:g');
+    this.gNetwork.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
+    this.gNetwork.append('svg:image')
+      .style('opacity', 1)
+      .attr('x', graphContainerAttr.imageX)
+      .attr('y', graphContainerAttr.imageY)
+      .attr('id', (d: COMPOSERNODES) => { return d.selectorId; })
+      .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
+      .attr('xlink:href', 'assets/images/VL.svg')
+      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.gNetwork, d); this.onNodeClickToggleSidebar(); });
+    this.gNetwork.append('svg:text')
+      .attr('class', 'node_text')
+      .attr('y', graphContainerAttr.textY)
+      .text((d: COMPOSERNODES) => d.name);
+  }
+
+  /** Settings all the connection point attributes of nodes @private */
+  private getgCircle(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.gCircle = this.circle.enter().append('svg:g');
+    this.gCircle.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
+    this.gCircle.append('svg:image')
+      .style('opacity', 1)
+      .attr('x', graphContainerAttr.imageX)
+      .attr('y', graphContainerAttr.imageY)
+      .attr('class', 'node').attr('width', graphContainerAttr.nodeWidth).attr('height', graphContainerAttr.nodeHeight)
+      .attr('xlink:href', 'assets/images/CP.svg');
+    this.gCircle.append('svg:text')
+      .attr('class', 'node_text')
+      .attr('y', graphContainerAttr.textY)
+      .text((d: COMPOSERNODES) => d.name);
+  }
+
+  /** Key press event @private */
+  private keyDown(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    if (this.lastKeyDown !== -1) { return; }
+    this.lastKeyDown = d3.event.keyCode;
+    if (d3.event.keyCode === graphContainerAttr.shiftKeyCode) {
+      this.gSquare.call(d3.drag()
+        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
+      );
+      this.gNetwork.call(d3.drag()
+        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
+      );
+      this.gCircle.call(d3.drag()
+        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
+      );
+      this.svg.classed('ctrl', true);
+    }
+  }
+  /** Key realse event @private */
+  private keyUp(): void {
+    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
+    this.lastKeyDown = -1;
+    if (d3.event.keyCode === graphContainerAttr.shiftKeyCode) {
+      this.gSquare.on('.drag', null);
+      this.gNetwork.on('.drag', null);
+      this.gCircle.on('.drag', null);
+      this.svg.classed('ctrl', false);
+    }
+  }
+  /** Events handles when dragstarted @private */
+  private dragstarted(d: COMPOSERNODES): void {
+    d.fx = d.x;
+    d.fy = d.y;
+  }
+  /** Events handles when dragged @private */
+  private dragged(d: COMPOSERNODES): void {
+    d.fx = d.x = d3.event.x;
+    d.fy = d.y = d3.event.y;
+  }
+  /** Events handles when dragended @private */
+  private dragended(d: COMPOSERNODES): void {
+    if (this.forceSimulationActive) {
+      d.fx = null;
+      d.fy = null;
+    } else {
+      d.fx = d.x;
+      d.fy = d.y;
+      this.forceSimulationActive = false;
+    }
+  }
+  /** Events handles when node single click   @private */
+  private onNodeClickToggleSidebar(): void {
+    this.sideBarOpened = true;
+  }
+}