grahical editor component

Implemented feature to view the blueprint template in grahical editor
component.

Issue-ID: CCSDK-1017
Change-Id: I0545e1ee91aed8b6e5f8d4bdd6788433968335be
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

3 files changed, 218 insertions, 88 deletions

diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json
index 4ae5b684c..158a822b8 100644
--- a/cds-ui/client/package.json
+++ b/cds-ui/client/package.json
@@ -27,7 +27,9 @@
     "@ngrx/router-store": "^6.1.2",
     "@ngrx/store": "^6.1.2",
     "@ngrx/store-devtools": "^6.1.2",
+    "@types/d3": "^5.7.0",
     "core-js": "^2.5.4",
+    "d3": "^5.9.1",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "material-design-icons": "^3.0.1",
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html
index 74c0fae12..b1c894099 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.html
@@ -18,89 +18,5 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================ -->
 
-
-
-
-<!-- <div style="display: flex; flex-direction: row; height: 100%;width: 100%"> -->
-  <div style="display: flex; flex-direction: row; height: 100%;width: 100%">
-    <div class="outerDiv divone">
-            <mat-accordion>
-                <mat-expansion-panel>
-                  <mat-expansion-panel-header style="background-color: #f1f1f1">
-                    <mat-panel-title>
-                      Node types
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>  
-                  <div class="flex-container">           
-                        <div>
-                            Node 1
-                        </div>
-                        <div>
-                            Node 2
-                        </div>
-                        <div>
-                            Node 3
-                        </div>
-                        <div>
-                            Node 4
-                        </div>
-                        <div>
-    
-                  </div> 
-                </mat-expansion-panel>
-                <mat-expansion-panel (opened)="panelOpenState = true"
-                                     (closed)="panelOpenState = false">
-                  <mat-expansion-panel-header style="background-color: #f1f1f1">
-                    <mat-panel-title>
-                      Policy
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
-                  <div class="flex-container">           
-                      <div>
-                          Node 1
-                      </div>
-                      <div>
-                          Node 2
-                      </div>
-                      <div>
-                          Node 3
-                      </div>
-                      <div>
-                          Node 4
-                      </div>
-                      <div>
-                          Node 3
-                      </div>
-    
-                </div> 
-                </mat-expansion-panel>
-              </mat-accordion>
-    </div>
-    <div class="outerDiv divtwo" (click)="on = !on">
-        <canvas class="cnv" height="500"></canvas>
-    </div>
-    <div *ngIf="on" id="overlay"  class="outerDiv divThree">
-        <mat-accordion style="width: 100%">
-            <mat-expansion-panel>
-              <mat-expansion-panel-header style="background-color: #f1f1f1">
-                <mat-panel-title>
-                  Properties
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-            </mat-expansion-panel>
-            <mat-expansion-panel (opened)="panelOpenState = true"
-                                 (closed)="panelOpenState = false">
-              <mat-expansion-panel-header style="background-color: #f1f1f1">
-                <mat-panel-title>
-                  Interface
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-            </mat-expansion-panel>
-          </mat-accordion>
-    </div>
-    </div>
-    
-    
-    
-    <!-- </div> -->
-    
\ No newline at end of file
+<svg id="svgArea" width="1000px" height="100%" style="background-color:white">
+</svg>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts
index 55c7dfbd6..5e86a7eb7 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts
+++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts
@@ -19,7 +19,9 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import * as d3 from 'd3';
+import { text } from 'd3';
 
 @Component({
   selector: 'app-designer',
@@ -28,9 +30,219 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DesignerComponent implements OnInit {
 
-  constructor() { }
+  @ViewChild('svgArea') graphContainer: ElementRef;
+  dataForsimulation;
+  svg;
+  svgWidth;
+  svgHeight;
+
+
+  simulation;
+
+  constructor() {    
+    this.dataForsimulation = {"nodes" :[],
+                              "links": []
+                            }
+    
+   
+    d3.json("../../../../../assets/activation-blueprint.json")
+    .then((data)=>{
+      console.log(data);
+      this.buildD3DataNodes(data);
+      //this.buildD3DataLinks(data);
+      this.drawNode();
+    });
+   }
 
   ngOnInit() {
   }
 
+  ngAfterContentInit()  {
+    
+  }
+
+  drawNode() {
+    this.svg = d3.select('#svgArea')
+              .style('back-ground-color', 'white');
+    
+    this.svgWidth = this.svg._groups[0][0].width.baseVal.value;
+    this.svgHeight = this.svg._groups[0][0].height.baseVal.value;
+
+    console.log('width', this.svgWidth);
+
+    let xbyMath;
+    let ybyMath;
+    let X= 10;
+    let Y=10;
+
+    let transformString = "translate(" + X + "," + Y + ")";
+    this.dataForsimulation.nodes.forEach((d, i)=> {
+      let id= 'g'+i;
+
+      // xbyMath =  Math.random() * ( this.svgWidth - 50 -  105  ) + ( 105/2 + 10 );
+      // ybyMath =  Math.random() * ( this.svgWidth - 20 -  100  ) + ( 100/2 + 10 );
+
+      xbyMath = Math.floor(Math.random() * ((this.svgWidth-110) - 100 + 1)) + 100;
+      ybyMath = Math.floor(Math.random() * ((this.svgHeight-110) - 100 + 1)) + 100;
+
+      transformString =  "translate(" + xbyMath + "," + ybyMath + ")"; 
+      
+      let gEleId = 'g'+i;
+      let nodeTemprectId = gEleId+name
+      let requirement = gEleId+name+'requirement';
+        this.svg.append('g')
+          .attr('id', gEleId);
+        
+        let firstg = d3.select('#g'+i)
+                    .attr('transform', transformString);
+
+        firstg.append('rect')
+              .attr('id', d.name)
+              .attr("x", 0)
+               .attr("y", 0)
+               .attr("rx", 20)
+                .attr("ry", 20)
+                .attr('width', 100)
+                .attr('height', 100)
+                .attr('fill', 'white')
+                 .attr('stroke', 'black')
+                 .attr('opacity', 0.6)
+                 .on('mouseover', () => this.handleMouseOver());
+
+          d.x = xbyMath;
+          d.y = ybyMath;
+                
+        firstg.append('rect')
+                    .attr('x', 95)
+                    .attr('y', 20)
+                   // .attr('r', 10)
+                    .attr('width', 10)
+                   .attr('height', 10)
+                    .attr('fill', 'orange')
+
+        if(d.requirementsArray) {
+          d.requirementsArray.forEach(requirement =>{
+            firstg.append('rect')
+                      .attr('id', d.name+requirement.name)
+                      .attr('x', 95)
+                      .attr('y', 60)
+                     // .attr('r', 10)
+                      .attr('width', 10)
+                     .attr('height', 10)
+                      .attr('fill', 'blue')
+            requirement.x = xbyMath + 95;
+            requirement.y = ybyMath + 60;
+          });
+        }
+
+        if(d.capabilitiesArray) {
+          d.capabilitiesArray.forEach(capability =>{
+            firstg.append('rect')
+                        .attr('id', d.name+capability.name)
+                        .attr('x', 95)
+                        .attr('y', 40)
+                       // .attr('r', 10)
+                        .attr('width', 10)
+                       .attr('height', 10)
+                        .attr('fill', 'green');
+            capability.x = xbyMath + 95;
+            capability.y = ybyMath + 60;
+          }); 
+        }
+          
+        
+        firstg.append('text')
+                    .attr('x', 0)
+                    .attr('y', 115)
+                    .text(d.name);
+          
+       // X = X +120;
+       // Y = 10;
+    });
+    this.buildD3DataLinks();
+  }
+
+  buildD3DataNodes(data) {
+    let d3data;
+    d3data = data.topology_template.node_templates;
+    console.log('d3data:', d3data);
+    let finalData = [];
+    for (var property1 in d3data) {
+      d3data[property1].name = property1;
+      this.dataForsimulation.nodes.push(d3data[property1]);
+      finalData.push(d3data[property1]);
+    }
+
+    this.dataForsimulation.nodes.forEach(node => {
+      for( var nodeProperty in node) {
+        if(nodeProperty == 'requirements' || nodeProperty == 'capabilities') {
+            let arrayName = nodeProperty + 'Array';
+            node[arrayName] = [];
+            for(var reqProperty in node[nodeProperty]) {
+              node[nodeProperty][reqProperty].name = reqProperty;
+              node[arrayName].push(node[nodeProperty][reqProperty])
+            }
+            
+        console.log('node array:', + node[arrayName]);
+        }
+      }
+    });
+    console.log( this.dataForsimulation);
+  
+  
+  }
+
+ buildD3DataLinks() {
+  this.dataForsimulation.nodes.forEach((node) => {
+    if(node.requirementsArray && node.requirementsArray.length > 0) {
+      node.requirementsArray.forEach(requirement => {
+        let linkObject = {};
+        linkObject['sourceName'] = node.name + requirement.name;
+        linkObject['sourceid'] = node.name + requirement.name;
+        linkObject['sourceX'] = requirement.x;
+        linkObject['sourceY'] = requirement.y;
+        linkObject['targetNode'] = requirement.node;
+        linkObject['targetCapabilility'] = requirement.capability;
+        linkObject['ele'] = d3.select('#'+ linkObject['sourceid']);
+        this.dataForsimulation.links.push(linkObject);
+      });      
+    }
+  });
+
+  this.capabilityTargets();
+ }
+
+ capabilityTargets() {
+   this.dataForsimulation.links.forEach(link=>{
+    this.dataForsimulation.nodes.forEach(node=>{
+          if(node.name == link.targetNode && node.capabilitiesArray) {
+            node.capabilitiesArray.forEach(capability=>{
+              if(capability.name == link.targetCapabilility) {
+                link['targetX'] = capability.x;
+                link['targetY'] = capability.y;
+              }
+            })
+          }
+      });
+   });
+
+   this.drawlink();
+ }
+
+ drawlink() {
+   this.dataForsimulation.links.forEach(link=>{
+      this.svg.append('line')
+      .attr('x1', link.sourceX)
+      .attr('y1', link.sourceY)
+      .attr('x2', link.targetX)
+      .attr('y2', link.targetY)
+      .attr('stroke','gray')
+      .attr('stroke-width', 5);
+   });
+ }
+
+ handleMouseOver() {
+  console.log('mouse over');
+ }
+
 }