Initial OpenECOMP SDC commit

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

30 files changed, 1572 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/models/graph/d2-node.ts b/catalog-ui/app/scripts/models/graph/d2-node.ts
new file mode 100644
index 0000000000..16daa5470d
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/d2-node.ts
@@ -0,0 +1,31 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+
+// module Sdc.Models {
+//
+//     export interface D2Node extends go.Node {
+//         //TODO:should be typesafe!
+//         resource: any;
+//         key:string;
+//         data:any;
+//         canvasPosition: {x:number;y:number};
+//     }
+// }
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/common-base-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/common-base-link.ts
new file mode 100644
index 0000000000..7d21c5d978
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/common-base-link.ts
@@ -0,0 +1,53 @@
+/*-
+ * ============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/29/2016.
+ */
+/// <reference path="../../../references"/>
+module Sdc.Models {
+
+    export class CommonLinkBase {
+
+        img:string;
+        color:string;
+        classes: string;
+
+        //this is cytoscapejs fields
+        public source: string;
+        public target: string;
+        public type: string;
+        public isSdcElement: boolean;
+
+        constructor() {
+            this.isSdcElement = true;
+            this.type = 'sdc-link';
+
+        }
+
+        public setImage = (imgUrl: string) => {
+            this.img = imgUrl;
+        };
+
+        public setColor = (color: string) => {
+            this.color = color;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/common-ci-link-base.ts b/catalog-ui/app/scripts/models/graph/graph-links/common-ci-link-base.ts
new file mode 100644
index 0000000000..1e7416ac3e
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/common-ci-link-base.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============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/29/2016.
+ */
+/// <reference path="../../../references"/>
+module Sdc.Models {
+
+    export interface ICommonCiLinkBase {
+
+    }
+
+    export class CommonCiLinkBase extends CommonLinkBase implements ICommonCiLinkBase {
+
+        relation:RelationshipModel;
+
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super();
+            if (relation) {
+                if(singleRelationship){
+                    this.relation = new Models.RelationshipModel(relation, singleRelationship);
+                }else{
+                    this.relation = new Models.RelationshipModel(relation);
+                }
+                this.source = relation.fromNode;
+                this.target = relation.toNode;
+            } else {
+                this.relation = new RelationshipModel();
+            }
+         }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts
new file mode 100644
index 0000000000..3587198615
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-link-base.ts
@@ -0,0 +1,46 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export interface ICompositionCiLinkBase extends ICommonCiLinkBase{
+        updateLinkDirection():void;
+    }
+
+    export class CompositionCiLinkBase extends CommonCiLinkBase implements ICompositionCiLinkBase {
+
+        type:string;
+        visible:boolean;
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.visible = true;
+        }
+
+        public setRelation = (relation: Models.RelationshipModel) => {
+            this.relation = relation;
+        };
+
+        updateLinkDirection():void{
+            this.source = this.relation.fromNode;
+            this.target = this.relation.toNode;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
new file mode 100644
index 0000000000..c2deddbfc3
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-simple-link.ts
@@ -0,0 +1,31 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiSimpleLink extends CompositionCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.BASE_LINK;
+            this.classes = 'simple-link';
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
new file mode 100644
index 0000000000..7a30c20eee
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-host-link.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============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 4/20/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+    export class LinkUcpeHost extends CompositionCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.visible = false;
+            this.classes = "ucpe-host-link";
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts
new file mode 100644
index 0000000000..5d035ccc2c
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-ucpe-link.ts
@@ -0,0 +1,37 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiUcpeLink extends CompositionCiLinkBase {
+
+        isFromUcpe: boolean;
+        constructor(relation?:RelationshipModel, from?:boolean, singleRelation?:Relationship) {
+            super(relation, singleRelation);
+            this.isFromUcpe = from;
+            this.target = relation.toNode;
+            this.source = singleRelation.requirementOwnerId;
+            this.relation.relationships = [singleRelation];
+            this.color = Utils.Constants.GraphColors.BASE_LINK;
+        }
+
+        updateLinkDirection():void {}
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts
new file mode 100644
index 0000000000..a347db6cb5
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-link.ts
@@ -0,0 +1,34 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiVLink extends CompositionCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.VL_LINK;
+            this.classes ='vl-link';
+        }
+
+
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts
new file mode 100644
index 0000000000..2ebc796cb9
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/composition-graph-links/composition-ci-vl-ucpe-link.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============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 4/20/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export class CompositionCiVlUcpeLink extends CompositionCiUcpeLink {
+
+        constructor(relation?:RelationshipModel, from?:boolean, singleRelation?:Relationship) {
+            super(relation, from, singleRelation);
+            this.color = Utils.Constants.GraphColors.VL_LINK;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/links-factory.ts b/catalog-ui/app/scripts/models/graph/graph-links/links-factory.ts
new file mode 100644
index 0000000000..8f6cd6d321
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/links-factory.ts
@@ -0,0 +1,80 @@
+/*-
+ * ============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 5/1/2016.
+ */
+/// <reference path="../../../references"/>
+module Sdc.Utils {
+    'use strict';
+
+    export class LinksFactory {
+
+        constructor() {
+        }
+
+        public createGraphLink = (cy: Cy.Instance, relation:Models.RelationshipModel,  singleRelation:Models.Relationship):Models.CompositionCiLinkBase => {
+
+            let newRelation:Models.CompositionCiLinkBase;
+
+            let fromNode:Models.Graph.CompositionCiNodeBase = cy.getElementById(relation.fromNode).data();
+            let toNode:Models.Graph.CompositionCiNodeBase = cy.getElementById(relation.toNode).data() ;
+
+            if ((relation.fromNode && fromNode.isUcpePart) || (relation.toNode && toNode.isUcpePart )) { //Link from or to node inside ucpe
+
+                if (singleRelation && singleRelation.relationship.type && singleRelation.relationship.type == 'tosca.relationships.HostedOn') {
+                    newRelation = new Models.LinkUcpeHost(relation, singleRelation);
+                } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+                    newRelation = new Models.CompositionCiVlUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+                } else {
+                    newRelation = new Models.CompositionCiUcpeLink(relation, fromNode.isUcpePart, singleRelation);
+                }
+            } else if (singleRelation.relationship.type && _.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+                newRelation = new Models.CompositionCiVLink(relation, singleRelation);
+            } else {
+                newRelation = new Models.CompositionCiSimpleLink(relation, singleRelation);
+            }
+
+            return newRelation;
+        };
+
+        public createUcpeHostLink = (relation:Models.RelationshipModel):Models.LinkUcpeHost => {
+            return new Models.LinkUcpeHost(relation);
+        };
+
+        public createVLLink = (relation:Models.RelationshipModel):Models.CompositionCiVLink => {
+            return new Models.CompositionCiVLink(relation);
+        }
+
+
+        public createModuleGraphLinks= (relation:Models.RelationshipModel,  singleRelation:Models.Relationship):Models.ModuleCiLinkBase => {
+
+            let newRelation:Models.ModuleCiLinkBase;
+
+             if (_.includes(singleRelation.relationship.type.toLowerCase(), 'link')) {
+                newRelation = new Models.ModuleCiVlLink(relation, singleRelation);
+            } else {
+                newRelation = new Models.ModuleCiLinkBase(relation, singleRelation);
+            }
+
+            return newRelation;
+        };
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-link-base.ts b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-link-base.ts
new file mode 100644
index 0000000000..b85e7673f5
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-link-base.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============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/29/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export interface IModuleCiLinkBase extends ICommonCiLinkBase{
+
+    }
+
+    export class ModuleCiLinkBase extends CommonCiLinkBase implements IModuleCiLinkBase {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.BASE_LINK;
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts
new file mode 100644
index 0000000000..a421610792
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graph-links/module-graph-links/module-ci-vl-link.ts
@@ -0,0 +1,37 @@
+/*-
+ * ============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/29/2016.
+ */
+/// <reference path="../../../../references"/>
+module Sdc.Models {
+
+    export interface IModuleCiVlLink extends ICommonCiLinkBase{
+
+    }
+
+    export class ModuleCiVlLink extends CommonCiLinkBase implements IModuleCiVlLink {
+
+        constructor(relation?:RelationshipModel, singleRelationship?:Models.Relationship) {
+            super(relation, singleRelationship);
+            this.color = Utils.Constants.GraphColors.VL_LINK;
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/graphTooltip.ts b/catalog-ui/app/scripts/models/graph/graphTooltip.ts
new file mode 100644
index 0000000000..08a85e1126
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/graphTooltip.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+  'use strict';
+
+  export class GraphTooltip{
+      position: Cy.Position;
+      isShow:boolean;
+      text:string;
+
+      constructor();
+      constructor(position: Cy.Position, isShow:boolean, text: string);
+      constructor(position?: Cy.Position, isShow?:boolean, text?: string) {
+          this.position = position;
+          this.isShow = isShow;
+          this.text = text;
+    }
+  }
+}
+
diff --git a/catalog-ui/app/scripts/models/graph/link-menu.ts b/catalog-ui/app/scripts/models/graph/link-menu.ts
new file mode 100644
index 0000000000..606c392982
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/link-menu.ts
@@ -0,0 +1,38 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class LinkMenu {
+        position:Sdc.Models.Graph.Point;
+        isShow:boolean;
+        link:Cy.CollectionFirstEdge;
+
+        constructor();
+        constructor(point:Sdc.Models.Graph.Point, isShow:boolean,  link:Cy.CollectionFirstEdge);
+        constructor(point?:Sdc.Models.Graph.Point, isShow?:boolean,  link?:Cy.CollectionFirstEdge) {
+            this.position = point ? point: new Sdc.Models.Graph.Point();
+            this.isShow = isShow ? isShow : false;
+            this.link = link ? link : null;
+        }
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/graph/match-relation.ts b/catalog-ui/app/scripts/models/graph/match-relation.ts
new file mode 100644
index 0000000000..8d864c675b
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/match-relation.ts
@@ -0,0 +1,109 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class MatchBase {
+        requirement:Models.Requirement;
+        isFromTo:boolean;
+        fromNode:string;
+        toNode:string;
+
+        constructor(requirement:Models.Requirement, isFromTo:boolean, fromNode:string, toNode:string) {
+            this.requirement = requirement;
+            this.isFromTo = isFromTo;
+            this.fromNode = fromNode;
+            this.toNode = toNode;
+        }
+
+        public getDisplayText = (menuSide:string):string => {return '';};
+
+        public isOwner = (id:string):boolean => { return false; }
+
+    }
+
+    export class MatchReqToReq extends MatchBase {
+
+        secondRequirement:Models.Requirement;
+
+        constructor(requirement:Models.Requirement, secondRequirement:Models.Requirement, isFromTo:boolean, fromNode:string, toNode:string) {
+            super(requirement, isFromTo, fromNode, toNode);
+            this.secondRequirement = secondRequirement;
+        }
+
+        public getDisplayText = (menuSide:string):string => {
+            if ('left' == menuSide) {
+                return this.requirement.getFullTitle();
+            }
+            return this.secondRequirement.getFullTitle();
+        };
+
+        public isOwner = (id:string):boolean => {
+            return this.secondRequirement.ownerId === id || this.requirement.ownerId === id;
+        }
+    }
+
+    export class MatchReqToCapability extends MatchBase {
+
+        capability:Models.Capability;
+
+        constructor(requirement:Models.Requirement, capability:Models.Capability, isFromTo:boolean, fromNode:string, toNode:string) {
+            super(requirement, isFromTo, fromNode, toNode);
+            this.capability = capability;
+        }
+
+        public matchToRelation = ():Models.Relationship => {
+            let relationship:Models.Relationship = new Models.Relationship();
+            relationship.capability = this.capability.name;
+            relationship.capabilityOwnerId = this.capability.ownerId;
+            relationship.capabilityUid = this.capability.uniqueId;
+            relationship.relationship = new Models.RelationType(this.capability.type);
+            relationship.requirement = this.requirement.name;
+            relationship.requirementOwnerId = this.requirement.ownerId;
+            relationship.requirementUid = this.requirement.uniqueId;
+            return relationship;
+        };
+
+
+        public getDisplayText = (menuSide:string):string => {
+            if (this.isFromTo && 'left' == menuSide || !this.isFromTo && 'right' == menuSide) {
+                return this.requirement.getFullTitle();
+            }
+            return this.capability.getFullTitle();
+
+        };
+
+        public isOwner = (id:string):boolean => {
+            return this.capability.ownerId === id || this.requirement.ownerId === id;
+        };
+
+
+        public matchToRelationModel = ():Models.RelationshipModel => {
+            let relationshipModel:Models.RelationshipModel = new Models.RelationshipModel();
+            let relationship:Models.Relationship = this.matchToRelation();
+            relationshipModel.setRelationshipModelParams(this.fromNode, this.toNode, [relationship]);
+            return relationshipModel;
+        };
+    }
+
+}
+
+
diff --git a/catalog-ui/app/scripts/models/graph/nodes/base-common-node.ts b/catalog-ui/app/scripts/models/graph/nodes/base-common-node.ts
new file mode 100644
index 0000000000..e1957e61aa
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/base-common-node.ts
@@ -0,0 +1,73 @@
+/*-
+ * ============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/29/2016.
+ */
+/// <reference path="../../../references"/>
+
+module Sdc.Models.Graph {
+    'use strict';
+
+    export abstract class CommonNodeBase {
+
+        public displayName:string;
+        public name:string;
+        public img:string;
+        public certified:boolean;
+        public isGroup:boolean;
+        public imagesPath: string;
+        public isDraggable: boolean; //we need to to manage manually the dragging on the graph inside groups (ucpe-cp is not draggable)
+
+        //cytoscape fields
+        public id:string;
+        public type:string; //type is for the edge edition extension, by type we put the green plus icon in position
+        public isSdcElement:boolean; //this fields is in order to filter sdc elements from all extensions elements
+        public classes: string;
+        public parent: string;
+        public allowConnection: boolean; //this is for egeEdition extension in order to decide if connection to a node is available
+
+        constructor() {
+
+            this.imagesPath = Services.AngularJSBridge.getAngularConfig().imagesPath;
+            this.type = "basic-node";
+            this.isSdcElement = true;
+            this.isDraggable = true;
+            this.allowConnection = true;
+        }
+
+        public updateNameForDisplay =() => {
+            let context = document.createElement("canvas").getContext("2d");
+            context.font = "13px Arial";
+
+            if (63 < context.measureText(this.name).width) {
+                let newLen = this.name.length - 3;
+                let newName = this.name.substring(0, newLen);
+
+                while (60 < (context.measureText(newName).width)) {
+                    newName = newName.substring(0, (--newLen));
+                }
+                this.displayName =  newName + '...';
+                return;
+            }
+
+            this.displayName = this.name;
+        };
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/common-ci-node-base.ts b/catalog-ui/app/scripts/models/graph/nodes/common-ci-node-base.ts
new file mode 100644
index 0000000000..1597650654
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/common-ci-node-base.ts
@@ -0,0 +1,46 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Models.Graph {
+
+    export abstract class CommonCINodeBase extends CommonNodeBase {
+
+        public certified:boolean;
+        public template:string;
+        public componentInstance:Models.ComponentsInstances.ComponentInstance;
+        public group:string;
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance) {
+            super();
+            this.componentInstance = instance;
+            this.id = this.componentInstance.uniqueId;
+            this.name = this.componentInstance.name;
+            this.img = '';
+            this.certified = this.isCertified(this.componentInstance.componentVersion);
+            this.displayName = instance.name;
+        }
+
+        private isCertified(version:string):boolean {
+            return 0 === (parseFloat(version)) % 1;
+        }
+
+    }
+}
+
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
new file mode 100644
index 0000000000..5f4c0df3c2
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts
@@ -0,0 +1,72 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export interface ICompositionCiNodeBase {
+
+    }
+
+
+    export abstract class CompositionCiNodeBase extends CommonCINodeBase implements ICompositionCiNodeBase {
+
+        public textPosition: string; //need to move to cp UCPE
+        public isUcpe: boolean;
+        public isInsideGroup: boolean;
+        public isUcpePart: boolean;
+
+        constructor(instance: Models.ComponentsInstances.ComponentInstance,
+                    public imageCreator: Utils.ImageCreatorService) {
+            super(instance);
+            this.init();
+        }
+
+        private init() {
+
+            this.displayName = this.getDisplayName();
+            this.isUcpe = false;
+            this.isGroup = false;
+            this.isUcpePart = false;
+            this.isInsideGroup = false;
+
+        }
+
+        public initImage(node: Cy.Collection): string {
+
+            this.imageCreator.getImageBase64(this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png',
+                this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + 'uncertified.png')
+                .then(imageBase64 => {
+                    this.img = imageBase64;
+                    node.style({'background-image': this.img});
+                });
+
+            return this.img;
+        }
+
+        protected getDisplayName(): string {
+
+            let graphResourceName = Services.AngularJSBridge.getFilter('graphResourceName');
+            let resourceName = Services.AngularJSBridge.getFilter('resourceName');
+            return graphResourceName(resourceName(this.componentInstance.name));
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
new file mode 100644
index 0000000000..6286c8245d
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts
@@ -0,0 +1,48 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeCp extends CompositionCiNodeBase {
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initCp();
+        }
+
+        private initCp():void {
+            let sdcConfig = Services.AngularJSBridge.getAngularConfig();
+            this.img = sdcConfig.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+            this.type = "basic-small-node";
+            //if the cp from type cpEndPointInstances create with another template
+            if(sdcConfig.cpEndPointInstances.indexOf(this.componentInstance.icon) > -1){
+                this.classes = 'cp-end-point-node';
+            }else {
+                this.classes = 'cp-node';
+            }
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
new file mode 100644
index 0000000000..41bf0cef98
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts
@@ -0,0 +1,42 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeService extends CompositionCiNodeBase {
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initService();
+        }
+
+        private initService():void {
+
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.SERVICE_ICONS + this.componentInstance.icon + '.png';
+            this.classes = 'service-node'
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
new file mode 100644
index 0000000000..9123ff7224
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe-cp.ts
@@ -0,0 +1,39 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+    
+    export class CompositionCiNodeUcpeCp extends CompositionCiNodeCp {
+
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.isUcpePart = true;
+            this.classes = 'ucpe-cp'; // the css class for the node
+            this.parent = instance.uniqueId;
+            this.type = 'ucpe-cp-node'; //the type is for the handle (plus icon) extension
+            this.isDraggable = false;
+        }
+
+
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
new file mode 100644
index 0000000000..bc91e004f4
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts
@@ -0,0 +1,50 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class NodeUcpe extends CompositionCiNodeBase {
+        constructor(instance:Models.ComponentsInstances.ComponentInstance,
+                    imageCreator:Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initUcpe();
+        }
+
+        private initUcpe():void {
+            this.isUcpe = true;
+            this.isGroup = true;
+            this.isUcpePart = true;
+            this.classes = 'ucpe-node';
+            this.type = 'ucpe-node';
+            this.allowConnection = false;
+
+            if (!this.certified) {
+                this.classes = this.classes + ' not-certified-ucpe';
+            }
+        }
+
+    }
+}
+
+
+
+
+
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
new file mode 100644
index 0000000000..d090960046
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts
@@ -0,0 +1,41 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeVf extends CompositionCiNodeBase {
+
+        constructor(instance: Models.ComponentsInstances.ComponentInstance,
+                    imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initVf();
+        }
+
+        private initVf(): void {
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png';
+            this.classes = 'vf-node';
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
new file mode 100644
index 0000000000..04f45c87fb
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vfc.ts
@@ -0,0 +1,33 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+    export class CompositionCiNodeVfc extends CompositionCiNodeBase {
+        constructor(instance:Models.ComponentsInstances.ComponentInstance, imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initVfc();
+        }
+
+        private initVfc():void {
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS+ this.componentInstance.icon + '.png';
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
new file mode 100644
index 0000000000..ed9a0d9d87
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts
@@ -0,0 +1,54 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+
+    export class CompositionCiNodeVl extends CompositionCiNodeBase {
+        private toolTipText:string;
+      
+        constructor(instance:Models.ComponentsInstances.ComponentInstance, imageCreator: Utils.ImageCreatorService) {
+            super(instance, imageCreator);
+            this.initVl();
+
+        }
+
+        private initVl():void {
+            this.type = "basic-small-node";
+            this.toolTipText = 'Point to point';
+            let key:string = _.find(Object.keys(this.componentInstance.capabilities), (key)=> {
+                return _.includes(key.toLowerCase(), 'linkable');
+            });
+            let linkable = this.componentInstance.capabilities[key];
+            if (linkable) {
+                if ('UNBOUNDED' == linkable[0].maxOccurrences) {
+                    this.toolTipText = 'Multi point';
+                }
+            }
+            this.img = this.imagesPath + Utils.Constants.ImagesUrl.RESOURCE_ICONS + 'vl.png';
+
+            this.classes = 'vl-node';
+            if(!this.certified) {
+                this.classes = this.classes + ' not-certified';
+            }
+        }
+
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/modules-graph-nodes/module-node-base.ts b/catalog-ui/app/scripts/models/graph/nodes/modules-graph-nodes/module-node-base.ts
new file mode 100644
index 0000000000..cd6ab3ba85
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/modules-graph-nodes/module-node-base.ts
@@ -0,0 +1,52 @@
+/*-
+ * ============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/29/2016.
+ */
+/// <reference path="../../../../references"/>
+
+module Sdc.Models.Graph {
+    'use strict';
+
+    export interface IModuleNodeBase {
+    }
+
+    export class ModuleNodeBase extends CommonNodeBase implements IModuleNodeBase {
+
+        module:Module;
+
+        constructor(module:Module) {
+            super();
+            this.module = module;
+            this.init();
+        }
+
+        private init() {
+            
+            this.id = this.module.uniqueId;
+            this.name = this.module.name;
+            this.displayName = this.module.name;
+            this.isGroup = true;
+            this.img = Utils.Constants.IMAGE_PATH + Utils.Constants.ImagesUrl.MODULE_ICON;
+            this.classes = "module-node";
+
+        }
+    }
+}
diff --git a/catalog-ui/app/scripts/models/graph/nodes/nodes-factory.ts b/catalog-ui/app/scripts/models/graph/nodes/nodes-factory.ts
new file mode 100644
index 0000000000..b19b1a7261
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/nodes/nodes-factory.ts
@@ -0,0 +1,63 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Utils {
+    'use strict';
+
+    export class NodesFactory {
+
+        constructor(
+            private imageCreator:ImageCreatorService) {
+        }
+
+        public createNode = (instance:Models.ComponentsInstances.ComponentInstance):Models.Graph.CompositionCiNodeBase => {
+
+            if (instance.isUcpe()) {
+                return new Models.Graph.NodeUcpe(instance, this.imageCreator);
+            }
+            if (instance.originType === Utils.Constants.ComponentType.SERVICE) {
+                return new Models.Graph.CompositionCiNodeService(instance, this.imageCreator);
+            }
+            if (instance.originType === Utils.Constants.ResourceType.CP) {
+                return new Models.Graph.CompositionCiNodeCp(instance, this.imageCreator);
+            }
+            if (instance.originType === Utils.Constants.ResourceType.VL) {
+                return new Models.Graph.CompositionCiNodeVl(instance, this.imageCreator);
+            }
+
+            return new Models.Graph.CompositionCiNodeVf(instance, this.imageCreator);
+        };
+
+        public createModuleNode = (module:Models.Module):Models.Graph.ModuleNodeBase => {
+
+            return new Models.Graph.ModuleNodeBase(module);
+        };
+
+        public createUcpeCpNode = (instance:Models.ComponentsInstances.ComponentInstance):Models.Graph.CompositionCiNodeCp => {
+
+
+            return new Models.Graph.CompositionCiNodeUcpeCp(instance, this.imageCreator);
+        }
+    }
+
+    NodesFactory.$inject = [
+        'ImageCreatorService'
+    ];
+}
diff --git a/catalog-ui/app/scripts/models/graph/point.ts b/catalog-ui/app/scripts/models/graph/point.ts
new file mode 100644
index 0000000000..0efd4c6040
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/point.ts
@@ -0,0 +1,26 @@
+/**
+ * Created by obarda on 11/7/2016.
+ */
+/// <reference path="../../references"/>
+
+module Sdc.Models.Graph {
+
+
+    export class Point {
+        /**
+         * The two-argument constructor produces the Point(x, y).
+         * @param {number} x
+         * @param {number} y
+         */
+        constructor(x?:number, y?:number) {
+            this.x = x || 0;
+            this.y = y || 0;
+        }
+
+        /**Gets or sets the x value of the Point.*/
+        x:number;
+
+        /**Gets or sets the y value of the Point.*/
+        y:number;
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/app/scripts/models/graph/relationMenuObjects.ts b/catalog-ui/app/scripts/models/graph/relationMenuObjects.ts
new file mode 100644
index 0000000000..266ed76cfa
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/relationMenuObjects.ts
@@ -0,0 +1,138 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+
+    export class RelationMenuDirectiveObj {
+
+        fromNode:Models.Graph.CompositionCiNodeBase;
+        toNode:Models.Graph.CompositionCiNodeBase;
+        //  modelLinks:Array<Models.CompositionCiLinkBase>;
+        mp2mpVL:Models.Components.Component;
+        p2pVL:Models.Components.Component;
+        menuPosition: Cy.Position;
+        rightSideLink:GraphLinkMenuSide;
+        leftSideLink:GraphLinkMenuSide;
+        selectionText:string;
+        vlType:string;
+
+        constructor(fromNode:Models.Graph.CompositionCiNodeBase, toNode:Models.Graph.CompositionCiNodeBase, mp2mpVL:Models.Components.Component, p2pVL:Models.Components.Component, menuPosition:Cy.Position, possibleRelations:Array<Models.MatchBase>) {
+            this.fromNode = fromNode;
+            this.toNode = toNode;
+            // this.modelLinks = modelLinks;
+            this.mp2mpVL = mp2mpVL;
+            this.p2pVL = p2pVL;
+            this.menuPosition = menuPosition;
+            this.leftSideLink = new GraphLinkMenuSide(this.fromNode.componentInstance);
+            this.rightSideLink = new GraphLinkMenuSide(this.toNode.componentInstance);
+            this.selectionText = '';
+            this.vlType = null;
+
+            possibleRelations.forEach((match:any) => {
+
+                let reqObjKey: string = match.requirement.ownerName + match.requirement.uniqueId;
+                let capObjKey: string = match.secondRequirement ? match.secondRequirement.ownerName + match.secondRequirement.uniqueId
+                    : match.capability.ownerName + match.capability.uniqueId;
+
+                if (match.fromNode === this.leftSideLink.componentInstance.uniqueId) {
+                    //init the left side requirements Array
+                    if (!this.leftSideLink.requirements[reqObjKey]) {
+                        this.leftSideLink.requirements[reqObjKey] = [];
+                    }
+                    //push the match to fromNode object (from node is always the requirement)
+                    this.leftSideLink.requirements[reqObjKey].push(match);
+
+                    if (match instanceof  Models.MatchReqToReq) {
+                        //init the right side requirements Array
+                        if (!this.rightSideLink.requirements[capObjKey]) {
+                            this.rightSideLink.requirements[capObjKey] = [];
+                        }
+                        this.rightSideLink.requirements[capObjKey].push(match);
+                    } else {
+                        //init the right side capabilities Array
+                        if (!this.rightSideLink.capabilities[capObjKey]) {
+                            this.rightSideLink.capabilities[capObjKey] = [];
+                        }
+                        //add to array
+                        this.rightSideLink.capabilities[capObjKey].push(match);
+                    }
+
+                } else {
+                    if (!this.rightSideLink.requirements[reqObjKey]) {
+                        this.rightSideLink.requirements[reqObjKey] = [];
+                    }
+                    this.rightSideLink.requirements[reqObjKey].push(match);
+
+                    if (!this.leftSideLink.capabilities[capObjKey]) {
+                        this.leftSideLink.capabilities[capObjKey] = [];
+                    }
+                    this.leftSideLink.capabilities[capObjKey].push(match);
+                }
+            });
+
+        }
+    }
+
+
+    export class GraphLinkMenuSide {
+        public componentInstance:Models.ComponentsInstances.ComponentInstance;
+        public selectedMatch:Array<any>;        //match array returned by function in utils
+        public requirements:any;  //array of matches returned by function in utils
+        public capabilities:any;  //array of matches returned by function in utils
+
+        constructor(componentInstance:Models.ComponentsInstances.ComponentInstance) {
+            this.componentInstance = componentInstance;
+            this.capabilities = {};
+            this.requirements = {};
+        }
+
+        public selectMatchArr(matchArr:Array<Models.MatchBase>):void {
+            if (this.selectedMatch === matchArr) {
+                this.selectedMatch = undefined;
+            } else {
+                this.selectedMatch = matchArr;
+            }
+        }
+
+
+        //TODO move to match object
+        public getPreviewText(showReq:boolean):string {
+            if (!this.selectedMatch) {
+                return '';
+            }
+
+            let match:any = this.selectedMatch[0];
+            if (showReq) {
+                return match.requirement.ownerName + ': ' + match.requirement.name +
+                    ': [' + match.requirement.minOccurrences + ', ' + match.requirement.maxOccurrences + ']';
+            } else if (match.secondRequirement) {
+                return match.secondRequirement.ownerName + ': ' + match.secondRequirement.name +
+                    ': [' + match.secondRequirement.minOccurrences + ', ' + match.secondRequirement.maxOccurrences + ']';
+            }
+            else {
+                return match.capability.ownerName + ': ' + match.capability.name +
+                    ': [' + match.capability.minOccurrences + ', ' + match.capability.maxOccurrences + ']';
+            }
+        }
+    }
+
+}
diff --git a/catalog-ui/app/scripts/models/graph/relationship.ts b/catalog-ui/app/scripts/models/graph/relationship.ts
new file mode 100644
index 0000000000..e0dfbbd6d1
--- /dev/null
+++ b/catalog-ui/app/scripts/models/graph/relationship.ts
@@ -0,0 +1,107 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../references"/>
+module Sdc.Models {
+    'use strict';
+
+    export class RelationshipModel {
+        fromNode:string;
+        toNode:string;
+        relationships:Array<Relationship>;
+
+        constructor(relationshipModel?:RelationshipModel, singleRelationship?:Relationship) {
+            if(relationshipModel){
+                this.fromNode = relationshipModel.fromNode;
+                this.toNode =  relationshipModel.toNode;
+                this.relationships = [];
+                if (relationshipModel.relationships && !singleRelationship) {
+                    _.forEach(relationshipModel.relationships, (relation:Models.Relationship):void => {
+                        this.relationships.push(new Models.Relationship(relation));
+                    });
+                }else if(singleRelationship){
+                    this.relationships.push(singleRelationship);
+                }
+            }
+        }
+
+        public setRelationshipModelParams (fromNode: string, toNode:string,  relationships:Array<Relationship>) {
+            this.fromNode = fromNode;
+            this.toNode = toNode;
+            this.relationships = relationships;
+        }
+    }
+
+    export class RelationType {
+        type:string;
+
+        constructor(type?:string) {
+            if(type){
+                this.type = type;
+            }
+        }
+    }
+
+    export class Relationship {
+        capability:string;
+        capabilityOwnerId:string;
+        capabilityUid:string;
+        relationship:RelationType;
+        requirement:string;
+        requirementOwnerId:string;
+        requirementUid:string;
+
+        constructor(relationship?:Models.Relationship) {
+            if(relationship) {
+                this.capability = relationship.capability;
+                this.capabilityOwnerId = relationship.capabilityOwnerId;
+                this.capabilityUid = relationship.capabilityUid;
+                this.relationship = new RelationType(relationship.relationship.type);
+                this.requirement = relationship.requirement;
+                this.requirementOwnerId = relationship.requirementOwnerId;
+                this.requirementUid = relationship.requirementUid;
+            } else {
+               this.relationship = new RelationType();
+            }
+
+        }
+
+        //public setRelationProperties = (capability:string, capabilityOwnerId:string, capabilityUid:string, relationship:RelationType, requirement:string, requirementOwnerId:string, requirementUid:string )=>{
+        //    this.capability = capability;
+        //    this.capabilityOwnerId = capabilityOwnerId;
+        //    this.capabilityUid = capabilityUid;
+        //    this.relationship = relationship;
+        //    this.requirement =requirement;
+        //    this.requirementOwnerId = requirementOwnerId;
+        //    this.requirementUid = requirementUid;
+        //}
+
+
+        public setRelationProperties = (capability:Models.Capability, requirement:Models.Requirement)=>{
+            this.capability = capability.name;
+            this.capabilityOwnerId = capability.ownerId;
+            this.capabilityUid = capability.uniqueId;
+            this.relationship = new Models.RelationType(capability.type);
+            this.requirement = requirement.name;
+            this.requirementOwnerId = requirement.ownerId;
+            this.requirementUid = requirement.uniqueId;
+        };
+
+    }
+}