Catalog alignment

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

10 files changed, 0 insertions, 2633 deletions

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 = [];