[sdc] update code of sdc

Change-Id: If9f37c80b659cb67b34d18e6c019defecca58b9a
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 33 insertions, 23 deletions

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
index 83bf747501..5285f46112 100644
--- 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
@@ -3,7 +3,7 @@ import {CapabilitiesGroup, NodesFactory, ComponentInstance, Component, Compositi
 import {ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects} from "app/utils";
 import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils";
 import {CommonGraphUtils} from "../../common/common-graph-utils";
-import 'angular-dragdrop';
+import 'sdc-angular-dragdrop';
 import {LeftPaletteComponent} from "../../../../models/components/displayComponent";
 
 export class CompositionGraphPaletteUtils {
diff --git a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
index 5ad6570013..3a0726f212 100644
--- a/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/deployment-graph/deployment-graph.directive.ts
@@ -1,22 +1,25 @@
-import {Component, Module, NodesFactory, ComponentInstance} from "app/models";
-import {ComponentInstanceFactory} from "app/utils";
-import {DeploymentGraphGeneralUtils} from "./deployment-utils/deployment-graph-general-utils";
-import {CommonGraphUtils} from "../common/common-graph-utils";
-import {ComponentInstanceNodesStyle} from "../common/style/component-instances-nodes-style";
-import {ModulesNodesStyle} from "../common/style/module-node-style";
-import {GRAPH_EVENTS} from "app/utils";
-import {EventListenerService} from "app/services";
-import 'cytoscape-expand-collapse';
+import { Component, Module, NodesFactory, ComponentInstance } from "app/models";
+import { ComponentInstanceFactory } from "app/utils";
+import { DeploymentGraphGeneralUtils } from "./deployment-utils/deployment-graph-general-utils";
+import { CommonGraphUtils } from "../common/common-graph-utils";
+import { ComponentInstanceNodesStyle } from "../common/style/component-instances-nodes-style";
+import { ModulesNodesStyle } from "../common/style/module-node-style";
+import { GRAPH_EVENTS } from "app/utils";
+import { EventListenerService } from "app/services";
+import '@bardit/cytoscape-expand-collapse';
 
 interface IDeploymentGraphScope extends ng.IScope {
-    component:Component;
+    component: Component;
 }
 
 export class DeploymentGraph implements ng.IDirective {
-    private _cy:Cy.Instance;
+    private _cy: Cy.Instance;
 
-    constructor(private NodesFactory:NodesFactory, private commonGraphUtils:CommonGraphUtils,
-                private deploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, private ComponentInstanceFactory:ComponentInstanceFactory, private eventListenerService:EventListenerService) {
+    constructor(private NodesFactory: NodesFactory,
+        private commonGraphUtils: CommonGraphUtils,
+        private deploymentGraphGeneralUtils: DeploymentGraphGeneralUtils,
+        private ComponentInstanceFactory: ComponentInstanceFactory,
+        private eventListenerService: EventListenerService) {
     }
 
     restrict = 'E';
@@ -26,7 +29,7 @@ export class DeploymentGraph implements ng.IDirective {
         isViewOnly: '='
     };
 
-    link = (scope:IDeploymentGraphScope, el:JQuery) => {
+    link = (scope: IDeploymentGraphScope, el: JQuery) => {
 
         if (scope.component.isResource()) {
             if (scope.component.componentInstances && scope.component.componentInstancesRelations && scope.component.groups) {
@@ -39,16 +42,15 @@ export class DeploymentGraph implements ng.IDirective {
         }
     };
 
-
-    public initGraphNodes = (cy:Cy.Instance, component:Component):void => {
+    public initGraphNodes = (cy: Cy.Instance, component: Component): void => {
         if (component.groups) { // Init module nodes
-            _.each(component.groups, (groupModule:Module) => {
+            _.each(component.groups, (groupModule: Module) => {
                 let moduleNode = this.NodesFactory.createModuleNode(groupModule);
                 this.commonGraphUtils.addNodeToGraph(cy, moduleNode);
 
             });
         }
-        _.each(component.componentInstances, (instance:ComponentInstance) => { // Init component instance nodes
+        _.each(component.componentInstances, (instance: ComponentInstance) => { // Init component instance nodes
             let componentInstanceNode = this.NodesFactory.createNode(instance);
             componentInstanceNode.parent = this.deploymentGraphGeneralUtils.findInstanceModule(component.groups, instance.uniqueId);
             if (componentInstanceNode.parent) { // we are not drawing instances that are not a part of a module
@@ -58,7 +60,7 @@ export class DeploymentGraph implements ng.IDirective {
 
         // This is a special functionality to pass the cytoscape default behavior - we can't create Parent module node without children's
         // so we must add an empty dummy child node
-        _.each(this._cy.nodes('[?isGroup]'), (moduleNode:Cy.CollectionFirstNode) => {
+        _.each(this._cy.nodes('[?isGroup]'), (moduleNode: Cy.CollectionFirstNode) => {
             if (!moduleNode.isParent()) {
                 let dummyInstance = this.ComponentInstanceFactory.createEmptyComponentInstance();
                 let componentInstanceNode = this.NodesFactory.createNode(dummyInstance);
@@ -80,7 +82,7 @@ export class DeploymentGraph implements ng.IDirective {
         });
     }
 
-    private loadGraph = (scope:IDeploymentGraphScope, el:JQuery) => {
+    private loadGraph = (scope: IDeploymentGraphScope, el: JQuery) => {
 
         let graphEl = el.find('.sdc-deployment-graph-wrapper');
         this._cy = cytoscape({
@@ -112,9 +114,17 @@ export class DeploymentGraph implements ng.IDirective {
         this.commonGraphUtils.initGraphLinks(this._cy, scope.component.componentInstancesRelations);
         this._cy.collapseAll();
         this.registerGraphEvents();
+
+        scope.$on('$destroy', () => {
+            this._cy.destroy();
+            _.forEach(GRAPH_EVENTS, (event) => {
+                this.eventListenerService.unRegisterObserver(event);
+            });
+        });
+
     };
 
-    public static factory = (NodesFactory:NodesFactory, CommonGraphUtils:CommonGraphUtils, DeploymentGraphGeneralUtils:DeploymentGraphGeneralUtils, ComponentInstanceFactory:ComponentInstanceFactory, EventListenerService:EventListenerService) => {
+    public static factory = (NodesFactory: NodesFactory, CommonGraphUtils: CommonGraphUtils, DeploymentGraphGeneralUtils: DeploymentGraphGeneralUtils, ComponentInstanceFactory: ComponentInstanceFactory, EventListenerService: EventListenerService) => {
         return new DeploymentGraph(NodesFactory, CommonGraphUtils, DeploymentGraphGeneralUtils, ComponentInstanceFactory, EventListenerService)
     }
 }
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
index 4bfbe5270e..0158a38253 100644
--- a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
+++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts
@@ -10,7 +10,7 @@ import {
 import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils";
 import {EventListenerService} from "app/services";
 import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils";
-import 'angular-dragdrop';
+import 'sdc-angular-dragdrop';
 import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service";
 
 interface IPaletteScope {