Completed Dependency graphs

Author: 0x41head

src/app/dependency-graph/dependency-graph.component.html

@@ -1 +1 @@
-<svg width="1280" height="720"></svg>
+<svg width="1920" height="1280"></svg>

src/app/dependency-graph/dependency-graph.component.ts

@@ -2,6 +2,20 @@ import { Component, OnInit, Input } from '@angular/core';
 import * as d3 from 'd3'
 import { ymlService } from '../service/yaml-parser/yaml-parser.service';
 
+export interface graphNodes{
+  id:string
+}
+
+export interface graphLinks{
+  source: string
+  target: string
+}
+
+export interface graph{
+  nodes:graphNodes[]
+  links:graphLinks[]
+}
+
 @Component({
   selector: 'app-dependency-graph',
   templateUrl: './dependency-graph.component.html',
@@ -14,27 +28,8 @@ export class DependencyGraphComponent implements OnInit {
   BORDER_COLOR_OF_NODE:string="black"
   simulation:any
   YamlObject:any;
-  graph={
-    nodes: [{
-        id: "Alice"
-      },
-      {
-        id: "Bob"
-      },
-      {
-        id: "George"
-      }
-    ],
-    links: [{
-        source: "Alice",
-        target: "George"
-      },
-      {
-        source: "George",
-        target: "Bob"
-      }
-    ]
-  };
+  graphData:graph={nodes:[],links:[]};
+  visited:string[]=[]
 
   @Input() dimension: string= "";
   @Input() subDimension: string= "";
@@ -43,24 +38,77 @@ export class DependencyGraphComponent implements OnInit {
   constructor(private yaml:ymlService) { }
 
   ngOnInit(): void {
-    this.generateGraph()
+    this.yaml.setURI('./assets/YAML/generated/generated.yaml');
+    // Function sets data 
+    this.yaml.getJson().subscribe((data) => {
+      this.graphData={nodes:[],links:[]};
+      this.YamlObject = data[this.dimension][this.subDimension];
+      this.populateGraphWithActivitiesCurrentTaskDependsOn(this.taskName)
+      this.populateGraphWithActivitiesThatDependsOnCurrentTask(this.taskName)
+        //console.log({...this.graphData['nodes']})
+        
+      
+      console.log({...this.graphData})
+      this.generateGraph(this.taskName)
+    })
+    
   }
 
-  generateGraph():void{
+  populateGraphWithActivitiesCurrentTaskDependsOn(task:string):void{
+    this.checkIfNodeHasBeenGenerated(task)
+    try{
+      var tasksThatCurrenTaskIsDependentOn= this.YamlObject[task]['dependsOn']
+      for(var j=0; j<tasksThatCurrenTaskIsDependentOn.length;j++){
+        this.checkIfNodeHasBeenGenerated(tasksThatCurrenTaskIsDependentOn[j])
+        this.graphData['links'].push({'source':tasksThatCurrenTaskIsDependentOn[j],'target':task})
+        this.populateGraphWithActivitiesCurrentTaskDependsOn(tasksThatCurrenTaskIsDependentOn[j])
+      }
+    }
+    catch(e){
+      console.log(e)
+    }
+      //console.log({...this.graphData['nodes']})
+      
+  }
+  populateGraphWithActivitiesThatDependsOnCurrentTask(task:string){
+    var allTasks= Object.keys(this.YamlObject)
+    for(var i =0;i<allTasks.length;i++){
+      try{
+        if(this.YamlObject[allTasks[i]]['dependsOn'].includes(task)){
+          this.checkIfNodeHasBeenGenerated(allTasks[i])
+          this.graphData['links'].push({'source':task,'target':allTasks[i]})
+        }
+      }
+      catch{
+        continue
+      }
+    }
 
+  }
+
+  checkIfNodeHasBeenGenerated(task:string){
+    if(!this.visited.includes(task)){
+      this.graphData['nodes'].push({'id':task})
+      this.visited.push(task)
+      }
+  }
+  
+
+  generateGraph(task:string):void{
+    
     let svg = d3.select("svg"),
     width = +svg.attr("width"),
     height = +svg.attr("height");
 
     this.simulation = d3.forceSimulation()
     .force("link", d3.forceLink().id(function(d:any) { return d.id; }))
-    .force("charge", d3.forceManyBody().strength(-11215))
+    .force("charge", d3.forceManyBody().strength(-2000))
     .force("center", d3.forceCenter(width / 2, height / 2));
 
     svg.append('defs').append('marker')
         .attr('id','arrowhead')
         .attr('viewBox','-0 -5 10 10')
-        .attr('refX',20)
+        .attr('refX',18)
         .attr('refY',0)
         .attr('orient','auto')
         .attr('markerWidth',13)
@@ -74,21 +122,25 @@ export class DependencyGraphComponent implements OnInit {
     let link = svg.append("g")
       .attr("class", "links")
     .selectAll("line")
-    .data(this.graph.links)
+    .data(this.graphData['links'])
     .enter().append("line")
     .style("stroke", this.COLOR_OF_LINK)
     .attr('marker-end','url(#arrowhead)');
 
     let node = svg.append("g")
       .attr("class", "nodes")
     .selectAll("g")
-    .data(this.graph.nodes)
+    .data(this.graphData['nodes'])
     .enter().append("g")
 
-
+    var defaultNodeColor=this.COLOR_OF_NODE
     node.append("circle")
-    .attr("r", 15)
-    .attr("fill",this.COLOR_OF_NODE)
+    .attr("r", 10)
+    .attr("fill",function(d) {
+      if(d.id==task)
+        return "yellow"
+      else
+        return defaultNodeColor})
 
 
 
@@ -98,11 +150,11 @@ export class DependencyGraphComponent implements OnInit {
       .text(function(d) { return d.id });
 
     this.simulation
-      .nodes(this.graph.nodes)
+      .nodes(this.graphData['nodes'])
       .on("tick", ticked);
 
     this.simulation.force("link")
-      .links(this.graph.links);
+      .links(this.graphData['links']);
 
     function ticked() {
       link

src/assets/YAML/generated/generated.yaml

@@ -1991,8 +1991,6 @@ Implementation:
       level: 3
       dependsOn:
       - Infrastructure as Code
-      - Usage of <a href="https://semver.org/">Semantic Versioning</a> for components
-        like project images
       implementation:
       - name: Remove direct access to infrastructure
         tags: []