src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts

/*
 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 Compose Component
 */
// tslint:disable: no-increment-decrement
import { HttpHeaders } from '@angular/common/http';
import { Component, ElementRef, Injector, ViewChild, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
import { NotifierService } from 'angular-notifier';
import { APIURLHEADER, CONSTANTNUMBER, ERRORDATA, MODALCLOSERESPONSEDATA, MODALCLOSERESPONSEWITHCP } from 'CommonModel';
import { ConfirmationTopologyComponent } from 'ConfirmationTopology';
import * as d3 from 'd3';
import { DataService } from 'DataService';
import { environment } from 'environment';
import * as HttpStatus from 'http-status-codes';
import * as jsyaml from 'js-yaml';
import { COMPOSERNODES, CONSTITUENTVNFD, GRAPHDETAILS, NSDDetails, Tick, TickPath, VLD, VNFDCONNECTIONPOINTREF } from 'NSDModel';
import { RestService } from 'RestService';
import { SharedService } from 'SharedService';
import { isNullOrUndefined } from 'util';
import { VNFData, VNFDDetails } from 'VNFDModel';

/**
 * Creating component
 * @Component takes NSComposerComponent.html as template url
 */
@Component({
  selector: 'app-ns-composer',
  templateUrl: './NSComposerComponent.html',
  styleUrls: ['./NSComposerComponent.scss'],
  encapsulation: ViewEncapsulation.None
})
/** Exporting a class @exports NSComposerComponent */
export class NSComposerComponent {
  /** To inject services @public */
  public injector: Injector;
  /** View child contains graphContainer ref @public  */
  @ViewChild('graphContainer', { static: true }) public graphContainer: ElementRef;
  /** dataService to pass the data from one component to another @public */
  public dataService: DataService;
  /** Contains VNFD Informations @public */
  public vnfdPackageDetails: VNFData = { identifier: '', shortName: '', vendor: '', description: '', version: '', id: '', name: '' };
  /** Contains VL Details @public */
  public vlDetails: VLD = {
    name: '',
    'mgmt-network': true,
    'vim-network-name': '',
    type: '',
    id: ''
  };
  /** Contains the information of the type of modification @public  */
  public putType: string;
  /** Conatins mousedown action @public */
  public mousedownNode: COMPOSERNODES = null;
  /** Conatins mouseup action @public */
  public mouseupNode: COMPOSERNODES = null;
  /** Conatins mousedownLink action @public */
  public mousedownLink: COMPOSERNODES = null;
  /** Conatins current Selection node action @public */
  public currentSelectedNode: COMPOSERNODES = null;
  /** Conatins current Selection node action @public */
  public currentSelectedLink: COMPOSERNODES = null;
  /** Need to show the NSD Details @public */
  public isShowNSDDetails: boolean = true;
  /** Contains the node information of VL @public */
  public vlNodes: {}[] = [];
  /** Need to show the VL Details @public */
  public isShowVLDetails: boolean = false;
  /** Contains the node information of VNF @public */
  public vnfNodes: {}[] = [];
  /** contains the VNF Details @public */
  public vnfData: CONSTITUENTVNFD;
  /** Need to show the VNF Details @public */
  public isShowVNFDetails: boolean = false;
  /** Contains the node information of CP @public */
  public cpNodes: {}[] = [];
  /** Need to show the CP Details */
  public cpData: VNFDCONNECTIONPOINTREF;
  /** Need to show the VNF Details @public */
  public isShowCPDetails: boolean = false;
  /** random number count @public */
  public randomNumberLength: number;
  /** Contains the vnfd information @public */
  public vnfList: VNFDDetails[] = [];
  /** 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';
  /** Get VNF selected node @public */
  public getVNFSelectedData: VNFDDetails[];
  /** 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 = false;
  /** Contains SVG attributes @private */
  // tslint:disable-next-line:no-any
  private svg: any;
  /** Contains the Drag line */
  // tslint:disable-next-line: no-any
  private dragLine: any;
  /** Contains VL node @private */
  // tslint:disable-next-line:no-any
  private vlNode: any;
  /** Contains VNFD node @private */
  // tslint:disable-next-line:no-any
  private vnfdnode: any;
  /** Contains CP node @private */
  // tslint:disable-next-line:no-any
  private cpnode: any;
  /** Rendered nodes represent VL @private */
  // tslint:disable-next-line:no-any
  private gvlNode: any;
  /** Rendered nodes represent VL @private */
  // tslint:disable-next-line:no-any
  private gvnfdNode: any;
  /** Rendered nodes represent VL @private */
  // tslint:disable-next-line:no-any
  private gcpNode: any;
  /** Contains forced node animations @private */
  // tslint:disable-next-line:no-any
  private force: any;
  /** Contains all the selected node @private */
  private selectedNode: COMPOSERNODES[] = [];
  /** variables used for CP @private */
  private iConnectionPointRef: number = 0;
  /** Contains the connected point @private */
  private connectionPoint: string;
  /** Contains all the NSD information @private */
  private nsd: string;
  /** Contains all the VNFD information @private */
  private vnfd: string;
  /** Contains id of the node @private */
  private identifier: string;
  /** Variables used for cp @private */
  private jConnectionPointRef: number = 0;
  /** Contains copy of NSD information @private */
  private nsdCopy: string;
  /** Contains the VNFD copy @private */
  private vnfdCopy: string;
  /** Contains name of the node @private */
  private name: string;
  /** Contains member vnf index value of the node @private */
  private memberVnfIndexValue: number = 0;
  /** Contains path information of the node */
  // tslint:disable-next-line:no-any
  private path: any;
  /** Contains the node information @private */
  private nodes: COMPOSERNODES[] = [];
  /** Contains the link information of nodes @private */
  private links: {}[] = [];
  /** Contains the NS information @private */
  private nsData: NSDDetails;
  /** Instance of the rest service @private */
  private restService: RestService;
  /** Service holds the router information @private */
  private router: Router;
  /** Holds teh instance of AuthService class of type AuthService @private */
  private activatedRoute: ActivatedRoute;
  /** Notifier service to popup notification @private */
  private notifierService: NotifierService;
  /** Controls the header form @private */
  private headers: HttpHeaders;
  /** Contains tranlsate instance @private */
  private translateService: TranslateService;
  /** Contains lastkeypressed instance @private */
  private lastKeyDown: number = -1;
  /** Instance of the modal service @private */
  private modalService: NgbModal;
  /** Setting the Value of connection point refrence of the CP @private */
  private setVnfdConnectionPointRef: string;
  /** Setting the Value of VL name for confirmation @private */
  private vlName: string;
  /** Setting the Value of VNFD name for confirmation @private */
  private setVnfdName: string;
  /** Contains all methods related to shared @private */
  private sharedService: SharedService;
  /** Contains selected node VLD objects @private */
  private selectedVLDResult: VLD;

  constructor(injector: Injector) {
    this.injector = injector;
    this.restService = this.injector.get(RestService);
    this.dataService = this.injector.get(DataService);
    this.router = this.injector.get(Router);
    this.activatedRoute = this.injector.get(ActivatedRoute);
    this.notifierService = this.injector.get(NotifierService);
    this.translateService = this.injector.get(TranslateService);
    this.modalService = this.injector.get(NgbModal);
    this.sharedService = this.injector.get(SharedService);
  }
  /** Lifecyle Hooks the trigger before component is instantiate @public */
  public ngOnInit(): void {
    // tslint:disable-next-line:no-backbone-get-set-outside-model
    this.identifier = this.activatedRoute.snapshot.paramMap.get('id');
    this.generateData();
    this.headers = new HttpHeaders({
      'Content-Type': 'application/zip',
      Accept: 'application/json',
      'Cache-Control': 'no-cache, no-store, must-revalidate, max-age=0'
    });
  }
  /** Events handles at drag on D3 region @public */
  // tslint:disable-next-line:no-any
  public drag(ev: any): void {
    if (ev.target.id === 'vl') {
      ev.dataTransfer.setData('text', ev.target.id);
    } else {
      ev.dataTransfer.setData('text', ev.target.attributes['data-id'].value);
    }
  }
  /** On clicking redirect to NS edit page @public */
  public onEdit(): void {
    this.router.navigate(['/packages/ns/edit/', this.identifier]).catch(() => {
      // Catch Navigation Error
    });
  }
  /** Events handles drop at D3 region @public */
  public drop(ev: DragEvent): void {
    event.preventDefault();
    this.name = ev.dataTransfer.getData('text');
    if (this.name === 'vl') {
      this.svg.selectAll('*').remove();
      this.vldropComposer();
    } else {
      this.svg.selectAll('*').remove();
      this.vnfd = ev.dataTransfer.getData('text');
      this.vnfdropComposer();
    }
  }
  /** Drop VL Composer Data @public */
  public vldropComposer(): void {
    this.randomNumberLength = CONSTANTNUMBER.randomNumber;
    const generateId: string = 'ns_vl_' + this.randomString(
      this.randomNumberLength,
      '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    );
    if (this.nsData.vld !== undefined) {
      this.nsData.vld.push({
        'vim-network-name': 'PUBLIC',
        name: generateId,
        'mgmt-network': true,
        type: 'ELAN',
        id: generateId
      });
    } else {
      Object.assign(this.nsData, {
        vld: [{
          'vim-network-name': 'PUBLIC',
          name: generateId,
          'mgmt-network': true,
          type: 'ELAN',
          id: generateId
        }]
      });
    }
    this.putType = 'nsdadd';
    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
  }
  /** Drop VNFD Composer Data @public */
  public vnfdropComposer(): void {
    if (this.nsData['constituent-vnfd'] !== undefined) {
      this.nsData['constituent-vnfd'].push({
        'vnfd-id-ref': this.vnfd,
        'member-vnf-index': ++this.memberVnfIndexValue
      });
    } else {
      Object.assign(this.nsData, {
        'constituent-vnfd': [{
          'vnfd-id-ref': this.vnfd,
          'member-vnf-index': ++this.memberVnfIndexValue
        }]
      });
    }
    this.putType = 'vnfdadd';
    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
  }
  /** Events handles allow drop on D3 region @public */
  public allowDrop(ev: DragEvent): void {
    ev.preventDefault();
  }
  /** Save NSD Information @public */
  public saveNSD(): void {
    if (this.vnfdPackageDetails.shortName !== undefined) {
      this.nsData['short-name'] = this.vnfdPackageDetails.shortName;
    }
    if (this.vnfdPackageDetails.vendor !== undefined) {
      this.nsData.vendor = this.vnfdPackageDetails.vendor;
    }
    if (this.vnfdPackageDetails.description !== undefined) {
      this.nsData.description = this.vnfdPackageDetails.description;
    }
    if (this.vnfdPackageDetails.version !== undefined) {
      this.nsData.version = this.vnfdPackageDetails.version;
    }
    if (this.vnfdPackageDetails.id !== undefined) {
      this.nsData.id = this.vnfdPackageDetails.id;
    }
    if (this.vnfdPackageDetails.name !== undefined) {
      this.nsData.name = this.vnfdPackageDetails.name;
    }
    this.putType = 'nsdUpdate';
    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
  }
  /** Save Virtual Link @public */
  public saveVL(vlid: string): void {
    this.nsData.vld.forEach((result: VLD) => {
      if (result.id === vlid) {
        result.name = this.vlDetails.name;
        result['mgmt-network'] = !isNullOrUndefined(this.vlDetails['mgmt-network']) ? this.vlDetails['mgmt-network'] : true;
        result['vim-network-name'] = !isNullOrUndefined(this.vlDetails['vim-network-name']) ? this.vlDetails['vim-network-name'] : '';
        result.type = this.vlDetails.type;
        result.id = this.vlDetails.id;
      }
    });
    this.putType = 'vlUpdate';
    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
  }
  /** Add the new Data @public */
  public addData(apiURL: string, identifier: string, data: NSDDetails, putType: string): void {
    this.isLoadingResults = true;
    let successMessage: string = '';
    if (putType === 'nsdadd') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.ADDNSD';
    } else if (putType === 'vnfdadd') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.ADDVNFD';
    } else if (putType === 'cpAdded') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.ADDNS';
    } else if (putType === 'nsdUpdate') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.UPDATEDSUCCESSFULLY';
    } else if (putType === 'vlUpdate') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.UPDATEDSUCCESSFULLY';
    } else if (putType === 'nsddelete') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETENSD';
    } else if (putType === 'vnfddelete') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETEVNFD';
    } else if (putType === 'nsdelete') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETENS';
    } else if (putType === 'linkdelete') {
      successMessage = 'PAGE.NSPACKAGE.NSCOMPOSE.DELETELINK';
    }
    /** Below hide for conflicts with light weight UI */
    const apiURLHeader: APIURLHEADER = {
      url: apiURL + '/' + identifier + '/nsd_content',
      httpOptions: { headers: this.headers }
    };
    const nsData: {} = {};
    nsData['nsd:nsd-catalog'] = {};
    nsData['nsd:nsd-catalog'].nsd = [];
    nsData['nsd:nsd-catalog'].nsd.push(data);
    const descriptorInfo: string = jsyaml.dump(nsData, {sortKeys: true});
    this.sharedService.targzFile({ packageType: 'nsd', id: this.identifier, descriptor: descriptorInfo })
      .then((content: ArrayBuffer): void => {
        this.restService.putResource(apiURLHeader, content).subscribe((res: {}) => {
          this.generateData();
          this.notifierService.notify('success', this.translateService.instant(successMessage));
          this.isLoadingResults = false;
        }, (error: ERRORDATA) => {
          this.generateData();
          this.restService.handleError(error, 'put');
          this.isLoadingResults = false;
        });
      }).catch((): void => {
        this.notifierService.notify('error', this.translateService.instant('ERROR'));
        this.isLoadingResults = false;
      });
  }
  /** Show Info @public */
  public showInfo(): void {
    const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
    modalRef.componentInstance.topologyType = 'Info';
    modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.INFO');
    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
      if (result) {
        // empty
      }
    }).catch();
  }
  /** 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, false);
  }
  /** Prepare information for node creation of VNFD @private */
  private generateData(): void {
    this.generateVNFData();
    this.generateDataNSDTopology();
    this.sideBarOpened = false;
  }
  /** Prepare the information of the VNFD @private */
  private generateVNFData(): void {
    this.restService.getResource(environment.VNFPACKAGESCONTENT_URL).subscribe((vnfdPackageData: VNFDDetails[]) => {
      this.vnfList = vnfdPackageData;
    }, (error: ERRORDATA) => {
      this.restService.handleError(error, 'get');
    });
  }
  /** Prepare information for node creation of NSD Topology @private */
  private generateDataNSDTopology(): void {
    this.nodes = [];
    this.links = [];
    this.iConnectionPointRef = 0;
    this.jConnectionPointRef = 0;
    this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL + '/' + this.identifier).subscribe((nsData: NSDDetails) => {
      delete nsData._admin;
      delete nsData._id;
      delete nsData._links;
      this.nsData = nsData;
      this.vnfdPackageDetails.shortName = nsData['short-name'];
      this.vnfdPackageDetails.vendor = nsData.vendor;
      this.vnfdPackageDetails.description = nsData.description;
      this.vnfdPackageDetails.version = nsData.version;
      this.vnfdPackageDetails.id = nsData.id;
      this.vnfdPackageDetails.name = nsData.name;
      if (nsData.vld !== undefined) {
        /** Details of the VL */
        this.nsDataVLD(nsData);
      }
      if (nsData['constituent-vnfd'] !== undefined) {
        /** Details of the VNFD */
        this.nsDataConstituentVNFD(nsData);
      }
      if (nsData.vld !== undefined) {
        this.nsDataVLDLinkCreation(nsData);
      }
      this.separateAndCreatenode();
    }, (error: ERRORDATA) => {
      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');
      }
      this.isLoadingResults = false;
      this.isShowNSDDetails = false;
    });
  }
  /** nsData-vld undefined Call this function @private */
  private nsDataVLD(nsData: NSDDetails): void {
    nsData.vld.forEach((res: VLD) => {
      this.nodes.push({ id: res.id, reflexive: false, type: 'vld', name: res.id, selectorId: res.id });
      this.nsd = res.id;
      if (res['vnfd-connection-point-ref'] !== undefined) {
        res['vnfd-connection-point-ref'].forEach((result: VNFDCONNECTIONPOINTREF) => {
          this.nodes.push(
            {
              id: this.nsd + ++this.iConnectionPointRef + ':' + result['vnfd-connection-point-ref'],
              reflexive: false,
              type: 'ns',
              name: result['vnfd-connection-point-ref'],
              nodeIndex: result['member-vnf-index-ref'],
              selectorId: result['vnfd-connection-point-ref'] + '_' + result['member-vnf-index-ref'] + '-osm-' + this.nsd
            });
        });
      }
    });
  }
  /** nsData constituent-vnfd undefined Call this function @private */
  private nsDataConstituentVNFD(nsData: NSDDetails): void {
    nsData['constituent-vnfd'].forEach((res: CONSTITUENTVNFD) => {
      this.nodes.push(
        {
          id: res['vnfd-id-ref'] + ':' + res['member-vnf-index'],
          reflexive: false,
          type: 'vnfd',
          name: res['vnfd-id-ref'],
          nodeIndex: res['member-vnf-index'],
          selectorId: res['vnfd-id-ref'] + '_' + res['member-vnf-index']
        });
      this.vnfd = res['vnfd-id-ref'];
      this.memberVnfIndexValue = res['member-vnf-index'];
    });
  }

  /** nsData-vld undefined Call this function @private */
  private nsDataVLDLinkCreation(nsData: NSDDetails): void {
    nsData.vld.forEach((res: VLD) => {
      this.nsdCopy = res.id;
      if (res['vnfd-connection-point-ref'] !== undefined) {
        this.nsDataVNFDConnectionPointRefrence(res);
      }
    });
  }
  /** nsData-vnfd-connection-point-ref undefined Call this function @private */
  private nsDataVNFDConnectionPointRefrence(res: VLD): void {
    res['vnfd-connection-point-ref'].forEach((result: VNFDCONNECTIONPOINTREF) => {
      this.connectionPoint = this.nsdCopy + ++this.jConnectionPointRef + ':' + result['vnfd-connection-point-ref'];
      this.vnfdCopy = result['vnfd-id-ref'] + ':' + result['member-vnf-index-ref'];
      const connectionPointPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.connectionPoint);
      const nsdPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.nsdCopy);
      const vnfdPos: number = this.nodes.map((e: COMPOSERNODES) => { return e.id; }).indexOf(this.vnfdCopy);
      this.links.push(
        {
          source: this.nodes[connectionPointPos],
          target: this.nodes[nsdPos]
        },
        {
          source: this.nodes[connectionPointPos],
          target: this.nodes[vnfdPos]
        });
    });
  }
  /** Generate random string @private  */
  private randomString(length: number, chars: string): string {
    let result: string = '';
    for (let randomStringRef: number = length; randomStringRef > 0; --randomStringRef) {
      result += chars[Math.floor(Math.random() * chars.length)];
    }
    return result;
  }
  /** Separate and create node @private */
  private separateAndCreatenode(): void {
    this.seprateNodes(this.nodes);
    this.createnode(this.nodes);
    this.isLoadingResults = 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
    };
  }
  /** Separate the nodes along with its tyep @private */
  private seprateNodes(node: COMPOSERNODES[]): void {
    this.vlNodes = []; this.vnfNodes = []; this.cpNodes = [];
    node.forEach((nodeList: COMPOSERNODES) => {
      if (nodeList.type === 'vld') {
        this.vlNodes.push(nodeList);
      } else if (nodeList.type === 'vnfd') {
        this.vnfNodes.push(nodeList);
      } else if (nodeList.type === 'ns') {
        this.cpNodes.push(nodeList);
      }
    });
  }
  /** Node is created and render at D3 region @private */
  private createnode(node: COMPOSERNODES[]): 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)
      .on('mousemove', () => { this.mousemove(); });
    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(); });
    this.dragLine = this.svg.append('svg:path').attr('class', 'link dragline hidden').attr('d', 'M0,0L0,0');
    this.path = this.svg.append('svg:g').selectAll('path');
    this.vlNode = this.svg.append('svg:g').selectAll('vlnode');
    this.vnfdnode = this.svg.append('svg:g').selectAll('vnfdnode');
    this.cpnode = this.svg.append('svg:g').selectAll('cpnode');
    // app starts here
    this.restart(node);
  }
  /** 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}`;
    }).on('dblclick', (d: Tick) => { this.getDeleteLinkConfirmation(d); });
    this.vlNode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
    this.vnfdnode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
    this.cpnode.attr('transform', (t: TickPath) => `translate(${t.x},${t.y})`);
  }
  /** Update graph (called when needed) at D3 region @private */
  private restart(node: COMPOSERNODES[]): void {
    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
    this.path = this.path.data(this.links);
    this.vlNode = this.vlNode.data(this.vlNodes, (d: COMPOSERNODES) => d.id);
    this.vnfdnode = this.vnfdnode.data(this.vnfNodes, (d: COMPOSERNODES) => d.id);
    this.cpnode = this.cpnode.data(this.cpNodes, (d: COMPOSERNODES) => d.id);
    this.resetAndCreateNodes();
    this.force.nodes(node).force('link').links(this.links);
    this.force.alphaTarget(graphContainerAttr.alphaTarget).restart();
  }
  /** Rest and create nodes @private */
  private resetAndCreateNodes(): void {
    this.path.exit().remove();
    this.vlNode.exit().remove();
    this.vnfdnode.exit().remove();
    this.cpnode.exit().remove();
    this.getPathNodes();
    this.getVLNodes();
    this.getVNFDNodes();
    this.getCPNodes();
    this.path.merge(this.path);
    this.vlNode = this.gvlNode.merge(this.vlNode);
    this.vnfdnode = this.gvnfdNode.merge(this.vnfdnode);
    this.cpnode = this.gcpNode.merge(this.cpnode);
  }
  /** setting the Path @private */
  private getPathNodes(): void {
    this.path = this.path.enter().append('svg:path');
  }
  /** Setting all the VL nodes @private */
  private getVLNodes(): void {
    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
    this.gvlNode = this.vlNode.enter().append('svg:g');
    this.gvlNode.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
    this.gvlNode.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('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); })
      .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); })
      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.vlNode, d); this.onNodeClickToggleSidebar(); })
      .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
    this.gvlNode.append('svg:text')
      .attr('class', 'node_text')
      .attr('y', graphContainerAttr.textY)
      .text((d: COMPOSERNODES) => d.id);
  }
  /** Setting all the VNFD nodes @private */
  private getVNFDNodes(): void {
    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
    this.gvnfdNode = this.vnfdnode.enter().append('svg:g');
    this.gvnfdNode.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
    this.gvnfdNode.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('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); })
      .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); })
      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.vnfdnode, d); this.onNodeClickToggleSidebar(); })
      .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
    this.gvnfdNode.append('svg:text')
      .attr('class', 'node_text')
      .attr('y', graphContainerAttr.textY)
      .text((d: COMPOSERNODES) => d.id);
  }
  /** Setting all the CP nodes @private */
  private getCPNodes(): void {
    const graphContainerAttr: GRAPHDETAILS = this.getGraphContainerAttr();
    this.gcpNode = this.cpnode.enter().append('svg:g');
    this.gcpNode.append('svg:circle').attr('r', graphContainerAttr.radius).style('fill', '#eeeeee');
    this.gcpNode.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/CP.svg')
      .on('mousedown', (d: COMPOSERNODES) => { this.mouseDown(d); })
      .on('mouseup', (d: COMPOSERNODES) => { this.mouseUp(d); })
      .on('click', (d: COMPOSERNODES) => { this.singleClick(this.cpnode, d); this.onNodeClickToggleSidebar(); })
      .on('dblclick', (d: COMPOSERNODES) => { this.getDeleteConfirmation(d); this.onNodedblClickToggleSidebar(); });
    this.gcpNode.append('svg:text')
      .attr('class', 'node_text')
      .attr('y', graphContainerAttr.textY)
      .text((d: COMPOSERNODES) => d.id);
  }
  /** Events handles when mousemove it will capture the selected node data @private */
  private mousemove(): void {
    if (!this.mousedownNode) { return; }
    this.dragLine.attr('d',
      `M${this.mousedownNode.x},${this.mousedownNode.y}L${d3.mouse(d3.event.currentTarget)[0]},${d3.mouse(d3.event.currentTarget)[1]}`);
  }
  /** Get confirmation Before Deleting the Link in Topology @private */
  private getAddConfirmation(mouseData: COMPOSERNODES, getNsData: NSDDetails, addType: string, getVLDIndex: number): void {
    let findVNFName: string = '';
    let findVLDID: string = '';
    if (mouseData.type === 'vld') {
      findVNFName = this.mouseupNode.name;
      findVLDID = this.mousedownNode.id;
    } else {
      findVNFName = this.mousedownNode.name;
      findVLDID = this.mouseupNode.id;
    }
    getNsData.vld.forEach((result: VLD) => {
      if (result.id === findVLDID) {
        this.vlName = result.name;
        this.getVNFSelectedData = this.vnfList.filter((vnfList: VNFDDetails) => vnfList.id === findVNFName);
        this.setVnfdConnectionPointRef = this.getVNFSelectedData[0]['mgmt-interface'].cp;
        this.setVnfdName = this.getVNFSelectedData[0].name;
        this.selectedVLDResult = result;
      }
    });
    if (this.vlName !== undefined && this.setVnfdName !== undefined && this.setVnfdConnectionPointRef !== undefined) {
      const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
      modalRef.componentInstance.topologyType = 'Add';
      modalRef.componentInstance.cpDetails = this.getVNFSelectedData[0]['connection-point'];
      this.translateService.get('PAGE.TOPOLOGY.ADDINGCP', {
        vlname: '<b>' + this.vlName + '</b>',
        vnfdname: '<b>' + this.setVnfdName + '</b>',
        cpname: '<b>' + this.setVnfdConnectionPointRef + '</b>'
      }).subscribe((res: string) => {
        modalRef.componentInstance.topologyname = res;
      });
      modalRef.componentInstance.topologytitle = this.translateService.instant('PAGE.TOPOLOGY.CONNECTIONPOINT');
      modalRef.result.then((result: MODALCLOSERESPONSEWITHCP) => {
        if (result) {
          this.nsData = getNsData;
          this.generateCPForVNF(this.selectedVLDResult, result.connection_point, getVLDIndex);
          this.addData(environment.NSDESCRIPTORS_URL, this.identifier, getNsData, addType);
        } else {
          this.deselectPath();
        }
      }).catch();
    } else {
      this.deselectPath();
      this.notifierService.notify('error', this.translateService.instant('ERROR'));
    }
  }

  /** Generate connection point for vnf using vld @private */
  private generateCPForVNF(result: VLD, cp: string, getVLDIndex: number): void {
    if (result['vnfd-connection-point-ref'] !== undefined) {
      result['vnfd-connection-point-ref'].push({
        'member-vnf-index-ref': getVLDIndex,
        'vnfd-connection-point-ref': cp,
        'vnfd-id-ref': this.getVNFSelectedData[0].name
      });
    } else {
      Object.assign(result, {
        'vnfd-connection-point-ref': [{
          'member-vnf-index-ref': getVLDIndex,
          'vnfd-connection-point-ref': cp,
          'vnfd-id-ref': this.getVNFSelectedData[0].name
        }]
      });
    }
  }

  /** Events handles when mousedown click it will capture the selected node data @private */
  private mouseDown(d: COMPOSERNODES): void {
    event.preventDefault();
    if (d3.event.ctrlKey) { return; }
    if (d3.event.shiftKey) {
      if (d.type === 'vnfd') {
        this.selectedNode.push(d);
      }
      this.mousedownNode = d;
      this.currentSelectedNode = (this.mousedownNode === this.currentSelectedNode) ? null : this.mousedownNode;
      this.currentSelectedLink = null;
      this.dragLine.style('marker-end', 'url(#end-arrow)').classed('hidden', false)
        .attr('d', `M${this.mousedownNode.x},${this.mousedownNode.y}L${this.mousedownNode.x},${this.mousedownNode.y}`);
    }
  }
  /** Event handles when mouseup event occures @private */
  private mouseUp(d: COMPOSERNODES): void {
    if (!this.mousedownNode) { return; }
    this.dragLine.classed('hidden', true).style('marker-end', '');
    this.mouseupNode = d;
    if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'vnfd') {
      const getOldVLDIndex: string[] = this.mouseupNode.id.split(':');
      const setOldVLDindex: number = +getOldVLDIndex[1];
      this.putType = 'cpAdded';
      this.getAddConfirmation(this.mousedownNode, this.nsData, this.putType, setOldVLDindex);
    } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'vld') {
      const getOldVLDIndex: string[] = this.mousedownNode.id.split(':');
      const setOldVLDindex: number = +getOldVLDIndex[1];
      this.putType = 'cpAdded';
      this.getAddConfirmation(this.mousedownNode, this.nsData, this.putType, setOldVLDindex);
    } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'ns') {
      this.deselectPath();
      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVNFCP'));
    } else if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'ns') {
      this.deselectPath();
      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVNFCP'));
    } else if (this.mousedownNode.type === 'vld' && this.mouseupNode.type === 'vld') {
      this.deselectPath();
      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVL'));
    } else if (this.mousedownNode.type === 'vnfd' && this.mouseupNode.type === 'vnfd') {
      this.deselectPath();
      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVNF'));
    } else if (this.mousedownNode.type === 'ns' && this.mouseupNode.type === 'ns') {
      this.deselectPath();
      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKCP'));
    } else {
      this.deselectPath();
      this.notifierService.notify('warning', this.translateService.instant('PAGE.NSPACKAGE.NSCOMPOSE.CANNOTLINKVLVNF'));
    }
    this.resetMouseVars();
    // select new link
    this.currentSelectedLink = d;
    this.currentSelectedNode = null;
  }
  /** Mosue Drag Line false if it is not satisfied @private */
  private deselectPath(): void {
    this.dragLine.classed('hidden', true).style('marker-end', '').attr('d', 'M0,0L0,0');
  }
  /** reset Mouse varaibles @private */
  private resetMouseVars(): void {
    this.mousedownNode = null;
    this.mouseupNode = null;
    this.mousedownLink = null;
  }
  /** De-select all the selected nodes @private */
  private deselectAllNodes(): void {
    this.vlNode.select('image').classed(this.activeClass, false);
    this.vnfdnode.select('image').classed(this.activeClass, false);
    this.cpnode.select('image').classed(this.activeClass, false);
  }
  /** Show the right-side information @private */
  private showRightSideInfo(nsdDetails: boolean, vldDetails: boolean, vnfDeails: boolean, cpDetails: boolean): void {
    this.isShowNSDDetails = nsdDetails;
    this.isShowVLDetails = vldDetails;
    this.isShowVNFDetails = vnfDeails;
    this.isShowCPDetails = cpDetails;
  }
  /** 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(nodeSeleced: any, d: COMPOSERNODES): void {
    const alreadyIsActive: boolean = nodeSeleced.select('#' + d.selectorId).classed(this.activeClass);
    this.deselectAllNodes();
    nodeSeleced.select('#' + d.selectorId).classed(this.activeClass, !alreadyIsActive);
    if (d.type === 'vld' && !alreadyIsActive) {
      this.nsData.vld.forEach((result: VLD) => {
        if (result.id === d.id) {
          this.showRightSideInfo(false, true, false, false);
          this.vlDetails = result;
        }
      });
    } else if (d.type === 'vnfd' && !alreadyIsActive) {
      this.nsData['constituent-vnfd'].forEach((result: CONSTITUENTVNFD) => {
        if (result['member-vnf-index'] === d.nodeIndex && result['vnfd-id-ref'] === d.name) {
          this.showRightSideInfo(false, false, true, false);
          this.vnfData = result;
        }
      });
    } else if (d.type === 'ns' && !alreadyIsActive) {
      this.nsData.vld.forEach((result: VLD) => {
        if (result['vnfd-connection-point-ref'] !== undefined) {
          result['vnfd-connection-point-ref'].forEach((resultCP: VNFDCONNECTIONPOINTREF) => {
            if (resultCP['member-vnf-index-ref'] === d.nodeIndex && resultCP['vnfd-connection-point-ref'] === d.name) {
              this.cpData = resultCP;
              this.vlDetails = result;
              this.showRightSideInfo(false, false, false, true);
            }
          });
        }
      });
    } else {
      this.showRightSideInfo(true, false, false, false);
    }
  }
  /** Get confirmation Before Deleting the Link in Topology @private */
  private getDeleteLinkConfirmation(d: Tick): void {
    const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
    modalRef.componentInstance.topologyType = 'Delete';
    modalRef.componentInstance.topologyname = this.translateService.instant('PAGE.TOPOLOGY.LINK');
    modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.LINK';
    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
      if (result) {
        this.doubleClickLink(d);
      }
    }).catch();
  }
  /** Events handles when Double Click to Delete the link @private */
  private doubleClickLink(d: Tick): void {
    let getID: string = '';
    if (d.target.type === 'vld') {
      getID = d.target.id;
    } else if (d.source.type === 'vld') {
      getID = d.source.id;
    }
    this.nodes.forEach((res: COMPOSERNODES) => {
      if (res.id === getID) {
        if (this.nsData.vld !== undefined) {
          this.nsData.vld.forEach((vldresult: VLD) => {
            if (vldresult.id === getID) {
              delete vldresult['vnfd-connection-point-ref'];
            }
          });
        }
      }
    });
    this.putType = 'linkdelete';
    this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
  }
  /** Get confirmation Before Deleting the Node in Topology @private */
  private getDeleteConfirmation(d: COMPOSERNODES): void {
    const modalRef: NgbModalRef = this.modalService.open(ConfirmationTopologyComponent, { backdrop: 'static' });
    modalRef.componentInstance.topologyType = 'Delete';
    modalRef.componentInstance.topologyname = d.name;
    if (d.type === 'vld') {
      modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.VIRTUALLINK';
    } else if (d.type === 'vnfd') {
      modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.VNF';
    } else if (d.type === 'ns') {
      modalRef.componentInstance.topologytitle = 'PAGE.TOPOLOGY.CONNECTIONPOINT';
    }
    modalRef.result.then((result: MODALCLOSERESPONSEDATA) => {
      if (result) {
        this.doubleClick(d);
      }
    }).catch();
  }
  /** Events handles when Double Click to Delete @private */
  private doubleClick(d: COMPOSERNODES): void {
    const deletedNode: COMPOSERNODES = d;
    this.nodes.forEach((res: COMPOSERNODES) => {
      if (res.id === d.id) {
        if (deletedNode.type === 'vld') {
          const pos: number = this.nsData.vld.map((e: VLD) => { return e.id; }).indexOf(d.id);
          this.nsData.vld.splice(pos, 1);
          this.putType = 'nsddelete';
        } else if (deletedNode.type === 'vnfd') {
          const constituentVNFD: string[] = [];
          if (this.nsData['constituent-vnfd'] !== undefined) {
            this.nsData['constituent-vnfd'].forEach((ref: CONSTITUENTVNFD) => {
              constituentVNFD.push(ref['vnfd-id-ref'] + ':' + ref['member-vnf-index']);
            });
          }
          const pos: number = constituentVNFD.map((e: string) => { return e; }).indexOf(d.id);
          this.nsData['constituent-vnfd'].splice(pos, 1);
          const getCP: string[] = d.id.split(':');
          const memberVnfIndexRef: number = +getCP[1];
          const vnfdIDRef: string = getCP[0];
          if (this.nsData.vld !== undefined) {
            this.nsData.vld.forEach((resf: VLD) => {
              if (resf['vnfd-connection-point-ref'] !== undefined) {
                resf['vnfd-connection-point-ref'].forEach((connectionPoint: VNFDCONNECTIONPOINTREF, index: number) => {
                  if (+connectionPoint['member-vnf-index-ref'] === memberVnfIndexRef && connectionPoint['vnfd-id-ref'] === vnfdIDRef) {
                    resf['vnfd-connection-point-ref'].splice(index, 1);
                  }
                });
              }
            });
          }
          this.putType = 'vnfddelete';
        } else if (deletedNode.type === 'ns') {
          const getCP: string[] = d.selectorId.split('-osm-');
          const memberVnfIndexRef: number = d.nodeIndex;
          const vnfdIDRef: string = getCP[getCP.length - 1];
          if (this.nsData.vld !== undefined) {
            this.nsData.vld.forEach((resf: VLD) => {
              if (resf['vnfd-connection-point-ref'] !== undefined && resf.id === vnfdIDRef) {
                resf['vnfd-connection-point-ref'].forEach((connectionPoint: VNFDCONNECTIONPOINTREF, index: number) => {
                  if (connectionPoint['member-vnf-index-ref'] === memberVnfIndexRef) {
                    resf['vnfd-connection-point-ref'].splice(index, 1);
                  }
                });
              }
            });
          }
          this.putType = 'nsdelete';
        }
        this.addData(environment.NSDESCRIPTORS_URL, this.identifier, this.nsData, this.putType);
      }
    });
  }
  /** 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.gvlNode.call(d3.drag()
        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
      );
      this.gvnfdNode.call(d3.drag()
        .on('start', this.dragstarted).on('drag', this.dragged).on('end', this.dragended)
      );
      this.gcpNode.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.gvlNode.on('.drag', null);
      this.gvnfdNode.on('.drag', null);
      this.gcpNode.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 double click   @private */
  private onNodedblClickToggleSidebar(): void {
    this.sideBarOpened = false;
  }
  /** Events handles when node single click   @private */
  private onNodeClickToggleSidebar(): void {
    this.sideBarOpened = true;
  }
}