Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

42 files changed, 374 insertions, 4650 deletions

diff --git a/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts
index 94f4643060..adec51f8e2 100644
--- a/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts
+++ b/catalog-ui/src/app/directives/clicked-outside/clicked-outside-directive.ts
@@ -67,12 +67,12 @@ export class ClickedOutsideDirective implements ng.IDirective {
             if (!container) {
                 let clickedOutsideContainerSelector:string = clickedOutsideModel.getClickedOutsideContainerSelector();
                 if (!angular.isUndefined(clickedOutsideContainerSelector) && clickedOutsideContainerSelector !== '') {
-                    container = element.parents(clickedOutsideContainerSelector + ':first')[0];
+                    container = <HTMLElement>element.parents(clickedOutsideContainerSelector + ':first')[0];
                     if (!container) {
-                        container = element[0];
+                        container = <HTMLElement>element[0];
                     }
                 } else {
-                    container = element[0];
+                    container = <HTMLElement>element[0];
                 }
             }
             return container;
@@ -85,7 +85,7 @@ export class ClickedOutsideDirective implements ng.IDirective {
             if (targetDomElementJq.hasClass('tooltip') || targetDomElementJq.parents('.tooltip:first').length) {
                 return;
             }
-            let targetDomElement:HTMLElement = targetDomElementJq[0];
+            let targetDomElement:HTMLElement = <HTMLElement>targetDomElementJq[0];
             if (!containerDomElement.contains(targetDomElement)) {
                 scope.$apply(() => {
                     let onClickedOutsideGetter:Function = clickedOutsideModel.getOnClickedOutsideGetter();
diff --git a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
index deeb1f55d8..8f7735d1ec 100644
--- a/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
+++ b/catalog-ui/src/app/directives/download-artifact/download-artifact.ts
@@ -20,7 +20,8 @@
 
 'use strict';
 import {IFileDownload, Component, ArtifactModel} from "app/models";
-import {EventListenerService, CacheService} from "app/services";
+import {EventListenerService} from "app/services";
+import {CacheService} from "app/services-ng2";
 import {EVENTS, FileUtils} from "app/utils";
 
 export class DOWNLOAD_CSS_CLASSES {
diff --git a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
index 76bc1692b4..eb9e71fa30 100644
--- a/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
+++ b/catalog-ui/src/app/directives/ecomp-header/ecomp-header.ts
@@ -23,6 +23,7 @@ import * as _ from "lodash";
 import {IAppConfigurtaion, User, IUser} from "app/models";
 import {IUserProperties} from "../../models/user";
 import {UserService} from "../../ng2/services/user.service";
+import { AuthenticationService } from "../../ng2/services/authentication.service";
 
 export class MenuItem {
     menuId:number;
@@ -57,7 +58,8 @@ export class EcompHeaderDirective implements ng.IDirective {
 
     constructor(private $http:ng.IHttpService,
                 private sdcConfig:IAppConfigurtaion,
-                private userService:UserService) {
+                private userService:UserService,
+                private authService:AuthenticationService) {
 
     }
 
@@ -92,7 +94,7 @@ export class EcompHeaderDirective implements ng.IDirective {
 
         let initUser = ():void => {
             let defaultUserId:string;
-            let userInfo:IUserProperties = this.userService.getLoggedinUser();
+            let userInfo:IUserProperties = this.authService.getLoggedinUser();
             if (!userInfo) {
                 defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
                 this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => {
@@ -137,8 +139,9 @@ export class EcompHeaderDirective implements ng.IDirective {
 
     public static factory = ($http:ng.IHttpService,
                              sdcConfig:IAppConfigurtaion,
-                             userService:UserService)=> {
-        return new EcompHeaderDirective($http, sdcConfig, userService);
+                             userService:UserService, 
+                             authService:AuthenticationService)=> {
+        return new EcompHeaderDirective($http, sdcConfig, userService, authService);
     };
 
 }
@@ -231,7 +234,7 @@ export class EcompHeaderController {
     };
 }
 
-EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2'];
+EcompHeaderDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2', 'AuthenticationServiceNg2'];
 
 
 
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
index d59c44d67f..156192dd99 100644
--- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.html
@@ -18,8 +18,8 @@
 {{actualText}}
 
 <span class="ellipsis-directive-more-less"
-      data-ng-click="onMoreLessClick($event)"
-      data-ng-hide="ellipsis.length <= maxChars"
-      data-tests-id="ellipsis-more-less">
+  data-ng-click="onMoreLessClick($event)"
+  data-ng-hide="ellipsis.length <= maxChars"
+  data-tests-id="ellipsis-more-less">
   {{actualText ? (collapsed ? "More" : "Less") : ""}}
 </span>
diff --git a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
index 21e074a8b9..be7547cd76 100644
--- a/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
+++ b/catalog-ui/src/app/directives/ellipsis/ellipsis-directive.ts
@@ -23,7 +23,6 @@ export interface IEllipsisScope extends ng.IScope {
     ellipsis:string;
     maxChars:number;
     toggleText():void;
-    onMoreLessClick(event): void;
     collapsed:boolean;
     actualText:string;
 
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html
deleted file mode 100644
index b07668d6d9..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ 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.
-  -->
- 
- 
-<div class="assetPopover" ng-class="assetPopoverObj.menuSide" ng-style="{left: assetPopoverObj.menuPosition.x, top: assetPopoverObj.menuPosition.y}">
-    <div class="display-name-tooltip" >{{assetPopoverObj.displayName}}</div>
-
-    <div class="assetMenu">
-        <!--<div class="sprite-new expand-asset-icon" uib-tooltip="Open" tooltip-class="uib-custom-tooltip" tooltip-placement="{{tooltipSide}}"></div>-->
-        <div class="sprite-new view-info-icon" uib-tooltip="Information" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
-        <div class="sprite-new cp-icon" uib-tooltip="Connection Points" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
-        <div class="sprite-new vl-icon" uib-tooltip="Links" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}"></div>
-        <div class="sprite-new trash-icon" uib-tooltip="Delete" tooltip-class="uib-custom-tooltip" tooltip-placement="{{assetPopoverObj.menuSide}}" ng-click="deleteAsset()" data-ng-class="{'disabled-icon': assetPopoverObj.isViewOnly}"></div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less
deleted file mode 100644
index 1a113e5bdc..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.less
+++ /dev/null
@@ -1,64 +0,0 @@
-.assetPopover {
-    font-family: @font-opensans-regular;
-    font-size: 13px;
-    width:230px;
-    padding:0 15px;
-    position:absolute;
-    display:flex;
-    flex-direction:column;
-    align-items:flex-start;
-
-    &.left {
-        align-items:flex-end;
-
-        .uib-custom-tooltip {
-            margin-left:-10px;
-        }
-    }
-
-    .display-name-tooltip {
-
-        border:solid 1px @main_color_p;
-        color: @main_color_p;
-        padding:5px 10px;
-        width:200px;
-        margin-bottom:10px;
-        border-radius: 2px;
-        background-color: rgba(80, 99, 113, 0.8);
-        box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33);
-    }
-
-    .uib-custom-tooltip {
-        margin-left:20px;
-        font-family: @font-opensans-regular;
-        font-size: 13px;
-    }
-
-    .assetMenu {
-
-        border-radius: 2px;
-        border: solid 1px @main_color_p;
-        background-color:  rgba(234, 234, 234, 0.7);
-        box-shadow: 0px 3px 7.44px 0.56px rgba(0, 0, 0, 0.33);
-        display:flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items:center;
-
-        .sprite-new {
-            border-bottom:solid 1px #CCC;
-            &:hover:not(.disabled-icon) {
-                .hand;
-            }
-            &:active:not(.disabled-icon) {
-                background-color:  @main_color_a;
-                border-bottom-color: @main_color_a;
-            }
-            &.trash-icon {
-                border-bottom: none;
-            }
-        }
-
-
-    }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts b/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts
deleted file mode 100644
index ad3197c6da..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/asset-popover/asset-popover.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-'use strict';
-import {AssetPopoverObj} from "app/models";
-
-export interface IAssetPopoverScope extends ng.IScope {
-    assetPopoverObj:AssetPopoverObj;
-    deleteAsset:Function;
-}
-
-export class AssetPopoverDirective implements ng.IDirective {
-
-    constructor() {
-    }
-
-    scope = {
-        assetPopoverObj: '=',
-        deleteAsset: '&'
-    };
-
-    restrict = 'E';
-    replace = true;
-    template = ():string => {
-        return require('app/directives/graphs-v2/asset-popover/asset-popover.html');
-    };
-
-    link = (scope:IAssetPopoverScope, element:JQuery, $attr:ng.IAttributes) => {
-
-    };
-
-    public static factory = ()=> {
-        return new AssetPopoverDirective();
-    };
-}
-
-AssetPopoverDirective.factory.$inject = [];
-
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts b/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
deleted file mode 100644
index 81d41509e7..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/common/common-graph-utils.ts
+++ /dev/null
@@ -1,487 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {CommonNodeBase, CompositionCiLinkBase, RelationshipModel, Relationship, CompositionCiNodeBase, NodesFactory, LinksFactory} from "app/models";
-import {GraphUIObjects} from "app/utils";
-import {CompositionCiServicePathLink} from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import {Requirement, Capability} from "app/models";
-/**
- * Created by obarda on 12/21/2016.
- */
-export class CommonGraphUtils {
-
-    constructor(private NodesFactory:NodesFactory, private LinksFactory:LinksFactory) {
-
-    }
-
-    public safeApply = (scope:ng.IScope, fn:any) => { //todo remove to general utils
-        let phase = scope.$root.$$phase;
-        if (phase == '$apply' || phase == '$digest') {
-            if (fn && (typeof(fn) === 'function')) {
-                fn();
-            }
-        } else {
-            scope.$apply(fn);
-        }
-    };
-
-    /**
-     * Draw node on the graph
-     * @param cy
-     * @param compositionGraphNode
-     * @param position
-     * @returns {CollectionElements}
-     */
-    public addNodeToGraph(cy:Cy.Instance, compositionGraphNode:CommonNodeBase, position?:Cy.Position):Cy.CollectionElements {
-
-        let node = cy.add(<Cy.ElementDefinition> {
-            group: 'nodes',
-            position: position,
-            data: compositionGraphNode,
-            classes: compositionGraphNode.classes
-        });
-
-        if(!node.data().isUcpe) { //ucpe should not have tooltip
-            this.initNodeTooltip(node);
-        }
-        return node;
-    };
-
-    /**
-     * The function will create a component instance node by the componentInstance position.
-     * If the node is UCPE the function will create all cp lan&wan for the ucpe
-     * @param cy
-     * @param compositionGraphNode
-     * @returns {Cy.CollectionElements}
-     */
-    public addComponentInstanceNodeToGraph(cy:Cy.Instance, compositionGraphNode:CompositionCiNodeBase):Cy.CollectionElements {
-
-        let nodePosition = {
-            x: +compositionGraphNode.componentInstance.posX,
-            y: +compositionGraphNode.componentInstance.posY
-        };
-
-        let node = this.addNodeToGraph(cy, compositionGraphNode, nodePosition);
-        if (compositionGraphNode.isUcpe) {
-            this.createUcpeCpNodes(cy, node);
-        }
-        return node;
-    };
-
-    /**
-     * This function will create CP_WAN & CP_LAN  for the UCPE. this is a special node on the group that will behave like ports on the ucpe
-     * @param cy
-     * @param ucpeGraphNode
-     */
-    private createUcpeCpNodes(cy:Cy.Instance, ucpeGraphNode:Cy.CollectionNodes):void {
-
-        let requirementsArray:Array<any> = ucpeGraphNode.data().componentInstance.requirements["tosca.capabilities.Node"];
-        //show only LAN or WAN requirements
-        requirementsArray = _.reject(requirementsArray, (requirement:any) => {
-            let name:string = requirement.ownerName.toLowerCase();
-            return name.indexOf('lan') === -1 && name.indexOf('wan') === -1;
-        });
-        requirementsArray.sort(function (a, b) {
-            let nameA = a.ownerName.toLowerCase().match(/[^ ]+/)[0];
-            let nameB = b.ownerName.toLowerCase().match(/[^ ]+/)[0];
-            let numA = _.last(a.ownerName.toLowerCase().split(' '));
-            let numB = _.last(b.ownerName.toLowerCase().split(' '));
-
-            if (nameA === nameB) return numA > numB ? 1 : -1;
-            return nameA < nameB ? 1 : -1;
-        });
-        let position = angular.copy(ucpeGraphNode.boundingbox());
-        //add CP nodes to group
-        let topCps:number = 0;
-        for (let i = 0; i < requirementsArray.length; i++) {
-
-            let cpNode = this.NodesFactory.createUcpeCpNode(angular.copy(ucpeGraphNode.data().componentInstance));
-            cpNode.componentInstance.capabilities = requirementsArray[i];
-            cpNode.id = requirementsArray[i].ownerId;
-            cpNode.group = ucpeGraphNode.data().componentInstance.uniqueId;
-            cpNode.name = requirementsArray[i].ownerName; //for tooltip
-            cpNode.displayName = requirementsArray[i].ownerName;
-            cpNode.displayName = cpNode.displayName.length > 5 ? cpNode.displayName.substring(0, 5) + '...' : cpNode.displayName;
-
-
-            if (cpNode.name.toLowerCase().indexOf('lan') > -1) {
-                cpNode.textPosition = "top";
-                cpNode.componentInstance.posX = position.x1 + (i * 90) - (topCps * 90) + 53;
-                cpNode.componentInstance.posY = position.y1 + 400 + 27;
-            } else {
-                cpNode.textPosition = "bottom";
-                cpNode.componentInstance.posX = position.x1 + (topCps * 90) + 53;
-                cpNode.componentInstance.posY = position.y1 + 27;
-                topCps++;
-            }
-            let cyCpNode = this.addComponentInstanceNodeToGraph(cy, cpNode);
-            cyCpNode.lock();
-        }
-    };
-
-    /**
-     * Returns relation source and target nodes.
-     * @param nodes - all nodes in graph in order to find the edge connecting the two nodes
-     * @param fromNodeId
-     * @param toNodeId
-     * @returns [source, target] array of source node and target node.
-     */
-    public getRelationNodes(nodes:Cy.CollectionNodes, fromNodeId:string, toNodeId:string) {
-        return [
-            _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === fromNodeId),
-            _.find(nodes, (node:Cy.CollectionFirst) => node.data().id === toNodeId)
-        ];
-    }
-
-    /**
-     * Add link to graph - only draw the link
-     * @param cy
-     * @param link
-     * @param getRelationRequirementCapability
-     */
-    public insertLinkToGraph = (cy:Cy.Instance, link:CompositionCiLinkBase, getRelationRequirementCapability:Function) => {
-        const relationNodes = this.getRelationNodes(cy.nodes(), link.source, link.target);
-        const sourceNode:CompositionCiNodeBase = relationNodes[0] && relationNodes[0].data();
-        const targetNode:CompositionCiNodeBase = relationNodes[1] && relationNodes[1].data();
-        if ((sourceNode && !sourceNode.certified) || (targetNode && !targetNode.certified)) {
-            link.classes = 'not-certified-link';
-        }
-        let linkElement = cy.add({
-            group: 'edges',
-            data: link,
-            classes: link.classes
-        });
-        const getLinkRequirementCapability = () =>
-            getRelationRequirementCapability(link.relation.relationships[0], sourceNode.componentInstance, targetNode.componentInstance);
-        this.initLinkTooltip(linkElement, link.relation.relationships[0], getLinkRequirementCapability);
-    };
-
-    /**
-     * Add service path link to graph - only draw the link
-     * @param cy
-     * @param link
-     */
-    public insertServicePathLinkToGraph = (cy:Cy.Instance, link:CompositionCiServicePathLink) => {
-        let linkElement = cy.add({
-            group: 'edges',
-            data: link,
-            classes: link.classes
-        });
-        this.initServicePathTooltip(linkElement, link);
-    };
-
-    /**
-     * Returns function for the link tooltip content
-     * @param {Relationship} linkRelation
-     * @param {Requirement} requirement
-     * @param {Capability} capability
-     * @returns {() => string}
-     * @private
-     */
-    private _getLinkTooltipContent(linkRelation:Relationship, requirement?:Requirement, capability?:Capability):string {
-        return '<div class="line">' +
-            '<span class="req-cap-label">R: </span>' +
-            '<span>' + (requirement ? requirement.getTitle() : linkRelation.relation.requirement) + '</span>' +
-            '</div>' +
-            '<div class="line">' +
-            '<div class="sprite-new link-tooltip-arrow"></div>' +
-            '<span class="req-cap-label">C: </span>' +
-            '<span>' + (capability ? capability.getTitle() : linkRelation.relation.capability) + '</span>' +
-            '</div>';
-    }
-
-    /**
-     * This function will init qtip tooltip on the link
-     * @param linkElement - the link we want the tooltip to apply on,
-     * @param link
-     * @param getLinkRequirementCapability
-     * link - the link obj
-     */
-    public initLinkTooltip(linkElement:Cy.CollectionElements, link:Relationship, getLinkRequirementCapability:Function) {
-        const content = () => this._getLinkTooltipContent(link);  // base tooltip content without owner names
-        const render = (event, api) => {
-            // on render (called once at first show), get the link requirement and capability and change to full tooltip content (with owner names)
-            getLinkRequirementCapability().then((linkReqCap) => {
-                const fullContent = () => this._getLinkTooltipContent(link, linkReqCap.requirement, linkReqCap.capability);
-                api.set('content.text', fullContent);
-            });
-        };
-        linkElement.qtip(this.prepareInitTooltipData({content, events: {render}}));
-    };
-
-    /**
-     *
-     * @param linkElement
-     * @param link
-     */
-    public initServicePathTooltip(linkElement:Cy.CollectionElements, link:CompositionCiServicePathLink) {
-        let content = function () {
-            return '<div class="line">' +
-                '<div>'+link.pathName+'</div>' +
-                '</div>';
-        };
-        linkElement.qtip(this.prepareInitTooltipData({content}));
-    };
-
-    private prepareInitTooltipData(options?:Object) {
-        return _.merge({
-            position: {
-                my: 'top center',
-                at: 'bottom center',
-                adjust: {x:0, y:0},
-                effect: false
-            },
-            style: {
-                classes: 'qtip-dark qtip-rounded qtip-custom link-qtip',
-                tip: {
-                    width: 16,
-                    height: 8
-                }
-            },
-            show: {
-                event: 'mouseover',
-                delay: 1000
-            },
-            hide: {event: 'mouseout mousedown'},
-            includeLabels: true,
-            events: {}
-        }, options);
-    }
-
-    /**
-     *  go over the relations and draw links on the graph
-     * @param cy
-     * @param instancesRelations
-     * @param getRelationRequirementCapability - function to get requirement and capability of a relation
-     */
-    public initGraphLinks(cy:Cy.Instance, instancesRelations:Array<RelationshipModel>, getRelationRequirementCapability:Function) {
-
-        if (instancesRelations) {
-            _.forEach(instancesRelations, (relationshipModel:RelationshipModel) => {
-                _.forEach(relationshipModel.relationships, (relationship:Relationship) => {
-                    let linkToCreate = this.LinksFactory.createGraphLink(cy, relationshipModel, relationship);
-                    this.insertLinkToGraph(cy, linkToCreate, getRelationRequirementCapability);
-                });
-            });
-        }
-    }
-
-    /**
-     *  Determine which nodes are in the UCPE and set child data for them.
-     * @param cy
-     */
-    public initUcpeChildren(cy:Cy.Instance) {
-        let ucpe:Cy.CollectionNodes = cy.nodes('[?isUcpe]'); // Get ucpe on graph if exist
-        _.each(cy.edges('.ucpe-host-link'), (link)=> {
-
-            let ucpeChild:Cy.CollectionNodes = (link.source().id() == ucpe.id()) ? link.target() : link.source();
-            this.initUcpeChildData(ucpeChild, ucpe);
-
-            //vls dont have ucpe-host-link connection, so need to find them and iterate separately
-            let connectedVLs = ucpeChild.connectedEdges().connectedNodes('.vl-node');
-            _.forEach(connectedVLs, (vl)=> { //all connected vls must be UCPE children because not allowed to connect to a VL outside of the UCPE
-                this.initUcpeChildData(vl, ucpe);
-            });
-        });
-    }
-
-    /**
-     *  Set properties for nodes contained by the UCPE
-     * @param childNode- node contained in UCPE
-     * @param ucpe- ucpe container node
-     */
-    public initUcpeChildData(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) {
-
-        if (!childNode.data('isInsideGroup')) {
-            this.updateUcpeChildPosition(childNode, ucpe);
-            childNode.data({isInsideGroup: true});
-        }
-
-    }
-
-    /**
-     *  Updates UCPE child node offset, which allows child nodes to be dragged in synchronization with ucpe
-     * @param childNode- node contained in UCPE
-     * @param ucpe- ucpe container node
-     */
-    public updateUcpeChildPosition(childNode:Cy.CollectionNodes, ucpe:Cy.CollectionNodes) {
-        let childPos:Cy.Position = childNode.relativePosition();
-        let ucpePos:Cy.Position = ucpe.relativePosition();
-        let offset:Cy.Position = {
-            x: childPos.x - ucpePos.x,
-            y: childPos.y - ucpePos.y
-        };
-        childNode.data("ucpeOffset", offset);
-    }
-
-    /**
-     *  Removes ucpe-child properties from the node
-     * @param childNode- node being removed from UCPE
-     */
-    public removeUcpeChildData(childNode:Cy.CollectionNodes) {
-        childNode.removeData("ucpeOffset");
-        childNode.data({isInsideGroup: false});
-
-    }
-
-
-    public HTMLCoordsToCytoscapeCoords(cytoscapeBoundingBox:Cy.Extent, mousePos:Cy.Position):Cy.Position {
-        return {x: mousePos.x + cytoscapeBoundingBox.x1, y: mousePos.y + cytoscapeBoundingBox.y1}
-    };
-
-
-    public getCytoscapeNodePosition = (cy:Cy.Instance, event:IDragDropEvent):Cy.Position => {
-        let targetOffset = $(event.target).offset();
-        let x = (event.pageX - targetOffset.left) / cy.zoom();
-        let y = (event.pageY - targetOffset.top) / cy.zoom();
-
-        return this.HTMLCoordsToCytoscapeCoords(cy.extent(), {
-            x: x,
-            y: y
-        });
-    };
-
-
-    public getNodePosition(node:Cy.CollectionFirstNode):Cy.Position {
-        let nodePosition = node.relativePoint();
-        if (node.data().isUcpe) { //UCPEs use bounding box and not relative point.
-            nodePosition = {x: node.boundingbox().x1, y: node.boundingbox().y1};
-        }
-
-        return nodePosition;
-    }
-
-    /**
-     * Generic function that can be used for any html elements overlaid on canvas
-     * Returns the html position of a node on canvas, including left palette and header offsets. Option to pass in additional offset to add to return position.
-     * @param node
-     * @param additionalOffset
-     * @returns {Cy.Position}
-
-     public getNodePositionWithOffset = (node:Cy.CollectionFirstNode, additionalOffset?:Cy.Position): Cy.Position => {
-            if(!additionalOffset) additionalOffset = {x: 0, y:0};
-
-            let nodePosition = node.renderedPosition();
-            let posWithOffset:Cy.Position = {
-                x: nodePosition.x + GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET + additionalOffset.x,
-                y: nodePosition.y + GraphUIObjects.COMPOSITION_HEADER_OFFSET + additionalOffset.y
-            };
-            return posWithOffset;
-        };*/
-
-    /**
-     *  return true/false if first node contains in second - this used in order to verify is node is entirely inside ucpe
-     * @param firstBox
-     * @param secondBox
-     * @returns {boolean}
-     */
-    public isFirstBoxContainsInSecondBox(firstBox:Cy.BoundingBox, secondBox:Cy.BoundingBox) {
-
-        return firstBox.x1 > secondBox.x1 && firstBox.x2 < secondBox.x2 && firstBox.y1 > secondBox.y1 && firstBox.y2 < secondBox.y2;
-
-    };
-
-
-    /**
-     * Check if node node bounds position is inside any ucpe on graph, and return the ucpe
-     * @param {diagram} the diagram.
-     * @param {nodeActualBounds} the actual bound position of the node.
-     * @return the ucpe if found else return null
-     */
-    public isInUcpe = (cy:Cy.Instance, nodeBounds:Cy.BoundingBox):Cy.CollectionElements => {
-
-        let ucpeNodes = cy.nodes('[?isUcpe]').filterFn((ucpeNode) => {
-            return this.isFirstBoxContainsInSecondBox(nodeBounds, ucpeNode.boundingbox());
-        });
-        return ucpeNodes;
-    };
-
-    /**
-     *
-     * @param cy
-     * @param node
-     * @returns {Array}
-     */
-    public getLinkableNodes(cy:Cy.Instance, node:Cy.CollectionFirstNode):Array<CompositionCiNodeBase> {
-        let compatibleNodes = [];
-        _.each(cy.nodes(), (tempNode)=> {
-            if (this.nodeLocationsCompatible(cy, node, tempNode)) {
-                compatibleNodes.push(tempNode.data());
-            }
-        });
-        return compatibleNodes;
-    }
-
-    /**
-     * Checks whether node locations are compatible in reference to UCPEs.
-     * Returns true if both nodes are in UCPE or both nodes out, or one node is UCPEpart.
-     * @param node1
-     * @param node2
-     */
-    public nodeLocationsCompatible(cy:Cy.Instance, node1:Cy.CollectionFirstNode, node2:Cy.CollectionFirstNode) {
-
-        let ucpe = cy.nodes('[?isUcpe]');
-        if(!ucpe.length){ return true; }
-        if(node1.data().isUcpePart || node2.data().isUcpePart) { return true; }
-
-        return (this.isFirstBoxContainsInSecondBox(node1.boundingbox(), ucpe.boundingbox()) == this.isFirstBoxContainsInSecondBox(node2.boundingbox(), ucpe.boundingbox()));
-
-    }
-
-    /**
-     * This function will init qtip tooltip on the node
-     * @param node - the node we want the tooltip to apply on
-     */
-    public initNodeTooltip(node:Cy.CollectionNodes) {
-
-        let opts = {
-            content: function () {
-                return this.data('name');
-            },
-            position: {
-                my: 'top center',
-                at: 'bottom center',
-                adjust: {x:0, y:-5}
-            },
-            style: {
-                classes: 'qtip-dark qtip-rounded qtip-custom',
-                tip: {
-                    width: 16,
-                    height: 8
-                }
-            },
-            show: {
-                event: 'mouseover',
-                delay: 1000
-            },
-            hide: {event: 'mouseout mousedown'},
-            includeLabels: true
-        };
-
-        if (node.data().isUcpePart){ //fix tooltip positioning for UCPE-cps
-            opts.position.adjust = {x:0, y:20};
-        }
-
-        node.qtip(opts);
-    };
-}
-
-CommonGraphUtils.$inject = ['NodesFactory', 'LinksFactory'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
deleted file mode 100644
index dd50524444..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts
+++ /dev/null
@@ -1,361 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import { GraphColors, GraphUIObjects} from "app/utils/constants";
-import constant = require("lodash/constant");
-import {ImagesUrl} from "app/utils/constants";
-import {AngularJSBridge} from "app/services/angular-js-bridge-service";
-import { CanvasHandleTypes } from "app/utils";
-/**
- * Created by obarda on 12/18/2016.
- */
-export class ComponentInstanceNodesStyle {
-
-    public static getCompositionGraphStyle = ():Array<Cy.Stylesheet>  => {
-        return [
-            {
-                selector: 'core',
-                css: {
-                    'shape': 'rectangle',
-                    'active-bg-size': 0,
-                    'selection-box-color': 'rgb(0, 159, 219)',
-                    'selection-box-opacity': 0.2,
-                    'selection-box-border-color': '#009fdb',
-                    'selection-box-border-width': 1
-
-                }
-            },
-            {
-                selector: 'node',
-                css: {
-                    'font-family': 'OpenSans-Regular,sans-serif',
-
-                    'font-size': 14,
-                    'events': 'yes',
-                    'text-events': 'yes',
-                    'text-border-width': 15,
-                    'text-border-color': GraphColors.NODE_UCPE,
-                    'text-margin-y': 5
-                }
-            },
-            {
-                selector: '.vf-node',
-                css: {
-                    'background-color': 'transparent',
-                    'shape': 'rectangle',
-                    'label': 'data(displayName)',
-                    'background-image': 'data(img)',
-                    'width': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
-                    'height': GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
-                    'background-opacity': 0,
-                    "background-width": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
-                    "background-height": GraphUIObjects.DEFAULT_RESOURCE_WIDTH,
-                    'text-valign': 'bottom',
-                    'text-halign': 'center',
-                    'background-fit': 'cover',
-                    'background-clip': 'node',
-                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
-                    'overlay-opacity': 0
-                }
-            },
-
-            {
-                selector: '.service-node',
-                css: {
-                    'background-color': 'transparent',
-                    'label': 'data(displayName)',
-                    'events': 'yes',
-                    'text-events': 'yes',
-                    'background-image': 'data(img)',
-                    'width': 64,
-                    'height': 64,
-                    "border-width": 0,
-                    'text-valign': 'bottom',
-                    'text-halign': 'center',
-                    'background-opacity': 0,
-                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
-                    'overlay-opacity': 0
-                }
-            },
-            {
-                selector: '.cp-node',
-                css: {
-                    'background-color': 'rgb(255,255,255)',
-                    'shape': 'rectangle',
-                    'label': 'data(displayName)',
-                    'background-image': 'data(img)',
-                    'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
-                    'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
-                    'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
-                    'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2,
-                    'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
-                    'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
-                    'text-valign': 'bottom',
-                    'text-halign': 'center',
-                    'background-opacity': 0,
-                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
-                    'overlay-opacity': 0
-                }
-            },
-            {
-                selector: '.vl-node',
-                css: {
-                    'background-color': 'rgb(255,255,255)',
-                    'shape': 'rectangle',
-                    'label': 'data(displayName)',
-                    'background-image': 'data(img)',
-                    'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
-                    'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
-                    'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
-                    'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
-                    'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
-                    'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE / 2,
-                    'text-valign': 'bottom',
-                    'text-halign': 'center',
-                    'background-opacity': 0,
-                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
-                    'overlay-opacity': 0
-                }
-            },
-            {
-                selector: '.ucpe-cp',
-                css: {
-                    'background-color': GraphColors.NODE_UCPE_CP,
-                    'background-width': 15,
-                    'background-height': 15,
-                    'width': 15,
-                    'height': 15,
-                    'text-halign': 'center',
-                    'overlay-opacity': 0,
-                    'label': 'data(displayName)',
-                    'text-valign': 'data(textPosition)',
-                    'text-margin-y': (ele:Cy.Collection) => {
-                        return (ele.data('textPosition') == 'top') ? -5 : 5;
-                    },
-                    'font-size': 12
-                }
-            },
-            {
-                selector: '.ucpe-node',
-                css: {
-                    'background-fit': 'cover',
-                    'padding-bottom': 0,
-                    'padding-top': 0
-                }
-            },
-            {
-                selector: '.simple-link',
-                css: {
-                    'width': 1,
-                    'line-color': GraphColors.BASE_LINK,
-                    'target-arrow-color': '#3b7b9b',
-                    'target-arrow-shape': 'triangle',
-                    'curve-style': 'bezier',
-                    'control-point-step-size': 30
-                }
-            },
-            {
-                selector: '.archived',
-                css: {
-                    'shape': 'rectangle',
-                    'background-image': (ele:Cy.Collection) => {
-                        return ele.data().setArchivedImageBgStyle(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE); //Change name to setArchivedImageBgStyle ??
-                    },
-                    "border-width": 0
-                }
-            },
-            {
-                selector: '.vl-link',
-                css: {
-                    'width': 3,
-                    'line-color': GraphColors.VL_LINK,
-                    'curve-style': 'bezier',
-                    'control-point-step-size': 30
-                }
-            },
-            {
-                selector: '.vl-link-1',
-                css: {
-                    'width': 3,
-                    'line-color': GraphColors.ACTIVE_LINK,
-                    'curve-style': 'unbundled-bezier',
-                    'target-arrow-color': '#3b7b9b',
-                    'target-arrow-shape': 'triangle',
-                    'control-point-step-size': 30
-                }
-            },
-            {
-                selector: '.ucpe-host-link',
-                css: {
-                    'width': 0
-                }
-            },
-            {
-                selector: '.not-certified-link',
-                css: {
-                    'width': 1,
-                    'line-color': GraphColors.NOT_CERTIFIED_LINK,
-                    'curve-style': 'bezier',
-                    'control-point-step-size': 30,
-                    'line-style': 'dashed',
-                    'target-arrow-color': '#3b7b9b',
-                    'target-arrow-shape': 'triangle'
-
-                }
-            },
-
-            {
-                selector: '.service-path-link',
-                css: {
-                    'width': 2,
-                    'line-color': GraphColors.SERVICE_PATH_LINK,
-                    'target-arrow-color': GraphColors.SERVICE_PATH_LINK,
-                    'target-arrow-shape': 'triangle',
-                    'curve-style': 'bezier',
-                    'control-point-step-size': 30
-                }
-            },
-            {
-                selector: '.not-certified',
-                css: {
-                    'shape': 'rectangle',
-                    'background-image': (ele:Cy.Collection) => {
-                        return ele.data().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE);
-                    },
-                    "border-width": 0
-                }
-            },
-            {
-                selector: '.dependent',
-                css: {
-                    'shape': 'rectangle',
-                    'background-image': (ele:Cy.Collection) => {
-                        return ele.data().initDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
-                    },
-                    "border-width": 0
-                }
-            },
-            {
-                selector: '.dependent.not-certified',
-                css: {
-                    'shape': 'rectangle',
-                    'background-image': (ele:Cy.Collection) => {
-                        return ele.data().initUncertifiedDependentImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE)
-                    },
-                    "border-width": 0
-                }
-            },
-            {
-                selector: 'node:selected',
-                css: {
-                    "border-width": 2,
-                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
-                    'shape': 'rectangle'
-                }
-            },
-            {
-                selector: 'edge:selected',
-                css: {
-                    'line-color': GraphColors.ACTIVE_LINK
-
-                }
-            },
-            {
-                selector: 'edge:active',
-                css: {
-                    'overlay-opacity': 0
-                }
-            }, {
-                selector: '.configuration-node',
-                css: {
-                    'background-color': 'rgb(255,255,255)',
-                    'shape': 'rectangle',
-                    'label': 'data(displayName)',
-                    'background-image': 'data(img)',
-                    'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH,
-                    'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH,
-                    'background-position-x': GraphUIObjects.HANDLE_SIZE / 2,
-                    'background-position-y': GraphUIObjects.HANDLE_SIZE / 2,
-                    'width': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE,
-                    'height': GraphUIObjects.SMALL_RESOURCE_WIDTH + GraphUIObjects.HANDLE_SIZE/2,
-                    'text-valign': 'bottom',
-                    'text-halign': 'center',
-                    'background-opacity': 0,
-                    'overlay-color': GraphColors.NODE_BACKGROUND_COLOR,
-                    'overlay-opacity': 0
-                }
-            }
-        ]
-    }
-
-    public static getAddEdgeHandle = () => {
-        return {
-
-            single: false,
-            type: CanvasHandleTypes.ADD_EDGE,
-            imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
-            lineColor: '#27a337',
-            lineWidth: 2,
-            lineStyle: 'dashed'
-
-        }
-    }
-
-    public static getTagHandle = () => {
-        return {
-            single: false,
-            type: CanvasHandleTypes.TAG_AVAILABLE,
-            imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_TAG_ICON,
-        }        
-    }
-
-    public static getTaggedPolicyHandle = () => {
-        return {
-            single: false,
-            type: CanvasHandleTypes.TAGGED_POLICY,
-            imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_POLICY_TAGGED_ICON,
-        }        
-    }
-
-    public static getTaggedGroupHandle = () => {
-        return {
-            single: false,
-            type: CanvasHandleTypes.TAGGED_GROUP,
-            imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_GROUP_TAGGED_ICON,
-        }        
-    }
-
-
-    // public static getUcpeCpNodeHandle = () => {
-    //     return {
-    //         positionX: "center",
-    //         positionY: "center",
-    //         offsetX: -8,
-    //         offsetY: -10,
-    //         color: "#27a337",
-    //         type: "default",
-    //         single: false,
-    //         nodeTypeNames: ["ucpe-cp-node"],
-    //         imageUrl: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.CANVAS_PLUS_ICON,
-    //         lineWidth: 2,
-    //         lineStyle: 'dashed'
-    //     }
-    // }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts
deleted file mode 100644
index bf71e1c868..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/common/style/module-node-style.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import {GraphColors} from "app/utils";
-export class ModulesNodesStyle {
-
-    public static getModuleGraphStyle = ():Array<Cy.Stylesheet> => {
-
-        return [
-            {
-                selector: '.cy-expand-collapse-collapsed-node',
-                css: {
-                    'background-image': 'data(img)',
-                    'width': 34,
-                    'height': 32,
-                    'background-opacity': 0,
-                    'shape': 'rectangle',
-                    'label': 'data(displayName)',
-                    'events': 'yes',
-                    'text-events': 'yes',
-                    'text-valign': 'bottom',
-                    'text-halign': 'center',
-                    'text-margin-y': 5,
-                    'border-opacity': 0
-                }
-            },
-            {
-                selector: '.module-node',
-                css: {
-                    'background-color': 'transparent',
-                    'background-opacity': 0,
-                    "border-width": 2,
-                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
-                    'border-style': 'dashed',
-                    'label': 'data(displayName)',
-                    'events': 'yes',
-                    'text-events': 'yes',
-                    'text-valign': 'bottom',
-                    'text-halign': 'center',
-                    'text-margin-y': 8
-                }
-            },
-            {
-                selector: 'node:selected',
-                css: {
-                    "border-opacity": 0
-                }
-            },
-            {
-                selector: '.simple-link:selected',
-                css: {
-                    'line-color': GraphColors.BASE_LINK,
-                }
-            },
-            {
-                selector: '.vl-link:selected',
-                css: {
-                    'line-color': GraphColors.VL_LINK,
-                }
-            },
-            {
-                selector: '.cy-expand-collapse-collapsed-node:selected',
-                css: {
-                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
-                    'border-opacity': 1,
-                    'border-style': 'solid',
-                    'border-width': 2
-                }
-            },
-            {
-                selector: '.module-node:selected',
-                css: {
-                    "border-color": GraphColors.NODE_SELECTED_BORDER_COLOR,
-                    'border-opacity': 1
-                }
-            },
-            {
-                selector: '.dummy-node',
-                css: {
-                    'width': 20,
-                    'height': 20
-                }
-            },
-        ]
-    }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
deleted file mode 100644
index e6c2fb395b..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts
+++ /dev/null
@@ -1,947 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {
-    Match,
-    LinkMenu,
-    ComponentInstance,
-    LeftPaletteComponent,
-    Relationship,
-    Component,
-    Service,
-    ConnectRelationModel,
-    CompositionCiNodeBase,
-    CompositionCiNodeVl,
-    ModalModel,
-    ButtonModel,
-    NodesFactory,
-    Point
-} from "app/models";
-import { ComponentInstanceFactory, ComponentFactory, GRAPH_EVENTS, GraphColors, DEPENDENCY_EVENTS } from "app/utils";
-import { EventListenerService, LoaderService } from "app/services";
-import { CompositionGraphLinkUtils } from "./utils/composition-graph-links-utils";
-import { CompositionGraphGeneralUtils } from "./utils/composition-graph-general-utils";
-import { CompositionGraphNodesUtils } from "./utils/composition-graph-nodes-utils";
-import { CommonGraphUtils } from "../common/common-graph-utils";
-import { MatchCapabilitiesRequirementsUtils } from "./utils/match-capability-requierment-utils";
-import { CompositionGraphPaletteUtils } from "./utils/composition-graph-palette-utils";
-import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style";
-import { CytoscapeEdgeEditation } from 'third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js';
-import { ComponentServiceNg2 } from "../../../ng2/services/component-services/component.service";
-import { ComponentGenericResponse } from "../../../ng2/services/responses/component-generic-response";
-import { ModalService } from "../../../ng2/services/modal.service";
-import { ConnectionWizardService } from "../../../ng2/pages/connection-wizard/connection-wizard.service";
-import { StepModel } from "../../../models/wizard-step";
-import { FromNodeStepComponent } from "app/ng2/pages/connection-wizard/from-node-step/from-node-step.component";
-import { PropertiesStepComponent } from "app/ng2/pages/connection-wizard/properties-step/properties-step.component";
-import { ToNodeStepComponent } from "app/ng2/pages/connection-wizard/to-node-step/to-node-step.component";
-import { ConnectionWizardHeaderComponent } from "app/ng2/pages/connection-wizard/connection-wizard-header/connection-wizard-header.component";
-import { ConnectionPropertiesViewComponent } from "../../../ng2/pages/connection-wizard/connection-properties-view/connection-properties-view.component";
-import { ComponentInstanceServiceNg2 } from "../../../ng2/services/component-instance-services/component-instance.service";
-import { EVENTS } from "../../../utils/constants";
-import { PropertyBEModel } from "../../../models/properties-inputs/property-be-model";
-import { ForwardingPath } from "app/models/forwarding-path";
-import { ServicePathGraphUtils } from "./utils/composition-graph-service-path-utils";
-import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import {
-    ZoneInstance, ZoneInstanceMode, ZoneInstanceType,
-    ZoneInstanceAssignmentType
-} from "app/models/graph/zones/zone-instance";
-
-import { Zone } from "app/models/graph/zones/zone";
-import { CompositionGraphZoneUtils } from "./utils/composition-graph-zone-utils";
-import { UIZoneInstanceObject } from "../../../models/ui-models/ui-zone-instance-object";
-import { GroupInstance } from "../../../models/graph/zones/group-instance";
-import { PolicyInstance } from "../../../models/graph/zones/policy-instance";
-
-
-export interface ICompositionGraphScope extends ng.IScope {
-
-    component: Component;
-    isLoading: boolean;
-    isViewOnly: boolean;
-    withSidebar: boolean;
-
-    //zones
-    newZoneInstance;
-    zoneTagMode: string;
-    activeZoneInstance: ZoneInstance;
-    zones: Array<Zone>;
-    zoneMinimizeToggle(zoneType: ZoneInstanceType): void;
-    zoneInstanceTagged(taggedInstance: ZoneInstance): void;
-    zoneBackgroundClicked() :void;
-    zoneInstanceModeChanged(newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType);
-    unsetActiveZoneInstance(): void;
-    clickOutsideZoneInstance(): void;
-    zoneAssignmentSaveStart(): void;
-    zoneAssignmentSaveComplete(success: boolean): void;
-
-    // Link menu - create link menu
-    relationMenuDirectiveObj: ConnectRelationModel;
-    isLinkMenuOpen: boolean;
-    createLinkFromMenu: (chosenMatch: Match, vl: Component) => void;
-    saveChangedCapabilityProperties: () => Promise<PropertyBEModel[]>;
-
-    //modify link menu - for now only delete menu
-    relationMenuTimeout: ng.IPromise<any>;
-    linkMenuObject: LinkMenu;
-    isOnDrag: boolean;
-
-    //left palette functions callbacks
-    dropCallback(event: JQueryEventObject, ui: any): void;
-    beforeDropCallback(event: IDragDropEvent): void;
-    verifyDrop(event: JQueryEventObject, ui: any): void;
-
-    //Links menus
-    viewRelation(link: Cy.CollectionEdges): void;
-    deleteRelation(link: Cy.CollectionEdges): void;
-    hideRelationMenu();
-
-    //search,zoom in/out/all
-    componentInstanceNames: Array<string>; //id, name
-    zoom(zoomIn: boolean): void;
-    zoomAllWithoutSidebar(): void;
-    getAutoCompleteValues(searchTerm: string): void;
-    highlightSearchMatches(searchTerm: string): void;
-
-    canvasMenuProps: any;
-
-    createOrUpdateServicePath(data: any): void;
-    deletePathsOnCy(): void;
-    drawPathOnCy(data: ForwardingPath): void;
-    selectedPathId: string;
-}
-
-export class CompositionGraph implements ng.IDirective {
-    private _cy: Cy.Instance;
-    private _currentlyCLickedNodePosition: Cy.Position;
-    private dragElement: JQuery;
-    private dragComponent: ComponentInstance;
-
-    constructor(private $q: ng.IQService,
-        private $log: ng.ILogService,
-        private $timeout: ng.ITimeoutService,
-        private NodesFactory: NodesFactory,
-        private CompositionGraphLinkUtils: CompositionGraphLinkUtils,
-        private GeneralGraphUtils: CompositionGraphGeneralUtils,
-        private ComponentInstanceFactory: ComponentInstanceFactory,
-        private NodesGraphUtils: CompositionGraphNodesUtils,
-        private eventListenerService: EventListenerService,
-        private ComponentFactory: ComponentFactory,
-        private LoaderService: LoaderService,
-        private commonGraphUtils: CommonGraphUtils,
-        private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils,
-        private CompositionGraphPaletteUtils: CompositionGraphPaletteUtils,
-        private compositionGraphZoneUtils: CompositionGraphZoneUtils,
-        private ComponentServiceNg2: ComponentServiceNg2,
-        private ModalServiceNg2: ModalService,
-        private ConnectionWizardServiceNg2: ConnectionWizardService,
-        private ComponentInstanceServiceNg2: ComponentInstanceServiceNg2,
-        private servicePathGraphUtils: ServicePathGraphUtils) {
-
-    }
-
-    restrict = 'E';
-    template = require('./composition-graph.html');
-    scope = {
-        component: '=',
-        isViewOnly: '=',
-        withSidebar: '='
-    };
-
-    link = (scope: ICompositionGraphScope, el: JQuery) => {
-        this.loadGraph(scope, el);
-
-        if (!scope.component.groupInstances || !scope.component.policies) {
-            this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPOSITION_GRAPH_DATA_LOADED, () => {
-                this.loadGraphData(scope);
-            });
-        } else {
-            this.loadGraphData(scope);
-        }
-
-
-        scope.$on('$destroy', () => {
-            this._cy.destroy();
-            _.forEach(GRAPH_EVENTS, (event) => {
-                this.eventListenerService.unRegisterObserver(event);
-            });
-            this.eventListenerService.unRegisterObserver(EVENTS.SHOW_LOADER_EVENT + 'composition-graph');
-            this.eventListenerService.unRegisterObserver(EVENTS.HIDE_LOADER_EVENT + 'composition-graph');
-            this.eventListenerService.unRegisterObserver(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE);
-        });
-
-    };
-
-    private loadGraphData = (scope: ICompositionGraphScope) => {
-        this.initGraphNodes(scope.component.componentInstances, scope.isViewOnly);
-        this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component));
-        this.commonGraphUtils.initUcpeChildren(this._cy);
-        this.compositionGraphZoneUtils.initZoneInstances(scope.zones, scope.component);
-        setTimeout(() => {//Need settimeout so that angular canvas changes will take effect before resize & center
-            this.GeneralGraphUtils.zoomAllWithMax(this._cy, 1);
-        });
-    }
-
-    private loadGraph = (scope: ICompositionGraphScope, el: JQuery) => {
-        let graphEl = el.find('.sdc-composition-graph-wrapper');
-        this.initGraph(graphEl, scope.isViewOnly);
-        this.initDropZone(scope);
-        this.initZones(scope);
-        this.registerCytoscapeGraphEvents(scope);
-        this.registerCustomEvents(scope, el);
-        this.initViewMode(scope.isViewOnly);
-    };
-
-    private initGraph(graphEl: JQuery, isViewOnly: boolean) {
-
-        this._cy = cytoscape({
-            container: graphEl,
-            style: ComponentInstanceNodesStyle.getCompositionGraphStyle(),
-            zoomingEnabled: true,
-            maxZoom: 1.2,
-            minZoom: .1,
-            userZoomingEnabled: false,
-            userPanningEnabled: true,
-            selectionType: 'single',
-            boxSelectionEnabled: true,
-            autolock: isViewOnly,
-            autoungrabify: isViewOnly
-        });
-    }
-
-    private initViewMode(isViewOnly: boolean) {
-
-        if (isViewOnly) {
-            //remove event listeners
-            this._cy.off('drag');
-            this._cy.off('handlemouseout');
-            this._cy.off('handlemouseover');
-            this._cy.off('canvasredraw');
-            this._cy.off('handletagclick')
-            this._cy.edges().unselectify();
-        }
-    };
-
-    private registerCustomEvents(scope: ICompositionGraphScope, el: JQuery) {
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_GROUP_INSTANCE_UPDATE, (groupInstance: GroupInstance) => {
-            this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, groupInstance);
-            this.GeneralGraphUtils.showGroupUpdateSuccess();
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_POLICY_INSTANCE_UPDATE, (policyInstance: PolicyInstance) => {
-            this.compositionGraphZoneUtils.findAndUpdateZoneInstanceData(scope.zones, policyInstance);
-            this.GeneralGraphUtils.showPolicyUpdateSuccess();
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, (leftPaletteComponent: LeftPaletteComponent) => {
-            if (scope.isOnDrag) {
-                return;
-            }
-
-            this.$log.info(`composition-graph::registerEventServiceEvents:: palette hover on component: ${leftPaletteComponent.uniqueId}`);
-
-            let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
-            let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
-
-            if (this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) {
-                let cacheComponent = this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId);
-                let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(cacheComponent, nodesData, nodesLinks);
-
-                this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
-                this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy);
-
-                return;
-            }
-
-            //----------------------- ORIT TO FIX------------------------//
-
-            this.ComponentServiceNg2.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => {
-
-                let component = this.ComponentFactory.createEmptyComponent(leftPaletteComponent.componentType);
-                component.uniqueId = component.uniqueId;
-                component.capabilities = response.capabilities;
-                component.requirements = response.requirements;
-                this.GeneralGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, component);
-            });
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_ADD_ZONE_INSTANCE_FROM_PALETTE, (component: Component, paletteComponent: LeftPaletteComponent, startPosition: Point) => {
-
-            let zoneType: ZoneInstanceType = this.compositionGraphZoneUtils.getZoneTypeForPaletteComponent(paletteComponent.categoryType);
-            this.compositionGraphZoneUtils.showZone(scope.zones[zoneType]);
-
-            this.LoaderService.showLoader('composition-graph');
-            this.compositionGraphZoneUtils.createZoneInstanceFromLeftPalette(zoneType, component, paletteComponent.type).subscribe((zoneInstance: ZoneInstance) => {
-                this.LoaderService.hideLoader('composition-graph');
-                this.compositionGraphZoneUtils.addInstanceToZone(scope.zones[zoneInstance.type], zoneInstance, true);
-                this.compositionGraphZoneUtils.createPaletteToZoneAnimation(startPosition, zoneType, zoneInstance);
-            }, (error) => {
-                this.LoaderService.hideLoader('composition-graph');
-            });
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT, () => {
-
-            this._cy.emit('hidehandles');
-            this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, (dragElement, dragComponent) => {
-
-            this.dragElement = dragElement;
-            this.dragComponent = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent);
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, (event: IDragDropEvent) => {
-            this.CompositionGraphPaletteUtils.onComponentDrag(this._cy, event, this.dragElement, this.dragComponent);
-
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_COMPONENT_INSTANCE_NAME_CHANGED, (component: ComponentInstance) => {
-
-            let selectedNode = this._cy.getElementById(component.uniqueId);
-            selectedNode.data().componentInstance.name = component.name;
-            selectedNode.data('name', component.name); //used for tooltip
-            selectedNode.data('displayName', selectedNode.data().getDisplayName()); //abbreviated
-
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, (componentInstance: ComponentInstance) => {
-            let nodeToDelete = this._cy.getElementById(componentInstance.uniqueId);
-            this.NodesGraphUtils.deleteNode(this._cy, scope.component, nodeToDelete);
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_ZONE_INSTANCE, (deletedInstance: UIZoneInstanceObject) => {
-
-            if (deletedInstance.type === ZoneInstanceType.POLICY) {
-                scope.component.policies = scope.component.policies.filter(policy => policy.uniqueId !== deletedInstance.uniqueId);
-            } else if (deletedInstance.type === ZoneInstanceType.GROUP) {
-                scope.component.groupInstances = scope.component.groupInstances.filter(group => group.uniqueId !== deletedInstance.uniqueId);
-            }
-            //remove it from zones
-            scope.zones[deletedInstance.type].removeInstance(deletedInstance.uniqueId);
-            if (deletedInstance.type === ZoneInstanceType.GROUP && !_.isEmpty(scope.zones[ZoneInstanceType.POLICY])) {
-                this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(deletedInstance.uniqueId, [scope.zones[ZoneInstanceType.POLICY]], ZoneInstanceAssignmentType.GROUPS);
-            }
-            this.eventListenerService.notifyObservers(EVENTS.UPDATE_PANEL);
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, (componentInstanceId: string) => {
-            if (!_.isEmpty(scope.zones)) {
-                this.compositionGraphZoneUtils.updateTargetsOrMembersOnCanvasDelete(componentInstanceId, scope.zones, ZoneInstanceAssignmentType.COMPONENT_INSTANCES);
-            }
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DELETE_EDGE, (releaseLoading: boolean, linksToDelete: Cy.CollectionEdges) => {
-            this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, releaseLoading, linksToDelete);
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes, updateExistingNode: boolean) => {
-
-            this.commonGraphUtils.initUcpeChildData(node, ucpe);
-            //check if item is a VL, and if so, skip adding the binding to ucpe
-            if (!(node.data() instanceof CompositionCiNodeVl)) {
-                this.CompositionGraphLinkUtils.createVfToUcpeLink(scope.component, this._cy, ucpe.data(), node.data()); //create link from the node to the ucpe
-            }
-
-            if (updateExistingNode) {
-                let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node); //delete connected VLs that no longer have 2 links
-                this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed
-                this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position
-            }
-
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, (node: Cy.CollectionNodes, ucpe: Cy.CollectionNodes) => {
-            this.commonGraphUtils.removeUcpeChildData(node);
-            let vlsPendingDeletion: Cy.CollectionNodes = this.NodesGraphUtils.deleteNodeVLsUponMoveToOrFromUCPE(scope.component, node.cy(), node);
-            this.CompositionGraphLinkUtils.deleteLinksWhenNodeMovedFromOrToUCPE(scope.component, node.cy(), node, vlsPendingDeletion); //delete all connected links if needed
-            this.GeneralGraphUtils.pushUpdateComponentInstanceActionToQueue(scope.component, true, node.data().componentInstance); //update componentInstance position
-        });
-
-        this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_VERSION_CHANGED, (component: Component) => {
-            scope.component = component;
-            this._cy.elements().remove();
-            this.loadGraphData(scope);
-        });
-
-        this.eventListenerService.registerObserverCallback(DEPENDENCY_EVENTS.ON_DEPENDENCY_CHANGE, (ischecked: boolean) => {
-            if (ischecked) {
-                this._cy.$('node:selected').addClass('dependent');
-            } else {
-                // due to defect in cytoscape, just changing the class does not replace the icon, and i need to revert to original icon with no markings.
-                this._cy.$('node:selected').removeClass('dependent');
-                this._cy.$('node:selected').style({'background-image': this._cy.$('node:selected').data('originalImg')});
-            }
-        });
-
-        scope.zoom = (zoomIn: boolean): void => {
-            let currentZoom: number = this._cy.zoom();
-            if (zoomIn) {
-                this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom + .1);
-            } else {
-                this.GeneralGraphUtils.zoomGraphTo(this._cy, currentZoom - .1);
-            }
-        }
-
-
-        scope.zoomAllWithoutSidebar = () => {
-            scope.withSidebar = false;
-            setTimeout(() => { //wait for sidebar changes to take effect before zooming
-                this.GeneralGraphUtils.zoomAll(this._cy);
-            });
-        };
-
-        scope.getAutoCompleteValues = (searchTerm: string) => {
-            if (searchTerm.length > 1) { //US requirement: only display search results after 2nd letter typed.
-                let nodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm);
-                scope.componentInstanceNames = _.map(nodes, node => node.data('name'));
-            } else {
-                scope.componentInstanceNames = [];
-            }
-        };
-
-        scope.highlightSearchMatches = (searchTerm: string) => {
-            this.NodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm);
-            let matchingNodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm);
-            this.GeneralGraphUtils.zoomAll(this._cy, matchingNodes);
-        };
-
-        scope.saveChangedCapabilityProperties = (): Promise<PropertyBEModel[]> => {
-            return new Promise<PropertyBEModel[]>((resolve) => {
-                const capabilityPropertiesBE: PropertyBEModel[] = this.ConnectionWizardServiceNg2.changedCapabilityProperties.map((prop) => {
-                    prop.value = prop.getJSONValue();
-                    const propBE = new PropertyBEModel(prop);
-                    propBE.parentUniqueId = this.ConnectionWizardServiceNg2.selectedMatch.relationship.relation.capabilityOwnerId;
-                    return propBE;
-                });
-                if (capabilityPropertiesBE.length > 0) {
-                    // if there are capability properties to update, then first update capability properties and then resolve promise
-                    this.ComponentInstanceServiceNg2
-                        .updateInstanceCapabilityProperties(
-                            scope.component,
-                            this.ConnectionWizardServiceNg2.selectedMatch.toNode,
-                            this.ConnectionWizardServiceNg2.selectedMatch.capability,
-                            capabilityPropertiesBE
-                        )
-                        .subscribe((response) => {
-                            console.log("Update resource instance capability properties response: ", response);
-                            this.ConnectionWizardServiceNg2.changedCapabilityProperties = [];
-                            resolve(capabilityPropertiesBE);
-                        });
-                } else {
-                    // no capability properties to update, immediately resolve promise
-                    resolve(capabilityPropertiesBE);
-                }
-            });
-        };
-
-        scope.createLinkFromMenu = (): void => {
-            scope.isLinkMenuOpen = false;
-
-            scope.saveChangedCapabilityProperties().then(() => {
-                //create link:
-                this.CompositionGraphLinkUtils
-                    .createLinkFromMenu(this._cy, this.ConnectionWizardServiceNg2.selectedMatch, scope.component);
-            });
-        };
-
-        scope.hideRelationMenu = () => {
-            this.commonGraphUtils.safeApply(scope, () => {
-                delete scope.canvasMenuProps;
-                this.$timeout.cancel(scope.relationMenuTimeout);
-            });
-        };
-
-        scope.createOrUpdateServicePath = (data: any) => {
-            this.servicePathGraphUtils.createOrUpdateServicePath(scope, data);
-        };
-        scope.deletePathsOnCy = () => {
-            this.servicePathGraphUtils.deletePathsFromGraph(this._cy, <Service>scope.component);
-        };
-        scope.drawPathOnCy = (data: ForwardingPath) => {
-            this.servicePathGraphUtils.drawPath(this._cy, data, <Service>scope.component);
-        };
-
-        scope.viewRelation = (link: Cy.CollectionEdges) => {
-            scope.hideRelationMenu();
-
-            const linkData = link.data();
-            const sourceNode: CompositionCiNodeBase = link.source().data();
-            const targetNode: CompositionCiNodeBase = link.target().data();
-            const relationship: Relationship = linkData.relation.relationships[0];
-
-            scope.component.getRelationRequirementCapability(relationship, sourceNode.componentInstance, targetNode.componentInstance).then((objReqCap) => {
-                const capability = objReqCap.capability;
-                const requirement = objReqCap.requirement;
-
-                this.ConnectionWizardServiceNg2.currentComponent = scope.component;
-                this.ConnectionWizardServiceNg2.connectRelationModel = new ConnectRelationModel(sourceNode, targetNode, []);
-                this.ConnectionWizardServiceNg2.selectedMatch = new Match(requirement, capability, true, linkData.source, linkData.target);
-                this.ConnectionWizardServiceNg2.selectedMatch.relationship = relationship;
-
-                const title = `Connection Properties`;
-                const saveButton: ButtonModel = new ButtonModel('Save', 'blue', () => {
-                    scope.saveChangedCapabilityProperties().then(() => {
-                        this.ModalServiceNg2.closeCurrentModal();
-                    })
-                });
-                const cancelButton: ButtonModel = new ButtonModel('Cancel', 'white', () => {
-                    this.ModalServiceNg2.closeCurrentModal();
-                });
-                const modal = new ModalModel('xl', title, '', [saveButton, cancelButton]);
-                const modalInstance = this.ModalServiceNg2.createCustomModal(modal);
-                this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
-                modalInstance.instance.open();
-
-                new Promise((resolve) => {
-                    if (!this.ConnectionWizardServiceNg2.selectedMatch.capability.properties) {
-                        this.ComponentInstanceServiceNg2.getInstanceCapabilityProperties(scope.component, linkData.target, capability)
-                            .subscribe(() => {
-                                resolve();
-                            }, (error) => {
-                            });
-                    } else {
-                        resolve();
-                    }
-                }).then(() => {
-                    this.ModalServiceNg2.addDynamicContentToModal(modalInstance, ConnectionPropertiesViewComponent);
-                })
-
-            }, (error) => {
-            });
-        };
-
-        scope.deleteRelation = (link: Cy.CollectionEdges) => {
-            scope.hideRelationMenu();
-
-            //if multiple edges selected, delete the VL itself so edges get deleted automatically
-            if (this._cy.$('edge:selected').length > 1) {
-                this.NodesGraphUtils.deleteNode(this._cy, scope.component, this._cy.$('node:selected'));
-            } else {
-                this.CompositionGraphLinkUtils.deleteLink(this._cy, scope.component, true, link);
-            }
-        };
-    }
-
-    private registerCytoscapeGraphEvents(scope: ICompositionGraphScope) {
-
-        this._cy.on('addedgemouseup', (event, data) => {
-            scope.relationMenuDirectiveObj = this.CompositionGraphLinkUtils.onLinkDrawn(this._cy, data.source, data.target);
-            if (scope.relationMenuDirectiveObj != null) {
-                this.ConnectionWizardServiceNg2.setRelationMenuDirectiveObj(scope.relationMenuDirectiveObj);
-                this.ConnectionWizardServiceNg2.currentComponent = scope.component;
-                //TODO: init with the selected values
-                this.ConnectionWizardServiceNg2.selectedMatch = null;
-
-                let steps: Array<StepModel> = [];
-                let fromNodeName: string = scope.relationMenuDirectiveObj.fromNode.componentInstance.name;
-                let toNodeName: string = scope.relationMenuDirectiveObj.toNode.componentInstance.name;
-                steps.push(new StepModel(fromNodeName, FromNodeStepComponent));
-                steps.push(new StepModel(toNodeName, ToNodeStepComponent));
-                steps.push(new StepModel('Properties', PropertiesStepComponent));
-                let wizardTitle = 'Connect: ' + fromNodeName + ' to ' + toNodeName;
-                let modalInstance = this.ModalServiceNg2.createMultiStepsWizard(wizardTitle, steps, scope.createLinkFromMenu, ConnectionWizardHeaderComponent);
-                modalInstance.instance.open();
-            }
-        });
-        this._cy.on('tapstart', 'node', (event: Cy.EventObject) => {
-            scope.isOnDrag = true;
-            this._currentlyCLickedNodePosition = angular.copy(event.cyTarget[0].position()); //update node position on drag
-            if (event.cyTarget.data().isUcpe) {
-                this._cy.nodes('.ucpe-cp').unlock();
-                event.cyTarget.style('opacity', 0.5);
-            }
-        });
-
-        this._cy.on('drag', 'node', (event: Cy.EventObject) => {
-
-            if (event.cyTarget.data().isDraggable) {
-                event.cyTarget.style({ 'overlay-opacity': 0.24 });
-                if (this.GeneralGraphUtils.isValidDrop(this._cy, event.cyTarget)) {
-                    event.cyTarget.style({ 'overlay-color': GraphColors.NODE_BACKGROUND_COLOR });
-                } else {
-                    event.cyTarget.style({ 'overlay-color': GraphColors.NODE_OVERLAPPING_BACKGROUND_COLOR });
-                }
-            }
-
-            if (event.cyTarget.data().isUcpe) {
-                let pos = event.cyTarget.position();
-
-                this._cy.nodes('[?isInsideGroup]').positions((i, node) => {
-                    return {
-                        x: pos.x + node.data("ucpeOffset").x,
-                        y: pos.y + node.data("ucpeOffset").y
-                    }
-                });
-            }
-        });
-
-        this._cy.on('handlemouseover', (event, payload) => {
-
-            if (payload.node.grabbed() || this._cy.scratch('_edge_editation_highlights') === true) { //no need to add opacity while we are dragging and hovering othe nodes- or if opacity was already calculated for these nodes
-                return;
-            }
-
-            if (scope.zoneTagMode) {
-                scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getHoverTagModeId();
-                return;
-            }
-
-            let nodesData = this.NodesGraphUtils.getAllNodesData(this._cy.nodes());
-            let nodesLinks = this.GeneralGraphUtils.getAllCompositionCiLinks(this._cy);
-
-            let linkableNodes = this.commonGraphUtils.getLinkableNodes(this._cy, payload.node);
-            let filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodes(payload.node.data().componentInstance, linkableNodes, nodesLinks);
-            this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, this._cy);
-            this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, this._cy, payload.node.data());
-
-            this._cy.scratch()._edge_editation_highlights = true;
-        });
-
-        this._cy.on('handlemouseout', () => {
-            if (scope.zoneTagMode) {
-                scope.zoneTagMode = scope.zones[scope.activeZoneInstance.type].getTagModeId();
-                return;
-            }
-            if (this._cy.scratch('_edge_editation_highlights') === true) {
-                this._cy.removeScratch('_edge_editation_highlights');
-                this._cy.emit('hidehandles');
-                this.matchCapabilitiesRequirementsUtils.resetFadedNodes(this._cy);
-            }
-        });
-
-
-        this._cy.on('tapend', (event: Cy.EventObject) => {
-            scope.isOnDrag = false;
-            if (scope.zoneTagMode) {
-                return;
-            }
-            if (event.cyTarget === this._cy) { //On Background clicked
-                if (this._cy.$('node:selected').length === 0) { //if the background click but not dragged
-                    if (scope.activeZoneInstance) {
-                        scope.unsetActiveZoneInstance();
-                    }
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
-                }
-                scope.hideRelationMenu();
-            }
-
-            else if (event.cyTarget.isEdge()) { //On Edge clicked
-                this.CompositionGraphLinkUtils.handleLinkClick(this._cy, event);
-                if (event.cyTarget.data().type === CompositionCiServicePathLink.LINK_TYPE) {
-                    return;
-                }
-                this.openModifyLinkMenu(scope, this.CompositionGraphLinkUtils.getModifyLinkMenu(event.cyTarget[0], event), 6000);
-            }
-
-            else { //On Node clicked
-
-                this._cy.nodes(':grabbed').style({ 'overlay-opacity': 0 });
-
-                let isUcpe: boolean = event.cyTarget.data().isUcpe;
-                let newPosition = event.cyTarget[0].position();
-                //node position changed (drop after drag event) - we need to update position
-                if (this._currentlyCLickedNodePosition.x !== newPosition.x || this._currentlyCLickedNodePosition.y !== newPosition.y) {
-                    let nodesMoved: Cy.CollectionNodes = this._cy.$(':grabbed');
-                    if (isUcpe) {
-                        nodesMoved = nodesMoved.add(this._cy.nodes('[?isInsideGroup]:free')); //'child' nodes will not be recognized as "grabbed" elements within cytoscape. manually add them to collection of nodes moved.
-                    }
-                    this.NodesGraphUtils.onNodesPositionChanged(this._cy, scope.component, nodesMoved);
-                } else {
-                    this.$log.debug('composition-graph::onNodeSelectedEvent:: fired');
-                    if (scope.activeZoneInstance) {
-                        scope.unsetActiveZoneInstance();
-                    }
-                    scope.$apply(() => {
-                        this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
-                    });
-                }
-
-                if (isUcpe) {
-                    this._cy.nodes('.ucpe-cp').lock();
-                    event.cyTarget.style('opacity', 1);
-                }
-
-            }
-        });
-
-        this._cy.on('boxselect', 'node', (event: Cy.EventObject) => {
-            scope.unsetActiveZoneInstance();
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_NODE_SELECTED, event.cyTarget.data().componentInstance);
-        });
-
-        this._cy.on('canvasredraw', (event: Cy.EventObject) => {
-            if (scope.zoneTagMode) {
-                this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, scope.activeZoneInstance);
-            }
-        });
-
-        this._cy.on('handletagclick', (event: Cy.EventObject, eventData: any) => {
-            this.compositionGraphZoneUtils.handleTagClick(this._cy, scope.activeZoneInstance, eventData.nodeId);
-
-
-        });
-    }
-
-    private openModifyLinkMenu = (scope: ICompositionGraphScope, linkMenuObject: LinkMenu, timeOutInMilliseconds?: number) => {
-        scope.hideRelationMenu();
-        this.$timeout(() => {
-            scope.canvasMenuProps = {
-                open: true,
-                styleClass: 'w-sdc-canvas-menu-list',
-                items: [],
-                position: {
-                    x: `${linkMenuObject.position.x}px`,
-                    y: `${linkMenuObject.position.y}px`
-                }
-            };
-
-            if (this._cy.$('edge:selected').length === 1) {
-                scope.canvasMenuProps.items.push({
-                    contents: 'View',
-                    styleClass: 'w-sdc-canvas-menu-item-view',
-                    action: () => {
-                        scope.viewRelation(<Cy.CollectionEdges>linkMenuObject.link);
-                    }
-                });
-            }
-            if (!scope.isViewOnly) {
-                scope.canvasMenuProps.items.push({
-                    contents: 'Delete',
-                    styleClass: 'w-sdc-canvas-menu-item-delete',
-                    action: () => {
-                        scope.deleteRelation(<Cy.CollectionEdges>linkMenuObject.link);
-                    }
-                });
-            }
-            scope.relationMenuTimeout = this.$timeout(() => {
-                scope.hideRelationMenu();
-            }, timeOutInMilliseconds ? timeOutInMilliseconds : 6000);
-        });
-    };
-
-    private initGraphNodes(componentInstances: ComponentInstance[], isViewOnly: boolean) {
-
-
-        setTimeout(() => {
-            let handles = new CytoscapeEdgeEditation;
-            handles.init(this._cy);
-            if (!isViewOnly) { //Init nodes handle extension - enable dynamic links
-                handles.initNodeEvents();
-                handles.registerHandle(ComponentInstanceNodesStyle.getAddEdgeHandle());
-            }
-            handles.registerHandle(ComponentInstanceNodesStyle.getTagHandle());
-            handles.registerHandle(ComponentInstanceNodesStyle.getTaggedPolicyHandle());
-            handles.registerHandle(ComponentInstanceNodesStyle.getTaggedGroupHandle());
-        }, 0);
-
-
-        _.each(componentInstances, (instance) => {
-            let compositionGraphNode: CompositionCiNodeBase = this.NodesFactory.createNode(instance);
-            this.commonGraphUtils.addComponentInstanceNodeToGraph(this._cy, compositionGraphNode);
-        });
-    }
-
-
-    private initDropZone(scope: ICompositionGraphScope) {
-
-        if (scope.isViewOnly) {
-            return;
-        }
-        scope.dropCallback = (event: IDragDropEvent) => {
-            this.$log.debug(`composition-graph::dropCallback:: fired`);
-            this.CompositionGraphPaletteUtils.addNodeFromPalette(this._cy, event, scope.component);
-        };
-
-        scope.verifyDrop = (event: JQueryEventObject) => {
-
-            if (!this.dragElement || this.dragElement.hasClass('red')) {
-                return false;
-            }
-            return true;
-        };
-
-        scope.beforeDropCallback = (event: IDragDropEvent): ng.IPromise<void> => {
-            let deferred: ng.IDeferred<void> = this.$q.defer<void>();
-            if (this.dragElement.hasClass('red')) {
-                deferred.reject();
-            } else {
-                deferred.resolve();
-            }
-
-            return deferred.promise;
-        }
-    }
-
-
-    private initZones = (scope: ICompositionGraphScope): void => {
-        scope.zones = this.compositionGraphZoneUtils.createCompositionZones();
-
-
-        scope.zoneMinimizeToggle = (zoneType: ZoneInstanceType): void => {
-            scope.zones[zoneType].minimized = !scope.zones[zoneType].minimized;
-        };
-
-        scope.zoneInstanceModeChanged = (newMode: ZoneInstanceMode, instance: ZoneInstance, zoneId: ZoneInstanceType): void => {
-            if (scope.zoneTagMode) { //we're in tag mode.
-                if (instance == scope.activeZoneInstance && newMode == ZoneInstanceMode.NONE) { //we want to turn tag mode off.
-                    scope.zoneTagMode = null;
-                    scope.activeZoneInstance.mode = ZoneInstanceMode.SELECTED;
-                    this.compositionGraphZoneUtils.endCyTagMode(this._cy);
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_END, instance);
-
-                }
-            } else {
-                if (instance != scope.activeZoneInstance || (instance == scope.activeZoneInstance && newMode > ZoneInstanceMode.HOVER)) { //when active zone instance gets hover/none,dont actually change mode, just show/hide indications
-                    instance.mode = newMode;
-                }
-
-                if (newMode == ZoneInstanceMode.NONE) {
-                    this.compositionGraphZoneUtils.hideZoneTagIndications(this._cy);
-                    if (scope.zones[ZoneInstanceType.GROUP]) {
-                        this.compositionGraphZoneUtils.hideGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances);
-                    }
-                }
-                if (newMode >= ZoneInstanceMode.HOVER) {
-                    this.compositionGraphZoneUtils.showZoneTagIndications(this._cy, instance);
-                    if (instance.type == ZoneInstanceType.POLICY && scope.zones[ZoneInstanceType.GROUP]) {
-                        this.compositionGraphZoneUtils.showGroupZoneIndications(scope.zones[ZoneInstanceType.GROUP].instances, instance);
-                    }
-                }
-                if (newMode >= ZoneInstanceMode.SELECTED) {
-                    this._cy.$('node:selected').unselect();
-                    if (scope.activeZoneInstance && scope.activeZoneInstance != instance && newMode >= ZoneInstanceMode.SELECTED) {
-                        scope.activeZoneInstance.mode = ZoneInstanceMode.NONE;
-                    }
-                    scope.activeZoneInstance = instance;
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_ZONE_INSTANCE_SELECTED, instance);
-                }
-                if (newMode == ZoneInstanceMode.TAG) {
-                    this.compositionGraphZoneUtils.startCyTagMode(this._cy);
-                    scope.zoneTagMode = scope.zones[zoneId].getTagModeId();
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CANVAS_TAG_START, zoneId);
-                }
-            }
-        };
-
-        scope.zoneInstanceTagged = (taggedInstance: ZoneInstance) => {
-            scope.activeZoneInstance.addOrRemoveAssignment(taggedInstance.instanceData.uniqueId, ZoneInstanceAssignmentType.GROUPS);
-            let newHandle: string = this.compositionGraphZoneUtils.getCorrectHandleForNode(taggedInstance.instanceData.uniqueId, scope.activeZoneInstance);
-            taggedInstance.showHandle(newHandle);
-        }
-
-        scope.zoneBackgroundClicked = (): void => {
-            if (!scope.zoneTagMode && scope.activeZoneInstance) {
-                scope.unsetActiveZoneInstance();
-            }
-        };
-
-        scope.zoneAssignmentSaveStart = () => {
-            this.LoaderService.showLoader('composition-graph');
-        }
-
-        scope.zoneAssignmentSaveComplete = (success: boolean) => {
-            this.LoaderService.hideLoader('composition-graph');
-            if (!success) {
-                this.GeneralGraphUtils.showUpdateFailure();
-            }
-        };
-
-        scope.unsetActiveZoneInstance = (): void => {
-            if (scope.activeZoneInstance) {
-                scope.activeZoneInstance.mode = ZoneInstanceMode.NONE;
-                scope.activeZoneInstance = null;
-                scope.zoneTagMode = null;
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED);
-            }
-        };
-    };
-
-
-    public static factory = ($q,
-        $log,
-        $timeout,
-        NodesFactory,
-        LinksGraphUtils,
-        GeneralGraphUtils,
-        ComponentInstanceFactory,
-        NodesGraphUtils,
-        EventListenerService,
-        ComponentFactory,
-        LoaderService,
-        CommonGraphUtils,
-        MatchCapabilitiesRequirementsUtils,
-        CompositionGraphPaletteUtils,
-        CompositionGraphZoneUtils,
-        ComponentServiceNg2,
-        ModalService,
-        ConnectionWizardService,
-        ComponentInstanceServiceNg2,
-        ServicePathGraphUtils) => {
-        return new CompositionGraph(
-            $q,
-            $log,
-            $timeout,
-            NodesFactory,
-            LinksGraphUtils,
-            GeneralGraphUtils,
-            ComponentInstanceFactory,
-            NodesGraphUtils,
-            EventListenerService,
-            ComponentFactory,
-            LoaderService,
-            CommonGraphUtils,
-            MatchCapabilitiesRequirementsUtils,
-            CompositionGraphPaletteUtils,
-            CompositionGraphZoneUtils,
-            ComponentServiceNg2,
-            ModalService,
-            ConnectionWizardService,
-            ComponentInstanceServiceNg2,
-            ServicePathGraphUtils);
-    }
-}
-
-CompositionGraph.factory.$inject = [
-    '$q',
-    '$log',
-    '$timeout',
-    'NodesFactory',
-    'CompositionGraphLinkUtils',
-    'CompositionGraphGeneralUtils',
-    'ComponentInstanceFactory',
-    'CompositionGraphNodesUtils',
-    'EventListenerService',
-    'ComponentFactory',
-    'LoaderService',
-    'CommonGraphUtils',
-    'MatchCapabilitiesRequirementsUtils',
-    'CompositionGraphPaletteUtils',
-    'CompositionGraphZoneUtils',
-    'ComponentServiceNg2',
-    'ModalServiceNg2',
-    'ConnectionWizardServiceNg2',
-    'ComponentInstanceServiceNg2',
-    'ServicePathGraphUtils'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
deleted file mode 100644
index b473f44628..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ 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.
-  -->
- 
- 
-<loader display="isLoading" loader-type="composition-graph"></loader>
-<div class="sdc-composition-graph-wrapper {{zoneTagMode}}" ng-class="{'with-sidebar': withSidebar, 'view-only':isViewOnly}"
-     data-drop="!zoneTagMode"
-     data-jqyoui-options="{accept: verifyDrop}"
-     data-jqyoui-droppable="{onDrop:'dropCallback', beforeDrop: 'beforeDropCallback'}">
-</div>
-
-<!-- <relation-menu relation-menu-directive-obj="relationMenuDirectiveObj" is-link-menu-open="isLinkMenuOpen"
-               create-relation="createLinkFromMenu" cancel="cancelRelationMenu()"></relation-menu> -->
-
-<menu-list-ng2 [props]="canvasMenuProps"></menu-list-ng2>
-
-    <div class="w-sdc-search-menu" data-ng-class="{'with-sidebar': withSidebar}">
-
-    <ng2-service-path-selector
-        ng-if="component.isService()"
-        [service]="component"
-        [draw-path]="drawPathOnCy"
-        [delete-paths]="deletePathsOnCy"
-        [selected-path-id]="selectedPathId">
-    </ng2-service-path-selector>
-    <ng2-service-path 
-        ng-if="component.isService()"
-        [service]="component"
-        [on-create]="createOrUpdateServicePath"
-        [is-view-only]="isViewOnly">
-    </ng2-service-path>
-    <ng2-search-with-autocomplete
-        [search-placeholder]="'Type to search'"
-        [auto-complete-values]="componentInstanceNames"
-        (search-changed)="getAutoCompleteValues($event)"
-        (search-button-clicked)="highlightSearchMatches($event)"
-        [search-bar-class]="'composition-search'">
-    </ng2-search-with-autocomplete>
-        <div class="zoom-icons sprite-new canvas-fit-all" data-ng-click="zoomAllWithoutSidebar()"></div>
-        <div class="zoom-icons sprite-new zoom-plus" data-ng-click="zoom(true)"></div>
-        <div class="zoom-icons sprite-new zoom-minus" data-ng-click="zoom(false)"></div>
-    </div>
-<!--<asset-popover ng-if="assetPopoverOpen" asset-popover-obj="assetPopoverObj" delete-asset="deleteNode(assetPopoverObj.nodeId)"></asset-popover>-->
-<div class="sdc-canvas-zones__wrapper {{zoneTagMode}}" data-ng-class="{'with-sidebar': withSidebar}">
-    <ng2-zone-container data-ng-repeat="zone in zones" [title]="zone.title" [type]="zone.type" [count]="zone.instances.length"
-                        [visible]="zone.visible" [minimized]="zone.minimized" (minimize)="zoneMinimizeToggle(zone.type)" (background-click)="zoneBackgroundClicked()">
-        <ng2-zone-instance
-            data-ng-repeat="instance in zone.instances" [hidden]="instance.hidden"
-            [zone-instance]="instance" [default-icon-text]="zone.defaultIconText" [is-active]="activeZoneInstance == instance" [active-instance-mode]="activeZoneInstance && activeZoneInstance.mode"
-            [is-view-only]="isViewOnly" [force-save]="instance.forceSave" (mode-change)="zoneInstanceModeChanged($event.newMode, $event.instance, zone.type)" (tag-handle-click)="zoneInstanceTagged($event)"
-            (assignment-save-start)="zoneAssignmentSaveStart()" (assignment-save-complete)="zoneAssignmentSaveComplete($event)">
-        </ng2-zone-instance>
-    </ng2-zone-container>
-</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less
deleted file mode 100644
index 7124a4b5a6..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.less
+++ /dev/null
@@ -1,50 +0,0 @@
-composition-graph {
-  display: block;
-   height:100%;
-   width: 100%;
-
-  .sdc-composition-graph-wrapper{
-    height:100%;
-    width: 100%;
-
-    &.with-sidebar {
-      width: calc(~'100% - 300px');
-    }
-  }
-
-  .view-only{
-    background-color:rgb(248, 248, 248);
-  }
-
-  .sdc-canvas-zones__wrapper {
-    position: absolute;
-    bottom: 10px;
-    right: 12px;
-    display:flex;
-    transition: right 0.2s;
-
-    &.with-sidebar {
-      right:310px;
-    }
-
-    ng2-zone-container {
-      display:flex;
-      margin-left: 10px;
-    }
-  }
-
- 
-  .group-tagging {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_1.svg"), pointer;
-  }
-  .group-tagging-hover {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/group_2.svg"), pointer;
-  }
-  .policy-tagging {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_1.svg"), pointer;
-  }
-  .policy-tagging-hover {
-    cursor: url("../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
-  }
-
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
deleted file mode 100644
index 329af56e87..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-general-utils.ts
+++ /dev/null
@@ -1,323 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {ComponentInstance, Component, Match, CompositionCiLinkBase, CompositionCiNodeUcpeCp} from "app/models";
-import {QueueUtils, Dictionary, GraphUIObjects} from "app/utils";
-import {LoaderService} from "app/services";
-import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
-import {CommonGraphUtils} from "../../common/common-graph-utils";
-
-
-export class CompositionGraphGeneralUtils {
-
-    public componentRequirementsAndCapabilitiesCaching = new Dictionary<string, Component>();
-    protected static graphUtilsUpdateQueue:QueueUtils;
-
-    constructor(private $q:ng.IQService,
-                private LoaderService:LoaderService,
-                private commonGraphUtils:CommonGraphUtils,
-                private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils, 
-                private Notification:any) {
-        CompositionGraphGeneralUtils.graphUtilsUpdateQueue = new QueueUtils(this.$q);
-    }
-
-
-    /**
-     * Get the offset for the link creation Menu
-     * @param point
-     * @returns {Cy.Position}
-     */
-    public calcMenuOffset:Function = (point:Cy.Position):Cy.Position => {
-        point.x = point.x + 60;
-        point.y = point.y + 105;
-        return point;
-    };
-
-    /**
-     *  return the top left position of the link menu
-     * @param cy
-     * @param targetNodePosition
-     * @returns {Cy.Position}
-     */
-    public getLinkMenuPosition = (cy:Cy.Instance, targetNodePosition:Cy.Position) => {
-        let menuPosition:Cy.Position = this.calcMenuOffset(targetNodePosition); //get the link mid point
-        if ($(document.body).height() < menuPosition.y + GraphUIObjects.LINK_MENU_HEIGHT + $(document.getElementsByClassName('sdc-composition-graph-wrapper')).offset().top) { // if position menu is overflow bottom
-            menuPosition.y = $(document.body).height() - GraphUIObjects.TOP_HEADER_HEIGHT - GraphUIObjects.LINK_MENU_HEIGHT;
-        }
-        return menuPosition;
-    };
-
-
-    public zoomGraphTo = (cy:Cy.Instance, zoomLevel: number):void => {
-        let zy = cy.height() / 2;
-        let zx = cy.width() / 2;
-        cy.zoom({
-            level: zoomLevel,
-            renderedPosition: { x: zx, y: zy }
-        });
-    }
-
-
-    //saves the current zoom, and then sets a temporary maximum zoom for zoomAll, and then reverts to old value
-    public zoomAllWithMax = (cy:Cy.Instance, maxZoom:number):void => {
-
-        let oldMaxZoom:number = cy.maxZoom();
-        
-        cy.maxZoom(maxZoom);
-        this.zoomAll(cy);
-        cy.maxZoom(oldMaxZoom);
-
-    };
-
-
-    //Zooms to fit all of the nodes in the collection passed in. If no nodes are passed in, will zoom to fit all nodes on graph
-    public zoomAll = (cy:Cy.Instance, nodes?:Cy.CollectionNodes):void => {
-
-        if (!nodes || !nodes.length) {
-            nodes = cy.nodes();
-        }
-
-        cy.resize();
-        cy.animate({
-            fit: { eles: nodes, padding: 20 },
-            center: { eles: nodes }
-        }, { duration: 400 });
-    };
-
-    /**
-     * will return true/false if two nodes overlapping
-     *
-     * @param graph node
-     */
-    private isNodesOverlapping(node:Cy.CollectionFirstNode, draggedNode:Cy.CollectionFirstNode):boolean {
-
-        let nodeBoundingBox:Cy.BoundingBox = node.renderedBoundingBox();
-        let secondNodeBoundingBox:Cy.BoundingBox = draggedNode.renderedBoundingBox();
-
-        return this.isBBoxOverlapping(nodeBoundingBox, secondNodeBoundingBox);
-    }
-
-    /**
-     * Checks whether the bounding boxes of two nodes are overlapping on any side
-     * @param nodeOneBBox
-     * @param nodeTwoBBox
-     * @returns {boolean}
-     */
-    private isBBoxOverlapping(nodeOneBBox:Cy.BoundingBox, nodeTwoBBox:Cy.BoundingBox) {
-        return (((nodeOneBBox.x1 < nodeTwoBBox.x1 && nodeOneBBox.x2 > nodeTwoBBox.x1) ||
-        (nodeOneBBox.x1 < nodeTwoBBox.x2 && nodeOneBBox.x2 > nodeTwoBBox.x2) ||
-        (nodeTwoBBox.x1 < nodeOneBBox.x1 && nodeTwoBBox.x2 > nodeOneBBox.x2)) &&
-        ((nodeOneBBox.y1 < nodeTwoBBox.y1 && nodeOneBBox.y2 > nodeTwoBBox.y1) ||
-        (nodeOneBBox.y1 < nodeTwoBBox.y2 && nodeOneBBox.y2 > nodeTwoBBox.y2) ||
-        (nodeTwoBBox.y1 < nodeOneBBox.y1 && nodeTwoBBox.y2 > nodeOneBBox.y2)))
-    }
-
-
-    /**
-     * Checks whether a specific component instance can be hosted on the UCPE instance
-     * @param cy - Cytoscape instance
-     * @param fromUcpeInstance
-     * @param toComponentInstance
-     * @returns {Match}
-     */
-    public canBeHostedOn(cy:Cy.Instance, fromUcpeInstance:ComponentInstance, toComponentInstance:ComponentInstance):Match {
-
-        let matches:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromUcpeInstance, toComponentInstance, this.getAllCompositionCiLinks(cy));
-        let hostedOnMatch:Match = _.find(matches, (match:Match) => {
-            return match.requirement.capability.toLowerCase() === 'tosca.capabilities.container';
-        });
-
-        return hostedOnMatch;
-    };
-
-
-    /**
-     * Checks whether node can be dropped into UCPE
-     * @param cy
-     * @param nodeToInsert
-     * @param ucpeNode
-     * @returns {boolean}
-     */
-    private isValidDropInsideUCPE(cy:Cy.Instance, nodeToInsert:ComponentInstance, ucpeNode:ComponentInstance):boolean {
-
-        let hostedOnMatch:Match = this.canBeHostedOn(cy, ucpeNode, nodeToInsert);
-        let result:boolean = !angular.isUndefined(hostedOnMatch) || nodeToInsert.isVl(); //group validation
-        return result;
-
-    };
-
-
-    /**
-     * For drops from palette, checks whether the node can be dropped. If node is being held over another node, check if capable of hosting
-     * @param cy
-     * @param pseudoNodeBBox
-     * @param paletteComponentInstance
-     * @returns {boolean}
-     */
-    public isPaletteDropValid(cy:Cy.Instance, pseudoNodeBBox:Cy.BoundingBox, paletteComponentInstance:ComponentInstance) {
-
-        let componentIsUCPE:boolean = (paletteComponentInstance.capabilities && paletteComponentInstance.capabilities['tosca.capabilities.Container'] && paletteComponentInstance.name.toLowerCase().indexOf('ucpe') > -1);
-
-        if (componentIsUCPE && cy.nodes('[?isUcpe]').length > 0) { //second UCPE not allowed
-            return false;
-        }
-
-        let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => {
-
-            if (this.isBBoxOverlapping(pseudoNodeBBox, graphNode.renderedBoundingBox())) {
-                if (!componentIsUCPE && graphNode.data().isUcpe) {
-                    return !this.isValidDropInsideUCPE(cy, paletteComponentInstance, graphNode.data().componentInstance); //if this is valid insert into ucpe, we return false - no illegal overlapping nodes
-                }
-                return true;
-            }
-
-            return false;
-        });
-
-        return illegalOverlappingNodes.length === 0;
-    }
-
-    /**
-     * will return true/false if a drop of a single node is valid
-     *
-     * @param graph node
-     */
-    public isValidDrop(cy:Cy.Instance, draggedNode:Cy.CollectionFirstNode):boolean {
-
-        let illegalOverlappingNodes = _.filter(cy.nodes("[isSdcElement]"), (graphNode:Cy.CollectionFirstNode) => { //all sdc nodes, removing child nodes (childe node allways collaps
-
-            if (draggedNode.data().isUcpe && (graphNode.isChild() || graphNode.data().isInsideGroup)) { //ucpe cps always inside ucpe, no overlapping
-                return false;
-            }
-            if (draggedNode.data().isInsideGroup && (!draggedNode.active() || graphNode.data().isUcpe)) {
-                return false;
-            }
-
-            if (!draggedNode.data().isUcpe && !(draggedNode.data() instanceof CompositionCiNodeUcpeCp) && graphNode.data().isUcpe) { //case we are dragging a node into UCPE
-                let isEntirelyInUCPE:boolean = this.commonGraphUtils.isFirstBoxContainsInSecondBox(draggedNode.renderedBoundingBox(), graphNode.renderedBoundingBox());
-                if (isEntirelyInUCPE) {
-                    if (this.isValidDropInsideUCPE(cy, draggedNode.data().componentInstance, graphNode.data().componentInstance)) { //if this is valid insert into ucpe, we return false - no illegal overlapping nodes
-                        return false;
-                    }
-                }
-            }
-            return graphNode.data().id !== draggedNode.data().id && this.isNodesOverlapping(draggedNode, graphNode);
-
-        });
-        // return false;
-        return illegalOverlappingNodes.length === 0;
-    };
-
-    /**
-     * will return true/false if the move of the nodes is valid (no node overlapping and verifying if insert into UCPE is valid)
-     *
-     * @param  nodesArray - the selected drags nodes
-     */
-    public isGroupValidDrop(cy:Cy.Instance, nodesArray:Cy.CollectionNodes):boolean {
-        let filterDraggedNodes = nodesArray.filter('[?isDraggable]');
-        let isValidDrop = _.every(filterDraggedNodes, (node:Cy.CollectionFirstNode) => {
-            return this.isValidDrop(cy, node);
-
-        });
-        return isValidDrop;
-    };
-
-    /**
-     * get all links in diagram
-     * @param cy
-     * @returns {any[]|boolean[]}
-     */
-    public getAllCompositionCiLinks = (cy:Cy.Instance):Array<CompositionCiLinkBase> => {
-        return _.map(cy.edges("[isSdcElement]"), (edge:Cy.CollectionEdges) => {
-            return edge.data();
-        });
-    };
-
-
-    public showPolicyUpdateSuccess = () => {
-        this.Notification.success({
-            message: "Policy Updated",
-            title: "Success"
-        });
-    }
-    
-    public showGroupUpdateSuccess = () => {
-        this.Notification.success({
-            message: "Group Updated",
-            title: "Success"
-        });
-    }
-
-    public showUpdateFailure = () => {
-        this.Notification.error({
-            message: "Update Failed",
-            title: "Error"
-        });
-    };
-
-    /**
-     * Get Graph Utils server queue
-     * @returns {QueueUtils}
-     */
-    public getGraphUtilsServerUpdateQueue():QueueUtils {
-        return CompositionGraphGeneralUtils.graphUtilsUpdateQueue;
-    }
-    ;
-
-    /**
-     *
-     * @param blockAction - true/false if this is a block action
-     * @param instances
-     * @param component
-     */
-    public pushMultipleUpdateComponentInstancesRequestToQueue = (blockAction:boolean, instances:Array<ComponentInstance>, component:Component):void => {
-        if (blockAction) {
-            this.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
-                () => component.updateMultipleComponentInstances(instances)
-            );
-        } else {
-            this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction(
-                () => component.updateMultipleComponentInstances(instances),
-                () => this.LoaderService.hideLoader('composition-graph'));
-        }
-    };
-
-    /**
-     * this function will update component instance data
-     * @param blockAction - true/false if this is a block action
-     * @param updatedInstance
-     */
-    public pushUpdateComponentInstanceActionToQueue = (component:Component, blockAction:boolean, updatedInstance:ComponentInstance):void => {
-
-        if (blockAction) {
-            this.LoaderService.showLoader('composition-graph');
-            this.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
-                () => component.updateComponentInstance(updatedInstance)
-            );
-        } else {
-            this.getGraphUtilsServerUpdateQueue().addNonBlockingUIAction(
-                () => component.updateComponentInstance(updatedInstance),
-                () => this.LoaderService.hideLoader('composition-graph'));
-        }
-    };
-}
-
-CompositionGraphGeneralUtils.$inject = ['$q', 'LoaderService', 'CommonGraphUtils', 'MatchCapabilitiesRequirementsUtils', 'Notification'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
deleted file mode 100644
index 705367c5f7..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-links-utils.ts
+++ /dev/null
@@ -1,301 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-/**
- * Created by obarda on 6/28/2016.
- */
-import * as _ from "lodash";
-import {GraphUIObjects} from "app/utils";
-import {LoaderService} from "app/services";
-import {
-    NodeUcpe,
-    CompositionCiNodeVf,
-    Match,
-    CompositionCiNodeBase,
-    RelationshipModel,
-    ConnectRelationModel,
-    LinksFactory,
-    Component,
-    LinkMenu,
-    Point,
-    CompositionCiLinkBase
-} from "app/models";
-import {CommonGraphUtils} from "../../common/common-graph-utils";
-import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
-import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils";
-import {CompositionCiServicePathLink} from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-
-export class CompositionGraphLinkUtils {
-
-    constructor(private linksFactory:LinksFactory,
-                private loaderService:LoaderService,
-                private generalGraphUtils:CompositionGraphGeneralUtils,
-                private commonGraphUtils:CommonGraphUtils,
-                private matchCapabilitiesRequirementsUtils:MatchCapabilitiesRequirementsUtils) {
-    }
-
-
-    /**
-     * Delete the link on server and then remove it from graph
-     * @param component
-     * @param releaseLoading - true/false release the loader when finished
-     * @param link - the link to delete
-     */
-    public deleteLink = (cy:Cy.Instance, component:Component, releaseLoading:boolean, link:Cy.CollectionEdges) => {
-
-        this.loaderService.showLoader('composition-graph');
-        let onSuccessDeleteRelation = (response) => {
-            cy.remove(link);
-        };
-
-        if (!releaseLoading) {
-            this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(
-                () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation)
-            );
-        } else {
-            this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
-                () => component.deleteRelation(link.data().relation).then(onSuccessDeleteRelation),
-                () => this.loaderService.hideLoader('composition-graph'));
-        }
-    };
-
-    /**
-     * create the link on server and than draw it on graph
-     * @param link - the link to create
-     * @param cy
-     * @param component
-     */
-    public createLink = (link:CompositionCiLinkBase, cy:Cy.Instance, component:Component):void => {
-
-        this.loaderService.showLoader('composition-graph');
-
-        let onSuccess:(response:RelationshipModel) => void = (relation:RelationshipModel) => {
-            link.setRelation(relation);
-            this.commonGraphUtils.insertLinkToGraph(cy, link, component.getRelationRequirementCapability.bind(component));
-        };
-
-        link.updateLinkDirection();
-
-        this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
-            () => component.createRelation(link.relation).then(onSuccess),
-            () => this.loaderService.hideLoader('composition-graph')
-        );
-    };
-
-    private createSimpleLink = (match:Match, cy:Cy.Instance, component:Component):void => {
-        let newRelation:RelationshipModel = match.matchToRelationModel();
-        let linkObg:CompositionCiLinkBase = this.linksFactory.createGraphLink(cy, newRelation, newRelation.relationships[0]);
-        this.createLink(linkObg, cy, component);
-    };
-
-    public createLinkFromMenu = (cy:Cy.Instance, chosenMatch:Match, component:Component):void => {
-
-        if (chosenMatch) {
-            if (chosenMatch && chosenMatch instanceof Match) {
-                this.createSimpleLink(chosenMatch, cy, component);
-            }
-        }
-    };
-
-
-    /**
-     * Filters the matches for UCPE links so that shown requirements and capabilites are only related to the selected ucpe-cp
-     * @param fromNode
-     * @param toNode
-     * @param matchesArray
-     * @returns {Array<MatchBase>}
-     */
-    public filterUcpeLinks(fromNode:CompositionCiNodeBase, toNode:CompositionCiNodeBase, matchesArray:Array<Match>):any {
-
-        let matchLink:Array<Match>;
-
-        if (fromNode.isUcpePart) {
-            matchLink = _.filter(matchesArray, (match:Match) => {
-                return match.isOwner(fromNode.id);
-            });
-        }
-
-        if (toNode.isUcpePart) {
-            matchLink = _.filter(matchesArray, (match:Match) => {
-                return match.isOwner(toNode.id);
-            });
-        }
-        return matchLink ? matchLink : matchesArray;
-    }
-
-
-    /**
-     * open the connect link menu if the link drawn is valid - match  requirements & capabilities
-     * @param cy
-     * @param fromNode
-     * @param toNode
-     * @returns {any}
-     */
-    public onLinkDrawn(cy:Cy.Instance, fromNode:Cy.CollectionFirstNode, toNode:Cy.CollectionFirstNode):ConnectRelationModel {
-
-        if (!this.commonGraphUtils.nodeLocationsCompatible(cy, fromNode, toNode)) {
-            return null;
-        }
-        let linkModel:Array<CompositionCiLinkBase> = this.generalGraphUtils.getAllCompositionCiLinks(cy);
-
-        let possibleRelations:Array<Match> = this.matchCapabilitiesRequirementsUtils.getMatchedRequirementsCapabilities(fromNode.data().componentInstance,
-            toNode.data().componentInstance, linkModel);
-
-        //filter relations found to limit to specific ucpe-cp
-        possibleRelations = this.filterUcpeLinks(fromNode.data(), toNode.data(), possibleRelations);
-
-        //if found possibleRelations between the nodes we create relation menu directive and open the link menu
-        if (possibleRelations.length) {
-            // let menuPosition = this.generalGraphUtils.getLinkMenuPosition(cy, toNode.renderedPoint());
-            return new ConnectRelationModel(fromNode.data(), toNode.data(), possibleRelations);
-        }
-        return null;
-    };
-
-
-    /**
-     *  when we drag instance in to UCPE or out of UCPE  - get all links we need to delete - one node in ucpe and one node outside of ucpe
-     * @param node - the node we dragged into or out of the ucpe
-     */
-    public deleteLinksWhenNodeMovedFromOrToUCPE(component:Component, cy:Cy.Instance, nodeMoved:Cy.CollectionNodes, vlsPendingDeletion?:Cy.CollectionNodes):void {
-
-
-        let linksToDelete:Cy.CollectionElements = cy.collection();
-        _.forEach(nodeMoved.neighborhood('node'), (neighborNode)=> {
-
-            if (neighborNode.data().isUcpePart) { //existing connections to ucpe or ucpe-cp - we want to delete even though nodeLocationsCompatible will technically return true
-                linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode)); // This will delete the ucpe-host-link, or the vl-ucpe-link if nodeMoved is vl
-            } else if (!this.commonGraphUtils.nodeLocationsCompatible(cy, nodeMoved, neighborNode)) { //connection to regular node or vl - check if locations are compatible
-                if (!vlsPendingDeletion || !vlsPendingDeletion.intersect(neighborNode).length) { //Check if this is a link to a VL pending deletion, to prevent double deletion of between the node moved and vl
-                    linksToDelete = linksToDelete.add(nodeMoved.edgesWith(neighborNode));
-                }
-            }
-        });
-
-        linksToDelete.each((i, link)=> {
-            this.deleteLink(cy, component, false, link);
-        });
-
-    };
-
-    /**
-     * Creates a hostedOn link between a VF and UCPE
-     * @param component
-     * @param cy
-     * @param ucpeNode
-     * @param vfNode
-     */
-    public createVfToUcpeLink = (component:Component, cy:Cy.Instance, ucpeNode:NodeUcpe, vfNode:CompositionCiNodeVf):void => {
-        let hostedOnMatch:Match = this.generalGraphUtils.canBeHostedOn(cy, ucpeNode.componentInstance, vfNode.componentInstance);
-        /* create relation */
-        let newRelation = new RelationshipModel();
-        newRelation.fromNode = ucpeNode.id;
-        newRelation.toNode = vfNode.id;
-
-        let link:CompositionCiLinkBase = this.linksFactory.createUcpeHostLink(newRelation);
-        link.relation = hostedOnMatch.matchToRelationModel();
-        this.createLink(link, cy, component);
-    };
-
-    private handlePathLink(cy:Cy.Instance, event:Cy.EventObject) {
-        let linkData = event.cyTarget.data();
-        let selectedPathId = linkData.pathId;
-        let pathEdges = cy.collection(`[pathId='${selectedPathId}']`);
-        if (pathEdges.length > 1) {
-            setTimeout(() => {
-                pathEdges.select();
-            }, 0);
-        }
-    }
-
-    private handleVLLink(event:Cy.EventObject) {
-        let vl:Cy.CollectionNodes = event.cyTarget[0].target('.vl-node');
-        let connectedEdges:Cy.CollectionEdges = vl.connectedEdges(`[type!="${CompositionCiServicePathLink.LINK_TYPE}"]`);
-        if (vl.length && connectedEdges.length > 1) {
-            setTimeout(() => {
-                vl.select();
-                connectedEdges.select();
-            }, 0);
-        }
-    }
-
-
-    /**
-     * Handles click event on links.
-     * If one edge selected: do nothing.
-     * Two or more edges: first click - select all, secondary click - select single.
-     * @param cy
-     * @param event
-     */
-    public handleLinkClick(cy:Cy.Instance, event:Cy.EventObject) {
-        if (cy.$('edge:selected').length > 1 && event.cyTarget[0].selected()) {
-            cy.$(':selected').unselect();
-        } else {
-            if (event.cyTarget[0].data().type === CompositionCiServicePathLink.LINK_TYPE) {
-                this.handlePathLink(cy, event);
-            }
-            else {
-                this.handleVLLink(event);
-            }
-        }
-    }
-
-
-    /**
-     * Calculates the position for the menu that modifies an existing link
-     * @param event
-     * @param elementWidth
-     * @param elementHeight
-     * @returns {Point}
-     */
-    public calculateLinkMenuPosition(event, elementWidth, elementHeight):Point {
-        let point:Point = new Point(event.originalEvent.clientX, event.originalEvent.clientY);
-        if (event.originalEvent.view.screen.height - elementHeight < point.y) {
-            point.y = event.originalEvent.view.screen.height - elementHeight;
-        }
-        if (event.originalEvent.view.screen.width - elementWidth < point.x) {
-            point.x = event.originalEvent.view.screen.width - elementWidth;
-        }
-        return point;
-    };
-
-
-    /**
-     * Gets the menu that is displayed when you click an existing link.
-     * @param link
-     * @param event
-     * @returns {LinkMenu}
-     */
-    public getModifyLinkMenu(link:Cy.CollectionFirstEdge, event:Cy.EventObject):LinkMenu {
-        let point:Point = this.calculateLinkMenuPosition(event, GraphUIObjects.MENU_LINK_VL_WIDTH_OFFSET, GraphUIObjects.MENU_LINK_VL_HEIGHT_OFFSET);
-        let menu:LinkMenu = new LinkMenu(point, true, link);
-        return menu;
-    };
-
-}
-
-
-CompositionGraphLinkUtils.$inject = [
-    'LinksFactory',
-    'LoaderService',
-    'CompositionGraphGeneralUtils',
-    'CommonGraphUtils',
-    'MatchCapabilitiesRequirementsUtils'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
deleted file mode 100644
index c6c732b7df..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-nodes-utils.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, NodesFactory, ComponentInstance, CompositionCiNodeVl, IAppMenu, AssetPopoverObj, Service } from "app/models";
-import { EventListenerService, LoaderService } from "app/services";
-import { GRAPH_EVENTS, ModalsHandler, GraphUIObjects } from "app/utils";
-import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
-import { CommonGraphUtils } from "../../common/common-graph-utils";
-import { CompositionCiServicePathLink } from "app/models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import { ServiceGenericResponse } from "app/ng2/services/responses/service-generic-response";
-import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
-/**
- * Created by obarda on 11/9/2016.
- */
-export class CompositionGraphNodesUtils {
-    constructor(private NodesFactory: NodesFactory, private $log: ng.ILogService,
-        private GeneralGraphUtils: CompositionGraphGeneralUtils,
-        private commonGraphUtils: CommonGraphUtils,
-        private eventListenerService: EventListenerService,
-        private loaderService: LoaderService,
-        private serviceService: ServiceServiceNg2) {
-
-    }
-
-    /**
-     * Returns component instances for all nodes passed in
-     * @param nodes - Cy nodes
-     * @returns {any[]}
-     */
-    public getAllNodesData(nodes: Cy.CollectionNodes) {
-        return _.map(nodes, (node: Cy.CollectionFirstNode) => {
-            return node.data();
-        })
-    };
-
-
-    public highlightMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string) => {
-
-        cy.batch(() => {
-            cy.nodes("[name !@^= '" + nameToMatch + "']").style({ 'background-image-opacity': 0.4 });
-            cy.nodes("[name @^= '" + nameToMatch + "']").style({ 'background-image-opacity': 1 });
-        })
-
-    }
-
-    //Returns all nodes whose name starts with searchTerm
-    public getMatchingNodesByName = (cy: Cy.Instance, nameToMatch: string): Cy.CollectionNodes => {
-        return cy.nodes("[name @^= '" + nameToMatch + "']");
-    };
-
-    /**
-     * Deletes component instances on server and then removes it from the graph as well
-     * @param cy
-     * @param component
-     * @param nodeToDelete
-     */
-    public deleteNode(cy: Cy.Instance, component: Component, nodeToDelete: Cy.CollectionNodes): void {
-
-        this.loaderService.showLoader('composition-graph');
-        let onSuccess: (response: ComponentInstance) => void = (response: ComponentInstance) => {
-            console.info('onSuccess', response);
-
-            //if node to delete is a UCPE, remove all children (except UCPE-CPs) and remove their "hostedOn" links
-            if (nodeToDelete.data().isUcpe) {
-                _.each(cy.nodes('[?isInsideGroup]'), (node) => {
-                    this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, nodeToDelete);
-                });
-            }
-
-            //check whether the node is connected to any VLs that only have one other connection. If so, delete that VL as well
-            if (!(nodeToDelete.data() instanceof CompositionCiNodeVl)) {
-                let connectedVls: Array<Cy.CollectionFirstNode> = this.getConnectedVlToNode(nodeToDelete);
-                this.handleConnectedVlsToDelete(connectedVls);
-            }
-
-            // check whether there is a service path going through this node, and if so clean it from the graph.
-            let nodeId = nodeToDelete.data().id;
-            let connectedPathLinks = cy.collection(`[type="${CompositionCiServicePathLink.LINK_TYPE}"][source="${nodeId}"], [type="${CompositionCiServicePathLink.LINK_TYPE}"][target="${nodeId}"]`);
-            _.forEach(connectedPathLinks, (link, key) => {
-                cy.remove(`[pathId="${link.data().pathId}"]`);
-            });
-
-            // update service path list
-            this.serviceService.getComponentCompositionData(component).subscribe((response: ServiceGenericResponse) => {
-                (<Service>component).forwardingPaths = response.forwardingPaths;
-            });
-
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE_SUCCESS, nodeId);
-
-            //update UI
-            cy.remove(nodeToDelete);
-        };
-
-        let onFailed: (response: any) => void = (response: any) => {
-            console.info('onFailed', response);
-        };
-
-
-        this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
-            () => component.deleteComponentInstance(nodeToDelete.data().componentInstance.uniqueId).then(onSuccess, onFailed),
-            () => this.loaderService.hideLoader('composition-graph')
-        );
-
-    };
-
-    /**
-     * Finds all VLs connected to a single node
-     * @param node
-     * @returns {Array<Cy.CollectionFirstNode>}
-     */
-    public getConnectedVlToNode = (node: Cy.CollectionNodes): Array<Cy.CollectionFirstNode> => {
-        let connectedVls: Array<Cy.CollectionFirstNode> = new Array<Cy.CollectionFirstNode>();
-        _.forEach(node.connectedEdges().connectedNodes(), (node: Cy.CollectionFirstNode) => {
-            if (node.data() instanceof CompositionCiNodeVl) {
-                connectedVls.push(node);
-            }
-        });
-        return connectedVls;
-    };
-
-
-    /**
-     * Delete all VLs that have only two connected nodes (this function is called when deleting a node)
-     * @param connectedVls
-     */
-    public handleConnectedVlsToDelete = (connectedVls: Array<Cy.CollectionFirstNode>) => {
-        _.forEach(connectedVls, (vlToDelete: Cy.CollectionNodes) => {
-
-            if (vlToDelete.connectedEdges().length === 2) { // if vl connected only to 2 nodes need to delete the vl
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_DELETE_COMPONENT_INSTANCE, vlToDelete.data().componentInstance);
-            }
-        });
-    };
-
-
-    /**
-     * This function is called when moving a node in or out of UCPE.
-     * Deletes all connected VLs that have less than 2 valid connections remaining after the move
-     * Returns the collection of vls that are in the process of deletion (async) to prevent duplicate calls while deletion is in progress
-     * @param component
-     * @param cy
-     * @param node - node that was moved in/out of ucpe
-     */
-    public deleteNodeVLsUponMoveToOrFromUCPE = (component: Component, cy: Cy.Instance, node: Cy.CollectionNodes): Cy.CollectionNodes => {
-        if (node.data() instanceof CompositionCiNodeVl) {
-            return;
-        }
-
-        let connectedVLsToDelete: Cy.CollectionNodes = cy.collection();
-        _.forEach(node.neighborhood('node'), (connectedNode) => {
-
-            //Find all neighboring nodes that are VLs
-            if (connectedNode.data() instanceof CompositionCiNodeVl) {
-
-                //check VL's neighbors to see if it has 2 or more nodes whose location is compatible with VL (regardless of whether VL is in or out of UCPE)
-                let compatibleNodeCount = 0;
-                let vlNeighborhood = connectedNode.neighborhood('node');
-                _.forEach(vlNeighborhood, (vlNeighborNode) => {
-                    if (this.commonGraphUtils.nodeLocationsCompatible(cy, connectedNode, vlNeighborNode)) {
-                        compatibleNodeCount++;
-                    }
-                });
-
-                if (compatibleNodeCount < 2) {
-                    connectedVLsToDelete = connectedVLsToDelete.add(connectedNode);
-                }
-            }
-        });
-
-        connectedVLsToDelete.each((i, vlToDelete: Cy.CollectionNodes) => {
-            this.deleteNode(cy, component, vlToDelete);
-        });
-        return connectedVLsToDelete;
-    };
-
-    /**
-     * This function will update nodes position. if the new position is into or out of ucpe, the node will trigger the ucpe events
-     * @param cy
-     * @param component
-     * @param nodesMoved - the node/multiple nodes now moved by the user
-     */
-    public onNodesPositionChanged = (cy: Cy.Instance, component: Component, nodesMoved: Cy.CollectionNodes): void => {
-
-        if (nodesMoved.length === 0) {
-            return;
-        }
-
-        let isValidMove: boolean = this.GeneralGraphUtils.isGroupValidDrop(cy, nodesMoved);
-        if (isValidMove) {
-
-            this.$log.debug(`composition-graph::ValidDrop:: updating node position`);
-            let instancesToUpdateInNonBlockingAction: Array<ComponentInstance> = new Array<ComponentInstance>();
-
-            _.each(nodesMoved, (node: Cy.CollectionFirstNode) => {  //update all nodes new position
-
-                if (node.data().isUcpePart && !node.data().isUcpe) {
-                    return;
-                }//No need to update UCPE-CPs
-
-                //update position
-                let newPosition: Cy.Position = this.commonGraphUtils.getNodePosition(node);
-                node.data().componentInstance.updatePosition(newPosition.x, newPosition.y);
-
-                //check if node moved to or from UCPE
-                let ucpe = this.commonGraphUtils.isInUcpe(node.cy(), node.boundingbox());
-                if (node.data().isInsideGroup || ucpe.length) {
-                    this.handleUcpeChildMove(node, ucpe, instancesToUpdateInNonBlockingAction);
-                } else {
-                    instancesToUpdateInNonBlockingAction.push(node.data().componentInstance);
-                }
-
-            });
-
-            if (instancesToUpdateInNonBlockingAction.length > 0) {
-                this.GeneralGraphUtils.pushMultipleUpdateComponentInstancesRequestToQueue(false, instancesToUpdateInNonBlockingAction, component);
-            }
-        } else {
-            this.$log.debug(`composition-graph::notValidDrop:: node return to latest position`);
-            //reset nodes position
-            nodesMoved.positions((i, node) => {
-                return {
-                    x: +node.data().componentInstance.posX,
-                    y: +node.data().componentInstance.posY
-                };
-            })
-        }
-
-        this.GeneralGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(() => {
-        }, () => {
-            this.loaderService.hideLoader('composition-graph');
-        });
-
-    };
-
-    /**
-     * Checks whether the node has been added or removed from UCPE and triggers appropriate events
-     * @param node - node moved
-     * @param ucpeContainer - UCPE container that the node has been moved to. When moving a node out of ucpe, param will be empty
-     * @param instancesToUpdateInNonBlockingAction
-     */
-    public handleUcpeChildMove(node: Cy.CollectionFirstNode, ucpeContainer: Cy.CollectionElements, instancesToUpdateInNonBlockingAction: Array<ComponentInstance>) {
-
-        if (node.data().isInsideGroup) {
-            if (ucpeContainer.length) { //moving node within UCPE. Simply update position
-                this.commonGraphUtils.updateUcpeChildPosition(<Cy.CollectionNodes>node, ucpeContainer);
-                instancesToUpdateInNonBlockingAction.push(node.data().componentInstance);
-            } else { //removing node from UCPE. Notify observers
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_REMOVE_NODE_FROM_UCPE, node, ucpeContainer);
-            }
-        } else if (!node.data().isInsideGroup && ucpeContainer.length && !node.data().isUcpePart) { //adding node to UCPE
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, node, ucpeContainer, true);
-        }
-    }
-
-}
-
-
-CompositionGraphNodesUtils.$inject = ['NodesFactory', '$log', 'CompositionGraphGeneralUtils', 'CommonGraphUtils', 'EventListenerService', 'LoaderService', 'ServiceServiceNg2' /*, 'sdcMenu', 'ModalsHandler'*/]
-
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
deleted file mode 100644
index 10d0d42922..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import { EventListenerService, LoaderService } from "app/services";
-import { CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup } from "app/models";
-import { ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects } from "app/utils";
-import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
-import { CommonGraphUtils } from "../../common/common-graph-utils";
-import 'sdc-angular-dragdrop';
-import { LeftPaletteComponent } from "../../../../models/components/displayComponent";
-
-export class CompositionGraphPaletteUtils {
-
-    constructor(private ComponentFactory: ComponentFactory,
-        private $filter: ng.IFilterService,
-        private loaderService: LoaderService,
-        private generalGraphUtils: CompositionGraphGeneralUtils,
-        private componentInstanceFactory: ComponentInstanceFactory,
-        private nodesFactory: NodesFactory,
-        private commonGraphUtils: CommonGraphUtils,
-        private eventListenerService: EventListenerService) {
-    }
-
-    /**
-     * Calculate the dragged element (html element) position on canvas
-     * @param cy
-     * @param event
-     * @param position
-     * @returns {Cy.BoundingBox}
-     * @private
-     */
-    private _getNodeBBox(cy: Cy.Instance, event: IDragDropEvent, position?: Cy.Position) {
-        let bbox = <Cy.BoundingBox>{};
-        if (!position) {
-            position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
-        }
-        let cushionWidth: number = 40;
-        let cushionHeight: number = 40;
-
-        bbox.x1 = position.x - cushionWidth / 2;
-        bbox.y1 = position.y - cushionHeight / 2;
-        bbox.x2 = position.x + cushionWidth / 2;
-        bbox.y2 = position.y + cushionHeight / 2;
-        return bbox;
-    }
-
-    /**
-     * Create the component instance, update data from parent component in the left palette and notify on_insert_to_ucpe if component was dragg into ucpe
-     * @param cy
-     * @param fullComponent
-     * @param event
-     * @param component
-     */
-    private _createComponentInstanceOnGraphFromPaletteComponent(cy: Cy.Instance, fullComponent: LeftPaletteComponent, event: IDragDropEvent, component: Component) {
-
-        let componentInstanceToCreate: ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(fullComponent);
-        let cytoscapePosition: Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
-
-        componentInstanceToCreate.posX = cytoscapePosition.x;
-        componentInstanceToCreate.posY = cytoscapePosition.y;
-
-
-        let onFailedCreatingInstance: (error: any) => void = (error: any) => {
-            this.loaderService.hideLoader('composition-graph');
-        };
-
-        //on success - update node data
-        let onSuccessCreatingInstance = (createInstance: ComponentInstance): void => {
-
-            this.loaderService.hideLoader('composition-graph');
-
-            createInstance.name = this.$filter('resourceName')(createInstance.name);
-            createInstance.requirements = new RequirementsGroup(createInstance.requirements);
-            createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities);
-            createInstance.componentVersion = fullComponent.version;
-            createInstance.icon = fullComponent.icon;
-            createInstance.setInstanceRC();
-
-            let newNode: CompositionCiNodeBase = this.nodesFactory.createNode(createInstance);
-            let cyNode: Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode);
-
-            //check if node was dropped into a UCPE
-            let ucpe: Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox());
-            if (ucpe.length > 0) {
-                this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false);
-            }
-            this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE);
-
-        };
-
-        this.loaderService.showLoader('composition-graph');
-
-        // Create the component instance on server
-        this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => {
-            component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance);
-        });
-    }
-
-    /**
-     * Thid function applay red/green background when component dragged from palette
-     * @param cy
-     * @param event
-     * @param dragElement
-     * @param dragComponent
-     */
-    public onComponentDrag(cy: Cy.Instance, event: IDragDropEvent, dragElement: JQuery, dragComponent: ComponentInstance) {
-
-        if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop
-            dragElement.removeClass('red');
-            return;
-        }
-
-        let offsetPosition = {
-            x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET,
-            y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET
-        };
-        let bbox = this._getNodeBBox(cy, event, offsetPosition);
-
-        if (this.generalGraphUtils.isPaletteDropValid(cy, bbox, dragComponent)) {
-            dragElement.removeClass('red');
-        } else {
-            dragElement.addClass('red');
-        }
-    }
-
-    /**
-     *  This function is called when after dropping node on canvas
-     *  Check if the capability & requirements fulfilled and if not get from server
-     * @param cy
-     * @param event
-     * @param component
-     */
-    public addNodeFromPalette(cy: Cy.Instance, event: IDragDropEvent, component: Component) {
-        this.loaderService.showLoader('composition-graph');
-
-        let draggedComponent: LeftPaletteComponent = event.dataTransfer.component;
-
-        if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) {
-            let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId);
-            draggedComponent.capabilities = fullComponent.capabilities;
-            draggedComponent.requirements = fullComponent.requirements;
-            this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
-
-        } else {
-
-            this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId)
-                .then((fullComponent: Component) => {
-                    draggedComponent.capabilities = fullComponent.capabilities;
-                    draggedComponent.requirements = fullComponent.requirements;
-                    this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
-                });
-        }
-    }
-}
-
-
-CompositionGraphPaletteUtils.$inject = [
-    'ComponentFactory',
-    '$filter',
-    'LoaderService',
-    'CompositionGraphGeneralUtils',
-    'ComponentInstanceFactory',
-    'NodesFactory',
-    'CommonGraphUtils',
-    'EventListenerService'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
deleted file mode 100644
index 48befef22d..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-service-path-utils.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { LoaderService } from "app/services";
-import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
-import { ICompositionGraphScope } from "../composition-graph.directive";
-import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
-import { Service } from "../../../../models/components/service";
-import { ForwardingPath } from "app/models/forwarding-path";
-import { ForwardingPathLink } from "app/models/forwarding-path-link";
-import { CompositionCiServicePathLink } from "../../../../models/graph/graph-links/composition-graph-links/composition-ci-service-path-link";
-import { CommonGraphUtils } from "app/directives/graphs-v2/common/common-graph-utils";
-
-export class ServicePathGraphUtils {
-
-    constructor(
-        private loaderService: LoaderService,
-        private generalGraphUtils: CompositionGraphGeneralUtils,
-        private serviceService: ServiceServiceNg2,
-        private commonGraphUtils: CommonGraphUtils
-    ) { }
-
-    public deletePathsFromGraph(cy: Cy.Instance, service: Service) {
-        cy.remove(`[type="${CompositionCiServicePathLink.LINK_TYPE}"]`);
-    }
-
-    public drawPath(cy: Cy.Instance, forwardingPath: ForwardingPath, service: Service) {
-        let pathElements = forwardingPath.pathElements.listToscaDataDefinition;
-
-        _.forEach(pathElements, (link: ForwardingPathLink) => {
-            let data: CompositionCiServicePathLink = new CompositionCiServicePathLink(link);
-            data.source = _.find(
-                service.componentInstances,
-                instance => instance.name === data.forwardingPathLink.fromNode
-            ).uniqueId;
-            data.target = _.find(
-                service.componentInstances,
-                instance => instance.name === data.forwardingPathLink.toNode
-            ).uniqueId;
-            data.pathId = forwardingPath.uniqueId;
-            data.pathName = forwardingPath.name;
-            this.commonGraphUtils.insertServicePathLinkToGraph(cy, data);
-        });
-    }
-
-    public createOrUpdateServicePath = (scope: ICompositionGraphScope, path: any): void => {
-        let service = <Service>scope.component;
-        this.loaderService.showLoader('composition-graph');
-
-        let onSuccess: (response: ForwardingPath) => void = (response: ForwardingPath) => {
-
-            service.forwardingPaths[response.uniqueId] = response;
-            scope.selectedPathId = response.uniqueId;
-        };
-
-        this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIActionWithReleaseCallback(
-            () => this.serviceService.createOrUpdateServicePath(service, path).subscribe(onSuccess),
-            () => this.loaderService.hideLoader('composition-graph')
-        );
-    };
-}
-
-ServicePathGraphUtils.$inject = [
-    'LoaderService',
-    'CompositionGraphGeneralUtils',
-    'ServiceServiceNg2',
-    'CommonGraphUtils'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts
deleted file mode 100644
index cf6c7e3bd6..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-zone-utils.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { PolicyInstance } from "app/models/graph/zones/policy-instance";
-import { ZoneInstance, ZoneInstanceType, ZoneInstanceAssignmentType } from "app/models/graph/zones/zone-instance";
-import { Zone } from "app/models/graph/zones/zone";
-import { DynamicComponentService } from "app/ng2/services/dynamic-component.service";
-import { PaletteAnimationComponent } from "app/ng2/components/ui/palette-animation/palette-animation.component";
-import { Point, LeftPaletteMetadataTypes, Component } from "../../../../models";
-import { CanvasHandleTypes } from "app/utils";
-import { PoliciesService } from "../../../../ng2/services/policies.service";
-import { Observable } from "rxjs";
-import { GroupsService } from "../../../../ng2/services/groups.service";
-import { GroupInstance } from "app/models/graph/zones/group-instance";
-
-
-export class CompositionGraphZoneUtils {
-
-    constructor(private dynamicComponentService: DynamicComponentService,
-        private policiesService: PoliciesService,
-        private groupsService: GroupsService) {
-    }
-
-
-    public createCompositionZones = (): Array<Zone> => {
-        let zones: Array<Zone> = [];
-
-        zones[ZoneInstanceType.POLICY] = new Zone('Policies', 'P', ZoneInstanceType.POLICY);
-        zones[ZoneInstanceType.GROUP] = new Zone('Groups', 'G', ZoneInstanceType.GROUP);
-
-        return zones;
-    }
-
-    public showZone = (zone: Zone): void => {
-        zone.visible = true;
-        zone.minimized = false;
-    }
-
-    public getZoneTypeForPaletteComponent = (componentCategory: LeftPaletteMetadataTypes) => {
-        if (componentCategory == LeftPaletteMetadataTypes.Group) {
-            return ZoneInstanceType.GROUP;
-        } else if (componentCategory == LeftPaletteMetadataTypes.Policy) {
-            return ZoneInstanceType.POLICY;
-        }
-    };
-
-    public initZoneInstances(zones: Array<Zone>, component: Component) {
-        if (component.groupInstances && component.groupInstances.length) {
-            this.showZone(zones[ZoneInstanceType.GROUP]);
-            _.forEach(component.groupInstances, (group: GroupInstance) => {
-                let newInstance = new ZoneInstance(group, component);
-                this.addInstanceToZone(zones[ZoneInstanceType.GROUP], newInstance);
-            });
-        }
-
-        if (component.policies && component.policies.length) {
-            this.showZone(zones[ZoneInstanceType.POLICY]);
-            _.forEach(component.policies, (policy: PolicyInstance) => {
-                let newInstance = new ZoneInstance(policy, component);
-                this.addInstanceToZone(zones[ZoneInstanceType.POLICY], newInstance);
-
-            });
-        }
-    }
-
-    public findAndUpdateZoneInstanceData(zones: Array<Zone>, instanceData: PolicyInstance | GroupInstance) {
-        _.forEach(zones, (zone: Zone) => {
-            _.forEach(zone.instances, (zoneInstance: ZoneInstance) => {
-                if (zoneInstance.instanceData.uniqueId === instanceData.uniqueId) {
-                    zoneInstance.updateInstanceData(instanceData);
-                }
-            });
-        });
-    }
-
-    public updateTargetsOrMembersOnCanvasDelete = (canvasNodeID: string, zones: Array<Zone>, type: ZoneInstanceAssignmentType): void => {
-        _.forEach(zones, (zone) => {
-            _.forEach(zone.instances, (zoneInstance: ZoneInstance) => {
-                if (zoneInstance.isAlreadyAssigned(canvasNodeID)) {
-                    zoneInstance.addOrRemoveAssignment(canvasNodeID, type);
-                    //remove it from our list of BE targets and members as well (so that it will not be sent in future calls to BE).
-                    zoneInstance.instanceData.setSavedAssignments(zoneInstance.assignments);
-                }
-            });
-        });
-    };
-
-    public createZoneInstanceFromLeftPalette = (zoneType: ZoneInstanceType, component: Component, paletteComponentType: string): Observable<ZoneInstance> => {
-        if (zoneType === ZoneInstanceType.POLICY) {
-            return this.policiesService.createPolicyInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => {
-                let newInstance = new PolicyInstance(response);
-                component.policies.push(newInstance);
-                return new ZoneInstance(newInstance, component);
-            });
-        } else if (zoneType === ZoneInstanceType.GROUP) {
-            return this.groupsService.createGroupInstance(component.componentType, component.uniqueId, paletteComponentType).map(response => {
-                let newInstance = new GroupInstance(response);
-                component.groupInstances.push(newInstance);
-                return new ZoneInstance(newInstance, component);
-            });
-        }
-    }
-
-    public addInstanceToZone(zone: Zone, instance: ZoneInstance, hide?: boolean) {
-        if (hide) {
-            instance.hidden = true;
-        }
-        zone.instances.push(instance);
-
-    };
-
-    private findZoneCoordinates(zoneType): Point {
-        let point: Point = new Point(0, 0);
-        let zone = angular.element(document.querySelector('.' + zoneType + '-zone'));
-        let wrapperZone = zone.offsetParent();
-        point.x = zone.prop('offsetLeft') + wrapperZone.prop('offsetLeft');
-        point.y = zone.prop('offsetTop') + wrapperZone.prop('offsetTop');
-        return point;
-    }
-
-    public createPaletteToZoneAnimation = (startPoint: Point, zoneType: ZoneInstanceType, newInstance: ZoneInstance) => {
-        let zoneTypeName = ZoneInstanceType[zoneType].toLowerCase();
-        let paletteToZoneAnimation = this.dynamicComponentService.createDynamicComponent(PaletteAnimationComponent);
-        paletteToZoneAnimation.instance.from = startPoint;
-        paletteToZoneAnimation.instance.type = zoneType;
-        paletteToZoneAnimation.instance.to = this.findZoneCoordinates(zoneTypeName);
-        paletteToZoneAnimation.instance.zoneInstance = newInstance;
-        paletteToZoneAnimation.instance.iconName = zoneTypeName;
-        paletteToZoneAnimation.instance.runAnimation();
-    }
-
-    public startCyTagMode = (cy: Cy.Instance) => {
-        cy.autolock(true);
-        cy.nodes().unselectify();
-        cy.emit('tagstart'); //dont need to show handles because they're already visible bcz of hover event
-
-    };
-
-    public endCyTagMode = (cy: Cy.Instance) => {
-        cy.emit('tagend');
-        cy.nodes().selectify();
-        cy.autolock(false);
-    };
-
-    public handleTagClick = (cy: Cy.Instance, zoneInstance: ZoneInstance, nodeId: string) => {
-        zoneInstance.addOrRemoveAssignment(nodeId, ZoneInstanceAssignmentType.COMPONENT_INSTANCES);
-        this.showZoneTagIndicationForNode(nodeId, zoneInstance, cy);
-    };
-
-    public showGroupZoneIndications = (groupInstances: Array<ZoneInstance>, policyInstance: ZoneInstance) => {
-        groupInstances.forEach((groupInstance: ZoneInstance) => {
-            let handle: string = this.getCorrectHandleForNode(groupInstance.instanceData.uniqueId, policyInstance);
-            groupInstance.showHandle(handle);
-        })
-    };
-
-    public hideGroupZoneIndications = (instances: Array<ZoneInstance>) => {
-        instances.forEach((instance) => {
-            instance.hideHandle();
-        })
-    }
-
-    public showZoneTagIndications = (cy: Cy.Instance, zoneInstance: ZoneInstance) => {
-
-        cy.nodes().forEach(node => {
-            let handleType: string = this.getCorrectHandleForNode(node.id(), zoneInstance);
-            cy.emit('showhandle', [node, handleType]);
-        });
-    };
-
-    public showZoneTagIndicationForNode = (nodeId: string, zoneInstance: ZoneInstance, cy: Cy.Instance) => {
-        let node = cy.getElementById(nodeId);
-        let handleType: string = this.getCorrectHandleForNode(nodeId, zoneInstance);
-        cy.emit('showhandle', [node, handleType]);
-    }
-
-    public hideZoneTagIndications = (cy: Cy.Instance) => {
-        cy.emit('hidehandles');
-    };
-
-    public getCorrectHandleForNode = (nodeId: string, zoneInstance: ZoneInstance): string => {
-        if (zoneInstance.isAlreadyAssigned(nodeId)) {
-            if (zoneInstance.type == ZoneInstanceType.POLICY) {
-                return CanvasHandleTypes.TAGGED_POLICY;
-            } else {
-                return CanvasHandleTypes.TAGGED_GROUP;
-            }
-        } else {
-            return CanvasHandleTypes.TAG_AVAILABLE;
-        }
-    };
-}
-
-CompositionGraphZoneUtils.$inject = [
-    'DynamicComponentService',
-    'PoliciesServiceNg2',
-    'GroupsServiceNg2'
-];
\ No newline at end of file
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
deleted file mode 100644
index aa1991069e..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/match-capability-requierment-utils.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {
-    Requirement, CompositionCiLinkBase, CapabilitiesGroup, RequirementsGroup, Match,
-    CompositionCiNodeBase, Component, Capability
-} from "app/models";
-import { ComponentInstance } from "../../../../models/componentsInstances/componentInstance";
-/**
- * Created by obarda on 1/1/2017.
- */
-
-export class MatchCapabilitiesRequirementsUtils {
-
-    /**
-     * Shows + icon in corner of each node passed in
-     * @param filteredNodesData
-     * @param cy
-     */
-    public highlightMatchingComponents(filteredNodesData, cy: Cy.Instance) {
-        _.each(filteredNodesData, (data: any) => {
-            let node = cy.getElementById(data.id);
-            cy.emit('showhandle', [node]);
-        });
-    }
-
-    /**
-     * Adds opacity to each node that cannot be linked to hovered node
-     * @param filteredNodesData
-     * @param nodesData
-     * @param cy
-     * @param hoveredNodeData
-     */
-    public fadeNonMachingComponents(filteredNodesData, nodesData, cy: Cy.Instance, hoveredNodeData?) {
-        let fadeNodes = _.xorWith(nodesData, filteredNodesData, (node1, node2) => {
-            return node1.id === node2.id;
-        });
-        if (hoveredNodeData) {
-            _.remove(fadeNodes, hoveredNodeData);
-        }
-        cy.batch(() => {
-            _.each(fadeNodes, (node) => {
-                cy.getElementById(node.id).style({ 'background-image-opacity': 0.4 });
-            });
-        })
-    }
-
-    /**
-     * Resets all nodes to regular opacity
-     * @param cy
-     */
-    public resetFadedNodes(cy: Cy.Instance) {
-        cy.batch(() => {
-            cy.nodes().style({ 'background-image-opacity': 1 });
-        })
-    }
-
-    private static isRequirementFulfilled(fromNodeId: string, requirement: any, links: Array<CompositionCiLinkBase>): boolean {
-        if (requirement.maxOccurrences === 'UNBOUNDED') {
-            return false;
-        }
-        let linksWithThisReq: Array<CompositionCiLinkBase> = _.filter(links, {
-            'relation': {
-                'fromNode': fromNodeId,
-                'relationships': [{
-                    'relation': {
-                        'requirementOwnerId': requirement.ownerId,
-                        'requirement': requirement.name,
-                        'relationship': {
-                            'type': requirement.capability
-                        }
-
-                    }
-                }]
-            }
-        });
-        return linksWithThisReq.length == requirement.maxOccurrences;
-    };
-
-    private static isMatch(requirement: Requirement, capability: Capability): boolean {
-        if (capability.type === requirement.capability) {
-            if (requirement.node) {
-                if (_.includes(capability.capabilitySources, requirement.node)) {
-                    return true;
-                }
-            } else {
-                return true;
-            }
-        }
-        return false;
-    };
-
-    public getMatchedRequirementsCapabilities(fromComponentInstance: ComponentInstance,
-        toComponentInstance: ComponentInstance,
-        links: Array<CompositionCiLinkBase>): Array<Match> {
-        let fromToMatches: Array<Match> = this.getMatches(fromComponentInstance.requirements,
-            toComponentInstance.capabilities,
-            links,
-            fromComponentInstance.uniqueId,
-            toComponentInstance.uniqueId, true);
-        let toFromMatches: Array<Match> = this.getMatches(toComponentInstance.requirements,
-            fromComponentInstance.capabilities,
-            links,
-            fromComponentInstance.uniqueId,
-            toComponentInstance.uniqueId, false);
-
-        return fromToMatches.concat(toFromMatches);
-    }
-
-    /***** REFACTORED FUNCTIONS START HERE *****/
-
-    public getMatches(requirements: RequirementsGroup, capabilities: CapabilitiesGroup, links: Array<CompositionCiLinkBase>,
-        fromId: string, toId: string, isFromTo: boolean): Array<Match> {
-        let matches: Array<Match> = [];
-        let unfulfilledReqs = this.getUnfulfilledRequirements(fromId, requirements, links);
-        _.forEach(unfulfilledReqs, (req) => {
-            _.forEach(_.flatten(_.values(capabilities)), (capability: Capability) => {
-                if (MatchCapabilitiesRequirementsUtils.isMatch(req, capability)) {
-                    if (isFromTo) {
-                        matches.push(new Match(req, capability, isFromTo, fromId, toId));
-                    } else {
-                        matches.push(new Match(req, capability, isFromTo, toId, fromId));
-                    }
-                }
-            });
-        });
-        return matches;
-    }
-
-    public getUnfulfilledRequirements = (fromNodeId: string, requirements: RequirementsGroup, links: Array<CompositionCiLinkBase>): Array<Requirement> => {
-
-        let requirementArray: Array<Requirement> = [];
-        _.forEach(_.flatten(_.values(requirements)), (requirement: Requirement) => {
-            if (requirement.name !== 'dependency' && requirement.parentName !== 'dependency' && !MatchCapabilitiesRequirementsUtils.isRequirementFulfilled(fromNodeId, requirement, links)) {
-                requirementArray.push(requirement);
-            }
-        });
-        return requirementArray;
-    };
-
-
-    /**
-     * Returns true if there is a match between the capabilities and requirements that are passed in
-     * @param requirements
-     * @param capabilities
-     * @returns {boolean}
-     */
-    public containsMatch = (requirements: Array<Requirement>, capabilities: CapabilitiesGroup): boolean => {
-        return _.some(requirements, (req: Requirement) => {
-            return _.some(_.flatten(_.values(capabilities)), (capability: Capability) => {
-                return MatchCapabilitiesRequirementsUtils.isMatch(req, capability);
-            });
-        });
-    };
-
-    /**
-     * Returns array of nodes that can connect to the component.
-     * In order to connect, one of the following conditions must be met:
-     * 1. component has an unfulfilled requirement that matches a node's capabilities
-     * 2. node has an unfulfilled requirement that matches the component's capabilities
-     * 3. vl is passed in which has the capability to fulfill requirement from component and requirement on node.
-     */
-    public findMatchingNodes(component: Component, nodeDataArray: Array<CompositionCiNodeBase>,
-        links: Array<CompositionCiLinkBase>): Array<any> //TODO allow for VL array and TEST
-    {
-        let componentRequirements: Array<Requirement> = this.getUnfulfilledRequirements(component.uniqueId, component.requirements, links);
-        return _.filter(nodeDataArray, (node: any) => {
-            if (node && node.componentInstance) {
-
-                //Check if component has an unfulfilled requirement that can be met by one of nodes's capabilities (#1)
-                if (componentRequirements.length && node.category !== 'groupCp' && this.containsMatch(componentRequirements, node.componentInstance.capabilities)) {
-                    return true;
-
-                } else { //Check if node has unfulfilled requirement that can be filled by component (#2)
-                    let nodeRequirements: Array<Requirement> = this.getUnfulfilledRequirements(node.componentInstance.uniqueId, node.componentInstance.requirements, links);
-                    if (!nodeRequirements.length) return false;
-                    if (this.containsMatch(nodeRequirements, component.capabilities)) {
-                        return true;
-                    }
-                }
-            }
-        });
-    }
-}
-
-MatchCapabilitiesRequirementsUtils.$inject = [];
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
deleted file mode 100644
index 159a1c8347..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Component, Module, NodesFactory, ComponentInstance } from "app/models";
-import { ComponentInstanceFactory } from "app/utils";
-import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils";
-import { CommonGraphUtils } from "../common/common-graph-utils";
-import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style";
-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";
-
-interface IDeploymentGraphScope extends ng.IScope {
-    component: Component;
-}
-
-export class DeploymentGraph implements ng.IDirective {
-    private _cy: Cy.Instance;
-
-    constructor(private NodesFactory: NodesFactory,
-        private commonGraphUtils: CommonGraphUtils,
-        private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils,
-        private ComponentInstanceFactory: ComponentInstanceFactory,
-        private eventListenerService: EventListenerService) {
-    }
-
-    restrict = 'E';
-    template = require('./deployment-graph.html');
-    scope = {
-        component: '=',
-        isViewOnly: '='
-    };
-
-    link = (scope: IDeploymentGraphScope, el: JQuery) => {
-
-        if (scope.component.isResource()) {
-            if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.modules) {
-                this.loadGraph(scope, el);
-            } else {
-                this.eventListenerService.registerObserverCallback(GRAPH_EVENTS.ON_DEPLOYMENT_GRAPH_DATA_LOADED, () => {
-                    this.loadGraph(scope, el);
-                });
-            }
-        }
-    };
-
-    public initGraphNodes = (cy: Cy.Instance, component: Component): void => {
-        if (component.modules) { // Init module nodes
-            _.each(component.modules, (groupModule: Module) => {
-                let moduleNode = this.NodesFactory.createModuleNode(groupModule);
-                this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
-
-            });
-        }
-        _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
-            let componentInstanceNode = this.NodesFactory.createNode(instance);
-            componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.modules, instance.uniqueId);
-            if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
-                this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, componentInstanceNode);
-            }
-        });
-
-        // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
-        // so we must add an empty dummy child node
-        _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
-            if (!moduleNode.isParent()) {
-                let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
-                let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
-                componentInstanceNode.parent = moduleNode.id();
-                let dummyNode = this.commonGraphUtils.addNodeToGraph(cy, componentInstanceNode, moduleNode.position());
-                dummyNode.addClass('dummy-node');
-            }
-        })
-    };
-
-    private registerGraphEvents() {
-
-        this._cy.on('afterExpand', (event) => {
-            event.cyTarget.qtip({});
-        });
-
-        this._cy.on('afterCollapse', (event) => {
-            this.commonGraphUtils.initNodeTooltip(event.cyTarget);
-        });
-    }
-
-    private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => {
-
-        let graphEl = el.find('.sdc-deployment-graph-wrapper');
-        const imagePath = AngularJSBridge.getAngularConfig().imagesPath;
-        this._cy = cytoscape({
-            container: graphEl,
-            style: ComponentInstanceNodesStyle.getCompositionGraphStyle().concat(ModulesNodesStyle.getModuleGraphStyle()),
-            zoomingEnabled: false,
-            selectionType: 'single',
-
-        });
-
-        //adding expand collapse extension
-        this._cy.expandCollapse({
-            layoutBy: {
-                name: "grid",
-                animate: true,
-                randomize: false,
-                fit: true
-            },
-            fisheye: false,
-            undoable: false,
-            expandCollapseCueSize: 18,
-            expandCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'closeModule.png',
-            collapseCueImage: imagePath + '/assets/styles/images/resource-icons/' + 'openModule.png',
-            expandCollapseCueSensitivity: 2,
-            cueOffset: -20
-        });
-
-        this.initGraphNodes(this._cy, scope.component); //creating instances nodes
-        this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations, scope.component.getRelationRequirementCapability.bind(scope.component));
-        this._cy.collapseAll();
-        this.registerGraphEvents();
-
-        scope.$on('$destroy', () => {
-            this._cy.destroy();
-            _.forEach(GRAPH_EVENTS, (event) => {
-                this.eventListenerService.unRegisterObserver(event);
-            });
-        });
-
-    };
-
-    public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => {
-        return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService)
-    }
-}
-
-DeploymentGraph.factory.$inject = ['NodesFactory', 'CommonGraphUtils', 'DeploymentGraphGeneralUtils', 'ComponentInstanceFactory', 'EventListenerService'];
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html
deleted file mode 100644
index 1bca4bb531..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ 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.
-  -->
- 
- 
-<div  class="sdc-deployment-graph-wrapper"  ng-class="{'view-only':isViewOnly}">
-</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less
deleted file mode 100644
index f83ee8a891..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.less
+++ /dev/null
@@ -1,14 +0,0 @@
-deployment-graph {
-  display: block;
-  height:100%;
-  width: 100%;
-
-  .sdc-deployment-graph-wrapper {
-    height:100%;
-    width: 100%;
-  }
-
-  .view-only{
-    background-color:rgb(248, 248, 248);
-  }
-}
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
deleted file mode 100644
index 5d0f38fd5e..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-utils/deployment-graph-general-utils.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import { Module } from "app/models";
-/**
- * Created by obarda on 12/21/2016.
- */
-
-export class DeploymentGraphGeneralUtils {
-
-    constructor() {
-
-    }
-
-    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;
-            });
-        });
-        return parentGroup ? parentGroup.uniqueId : "";
-    };
-}
-
-DeploymentGraphGeneralUtils.$inject = [];
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
deleted file mode 100644
index 19c86a254b..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============LICENSE_END=========================================================
- */
-
-export interface ICanvasImage {
-    src: string;
-    width: number
-    height: number;
-    x: number;
-    y: number;
-}
-
-'use strict';
-export class ImageCreatorService {
-    static '$inject' = ['$q'];
-    private _canvas: HTMLCanvasElement;
-
-    constructor(private $q: ng.IQService) {
-        this._canvas = <HTMLCanvasElement>$('<canvas>')[0];
-        this._canvas.setAttribute('style', 'display:none');
-
-        let body = document.getElementsByTagName('body')[0];
-        body.appendChild(this._canvas);
-    }
-
-    /**
-     * Create an image composed of different image layers
-     * @param canvasImages
-     * @param canvasWidth 
-     * @param canvasHeight 
-     * returns a PROMISE
-     */
-    getMultiLayerBase64Image(canvasImages: ICanvasImage[], canvasWidth?: number, canvasHeight?: number): ng.IPromise<string> {
-        const deferred = this.$q.defer<string>();
-
-        if (canvasImages && canvasImages.length === 0) {
-            return null;
-        }
-
-        //If only width was set, use it for height, otherwise use first canvasImage height
-        canvasHeight = canvasHeight || canvasImages[0].height;
-        canvasWidth = canvasWidth || canvasImages[0].width;
-
-        const images = [];
-        let imagesLoaded = 0;
-        const onImageLoaded = () => {
-            imagesLoaded++;
-            if (imagesLoaded < canvasImages.length) {
-                return;
-            }
-            this._canvas.setAttribute('width', canvasWidth.toString());
-            this._canvas.setAttribute('height', canvasHeight.toString());
-            const canvasCtx = this._canvas.getContext('2d');
-            canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height);
-            images.forEach((image, index) => {
-                const canvasImage = canvasImages[index];
-                canvasCtx.drawImage(image, canvasImage.x, canvasImage.y, canvasImage.width, canvasImage.height);
-            });
-            let base64Image = this._canvas.toDataURL();
-            deferred.resolve(base64Image);
-        };
-        canvasImages.forEach(canvasImage => {
-            let image = new Image();
-            image.onload = onImageLoaded;
-            image.src = canvasImage.src;
-            images.push(image);
-        });
-        return deferred.promise;
-    }
-}
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts b/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
deleted file mode 100644
index 26c042611c..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/interfaces/i-dragdrop-event.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-interface IDragDropEvent extends JQueryEventObject {
-    dataTransfer: any;
-    toElement: {
-        naturalWidth: number;
-        naturalHeight: number;
-    }
-}
\ No newline at end of file
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
deleted file mode 100644
index 01ddb146ac..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ /dev/null
@@ -1,338 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * 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.
- * ============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 '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 { 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
-    }
-
-    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;
-
-    dragStartCallback: (event: JQueryEventObject, ui, displayComponent: LeftPaletteComponent) => void;
-    dragStopCallback: () => void;
-    onDragCallback: (event: JQueryEventObject) => void;
-
-    setElementTemplate: (e: JQueryEventObject) => void;
-
-    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
-    ) {
-    }
-
-    private fetchingComponentFromServer: boolean = false;
-    private nodeHtmlSubstitute: JQuery;
-
-    scope = {
-        currentComponent: '=',
-        isViewOnly: '=',
-        isLoading: '='
-    };
-    restrict = 'E';
-    template = require('./palette.html');
-
-    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);
-        this.registerEventListenerForLeftPalette(scope);
-
-        this.initComponents(scope);
-        this.initEvents(scope);
-        this.initDragEvents(scope);
-        this._initExpandedSection(scope, '');
-        el.on('$destroy', () => {
-            //remove listener of download event
-            this.unRegisterEventListenerForLeftPalette(scope);
-        });
-    };
-
-
-    private registerEventListenerForLeftPalette = (scope: IPaletteScope): void => {
-        this.EventListenerService.registerObserverCallback(EVENTS.LEFT_PALETTE_UPDATE_EVENT, () => {
-            this.updateLeftPanelDisplay(scope);
-        });
-    };
-
-    private unRegisterEventListenerForLeftPalette = (scope: IPaletteScope): void => {
-        this.EventListenerService.unRegisterObserver(EVENTS.LEFT_PALETTE_UPDATE_EVENT);
-    };
-
-    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 {
-        let leftPanelModel = new LeftPanelModel();
-
-        if (resourceFilterTypes && resourceFilterTypes.length) {
-            leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes);
-        }
-        leftPanelModel.numberOfElements = leftPanelComponents && leftPanelComponents.length || 0;
-
-        if (leftPanelComponents && leftPanelComponents.length) {
-
-            let categories: any = _.groupBy(leftPanelComponents, 'mainCategory');
-            for (let category in categories)
-                categories[category] = _.groupBy(categories[category], 'subCategory');
-
-            leftPanelModel.sortedCategories = categories;
-        }
-        return leftPanelModel;
-    }
-
-
-    private initEvents(scope: IPaletteScope) {
-        scope.sectionClick = (section: string) => {
-            if (section === scope.expandedSection) {
-                scope.expandedSection = '';
-                return;
-            }
-            scope.expandedSection = section;
-        };
-
-        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 {
-                if (scope.isOnDrag) {
-                    return;
-                }
-                scope.isOnDrag = true;
-                this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent);
-                this.$log.debug('palette::onMouseOver:: fired');
-            }
-
-        };
-
-        scope.onMouseOut = (displayComponent: LeftPaletteComponent) => {
-            if (this.isGroupOrPolicy(displayComponent)) {
-                this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL);
-            } else {
-                scope.isOnDrag = false;
-                this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT);
-            }
-        };
-    }
-
-    private isGroupOrPolicy(component: LeftPaletteComponent): boolean {
-        if (component &&
-            (component.categoryType === LeftPaletteMetadataTypes.Group ||
-                component.categoryType === LeftPaletteMetadataTypes.Policy)) {
-            return true;
-        }
-        return false;
-    }
-
-    private initComponents(scope: IPaletteScope) {
-        scope.searchComponents = (searchText: any): void => {
-            scope.displaySortedCategories = this._searchComponents(searchText, scope.model.sortedCategories);
-            this._initExpandedSection(scope, searchText);
-        };
-
-        scope.isDragable = scope.currentComponent.isComplex();
-        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);
-        //remove the container component  from the list
-        let componentTempToDisplay = angular.copy(scope.components);
-        componentTempToDisplay = _.remove(componentTempToDisplay, function (leftPalettecomponent) {
-            return leftPalettecomponent.invariantUUID !== scope.currentComponent.invariantUUID;
-        });
-        scope.model = this.initLeftPanel(componentTempToDisplay, resourceFilterTypes);
-        scope.displaySortedCategories = angular.copy(scope.model.sortedCategories);
-    };
-
-    private _initExpandedSection(scope: IPaletteScope, searchText: string): void {
-        if (searchText == '') {
-            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) {
-                    if (categoryToExpand == category) {
-                        isContainingCategory = true;
-                        break;
-                    }
-                }
-            }
-            isContainingCategory ? scope.expandedSection = categoryToExpand : scope.expandedSection = 'Generic';
-        }
-        else {
-            scope.expandedSection = Object.keys(scope.displaySortedCategories).sort()[0];
-        }
-    };
-
-    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) => {
-                return displayComponent.uniqueId === componentFullData.uniqueId;
-            });
-            this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component);
-
-            scope.isOnDrag = true;
-
-            // this.graphUtils.showMatchingNodes(component, myDiagram, scope.sdcConfig.imagesPath);
-            // document.addEventListener('mousemove', moveOnDocument);
-            event.dataTransfer.component = component;
-        };
-
-        scope.dragStopCallback = () => {
-            scope.isOnDrag = false;
-        };
-
-        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) => {
-                    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);
-
-            // myDiagram.dragFromPalette = node;
-            this.nodeHtmlSubstitute.find("img").attr('src', node.img);
-            scope.dragElement = this.nodeHtmlSubstitute.clone().show();
-
-            return scope.dragElement;
-        };
-    }
-
-    private _searchComponents = (searchText: string, categories: any): void => {
-        let displaySortedCategories = angular.copy(categories);
-        if (searchText != '') {
-            angular.forEach(categories, function (category: any, categoryKey) {
-
-                angular.forEach(category, function (subcategory: Array<LeftPaletteComponent>, subcategoryKey) {
-                    let filteredResources = [];
-                    angular.forEach(subcategory, function (component: LeftPaletteComponent) {
-
-                        let resourceFilterTerm: string = component.searchFilterTerms.toLowerCase();
-                        if (resourceFilterTerm.indexOf(searchText.toLowerCase()) >= 0) {
-                            filteredResources.push(component);
-                        }
-                    });
-                    if (filteredResources.length > 0) {
-                        displaySortedCategories[categoryKey][subcategoryKey] = filteredResources;
-                    }
-                    else {
-                        delete displaySortedCategories[categoryKey][subcategoryKey];
-                    }
-                });
-                if (!(Object.keys(displaySortedCategories[categoryKey]).length > 0)) {
-                    delete displaySortedCategories[categoryKey];
-                }
-
-            });
-        }
-        return displaySortedCategories;
-    };
-
-    public static factory = ($log,
-        LeftPaletteLoaderService,
-        sdcConfig,
-        ComponentFactory,
-        ComponentInstanceFactory,
-        NodesFactory,
-        CompositionGraphGeneralUtils,
-        EventListenerService,
-        sdcMenu,
-        ModalsHandler
-    ) => {
-        return new Palette($log,
-            LeftPaletteLoaderService,
-            sdcConfig,
-            ComponentFactory,
-            ComponentInstanceFactory,
-            NodesFactory,
-            CompositionGraphGeneralUtils,
-            EventListenerService,
-            sdcMenu,
-            ModalsHandler
-        );
-    };
-}
-
-Palette.factory.$inject = [
-    '$log',
-    'LeftPaletteLoaderService',
-    'sdcConfig',
-    'ComponentFactory',
-    'ComponentInstanceFactory',
-    'NodesFactory',
-    'CompositionGraphGeneralUtils',
-    'EventListenerService',
-    'sdcMenu',
-    'ModalsHandler'
-];
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html b/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
deleted file mode 100644
index 1fed02782f..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--
-  ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
-  ~
-  ~ 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.
-  -->
- 
- 
-<div class="w-sdc-designer-leftbar">
-    <div class="w-sdc-designer-leftbar-title">Elements <span class="w-sdc-designer-leftbar-title-count">{{model.numberOfElements}}</span>
-    </div>
-
-    <div class="w-sdc-designer-leftbar-search">
-        <input type="text" class="w-sdc-designer-leftbar-search-input" placeholder="Search..."
-               data-ng-model="searchText" data-ng-change="searchComponents(searchText)"
-               ng-model-options="{ debounce: 500 }" data-tests-id="searchAsset"/>
-        <span class="w-sdc-search-icon leftbar" data-ng-class="{'cancel':searchText, 'magnification':!searchText}"
-              data-ng-click="searchText=''; searchComponents('',categories)"></span>
-    </div>
-    <div class="i-sdc-designer-leftbar-section"
-         data-ng-repeat="(entityCategory, objCategory) in displaySortedCategories track by $index"
-         data-ng-class="{'expanded': expandedSection.indexOf(entityCategory) !== -1}">
-        <div class="i-sdc-designer-leftbar-section-title pointer" data-ng-click="sectionClick(entityCategory)"
-             data-tests-id="leftbar-section-title-{{entityCategory}}">
-            {{entityCategory}}
-            <div class="i-sdc-designer-leftbar-section-title-icon"></div>
-        </div>
-        <div class="i-sdc-designer-leftbar-section-content"
-             data-ng-repeat="(subCategory, components) in objCategory track by $index">
-            <div class="i-sdc-designer-leftbar-section-content-subcat i-sdc-designer-leftbar-section-content-item">
-                {{subCategory}}
-            </div>
-            <div class="i-sdc-designer-leftbar-section-content-item"
-                 data-ng-class="{'default-pointer': isViewOnly}"
-                 data-ng-mouseover="!isViewOnly && onMouseOver(component, $event.currentTarget)"
-                 data-ng-mouseleave="!isViewOnly && onMouseOut(component)"
-                 data-drag="!isViewOnly && component.isDraggable"
-                 data-jqyoui-options="{revert: 'invalid', helper:setElementTemplate, appendTo:'body', cursorAt: {left:38, top: 38}, cursor:'move'}"
-                 jqyoui-draggable="{index:{{$index}},animate:true,onStart:'dragStartCallback(component)',onStop:'dragStopCallback()', onDrag:'onDragCallback()'}"
-                 data-ng-repeat="component in components | orderBy: 'displayName' track by $index"
-                 data-tests-id={{component.displayName}}>
-                <div class="i-sdc-designer-leftbar-section-content-item-icon-ph">
-                    <div class="medium small {{component.iconClass}}"
-                         data-tests-id="leftbar-section-content-item-{{component.displayName}}">
-                        <div class="{{component.certifiedIconClass}}" uib-tooltip="Not certified"
-                             tooltip-class="uib-custom-tooltip" tooltip-placement="bottom" tooltip-popup-delay="700">
-                        </div>
-                    </div>
-                </div>
-                <div class="i-sdc-designer-leftbar-section-content-item-info">
-                    <span class="i-sdc-designer-leftbar-section-content-item-info-title"
-                          uib-tooltip="{{component.displayName}}" tooltip-class="uib-custom-tooltip"
-                          tooltip-placement="bottom" tooltip-popup-delay="700">
-                        {{component.displayName}}</span>
-                    <div class="i-sdc-designer-leftbar-section-content-item-info-text">
-                        V.{{component.version}}
-                    </div>
-                    <div class="i-sdc-designer-leftbar-section-content-item-info-text"
-                        uib-tooltip="{{component.type}}" tooltip-class="uib-custom-tooltip"
-                        tooltip-placement="top" tooltip-popup-delay="700"> Type:
-                        {{component.componentSubType}}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less b/catalog-ui/src/app/directives/graphs-v2/palette/palette.less
deleted file mode 100644
index 85657a43a5..0000000000
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.less
+++ /dev/null
@@ -1,92 +0,0 @@
-.drag-icon-border{
-  border: 7px solid red;
-  border-radius: 500px;
-  -webkit-border-radius: 500px;
-  -moz-border-radius: 500px;
-  width: 53px;
-  height: 53px;
-}
-
-.drag-icon-circle{
-  width: 60px;
-  height: 60px;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  border-radius: 50%;
-  position: relative;
-
-}
-
-
-@green-shadow: rgba(29, 154, 149, 0.3);
-@red-shadow: rgba(218, 31, 61, 0.3);
-.drag-icon-circle .sprite-resource-icons {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-}
-
-.drag-icon-circle.red {
-  background: @red-shadow;
-}
-
-.drag-icon-circle.green {
-  background: @green-shadow;
-}
-
-
-.node-substitute {
-  display: none;
-  position: absolute;
-  z-index: 9999;
-  height: 80px;
-  width: 80px;
-  border-radius: 50%;
-  text-align: center;
-
-  span {
-    display: inline-block;
-    vertical-align: middle;
-    height: 100%;
-  }
-
-  img {
-    height: 40px;
-    width: 40px;
-    box-shadow: 0 0 0 10px @green-shadow;
-    border-radius: 50%;
-
-    -webkit-user-drag: none;
-    -moz-user-drag: none;
-    user-drag: none;
-  }
-  &.red img {
-    box-shadow: 0 0 0 10px @red-shadow;
-  }
-  &.bounce img {
-    -moz-animation:bounceOut 0.3s linear;
-    -webkit-animation:bounceOut 0.3s linear;
-    animation:bounceOut 0.3s linear;
-  }
-}
-
-@keyframes bounceOut {
-  0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
-  60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-  85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
-  100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
-
-@-moz-keyframes bounceOut {
-  0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
-  60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-  85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
-  100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
-
-@-webkit-keyframes bounceOut {
-  0%{ box-shadow: 0 0 0 10px @green-shadow; width: 40px; height: 40px; }
-  60%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-  85%{ box-shadow: 0 0 0 0px @green-shadow; width: 75px; height: 75px; }
-  100%{ box-shadow: 0 0 0 0px @green-shadow; width: 60px; height: 60px; }
-}
diff --git a/catalog-ui/src/app/directives/loader/loader-directive.html b/catalog-ui/src/app/directives/loader/loader-directive.html
index 3842721c77..abac6702ba 100644
--- a/catalog-ui/src/app/directives/loader/loader-directive.html
+++ b/catalog-ui/src/app/directives/loader/loader-directive.html
@@ -13,9 +13,8 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
+ <div data-ng-if="display" data-tests-id="loader">
  
- 
-<div data-ng-if="display" data-tests-id="tlv-loader">
     <div class="tlv-loader-back " data-ng-class="{'tlv-loader-relative':relative}"></div>
     <div class="tlv-loader {{size}}"></div>
 </div>
diff --git a/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts
new file mode 100644
index 0000000000..30b8c248c9
--- /dev/null
+++ b/catalog-ui/src/app/directives/print-graph-screen/print-graph-screen.ts
@@ -0,0 +1,209 @@
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * 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.
+ * ============LICENSE_END=========================================================
+ */
+
+'use strict';
+import {IAppMenu, Component, IAppConfigurtaion} from "app/models";
+import {UrlToBase64Service} from "app/services";
+
+export interface IPrintGraphScreenScope extends ng.IScope {
+    entity:Component;
+}
+
+
+export class PrintGraphScreenDirective implements ng.IDirective {
+
+    constructor(private $filter:ng.IFilterService,
+                private  sdcMenu:IAppMenu,
+                private sdcConfig:IAppConfigurtaion,
+                private urlToBase64Service:UrlToBase64Service) {
+    }
+
+    scope = {
+        entity: '='
+    };
+    restrict = 'A';
+    link = (scope:IPrintGraphScreenScope, element:any) => {
+
+
+        element.bind('click', function () {
+            printScreen();
+        });
+
+
+        let printScreen = ():void => {
+            //
+            //     let pdf :any = new jsPDF('landscape', 'mm', 'a4');
+            //     pdf.setProperties({
+            //         title: scope.entity.name,
+            //         subject: 'Design Snapshot for ' + scope.entity.name,
+            //         author: scope.entity.creatorFullName,
+            //         keywords: scope.entity.tags.join(', '),
+            //         creator: scope.entity.creatorFullName
+            //     });
+            //
+            //     // A4 measures is 210 × 297 millimeters
+            //     let pdfWidth :number = 297,
+            //         pdfHeight :number = 210,
+            //         leftColumnWidth :number = 80;
+            //
+            //     //left bar background
+            //     pdf.setDrawColor(0);
+            //     pdf.setFillColor(248, 249, 251);
+            //     pdf.rect(0, 0, leftColumnWidth, pdfHeight, 'F');
+            //
+            //     //entity name
+            //     pdf.setFontSize(12);
+            //     pdf.setTextColor(38, 61, 77);
+            //     let splitTitle :any = pdf.splitTextToSize(scope.entity.name, 50);
+            //     pdf.text(22, 15 - (splitTitle.length - 1) * 2, splitTitle);
+            //
+            //     //line
+            //     pdf.setLineWidth(0.2);
+            //     pdf.setDrawColor(208, 209, 213);
+            //     pdf.line(0, 28, leftColumnWidth, 28);
+            //
+            //
+            //     pdf.setFontSize(10);
+            //     let properties :any = getPdfProperties();
+            //
+            //     let topOffset :number = 39, lines;
+            //     properties.forEach( (item:any) => {
+            //         if (!item.value) {
+            //             return;
+            //         }
+            //         if (item.title === 'Description:') {
+            //             topOffset += 5;
+            //         }
+            //
+            //         pdf.setTextColor(38, 61, 77);
+            //         pdf.text(5, topOffset, item.title);
+            //         pdf.setTextColor(102, 102, 102);
+            //         lines = pdf.splitTextToSize(item.value, 49);
+            //         pdf.text(5 + item.offset, topOffset, lines[0]);
+            //         if (lines.length > 1) {
+            //             lines = pdf.splitTextToSize(item.value.substring(lines[0].length + 1), 65);
+            //             if (lines.length > 8) {
+            //                 lines = lines.slice(0, 7);
+            //                 lines[lines.length - 1] += '...';
+            //             }
+            //             pdf.text(5, topOffset + 4, lines);
+            //             topOffset += 4 * (lines.length);
+            //         }
+            //
+            //         topOffset += 6;
+            //     });
+            //
+            //
+            //     //another background in case the text was too long
+            //     let declarationLineOffset :number = 176;
+            //     pdf.setDrawColor(0);
+            //     pdf.setFillColor(248, 249, 251);
+            //     pdf.rect(0, declarationLineOffset, leftColumnWidth, pdfHeight - declarationLineOffset, 'F');
+            //     //line
+            //     pdf.setLineWidth(0.2);
+            //     pdf.setDrawColor(208, 209, 213);
+            //     pdf.line(0, declarationLineOffset, leftColumnWidth, declarationLineOffset);
+            //
+            //     //declaration
+            //     pdf.setFontSize(10.5);
+            //     pdf.setTextColor(38, 61, 77);
+            //     pdf.text(5, 185, 'Declaration');
+            //     pdf.setFontSize(9);
+            //     pdf.setTextColor(102, 102, 102);
+            //     pdf.setFontType('bold');
+            //     pdf.text(5, 190, this.$filter('translate')('PDF_FILE_DECLARATION_BOLD'));
+            //     pdf.setFontType('normal');
+            //     pdf.text(5, 194, pdf.splitTextToSize(this.$filter('translate')('PDF_FILE_DECLARATION'), 65));
+            //
+            //     //entity icon
+            //     let self = this;
+            //     let addEntityIcon:Function = () => {
+            //         let iconPath:string = self.sdcConfig.imagesPath + '/styles/images/';
+            //         if (scope.entity.isService()) {
+            //             iconPath += 'service-icons/' + scope.entity.icon + '.png';
+            //         } else {
+            //             iconPath += 'resource-icons/' + scope.entity.icon + '.png';
+            //         }
+            //         self.urlToBase64Service.downloadUrl(iconPath, (base64string:string):void => {
+            //             if (base64string) {
+            //                 pdf.addImage(base64string, 'JPEG', 5, 7, 15, 15);
+            //             }
+            //             pdf.save(scope.entity.name + '.pdf');
+            //         });
+            //     };
+            //
+            //     //actual snapshop of canvas
+            //     let diagramDiv :any = document.getElementById('myDiagram');
+            //     let diagram :go.Diagram = go.Diagram.fromDiv(diagramDiv), canvasImg = new Image();
+            //     diagram.startTransaction('print screen');
+            //     let canvasImgBase64:any = diagram.makeImageData({
+            //         //scale: 1,
+            //         size: new go.Size(pdfHeight * 5, NaN),
+            //         background: 'white',
+            //         type: 'image/jpeg'
+            //     });
+            //     diagramDiv.firstElementChild.toDataURL();
+            //     diagram.commitTransaction('print screen');
+            //
+            //     canvasImg.onload = () => {
+            //         if (canvasImg.height > 0) {
+            //             let canvasImgRatio:number = Math.min((pdfWidth - leftColumnWidth - 15) / canvasImg.width, pdfHeight / canvasImg.height);
+            //             let canvasImgWidth:number = canvasImg.width * canvasImgRatio,
+            //                 canvasImgHeight:number = canvasImg.height * canvasImgRatio;
+            //             let canvasImgOffset:number = (pdfHeight - canvasImgHeight) / 2;
+            //             pdf.addImage(canvasImg, 'JPEG', leftColumnWidth, canvasImgOffset, canvasImgWidth, canvasImgHeight);
+            //
+            //             addEntityIcon();
+            //         }
+            //     };
+            //
+            //     if(canvasImg.src === 'data:,') { //empty canvas
+            //         addEntityIcon();
+            //     } else {
+            //         canvasImg.src = canvasImgBase64;
+            //     }
+        };
+
+
+        let getPdfProperties = ():Array<any> => {
+            // return [
+            //     {title: this.$filter('translate')('GENERAL_LABEL_TYPE'), value: scope.entity.getComponentSubType(), offset: 10},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_VERSION'), value: scope.entity.version, offset: 15},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_CATEGORY'), value: scope.entity.categories.length ? scope.entity.categories[0].name : '', offset: 16},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_CREATION_DATE'), value: this.$filter('date')(scope.entity.creationDate, 'MM/dd/yyyy'), offset: 24},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_AUTHOR'), value: scope.entity.creatorFullName, offset: 13},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_CONTACT_ID'), value: scope.entity.contactId, offset: 41},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_STATUS'), value: (<any>this.sdcMenu).LifeCycleStatuses[scope.entity.lifecycleState].text, offset: 13},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_DESCRIPTION'), value: scope.entity.description, offset: 20},
+            //     {title: this.$filter('translate')('GENERAL_LABEL_TAGS'), value: scope.entity.tags.join(', '), offset: 10}
+            // ];
+            return null;
+        };
+
+
+    };
+
+    public static factory = ($filter:ng.IFilterService, sdcMenu:IAppMenu, sdcConfig:IAppConfigurtaion, urlToBase64Service:UrlToBase64Service)=> {
+        return new PrintGraphScreenDirective($filter, sdcMenu, sdcConfig, urlToBase64Service);
+    };
+
+}
+
+PrintGraphScreenDirective.factory.$inject = ['$filter', 'sdcMenu', 'sdcConfig', 'Sdc.Services.UrlToBase64Service'];
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
index 25e1891790..792919172e 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.html
@@ -13,8 +13,8 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
- 
- 
+
+
 <div class="data-type-fields-structure">
     <div class="open-close">
         <div class="open-close-button" data-ng-class="{'expand':expand,'collapse':!expand}" data-ng-click="expandAndCollapse()"></div>
@@ -30,71 +30,89 @@
             </div>
         </div>
         <!--<div class="property-value">-->
-            <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure">
-                <fields-structure value-obj-ref="(valueObjRef[property.name])"
-                                  type-name="property.type"
-                                  parent-form-obj="parentFormObj"
-                                  fields-prefix-name="fieldsPrefixName+property.name"
-                                  read-only="readOnly"
-                                  default-value="{{currentTypeDefaultValue[property.name]}}">
+        <div data-ng-if="dataTypesService.isDataTypeForDataTypePropertyType(property)" class="inner-structure">
+            <fields-structure value-obj-ref="(valueObjRef[property.name])"
+                              type-name="property.type"
+                              parent-form-obj="parentFormObj"
+                              fields-prefix-name="fieldsPrefixName+property.name"
+                              read-only="readOnly"
+                              default-value="{{currentTypeDefaultValue[property.name]}}">
 
-                </fields-structure>
-            </div>
-            <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type">
-                <div ng-switch-when="map">
-                    <type-map value-obj-ref="valueObjRef[property.name]"
-                         schema-property="property.schema.property"
-                         parent-form-obj="parentFormObj"
-                         fields-prefix-name="fieldsPrefixName+property.name"
-                         read-only="readOnly"
-                         default-value="{{currentTypeDefaultValue[property.name]}}"
-                         types="types"></type-map>
-                </div>
-                <div ng-switch-when="list">
-                    <type-list value-obj-ref="valueObjRef[property.name]"
+            </fields-structure>
+        </div>
+        <div data-ng-if="!dataTypesService.isDataTypeForDataTypePropertyType(property)" ng-switch="property.type">
+            <div ng-switch-when="map">
+                <type-map value-obj-ref="valueObjRef[property.name]"
                           schema-property="property.schema.property"
                           parent-form-obj="parentFormObj"
                           fields-prefix-name="fieldsPrefixName+property.name"
                           read-only="readOnly"
                           default-value="{{currentTypeDefaultValue[property.name]}}"
-                          types="types"></type-list>
-                </div>
-                <div ng-switch-default class="primitive-value-field">
-                    <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
-                        <input class="i-sdc-form-input"
-                               data-tests-id="{{fieldsPrefixName+property.name}}"
-                               ng-if="!((property.simpleType||property.type) == 'boolean')"
-                               data-ng-maxlength="100"
-                               data-ng-readonly="readOnly"
-                               maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
-                               data-ng-model="valueObjRef[property.name]"
-                               type="text"
-                               name="{{fieldsPrefixName+property.name}}"
-                               data-ng-pattern="getValidationPattern((property.simpleType||property.type))"
-                               data-ng-model-options="{ debounce: 200 }"
-                               data-ng-change="inputOnValueChange(property)"
-                               autofocus />
-                        <select class="i-sdc-form-select"
-                                data-tests-id="{{fieldsPrefixName+property.name}}"
-                                ng-if="(property.simpleType||property.type) == 'boolean'"
-                                data-ng-disabled="readOnly"
-                                name="{{fieldsPrefixName+property.name}}"
-                                data-ng-change="onValueChange(property.name,'boolean')"
-                                data-ng-model="valueObjRef[property.name]"
-                                data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
-                        </select>
+                          types="types"></type-map>
+            </div>
+            <div ng-switch-when="list">
+                <type-list value-obj-ref="valueObjRef[property.name]"
+                           schema-property="property.schema.property"
+                           parent-form-obj="parentFormObj"
+                           fields-prefix-name="fieldsPrefixName+property.name"
+                           read-only="readOnly"
+                           default-value="{{currentTypeDefaultValue[property.name]}}"
+                           types="types"></type-list>
+            </div>
+            <div ng-switch-default class="primitive-value-field">
+                <div class="i-sdc-form-item" data-ng-class="{error:(parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid)}">
+                    <!-- Has Constraints -->
+
+                    <!--<select class="i-sdc-form-select"-->
+                    <!--ng-if="(property.constraints)"-->
+                    <!--data-ng-disabled="readOnly"-->
+                    <!--name="{{fieldsPrefixName+property.name}}"-->
+                    <!--data-ng-change="onValueChange(property.name,'constraintsChange')"-->
+                    <!--data-ng-model="valueObjRef[property.name]"-->
+                    <!--&gt;-->
+                    <!--&lt;!&ndash; Get the default value in case exist &ndash;&gt;-->
+                    <!--<option value = "{{valueObjRef[property.name]}}" name = "{{valueObjRef[property.name]}}" hidden selected>-->
+                    <!--{{valueObjRef[property.name]}}-->
+                    <!--</option> -->
+                    <!--&lt;!&ndash; add all constratint to Select list &ndash;&gt;-->
+                    <!--<option ng-repeat='value in property.constraints[0].validValues' value="{{value}}" >-->
+                    <!--{{value}}-->
+                    <!--</option> -->
+                    <!--</select>-->
+                    <!-- Input without constraints -->
+                    <input class="i-sdc-form-input"
+                           data-tests-id="{{fieldsPrefixName+property.name}}"
+                           ng-if="!((property.simpleType||property.type) == 'boolean')"
+                           data-ng-maxlength="100"
+                           data-ng-readonly="readOnly"
+                           maxlength="{{(property.simpleType||property.type) == 'integer'? 10 : 100}}"
+                           data-ng-model="valueObjRef[property.name]"
+                           type="text"
+                           name="{{fieldsPrefixName+property.name}}"
+                           data-ng-pattern="getValidationPattern((property.simpleType||property.type))"
+                           data-ng-model-options="{ debounce: 200 }"
+                           data-ng-change="inputOnValueChange(property)"
+                           autofocus
+                    />
+                    <select class="i-sdc-form-select"
+                            data-tests-id="{{fieldsPrefixName+property.name}}"
+                            ng-if="(property.simpleType||property.type) == 'boolean'"
+                            data-ng-disabled="readOnly"
+                            name="{{fieldsPrefixName+property.name}}"
+                            data-ng-change="onValueChange(property.name,'boolean')"
+                            data-ng-model="valueObjRef[property.name]"
+                            data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
+                    </select>
 
-                        <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid">
-                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
-                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
-                            <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
-                        </div>
+                    <div class="input-error" data-ng-show="parentFormObj[fieldsPrefixName+property.name].$dirty && parentFormObj[fieldsPrefixName+property.name].$invalid">
+                        <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
+                        <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
+                        <span ng-show="parentFormObj[fieldsPrefixName+property.name].$error.customValidation" translate="PROPERTY_EDIT_MAP_UNIQUE_KEYS"></span>
                     </div>
                 </div>
             </div>
+        </div>
         <!--</div>-->
 
     </div>
 </div>
-
-
diff --git a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
index eed209d438..ff2344534a 100644
--- a/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
+++ b/catalog-ui/src/app/directives/property-types/data-type-fields-structure/data-type-fields-structure.ts
@@ -42,6 +42,7 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope {
     expand:boolean;
     expanded:boolean;
     dataTypesService:DataTypesService;
+    constraints:string[];
 
     expandAndCollapse():void;
     getValidationPattern(type:string):RegExp;
@@ -53,11 +54,15 @@ export interface IDataTypeFieldsStructureScope extends ng.IScope {
 
 export class DataTypeFieldsStructureDirective implements ng.IDirective {
 
+    
+
     constructor(private DataTypesService:DataTypesService,
                 private PropertyNameValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils) {
     }
 
+    constraints: string[];
+
     scope = {
         valueObjRef: '=',
         typeName: '=',
@@ -67,6 +72,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         defaultValue: '@',
         //     types: '=',
         expandByDefault: '='
+        
     };
 
     restrict = 'E';
@@ -93,6 +99,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         return defaultValue;
     };
 
+
     private initDataOnScope = (scope:any, $attr:any):void => {
         scope.dataTypesService = this.DataTypesService;
         scope.dataTypeProperties = this.DataTypesService.getFirsLevelOfDataTypeProperties(scope.typeName);
@@ -149,7 +156,7 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
             return !value || this.ValidationUtils.validateIntRange(value);
         };
 
-        scope.onValueChange = (propertyName:string, type:string):void => {
+        scope.onValueChange = (propertyName:string, type:string,):void => {
             scope.valueObjRef[propertyName] = !angular.isUndefined(scope.valueObjRef[propertyName]) ? scope.valueObjRef[propertyName] : scope.currentTypeDefaultValue[propertyName];
             if (scope.valueObjRef[propertyName] && type != 'string') {
                 scope.valueObjRef[propertyName] = JSON.parse(scope.valueObjRef[propertyName]);
@@ -157,7 +164,10 @@ export class DataTypeFieldsStructureDirective implements ng.IDirective {
         };
 
         scope.inputOnValueChange = (property:any) => {
-
+            if (property.constraints){
+                // this.constraints = property.constraints[0].validValues;
+            }
+            
             let value = !scope.parentFormObj[scope.fieldsPrefixName + property.name].$error.pattern
                 && ('integer' == property.type && scope.parentFormObj[scope.fieldsPrefixName + property.name].$setValidity('pattern', scope.validateIntRange(scope.valueObjRef[property.name]))
                 || scope.onValueChange(property.name, (property.simpleType || property.type)));
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
index 2363f57d80..661514f799 100644
--- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.html
@@ -20,7 +20,7 @@
         <div class="i-sdc-form-item list-new-item" data-ng-class="{error:(parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid)}">
             <input class="i-sdc-form-input"
                    data-tests-id="listNewItem{{fieldsPrefixName}}"
-                   ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
+                   ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
                    data-ng-disabled="readOnly"
                    data-ng-model="listNewItem.value"
                    type="text"
@@ -34,13 +34,32 @@
                    autofocus />
             <select class="i-sdc-form-select"
                     data-tests-id="listNewItem{{fieldsPrefixName}}"
-                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
                     data-ng-disabled="readOnly"
                     name="listNewItem{{fieldsPrefixName}}"
                     data-ng-model="listNewItem.value">
                 <option value="true">true</option>
                 <option value="false">false</option>
             </select>
+
+
+            <select class="i-sdc-form-select"
+                data-tests-id="constraints"
+                ng-if="constraints"
+                data-ng-disabled="readOnly"
+                data-ng-model="listNewItem.value">
+                <!-- Get the default value in case exist -->
+                <option value = "{{listNewItem.value}" name = "{{listNewItem.value}}" hidden selected>
+                        {{listNewItem.value}}
+                </option> 
+                <!-- add all constratint to Select list -->
+                <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}">
+                    {{value}}
+                </option>
+                
+                
+            </select>
+
             <div class="input-error" data-ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$dirty && parentFormObj['listNewItem'+fieldsPrefixName].$invalid">
                 <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
                 <span ng-show="parentFormObj['listNewItem'+fieldsPrefixName].$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '{{maxLength}}' }"></span>
diff --git a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
index f2288cfd07..997e28dabc 100644
--- a/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-list/type-list-directive.ts
@@ -37,6 +37,8 @@ export interface ITypeListScope extends ng.IScope {
     listDefaultValue:any;
     listNewItem:any;
     maxLength:number;
+    
+    constraints:string[];
 
     getValidationPattern(type:string):RegExp;
     validateIntRange(value:string):boolean;
@@ -49,7 +51,7 @@ export class TypeListDirective implements ng.IDirective {
 
     constructor(private DataTypesService:DataTypesService,
                 private PropertyNameValidationPattern:RegExp,
-                private ValidationUtils:ValidationUtils) {
+                private ValidationUtils:ValidationUtils) {  
     }
 
     scope = {
@@ -59,7 +61,8 @@ export class TypeListDirective implements ng.IDirective {
         fieldsPrefixName: '=',//prefix for form fields names
         readOnly: '=',//is form read only
         defaultValue: '@',//this list default value
-        maxLength: '='
+        maxLength: '=',
+        constraints: '='
     };
 
     restrict = 'E';
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
index aa03cecb17..55a414e729 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.html
@@ -41,8 +41,9 @@
         </div>
         <div data-ng-if="!isSchemaTypeDataType" class="i-sdc-form-item map-item-field" data-ng-class="{error:(parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid)}">
             <label class="i-sdc-form-label required">Value</label>
+        
             <input class="i-sdc-form-input"
-                   ng-if="!((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
+                   ng-if="!constraints && !((schemaProperty.simpleType||schemaProperty.type) == 'boolean')"
                    data-ng-readonly="readOnly"
                    data-ng-model="valueObjRef[mapKeys[$index]]"
                    type="text"
@@ -57,7 +58,7 @@
                    autofocus />
             <select class="i-sdc-form-select"
                     data-tests-id="mapValue{{fieldsPrefixName}}{{$index}}"
-                    ng-if="(schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
+                    ng-if="!constraints && (schemaProperty.simpleType||schemaProperty.type) == 'boolean'"
                     data-ng-disabled="readOnly"
                     name="mapValue{{fieldsPrefixName}}{{$index}}"
                     data-ng-model="valueObjRef[mapKeys[$index]]"
@@ -65,6 +66,24 @@
                 <option value="true">true</option>
                 <option value="false">false</option>
             </select>
+
+
+            <select class="i-sdc-form-select"
+                data-tests-id="constraints"
+                ng-if="constraints"
+                data-ng-disabled="readOnly"
+                data-ng-model="valueObjRef[mapKeys[$index]]">
+
+                <!-- Get the saved value for the relevant key -->
+                <option ng-if = "valueObjRef[mapKeys[$index]]" value = "{{valueObjRef[mapKeys[$index]]}}" name = "{{valueObjRef[mapKeys[$index]]}}" hidden selected>
+                        {{valueObjRef[mapKeys[$index]]}}
+                </option> 
+                <!-- add all constratint to Select list -->
+                <option ng-repeat='value in constraints' value="{{value}}" name="{{value}}">
+                    {{value}}
+                </option> 
+            </select>
+
             <div class="input-error" data-ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$dirty && parentFormObj['mapValue'+fieldsPrefixName+$index].$invalid">
                 <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.required" translate="VALIDATION_ERROR_REQUIRED" translate-values="{'field': 'Value' }"></span>
                 <span ng-show="parentFormObj['mapValue'+fieldsPrefixName+$index].$error.pattern" translate="PROPERTY_EDIT_PATTERN"></span>
diff --git a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
index 5718cdd9b5..080c13b87f 100644
--- a/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
+++ b/catalog-ui/src/app/directives/property-types/type-map/type-map-directive.ts
@@ -39,6 +39,7 @@ export interface ITypeMapScope extends ng.IScope {
     readOnly:boolean;
     mapDefaultValue:any;
     maxLength:number;
+    constraints:string[];
 
     getValidationPattern(type:string):RegExp;
     validateIntRange(value:string):boolean;
@@ -65,7 +66,9 @@ export class TypeMapDirective implements ng.IDirective {
         fieldsPrefixName: '=',//prefix for form fields names
         readOnly: '=',//is form read only
         defaultValue: '@',//this map default value
-        maxLength: '='
+        maxLength: '=',
+        constraints: '='
+        
     };
 
     restrict = 'E';
diff --git a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html
index fbcbb396f4..f6bd1ca87c 100644
--- a/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html
+++ b/catalog-ui/src/app/directives/select-property-types/select-data-type-fields-structure/select-data-type-fields-structure.html
@@ -90,6 +90,7 @@
                             data-ng-model="valueObjRef[property.name]"
                             data-ng-options="option.v as option.n for option in [{ n: '', v: undefined }, { n: 'false', v: false }, { n: 'true', v: true }]">
                     </select>
+                    
 
                 </div>
             </div>
diff --git a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
index 1367906e21..0200e3d510 100644
--- a/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
+++ b/catalog-ui/src/app/directives/user-header-details/user-header-details-directive.ts
@@ -21,6 +21,7 @@
 'use strict';
 import {User, IUser, IAppConfigurtaion, IUserProperties} from "app/models";
 import { UserService } from "../../ng2/services/user.service";
+import { AuthenticationService } from "app/ng2/services/authentication.service";
 export interface IUserHeaderDetailsScope extends ng.IScope {
     iconUrl:string;
     user:IUser;
@@ -29,7 +30,7 @@ export interface IUserHeaderDetailsScope extends ng.IScope {
 
 export class UserHeaderDetailsDirective implements ng.IDirective {
 
-    constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService) {
+    constructor(private $http:ng.IHttpService, private sdcConfig:IAppConfigurtaion, private userService:UserService, private authService: AuthenticationService) {
     }
 
     scope = {
@@ -46,7 +47,7 @@ export class UserHeaderDetailsDirective implements ng.IDirective {
 
         scope.initUser = ():void => {
             let defaultUserId:string;
-            let userInfo:IUserProperties = this.userService.getLoggedinUser();
+            let userInfo:IUserProperties = this.authService.getLoggedinUser();
             if (!userInfo) {
                 defaultUserId = this.$http.defaults.headers.common[this.sdcConfig.cookie.userIdSuffix];
                 this.userService.getUser(defaultUserId).subscribe((defaultUserInfo):void => {
@@ -59,10 +60,10 @@ export class UserHeaderDetailsDirective implements ng.IDirective {
         scope.initUser();
     };
 
-    public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService)=> {
-        return new UserHeaderDetailsDirective($http, sdcConfig, userService);
+    public static factory = ($http:ng.IHttpService, sdcConfig:IAppConfigurtaion, userService:UserService, authService:AuthenticationService)=> {
+        return new UserHeaderDetailsDirective($http, sdcConfig, userService, authService);
     };
 
 }
 
-UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2'];
+UserHeaderDetailsDirective.factory.$inject = ['$http', 'sdcConfig', 'UserServiceNg2', 'AuthenticationServiceNg2'];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
index 878de11e91..58743081fb 100644
--- a/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
+++ b/catalog-ui/src/app/directives/utils/expand-collapse/expand-collapse.ts
@@ -70,7 +70,7 @@ export class ExpandCollapseDirective implements ng.IDirective {
             $elem.addClass('expanded');
             scope.collapsed = false;
 
-            let element = $(scope.expandedSelector)[0];
+            let element = <HTMLElement>$(scope.expandedSelector)[0];
             let prevWidth = element.style.height;
             element.style.height = 'auto';
             let endWidth = getComputedStyle(element).height;
@@ -92,7 +92,7 @@ export class ExpandCollapseDirective implements ng.IDirective {
             $elem.removeClass('expanded');
             scope.collapsed = true;
 
-            let element = $(scope.expandedSelector)[0];
+            let element = <HTMLElement>$(scope.expandedSelector)[0];
             element.style.height = getComputedStyle(element).height;
             element.style.transition = 'height .5s ease-in-out';
             element.offsetHeight; // force repaint
diff --git a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
index 098134aaae..0c84af939b 100644
--- a/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
+++ b/catalog-ui/src/app/directives/utils/smart-tooltip/smart-tooltip.ts
@@ -43,7 +43,7 @@ export class SmartTooltipDirective implements ng.IDirective {
         }
 
         $elem.bind('mouseenter', () => {
-            if ($elem[0].offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) {
+            if ((<HTMLElement>$elem[0]).offsetWidth < $elem[0].scrollWidth && !$elem.attr('tooltips')) {
                 $attrs.$set('tooltips', 'tooltips');
                 if ($attrs['sdcSmartTooltip'] && $attrs['sdcSmartTooltip'].length > 0) {
                     $elem.attr('tooltip-content', $attrs['sdcSmartTooltip']);