Commit 81496ded authored by Nydia745's avatar Nydia745
Browse files

start df graph

parent aac67942
......@@ -27,26 +27,68 @@
"name":"test0"
},
{
"nodeid":0,
"nodeid":1,
"name":"test1"
},
{
"nodeid":0,
"nodeid":2,
"name":"test2"
},
{
"nodeid":0,
"nodeid":3,
"name":"test3"
},
{
"nodeid":0,
"nodeid":4,
"name":"test4"
}
]
}
],
"graph":{
"node":null,
"edge":null
"node":[
{
"id": 0,
"agents": [0]
},
{
"id": 1,
"agents": [1]
},
{
"id": 2,
"agents": [2]
},
{
"id": 3,
"agents": [3]
},
{
"id": 4,
"agents": [4]
}
],
"edge":[
{
"n1": 0,
"n2": 1,
"weight": 2
},
{
"n1": 2,
"n2": 1,
"weight": 2
},
{
"n1": 3,
"n2": 1,
"weight": 2
},
{
"n1": 4,
"n2": 1,
"weight": 2
}
]
}
}
\ No newline at end of file
declare module 'cytoscape-euler'
\ No newline at end of file
......@@ -1820,6 +1820,11 @@
"semver-intersect": "1.4.0"
}
},
"@types/cytoscape": {
"version": "3.14.13",
"resolved": "https://registry.npmjs.org/@types/cytoscape/-/cytoscape-3.14.13.tgz",
"integrity": "sha512-XcvB+TMmHF4QkORn1TydSEtS7vzy4LGbpVoFjCKGdHaswbyVvj7F/pGNAnDvZ2K29QHNNeeM4bF6NdIGEADHUg=="
},
"@types/glob": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
......@@ -4036,6 +4041,28 @@
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
"dev": true
},
"cytoscape": {
"version": "3.18.2",
"resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.18.2.tgz",
"integrity": "sha512-NRY3JTrUzx0fSn44LyMlPqC8/zuuOo8kbr2hFlfjiObRmtir+lnxVg08f8wUA4X/P80df9vSThKDASl39yH+Iw==",
"requires": {
"heap": "^0.2.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",
......@@ -5689,6 +5716,11 @@
"minimalistic-assert": "^1.0.1"
}
},
"heap": {
"version": "0.2.6",
"resolved": "https://registry.npmjs.org/heap/-/heap-0.2.6.tgz",
"integrity": "sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw="
},
"hex-color-regex": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
......@@ -7213,6 +7245,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
......@@ -12739,6 +12776,11 @@
"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",
......
......@@ -23,8 +23,12 @@
"@angular/platform-browser-dynamic": "~11.0.4",
"@angular/router": "~11.0.4",
"@ng-bootstrap/ng-bootstrap": "^9.0.2",
"@types/cytoscape": "^3.14.13",
"@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",
......
......@@ -102,11 +102,6 @@
text-align: center;
}
.content {
margin-top: 100px;
}
.service {
border: 2px solid var(--background-primary-color);
width: 1200px;
......@@ -133,6 +128,32 @@
}
/* style of the nav tab */
.nav-item>.active>a, .nav-item>.active>a:hover, .nav-item>.active>a:focus {
border-color: var(--background-primary-color);
border-bottom-color: transparent;
}
.nav-tabs {
border-bottom: 1px solid var(--background-primary-color);
}
.nav-link {
color: gray;
}
.nav-link.active {
color: var(--primary-color);
font-weight: bold;
}
#graph {
width: 100%;
height: 1000px;
}
......
......@@ -55,8 +55,17 @@
</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">
<div class="content" *ngIf="curr_state === 'list'">
<div class="empty-service" *ngIf="searched_results === null">
<h1>No services found</h1>
</div>
......@@ -96,6 +105,12 @@
</table>
</div>
</div>
<div class="content" *ngIf="curr_state === 'graph'">
<div id="graph">
</div>
</div>
......
......@@ -3,6 +3,11 @@ import { DfService} from "src/app/services/df.service";
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);
@Component({
selector: 'app-df',
......@@ -18,7 +23,12 @@ export class DFComponent implements OnInit {
filename: string = "Choose a file...";
collapsed: boolean[] = [];
searched_results;
disc
curr_state: string = "graph";
disc;
graph;
nodes;
edges;
agents;
constructor(
private dfService: DfService,
private masService: MasService,
......@@ -56,8 +66,159 @@ export class DFComponent implements OnInit {
} else {
console.log("No masid");
}
});
}
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)'
}
}
]
});
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')
}
})
}
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'
animationEasing: undefined,
// Maximum iterations and time (in ms) before the layout will bail out
// - A large value may allow for a better result
// - A small value may make the layout end prematurely
// - The layout may stop before this if it has settled
maxIterations: 1000,
maxSimulationTime: 4000,
// Prevent the user grabbing nodes during the layout (usually with animate:true)
ungrabifyWhileSimulating: false,
// Whether to fit the viewport to the repositioned graph
// true : Fits at end of layout for animate:false or animate:'end'; fits on each frame for animate:true
fit: true,
// Padding in rendered co-ordinates around the layout
padding: 30,
// Constrain layout bounds with one of
// - { x1, y1, x2, y2 }
// - { x1, y1, w, h }
// - undefined / null : Unconstrained
boundingBox: undefined,
// Layout event callbacks; equivalent to `layout.one('layoutready', callback)` for example
ready: function(){}, // on layoutready
stop: function(){}, // on layoutstop
// Whether to randomize the initial positions of the nodes
// true : Use random positions within the bounding box
// false : Use the current node positions as the initial positions
randomize: false
};
this.graph.layout(defaults).run();
}
getGraph() {
this.masService.getMASById(this.selectedMASID.toString()).subscribe( (res: any) => {
this.nodes = res.nodes.map(node => node.id);
for (let item of res.nodes)
})
}
drawGraph() {
}
// functions for update the services
......@@ -82,6 +243,15 @@ export class DFComponent implements OnInit {
fr.readAsText(this.fileToUpload);
}
onClickList() {
this.curr_state = "list";
}
onClickGraph() {
this.curr_state = "graph";
}
onToggleCollapsed(i: number) {
this.collapsed[i] = !this.collapsed[i];
}
......
......@@ -117,11 +117,9 @@ export class LoggerComponent implements OnInit {
updateSelectedID() {
this.selectedID = [];
this.notSelectedID = [];
this.notSelectedID
for (let i = 0; i < this.agentID.length; i++) {
if (this.isAgentSelected[i]) {
this.selectedID.push(i);
......
......@@ -12,66 +12,66 @@ export class MasService {
return this.webReqService.get('api/alive');
}
getams() {
return this.webReqService.get('api/ams');
getclonemap() {
return this.webReqService.get('api/clonemap');
}
getMAS() {
return this.webReqService.get('api/ams/mas');
return this.webReqService.get('api/clonemap/mas');
}
createMAS(payload: object) {
return this.webReqService.post('api/ams/mas', payload);
return this.webReqService.post('api/clonemap/mas', payload);
}
getMASById(masid: string) {
return this.webReqService.get(`api/ams/mas/${masid}`);
return this.webReqService.get(`api/clonemap/mas/${masid}`);
}
deleteMASById(masid: string) {
return this.webReqService.delete(`api/ams/mas/${masid}`);
return this.webReqService.delete(`api/clonemap/mas/${masid}`);
}
getAgents(masid: string) {
return this.webReqService.get(`api/ams/mas/${masid}/agents`);
return this.webReqService.get(`api/clonemap/mas/${masid}/agents`);
}
addAgents(masid: string, payload: object) {
return this.webReqService.post(`api/ams/mas/${masid}/agents`, payload );
return this.webReqService.post(`api/clonemap/mas/${masid}/agents`, payload );
}
getAgentById(masid:string, agentid: string) {
return this.webReqService.get(`api/ams/mas/${masid}/agents/${agentid}`);
return this.webReqService.get(`api/clonemap/mas/${masid}/agents/${agentid}`);
}
deleteAgentById(masid:string, agentid: string) {
return this.webReqService.delete(`api/ams/mas/${masid}/agents/${agentid}`);
return this.webReqService.delete(`api/clonemap/mas/${masid}/agents/${agentid}`);
}
getAgentAdress(masid:string, agentid: string) {
return this.webReqService.get(`api/ams/mas/${masid}/agents/${agentid}/address`);
return this.webReqService.get(`api/clonemap/mas/${masid}/agents/${agentid}/address`);
}
updateAgentAddress(masid: string, agentid:string, payload: object) {
return this.webReqService.post(`api/ams/mas/${masid}/agents/${agentid}/address`, payload);
return this.webReqService.post(`api/clonemap/mas/${masid}/agents/${agentid}/address`, payload);
}
customUpdateAgentAddress(masid: string, agentid: string, payload: object) {
return this.webReqService.post(`api/ams/mas/${masid}/agents/${agentid}/address`, payload);
return this.webReqService.post(`api/clonemap/mas/${masid}/agents/${agentid}/address`, payload);
}
getAgentbyName(masid:string, name: string) {
return this.webReqService.get(`api/ams/mas/${masid}/agents/name/${name}`);
return this.webReqService.get(`api/clonemap/mas/${masid}/agents/name/${name}`);
}
getAllAgencies(masid: string) {
return this.webReqService.get(`api/ams/mas/${masid}/agencies`);
return this.webReqService.get(`api/clonemap/mas/${masid}/agencies`);
}
getAgencyInformation(masid: string, imid: string, agencyid: string) {
return this.webReqService.get(`api/ams/mas/${masid}/imgroup/${imid}/agencies/${agencyid}`);
return this.webReqService.get(`api/clonemap/mas/${masid}/imgroup/${imid}/agencies/${agencyid}`);
}
......
......@@ -59,3 +59,4 @@ mat-form-field {
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment