Commit 1fa45805 authored by Qianwen Yuan's avatar Qianwen Yuan
Browse files

add DF graph and fix errs

parent 81496ded
Pipeline #454558 passed with stages
in 3 minutes and 36 seconds
......@@ -27,20 +27,80 @@
"name":"test0"
},
{
"nodeid":1,
"nodeid":0,
"name":"test1"
},
{
"nodeid":2,
"nodeid":0,
"name":"test2"
},
{
"nodeid":3,
"nodeid":0,
"name":"test3"
},
{
"nodeid":4,
"nodeid":1,
"name":"test4"
},
{
"nodeid":1,
"name":"test5"
},
{
"nodeid":1,
"name":"test6"
},
{
"nodeid":1,
"name":"test7"
},
{
"nodeid":2,
"name":"test8"
},
{
"nodeid":2,
"name":"test9"
},
{
"nodeid":2,
"name":"test10"
},
{
"nodeid":2,
"name":"test11"
},
{
"nodeid":3,
"name":"test12"
},
{
"nodeid":3,
"name":"test13"
},
{
"nodeid":3,
"name":"test14"
},
{
"nodeid":3,
"name":"test15"
},
{
"nodeid":4,
"name":"test16"
},
{
"nodeid":4,
"name":"test17"
},
{
"nodeid":4,
"name":"test18"
},
{
"nodeid":4,
"name":"test19"
}
]
}
......@@ -49,23 +109,23 @@
"node":[
{
"id": 0,
"agents": [0]
"agents": [0, 1, 2, 3]
},
{
"id": 1,
"agents": [1]
"agents": [4, 5, 6, 7]
},
{
"id": 2,
"agents": [2]
"agents": [8, 9, 10, 11]
},
{
"id": 3,
"agents": [3]
"agents": [12, 13, 14, 15]
},
{
"id": 4,
"agents": [4]
"agents": [16, 17, 18, 19]
}
],
"edge":[
......@@ -74,19 +134,24 @@
"n2": 1,
"weight": 2
},
{
"n1": 1,
"n2": 2,
"weight": 2
},
{
"n1": 2,
"n2": 1,
"n2": 3,
"weight": 2
},
{
"n1": 3,
"n2": 1,
"n2": 4,
"weight": 2
},
{
"n1": 4,
"n2": 1,
"n2": 0,
"weight": 2
}
]
......
declare module 'cytoscape-euler'
\ No newline at end of file
......@@ -1859,9 +1859,9 @@
"dev": true
},
"@types/node": {
"version": "12.20.5",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.5.tgz",
"integrity": "sha512-5Oy7tYZnu3a4pnJ//d4yVvOImExl4Vtwf0D40iKUlU+XlUsyV9iyFWyCFlwy489b72FMAik/EFwRkNLjjOdSPg==",
"version": "12.20.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.10.tgz",
"integrity": "sha512-TxCmnSSppKBBOzYzPR2BR25YlX5Oay8z2XGwFBInuA/Co0V9xJhLlW4kjbxKtgeNo3NOMbQP1A5Rc03y+XecPw==",
"dev": true
},
"@types/parse-json": {
......@@ -4050,19 +4050,6 @@
"lodash.debounce": "^4.0.8"
}
},
"cytoscape-euler": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/cytoscape-euler/-/cytoscape-euler-1.2.2.tgz",
"integrity": "sha512-A24ZGrFpqCOutTIlGoXA5kmjFj68iy7HvqXuhcZUL1a7Z8bL59Bl2bB7hkSvFcCZBVCNcArxKr+YlB8bJo9Ftw=="
},
"cytoscape-spread": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cytoscape-spread/-/cytoscape-spread-3.0.0.tgz",
"integrity": "sha512-ekuo4ByFRTZ4TOJylE2bPOMcVVyi8rD+qjvEjMWS2BHcyan40pmhlA4ramz/nTxZR+EtlxEa1asnmfiN8R5HyQ==",
"requires": {
"weaverjs": "^1.2.0"
}
},
"d": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
......@@ -7455,9 +7442,9 @@
}
},
"ssri": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
"dev": true,
"requires": {
"figgy-pudding": "^3.5.1"
......@@ -8619,9 +8606,9 @@
"dev": true
},
"ssri": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
"integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
"integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
"dev": true,
"requires": {
"figgy-pudding": "^3.5.1"
......@@ -12776,11 +12763,6 @@
"defaults": "^1.0.3"
}
},
"weaverjs": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/weaverjs/-/weaverjs-1.2.0.tgz",
"integrity": "sha1-ZUwVzHNbZgodrkx8JjzXx0ZRL6A="
},
"webdriver-js-extender": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz",
......
......@@ -27,8 +27,6 @@
"@types/luxon": "^1.26.3",
"bootstrap": "^4.5.0",
"cytoscape": "^3.18.2",
"cytoscape-euler": "^1.2.2",
"cytoscape-spread": "^3.0.0",
"install": "^0.13.0",
"luxon": "^1.26.0",
"ngx-mat-timepicker": "^11.0.5",
......@@ -41,7 +39,7 @@
"@angular/cli": "~11.0.4",
"@angular/compiler-cli": "~11.0.4",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"@types/node": "^12.20.10",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
......
......@@ -62,6 +62,18 @@
padding-bottom: 50px;
}
.alive {
position: relative;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex-direction: column;
}
.inputs {
padding-top: 30px;
......@@ -107,7 +119,7 @@
width: 1200px;
border-radius: 10px;
margin-top:50px;
margin-left: 200px;
margin-left: 400px;
}
......@@ -130,6 +142,11 @@
/* style of the nav tab */
.nav {
margin-left: 30px;
}
.nav-item>.active>a, .nav-item>.active>a:hover, .nav-item>.active>a:focus {
border-color: var(--background-primary-color);
border-bottom-color: transparent;
......@@ -148,8 +165,18 @@
}
#graph {
width: 100%;
width: 2100px;
height: 1000px;
}
.node {
color: var(--primary-color);
}
.notShow{
z-index: -1;
}
......
......@@ -40,81 +40,76 @@
<div class="contentcontainer">
<div class="contentcontainer">
<div class="notalive" *ngIf="!alive" >
<h1>DF is not alive......</h1>
</div>
<div *ngIf="alive">
<div class="inputs">
<input #desc type="text" class="input" id="searchDesc" placeholder="Enter the description"/>
<input #nodeid type="text" class="input" id="searchNode" placeholder="Enter the node ID"/>
<input #dist type="text" class="input" id="searchDist" placeholder="Enter the distance"/>
<button class="my-btn btn-search" type="submit" (click)="onSearchSvcs(desc.value, nodeid.value, dist.value)">
<i class="fas fa-search"></i>
</button>
<button type='button' class='btn my-btn btn-create' (click)="openLg(content)">+</button>
</div>
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item">
<a class="nav-link" [class.active]="curr_state==='graph'" (click)="onClickGraph()">graph</a>
</li>
<li class="nav-item" style="padding-right:100px;">
<a class="nav-link" [class.active]="curr_state==='list'" (click)="onClickList()" >list</a>
</li>
</ul>
<div class="content" *ngIf="curr_state === 'list'">
<div class="empty-service" *ngIf="searched_results === null">
<h1>No services found</h1>
</div>
<div class="service" *ngFor="let res of searched_results; index as i">
<div class="service-header d-flex justify-content-between">
<h2>Service {{i+1}}</h2>
<i class="fas fa-angle-right" *ngIf="collapsed[i]" (click)="onToggleCollapsed(i)"></i>
<i class="fas fa-angle-down" *ngIf="!collapsed[i]" (click)="onToggleCollapsed(i)"></i>
<div class="alive" *ngIf="alive">
<ul class="nav nav-tabs justify-content-end">
<li class="nav-item" >
<a class="nav-link" [class.active]="curr_state==='list'" (click)="onClickList()" >list</a>
</li>
<li class="nav-item" style="padding-right:100px;">
<a class="nav-link" [class.active]="curr_state==='graph'" (click)="onClickGraph()">graph</a>
</li>
</ul>
<div class="content" *ngIf="curr_state === 'list'">
<div class="inputs">
<input #desc type="text" class="input" id="searchDesc" placeholder="Enter the description"/>
<input #nodeid type="text" class="input" id="searchNode" placeholder="Enter the node ID"/>
<input #dist type="text" class="input" id="searchDist" placeholder="Enter the distance"/>
<button class="my-btn btn-search" type="submit" (click)="onSearchSvcs(desc.value, nodeid.value, dist.value)">
<i class="fas fa-search"></i>
</button>
<button type='button' class='btn my-btn btn-create' (click)="openLg(content)">+</button>
</div>
<div class="empty-service" *ngIf="searched_results === null">
<h1>No services found</h1>
</div>
<div class="service" *ngFor="let res of searched_results; index as i">
<div class="service-header d-flex justify-content-between">
<h2>Service {{i+1}}</h2>
<i class="fas fa-angle-right" *ngIf="collapsed[i]" (click)="onToggleCollapsed(i)"></i>
<i class="fas fa-angle-down" *ngIf="!collapsed[i]" (click)="onToggleCollapsed(i)"></i>
</div>
<table class="table table-striped" *ngIf="!collapsed[i]">
<tbody>
<tr>
<th>MAS ID</th>
<td>{{res.masid}}</td>
</tr>
<tr>
<th>Agent ID</th>
<td>{{res.agentid}}</td>
</tr>
<tr>
<th>NODE ID</th>
<td>{{res.nodeid}}</td>
</tr>
<tr>
<th>Create Date</th>
<td>{{res.createdat}}</td>
</tr>
<tr>
<th>Change Date</th>
<td>{{res.changedat}}</td>
</tr>
<tr>
<th>Dist</th>
<td>{{res.dist}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="content" [hidden]="curr_state === 'list'">
<div id="graph">
</div>
<table class="table table-striped" *ngIf="!collapsed[i]">
<tbody>
<tr>
<th>MAS ID</th>
<td>{{res.masid}}</td>
</tr>
<tr>
<th>Agent ID</th>
<td>{{res.agentid}}</td>
</tr>
<tr>
<th>NODE ID</th>
<td>{{res.nodeid}}</td>
</tr>
<tr>
<th>Create Date</th>
<td>{{res.createdat}}</td>
</tr>
<tr>
<th>Change Date</th>
<td>{{res.changedat}}</td>
</tr>
<tr>
<th>Dist</th>
<td>{{res.dist}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="content" *ngIf="curr_state === 'graph'">
<div id="graph">
</div>
</div>
</div>
</div>
</div>
</div>
......
......@@ -4,10 +4,7 @@ import { MasService} from "src/app/services/mas.service";
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute, Params } from '@angular/router';
import * as cytoscape from 'cytoscape';
import euler from 'cytoscape-euler';
import spread from 'cytoscape-spread';
cytoscape.use(euler);
import { forkJoin, Observable } from 'rxjs';
@Component({
selector: 'app-df',
......@@ -23,12 +20,8 @@ export class DFComponent implements OnInit {
filename: string = "Choose a file...";
collapsed: boolean[] = [];
searched_results;
curr_state: string = "graph";
disc;
curr_state: string = "list";
graph;
nodes;
edges;
agents;
constructor(
private dfService: DfService,
private masService: MasService,
......@@ -58,7 +51,7 @@ export class DFComponent implements OnInit {
if (params.masid) {
this.selectedMASID = params.masid;
this.dfService.getAllSvcs(this.selectedMASID.toString()).subscribe( (res:any) => {
this.searched_results = res;
this.searched_results = res;
for (let i = 0; i < res.length; i++) {
this.collapsed.push(false);
}
......@@ -69,155 +62,46 @@ export class DFComponent implements OnInit {
});
}
ngAfterViewInit() {
this.graph = cytoscape({
container: document.getElementById('graph'),
elements: [
// nodes
{ data: { id: 'a' } },
{ data: { id: 'b' } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}
],
/* layout: {
name: 'circle'
}, */
style: [
{
selector: 'node',
style: {
'background-color': "#9696f3",
label: 'data(id)'
getNodeAndEdge(): Observable<any> {
return new Observable((observer) => {
forkJoin({
reqNode: this.masService.getMASById(this.selectedMASID.toString()),
reqSvc: this.dfService.getAllSvcs(this.selectedMASID.toString())
}).subscribe(({ reqNode, reqSvc } : any ) => {
let nodes = reqNode.graph.node.map(node => node.id);
let agents = reqNode.agents.instances.map(agent => agent.id);
let edgeNodes = reqNode.graph.edge;
let edgeAgentNode = [];
let svcs = [];
let edgeSvcAgent = [];
for (let i = 0; i < reqNode.graph.node.length; i++) {
for (let j = 0; j < reqNode.graph.node[i].agents.length; j++) {
edgeAgentNode.push({
n1: reqNode.graph.node[i].id,
n2: reqNode.graph.node[i].agents[j]
})
}
}
]
});
for (var i = 0; i < 10; i++) {
this.graph.add({
data: { id: 'node' + i}
});
var source = 'node' + i;
this.graph.add({
data: {
id: 'edge' + i,
source: source,
target:(i % 2 == 0 ? 'a' : 'b')
for (let i = 0; i < reqSvc.length; i++) {
svcs.push(i);
edgeSvcAgent.push({
n1: i,
n2: reqSvc[i].agentid,
})
}
let res = {
"nodes": nodes,
"agents":agents,
"svcs": svcs,
"edgeNodes": edgeNodes,
"edgeAgentNode": edgeAgentNode,
"edgeSvcAgent": edgeSvcAgent
}
observer.next(res);
})
}
let defaults = {
name: 'euler',
// The ideal length of a spring
// - This acts as a hint for the edge length
// - The edge length can be longer or shorter if the forces are set to extreme values
springLength: edge => 80,
// Hooke's law coefficient
// - The value ranges on [0, 1]
// - Lower values give looser springs
// - Higher values give tighter springs
springCoeff: edge => 0.0008,
// The mass of the node in the physics simulation
// - The mass affects the gravity node repulsion/attraction
mass: node => 4,
// Coulomb's law coefficient
// - Makes the nodes repel each other for negative values
// - Makes the nodes attract each other for positive values
gravity: -1.2,
// A force that pulls nodes towards the origin (0, 0)
// Higher values keep the components less spread out
pull: 0.001,
// Theta coefficient from Barnes-Hut simulation
// - Value ranges on [0, 1]
// - Performance is better with smaller values
// - Very small values may not create enough force to give a good result
theta: 0.666,
// Friction / drag coefficient to make the system stabilise over time
dragCoeff: 0.02,
// When the total of the squared position deltas is less than this value, the simulation ends
movementThreshold: 1,
// The amount of time passed per tick
// - Larger values result in faster runtimes but might spread things out too far
// - Smaller values produce more accurate results
timeStep: 20,
// The number of ticks per frame for animate:true
// - A larger value reduces rendering cost but can be jerky
// - A smaller value increases rendering cost but is smoother
refresh: 10,
// Whether to animate the layout
// - true : Animate while the layout is running
// - false : Just show the end result
// - 'end' : Animate directly to the end result
animate: true,
// Animation duration used for animate:'end'
animationDuration: undefined,
// Easing for animate:'end'