graph-v2 refactoring

Issue-ID: SDC-1789

Change-Id: Ic06c392a62a9db35d561e62c95ecb2a53e428cd9
Signed-off-by: Anjali walsatwar <anjali.walsatwar@huawei.com>

4 files changed, 104 insertions, 105 deletions

diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
index f335ea02d9..159a1c8347 100644
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
@@ -28,7 +28,7 @@ import { ModulesNodesStyle } from "../common/style/module-node-style";
 import { GRAPH_EVENTS } from "app/utils";
 import { EventListenerService } from "app/services";
 import '@bardit/cytoscape-expand-collapse';
-import {AngularJSBridge} from "../../../services/angular-js-bridge-service";
+import { AngularJSBridge } from "../../../services/angular-js-bridge-service";
 
 interface IDeploymentGraphScope extends ng.IScope {
     component: Component;
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
index ebd1f5b205..5d0f38fd5e 100644
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
@@ -19,7 +19,7 @@
  */
 
 import * as _ from "lodash";
-import {Module} from "app/models";
+import { Module } from "app/models";
 /**
  * Created by obarda on 12/21/2016.
  */
@@ -30,8 +30,8 @@ export class DeploymentGraphGeneralUtils {
 
     }
 
-    public findInstanceModule = (groupsArray:Array<Module>, componentInstanceId:string):string => {
-        let parentGroup:Module = _.find(groupsArray, (group:Module) => {
+    public findInstanceModule = (groupsArray: Array<Module>, componentInstanceId: string): string => {
+        let parentGroup: Module = _.find(groupsArray, (group: Module) => {
             return _.find((<any>Object).values(group.members), (member: string) => {
                 return member === componentInstanceId;
             });
diff --git a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
index 68c9e9a459..19c86a254b 100644
--- a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
@@ -29,9 +29,9 @@ export interface ICanvasImage {
 'use strict';
 export class ImageCreatorService {
     static '$inject' = ['$q'];
-    private _canvas:HTMLCanvasElement;
+    private _canvas: HTMLCanvasElement;
 
-    constructor(private $q:ng.IQService) {
+    constructor(private $q: ng.IQService) {
         this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
         this._canvas.setAttribute('style', 'display:none');
 
@@ -46,10 +46,10 @@ export class ImageCreatorService {
      * @param canvasHeight 
      * returns a PROMISE
      */
-    getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?:number, canvasHeight?:number):ng.IPromise<string> {
+    getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?: number, canvasHeight?: number): ng.IPromise<string> {
         const deferred = this.$q.defer<string>();
 
-        if(canvasImages && canvasImages.length === 0){
+        if (canvasImages && canvasImages.length === 0) {
             return null;
         }
 
@@ -61,7 +61,7 @@ export class ImageCreatorService {
         let imagesLoaded = 0;
         const onImageLoaded = () => {
             imagesLoaded++;
-            if(imagesLoaded < canvasImages.length){
+            if (imagesLoaded < canvasImages.length) {
                 return;
             }
             this._canvas.setAttribute('width', canvasWidth.toString());
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
index ebc52c241b..01ddb146ac 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -18,68 +18,68 @@
  * ============LICENSE_END=========================================================
  */
 import * as _ from "lodash";
-import {Component, IAppMenu, LeftPanelModel, NodesFactory, LeftPaletteComponent, CompositionCiNodeBase, ComponentInstance, Point} from "app/models";
-import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils";
-import {EventListenerService} from "app/services";
-import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils";
+import { Component, IAppMenu, LeftPanelModel, NodesFactory, LeftPaletteComponent, CompositionCiNodeBase, ComponentInstance, Point } from "app/models";
+import { CompositionGraphGeneralUtils } from "../composition-graph/utils/composition-graph-general-utils";
+import { EventListenerService } from "app/services";
+import { ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler } from "app/utils";
 import 'sdc-angular-dragdrop';
-import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service";
-import {Resource} from "app/models/components/resource";
-import {ComponentType} from "app/utils/constants";
-import {LeftPaletteMetadataTypes} from "../../../models/components/displayComponent";
+import { LeftPaletteLoaderService } from "../../../services/components/utils/composition-left-palette-service";
+import { Resource } from "app/models/components/resource";
+import { ComponentType } from "app/utils/constants";
+import { LeftPaletteMetadataTypes } from "../../../models/components/displayComponent";
 import { IDirectiveLinkFn, IScope } from "angular";
 
 
-interface IPaletteScope extends IScope{
-    components:Array<LeftPaletteComponent>;
-    currentComponent:Component;
-    model:any;
-    displaySortedCategories:any;
-    expandedSection:string;
-    dragElement:JQuery;
-    dragbleNode:{
-        event:JQueryEventObject,
-        components:LeftPaletteComponent,
-        ui:any
+interface IPaletteScope extends IScope {
+    components: Array<LeftPaletteComponent>;
+    currentComponent: Component;
+    model: any;
+    displaySortedCategories: any;
+    expandedSection: string;
+    dragElement: JQuery;
+    dragbleNode: {
+        event: JQueryEventObject,
+        components: LeftPaletteComponent,
+        ui: any
     }
 
-    addInstanceClick: ()=>void; // added code
-    onPopupMouseOver: ()=>void  // added code
-    onPopupMouseOut: ()=>void   // added code
+    addInstanceClick: () => void; // added code
+    onPopupMouseOver: () => void  // added code
+    onPopupMouseOut: () => void   // added code
 
-    sectionClick:(section:string)=>void;
-    searchComponents:(searchText:string)=>void;
-    onMouseOver:(displayComponent:LeftPaletteComponent, elem: HTMLElement)=>void;
-    onMouseOut:(displayComponent:LeftPaletteComponent)=>void;
+    sectionClick: (section: string) => void;
+    searchComponents: (searchText: string) => void;
+    onMouseOver: (displayComponent: LeftPaletteComponent, elem: HTMLElement) => void;
+    onMouseOut: (displayComponent: LeftPaletteComponent) => void;
 
-    dragStartCallback:(event:JQueryEventObject, ui, displayComponent:LeftPaletteComponent)=>void;
-    dragStopCallback:()=>void;
-    onDragCallback:(event:JQueryEventObject) => void;
+    dragStartCallback: (event: JQueryEventObject, ui, displayComponent: LeftPaletteComponent) => void;
+    dragStopCallback: () => void;
+    onDragCallback: (event: JQueryEventObject) => void;
 
-    setElementTemplate:(e:JQueryEventObject)=>void;
+    setElementTemplate: (e: JQueryEventObject) => void;
 
-    isOnDrag:boolean;
-    isDragable:boolean;
-    isLoading:boolean;
-    isViewOnly:boolean;
+    isOnDrag: boolean;
+    isDragable: boolean;
+    isLoading: boolean;
+    isViewOnly: boolean;
 }
 
 export class Palette implements ng.IDirective {
-    constructor(private $log:ng.ILogService,
-                private LeftPaletteLoaderService: LeftPaletteLoaderService,
-                private sdcConfig,
-                private ComponentFactory,
-                private ComponentInstanceFactory:ComponentInstanceFactory,
-                private NodesFactory:NodesFactory,
-                private CompositionGraphGeneralUtils:CompositionGraphGeneralUtils,
-                private EventListenerService:EventListenerService,
-                private sdcMenu:IAppMenu,
-                private ModalsHandler:ModalsHandler
-            ) {
+    constructor(private $log: ng.ILogService,
+        private LeftPaletteLoaderService: LeftPaletteLoaderService,
+        private sdcConfig,
+        private ComponentFactory,
+        private ComponentInstanceFactory: ComponentInstanceFactory,
+        private NodesFactory: NodesFactory,
+        private CompositionGraphGeneralUtils: CompositionGraphGeneralUtils,
+        private EventListenerService: EventListenerService,
+        private sdcMenu: IAppMenu,
+        private ModalsHandler: ModalsHandler
+    ) {
     }
 
-    private fetchingComponentFromServer:boolean = false;
-    private nodeHtmlSubstitute:JQuery;
+    private fetchingComponentFromServer: boolean = false;
+    private nodeHtmlSubstitute: JQuery;
 
     scope = {
         currentComponent: '=',
@@ -89,7 +89,7 @@ export class Palette implements ng.IDirective {
     restrict = 'E';
     template = require('./palette.html');
 
-    link:IDirectiveLinkFn = (scope:IPaletteScope, el:JQuery) => {
+    link: IDirectiveLinkFn = (scope: IPaletteScope, el: JQuery) => {
         this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent);
         this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>');
         el.append(this.nodeHtmlSubstitute);
@@ -99,31 +99,31 @@ export class Palette implements ng.IDirective {
         this.initEvents(scope);
         this.initDragEvents(scope);
         this._initExpandedSection(scope, '');
-        el.on('$destroy', ()=> {
+        el.on('$destroy', () => {
             //remove listener of download event
             this.unRegisterEventListenerForLeftPalette(scope);
         });
     };
 
 
-    private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => {
+    private registerEventListenerForLeftPalette = (scope: IPaletteScope): void => {
         this.EventListenerService.registerObserverCallback(EVENTS.LEFT_PALETTE_UPDATE_EVENT, () => {
             this.updateLeftPanelDisplay(scope);
         });
     };
 
-    private unRegisterEventListenerForLeftPalette = (scope:IPaletteScope):void => {
+    private unRegisterEventListenerForLeftPalette = (scope: IPaletteScope): void => {
         this.EventListenerService.unRegisterObserver(EVENTS.LEFT_PALETTE_UPDATE_EVENT);
     };
 
-    private leftPanelResourceFilter(resourcesNotAbstract:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):Array<LeftPaletteComponent> {
+    private leftPanelResourceFilter(resourcesNotAbstract: Array<LeftPaletteComponent>, resourceFilterTypes: Array<string>): Array<LeftPaletteComponent> {
         let filterResources = _.filter(resourcesNotAbstract, (component) => {
             return resourceFilterTypes.indexOf(component.getComponentSubType()) > -1;
         });
         return filterResources;
     }
 
-    private initLeftPanel(leftPanelComponents:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):LeftPanelModel {
+    private initLeftPanel(leftPanelComponents: Array<LeftPaletteComponent>, resourceFilterTypes: Array<string>): LeftPanelModel {
         let leftPanelModel = new LeftPanelModel();
 
         if (resourceFilterTypes && resourceFilterTypes.length) {
@@ -133,7 +133,7 @@ export class Palette implements ng.IDirective {
 
         if (leftPanelComponents && leftPanelComponents.length) {
 
-            let categories:any = _.groupBy(leftPanelComponents, 'mainCategory');
+            let categories: any = _.groupBy(leftPanelComponents, 'mainCategory');
             for (let category in categories)
                 categories[category] = _.groupBy(categories[category], 'subCategory');
 
@@ -143,9 +143,8 @@ export class Palette implements ng.IDirective {
     }
 
 
-    private initEvents(scope:IPaletteScope) {
-
-        scope.sectionClick = (section:string) => {
+    private initEvents(scope: IPaletteScope) {
+        scope.sectionClick = (section: string) => {
             if (section === scope.expandedSection) {
                 scope.expandedSection = '';
                 return;
@@ -153,7 +152,7 @@ export class Palette implements ng.IDirective {
             scope.expandedSection = section;
         };
 
-        scope.onMouseOver = (displayComponent:LeftPaletteComponent, sectionElem: HTMLElement) => {
+        scope.onMouseOver = (displayComponent: LeftPaletteComponent, sectionElem: HTMLElement) => {
             if (this.isGroupOrPolicy(displayComponent)) {
                 this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL, scope.currentComponent, displayComponent, sectionElem);
             } else {
@@ -167,8 +166,8 @@ export class Palette implements ng.IDirective {
 
         };
 
-        scope.onMouseOut = (displayComponent:LeftPaletteComponent) => {
-            if(this.isGroupOrPolicy(displayComponent)) {
+        scope.onMouseOut = (displayComponent: LeftPaletteComponent) => {
+            if (this.isGroupOrPolicy(displayComponent)) {
                 this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
             } else {
                 scope.isOnDrag = false;
@@ -177,8 +176,8 @@ export class Palette implements ng.IDirective {
         };
     }
 
-    private isGroupOrPolicy(component:LeftPaletteComponent): boolean {
-        if(component &&
+    private isGroupOrPolicy(component: LeftPaletteComponent): boolean {
+        if (component &&
             (component.categoryType === LeftPaletteMetadataTypes.Group ||
                 component.categoryType === LeftPaletteMetadataTypes.Policy)) {
             return true;
@@ -186,8 +185,8 @@ export class Palette implements ng.IDirective {
         return false;
     }
 
-    private initComponents(scope:IPaletteScope) {
-        scope.searchComponents = (searchText:any):void => {
+    private initComponents(scope: IPaletteScope) {
+        scope.searchComponents = (searchText: any): void => {
             scope.displaySortedCategories = this._searchComponents(searchText, scope.model.sortedCategories);
             this._initExpandedSection(scope, searchText);
         };
@@ -196,10 +195,10 @@ export class Palette implements ng.IDirective {
         this.updateLeftPanelDisplay(scope);
     }
 
-    private updateLeftPanelDisplay(scope:IPaletteScope) {
-        let entityType:string = scope.currentComponent.componentType.toLowerCase();
-        let resourceFilterTypes:Array<string> = this.sdcConfig.resourceTypesFilter[entityType];
-         scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
+    private updateLeftPanelDisplay(scope: IPaletteScope) {
+        let entityType: string = scope.currentComponent.componentType.toLowerCase();
+        let resourceFilterTypes: Array<string> = this.sdcConfig.resourceTypesFilter[entityType];
+        scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent);
         //remove the container component  from the list
         let componentTempToDisplay = angular.copy(scope.components);
         componentTempToDisplay = _.remove(componentTempToDisplay, function (leftPalettecomponent) {
@@ -209,10 +208,10 @@ export class Palette implements ng.IDirective {
         scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
     };
 
-    private _initExpandedSection(scope:IPaletteScope, searchText:string):void {
+    private _initExpandedSection(scope: IPaletteScope, searchText: string): void {
         if (searchText == '') {
-            let isContainingCategory:boolean = false;
-            let categoryToExpand:string;
+            let isContainingCategory: boolean = false;
+            let categoryToExpand: string;
             if (scope.currentComponent && scope.currentComponent.categories && scope.currentComponent.categories[0]) {
                 categoryToExpand = this.sdcMenu.categoriesDictionary[scope.currentComponent.categories[0].name];
                 for (let category in scope.model.sortedCategories) {
@@ -229,13 +228,13 @@ export class Palette implements ng.IDirective {
         }
     };
 
-    private initDragEvents(scope:IPaletteScope) {
-        scope.dragStartCallback = (event:IDragDropEvent, ui, displayComponent:LeftPaletteComponent):void => {
+    private initDragEvents(scope: IPaletteScope) {
+        scope.dragStartCallback = (event: IDragDropEvent, ui, displayComponent: LeftPaletteComponent): void => {
             if (scope.isLoading || !scope.isDragable || scope.isViewOnly || this.isGroupOrPolicy(displayComponent)) {
                 return;
             }
 
-            let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), (componentFullData:LeftPaletteComponent) => {
+            let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent), (componentFullData: LeftPaletteComponent) => {
                 return displayComponent.uniqueId === componentFullData.uniqueId;
             });
             this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component);
@@ -251,16 +250,16 @@ export class Palette implements ng.IDirective {
             scope.isOnDrag = false;
         };
 
-        scope.onDragCallback = (event:IDragDropEvent):void => {
+        scope.onDragCallback = (event: IDragDropEvent): void => {
             this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event);
         };
         scope.setElementTemplate = (e) => {
-            let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent),
-                (fullComponent:LeftPaletteComponent) => {
+            let dragComponent: LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent),
+                (fullComponent: LeftPaletteComponent) => {
                     return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId;
                 });
-            let componentInstance:ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
-            let node:CompositionCiNodeBase = this.NodesFactory.createNode(componentInstance);
+            let componentInstance: ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
+            let node: CompositionCiNodeBase = this.NodesFactory.createNode(componentInstance);
 
             // myDiagram.dragFromPalette = node;
             this.nodeHtmlSubstitute.find("img").attr('src', node.img);
@@ -270,16 +269,16 @@ export class Palette implements ng.IDirective {
         };
     }
 
-    private _searchComponents = (searchText:string, categories:any):void => {
+    private _searchComponents = (searchText: string, categories: any): void => {
         let displaySortedCategories = angular.copy(categories);
         if (searchText != '') {
-            angular.forEach(categories, function (category:any, categoryKey) {
+            angular.forEach(categories, function (category: any, categoryKey) {
 
-                angular.forEach(category, function (subcategory:Array<LeftPaletteComponent>, subcategoryKey) {
+                angular.forEach(category, function (subcategory: Array<LeftPaletteComponent>, subcategoryKey) {
                     let filteredResources = [];
-                    angular.forEach(subcategory, function (component:LeftPaletteComponent) {
+                    angular.forEach(subcategory, function (component: LeftPaletteComponent) {
 
-                        let resourceFilterTerm:string = component.searchFilterTerms.toLowerCase();
+                        let resourceFilterTerm: string = component.searchFilterTerms.toLowerCase();
                         if (resourceFilterTerm.indexOf(searchText.toLowerCase()) >= 0) {
                             filteredResources.push(component);
                         }
@@ -288,11 +287,11 @@ export class Palette implements ng.IDirective {
                         displaySortedCategories[categoryKey][subcategoryKey] = filteredResources;
                     }
                     else {
-                        delete  displaySortedCategories[categoryKey][subcategoryKey];
+                        delete displaySortedCategories[categoryKey][subcategoryKey];
                     }
                 });
                 if (!(Object.keys(displaySortedCategories[categoryKey]).length > 0)) {
-                    delete  displaySortedCategories[categoryKey];
+                    delete displaySortedCategories[categoryKey];
                 }
 
             });
@@ -301,16 +300,16 @@ export class Palette implements ng.IDirective {
     };
 
     public static factory = ($log,
-                             LeftPaletteLoaderService,
-                             sdcConfig,
-                             ComponentFactory,
-                             ComponentInstanceFactory,
-                             NodesFactory,
-                             CompositionGraphGeneralUtils,
-                             EventListenerService,
-                             sdcMenu,
-                             ModalsHandler
-                            ) => {
+        LeftPaletteLoaderService,
+        sdcConfig,
+        ComponentFactory,
+        ComponentInstanceFactory,
+        NodesFactory,
+        CompositionGraphGeneralUtils,
+        EventListenerService,
+        sdcMenu,
+        ModalsHandler
+    ) => {
         return new Palette($log,
             LeftPaletteLoaderService,
             sdcConfig,