From f2c1884afe35f2a21033c9ebb3333338038a2a98 Mon Sep 17 00:00:00 2001 From: Arash-Azarpoor Date: Sun, 8 Sep 2024 16:47:13 +0330 Subject: [PATCH 01/11] Add get category props method Co-authored-by: Armin --- .../data-overview-drawer.component.html | 2 +- .../data-overview-drawer.component.ts | 16 +++++++++-- .../get-graph/get-graph.component.ts | 27 +++++++++++++++++++ src/app/services/graph/graph.service.ts | 16 +++++++++++ src/app/services/sigma/sigma.service.ts | 22 ++++++++++++++- 5 files changed, 79 insertions(+), 4 deletions(-) diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html index c6aff4f..bef7eb4 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html @@ -11,7 +11,7 @@ - +
diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts index bf6489e..e51ccb3 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts @@ -9,6 +9,8 @@ import { NzBadgeComponent } from 'ng-zorro-antd/badge'; import { nodeData } from '../../../models/node-data'; import { edgeData } from '../../../models/edge-data'; import { NzIconModule } from 'ng-zorro-antd/icon'; +import { GraphService } from '../../../services/graph/graph.service'; +import { SigmaService } from '../../../services/sigma/sigma.service'; @Component({ selector: 'app-data-overview-drawer', @@ -23,12 +25,14 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; NzBadgeComponent, NzIconModule, NzDropdownMenuComponent, - NzDropDownModule + NzDropDownModule, ], templateUrl: './data-overview-drawer.component.html', - styleUrl: './data-overview-drawer.component.scss' + styleUrl: './data-overview-drawer.component.scss', }) export class DataOverviewDrawerComponent { + constructor(private graphService: GraphService, private sigmaService: SigmaService) {} + @Input() visible = false; @Input() selectedNode: nodeData | null = null; @Input() selectedEdge: edgeData | null = null; @@ -37,9 +41,17 @@ export class DataOverviewDrawerComponent { @Output() closeDrawer = new EventEmitter(); + private sourceNodeProp!: string[]; + private targetNodeProp!: string[]; + private edgeProp!: string[]; + close(): void { this.closeDrawer.emit(); } + + search(): void { + // Logic for searching the node + } expand(): void { // Logic for expanding the node diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts index 89dcd78..b434686 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts @@ -64,5 +64,32 @@ export class GetGraphComponent implements OnInit { }, }); this.sigmaService.setSelectedCategories(this.form.value) + + this.GraphService.getNodeProperties(this.form.value.SourceNodeCategoryName).subscribe({ + next: (data) => { + this.sigmaService.setSourceNodeProperties(data); + }, + error: () => { + return; + } + }); + + this.GraphService.getNodeProperties(this.form.value.TargetNodeCategoryName).subscribe({ + next: (data) => { + this.sigmaService.setTargetNodeProperties(data); + }, + error: () => { + return; + } + }); + + this.GraphService.getEdgeProperties(this.form.value.EdgeCategoryName).subscribe({ + next: (data) => { + this.sigmaService.setEdgeProperties(data); + }, + error: () => { + return; + } + }); } } diff --git a/src/app/services/graph/graph.service.ts b/src/app/services/graph/graph.service.ts index d71bebd..95712a5 100644 --- a/src/app/services/graph/graph.service.ts +++ b/src/app/services/graph/graph.service.ts @@ -77,4 +77,20 @@ export class GraphService { { headers, withCredentials: true } ); } + + getNodeProperties(nodeCategory: string) { + const headers = { 'Content-Type': 'application/json' }; + + return this.http.get(`${this.URL}api/Attributes/nodes?nodeCategoryName=${nodeCategory}`, { headers, withCredentials: true }); + } + + getEdgeProperties(edgeCategory: string) { + const headers = { 'Content-Type': 'application/json' }; + + return this.http.get(`${this.URL}api/Attributes/edges?edgeCategoryName=${edgeCategory}`, { headers, withCredentials: true }); + } + + searchNode(data:any){ + + } } diff --git a/src/app/services/sigma/sigma.service.ts b/src/app/services/sigma/sigma.service.ts index a0d0825..259e3e1 100644 --- a/src/app/services/sigma/sigma.service.ts +++ b/src/app/services/sigma/sigma.service.ts @@ -56,6 +56,15 @@ export class SigmaService { }); selectedGraphCategories$ = this.selectedGraphCategories.asObservable(); + private sourceNodeProp = new BehaviorSubject(['']); + sourceNodeProp$ = this.sourceNodeProp.asObservable(); + + private targetNodeProp = new BehaviorSubject(['']); + targetNodeProp$ = this.targetNodeProp.asObservable(); + + private edgeProp = new BehaviorSubject(['']); + edgeProp$ = this.edgeProp.asObservable(); + changeData(data: GraphData) { this.graphData.next(data); } @@ -95,6 +104,17 @@ export class SigmaService { setSelectedCategories(data:graphCategory){ this.selectedGraphCategories.next(data); - + } + + setSourceNodeProperties(data: string[]) { + this.sourceNodeProp.next(data) + } + + setTargetNodeProperties(data: string[]) { + this.targetNodeProp.next(data) + } + + setEdgeProperties(data: string[]) { + this.edgeProp.next(data) } } \ No newline at end of file From 18b4598dd08629dcc12f90cc27da8668f10f1b8f Mon Sep 17 00:00:00 2001 From: Armin Date: Sun, 8 Sep 2024 17:12:53 +0330 Subject: [PATCH 02/11] added search params --- .../data-overview-drawer.component.ts | 46 +++++++++++++++++-- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts index e51ccb3..839703a 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { NzDropdownMenuComponent, NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzDrawerModule } from 'ng-zorro-antd/drawer'; import { NzInputModule } from 'ng-zorro-antd/input'; @@ -11,6 +11,8 @@ import { edgeData } from '../../../models/edge-data'; import { NzIconModule } from 'ng-zorro-antd/icon'; import { GraphService } from '../../../services/graph/graph.service'; import { SigmaService } from '../../../services/sigma/sigma.service'; +import { graphCategory } from '../../../models/graph-category'; +import { da, th } from '@faker-js/faker'; @Component({ selector: 'app-data-overview-drawer', @@ -30,9 +32,13 @@ import { SigmaService } from '../../../services/sigma/sigma.service'; templateUrl: './data-overview-drawer.component.html', styleUrl: './data-overview-drawer.component.scss', }) -export class DataOverviewDrawerComponent { +export class DataOverviewDrawerComponent implements OnInit { constructor(private graphService: GraphService, private sigmaService: SigmaService) {} + ngOnInit(): void { + this.subscribeToServices(); + } + @Input() visible = false; @Input() selectedNode: nodeData | null = null; @Input() selectedEdge: edgeData | null = null; @@ -43,7 +49,8 @@ export class DataOverviewDrawerComponent { private sourceNodeProp!: string[]; private targetNodeProp!: string[]; - private edgeProp!: string[]; + private edgeProp!: string[]; + private selectedCategories! : graphCategory; //Ino niaz nadarim chon tooye get-graph component line 68 be bad ok kardim close(): void { this.closeDrawer.emit(); @@ -51,6 +58,15 @@ export class DataOverviewDrawerComponent { search(): void { // Logic for searching the node + const searchParam = { + sourceCategoryName: this.selectedCategories.sourceCategoryName, + targetCategoryName: this.selectedCategories.targetCategoryName, + sourceCategoryClauses: this.sourceNodeProp, + targetCategoryClauses: this.targetNodeProp, + edgeCategoryClauses: this.edgeProp + }//I have no idea if this the right format + + this.graphService.searchNode(searchParam) } expand(): void { @@ -62,4 +78,28 @@ export class DataOverviewDrawerComponent { // Logic for deleting the node console.log('Delete clicked for node:', this.selectedNodeId); } + + subscribeToServices(){ + // this.sigmaService.selectedGraphCategories$.subscribe({ + // next: (data)=>{ + // this.selectedCategories = data + // } + // }) va hamintor in + this.sigmaService.sourceNodeProp$.subscribe({ + next: (data)=>{ + this.sourceNodeProp = data + } + }) + this.sigmaService.targetNodeProp$.subscribe({ + next: (data)=>{ + this.targetNodeProp = data + } + }) + this.sigmaService.edgeProp$.subscribe({ + next: (data)=>{ + this.edgeProp = data + } + }) + + } } From 684f53329e887a0b9c7d4f7336fa222dd0221f52 Mon Sep 17 00:00:00 2001 From: Arash-Azarpoor Date: Sun, 8 Sep 2024 19:54:35 +0330 Subject: [PATCH 03/11] Connect search Co-authored-by: Armin --- .../data-overview-drawer.component.html | 6 +- .../data-overview-drawer.component.ts | 75 ++++++++----------- .../get-graph/get-graph.component.ts | 27 ------- src/app/models/search-graph-node.ts | 8 ++ src/app/services/graph/graph.service.ts | 19 ++--- 5 files changed, 49 insertions(+), 86 deletions(-) create mode 100644 src/app/models/search-graph-node.ts diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html index bef7eb4..c42a3fb 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html @@ -8,10 +8,12 @@ >
- + - +
diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts index 839703a..3c3bbf1 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { NzDropdownMenuComponent, NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzDrawerModule } from 'ng-zorro-antd/drawer'; import { NzInputModule } from 'ng-zorro-antd/input'; @@ -12,7 +12,8 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; import { GraphService } from '../../../services/graph/graph.service'; import { SigmaService } from '../../../services/sigma/sigma.service'; import { graphCategory } from '../../../models/graph-category'; -import { da, th } from '@faker-js/faker'; +import { FormsModule } from '@angular/forms'; +import { searchGraphNode } from '../../../models/search-graph-node'; @Component({ selector: 'app-data-overview-drawer', @@ -28,16 +29,14 @@ import { da, th } from '@faker-js/faker'; NzIconModule, NzDropdownMenuComponent, NzDropDownModule, + FormsModule, ], templateUrl: './data-overview-drawer.component.html', styleUrl: './data-overview-drawer.component.scss', }) -export class DataOverviewDrawerComponent implements OnInit { - constructor(private graphService: GraphService, private sigmaService: SigmaService) {} - - ngOnInit(): void { - this.subscribeToServices(); - } +export class DataOverviewDrawerComponent implements AfterViewInit { + protected searchTerm: string = ''; + private selectedCategories!: graphCategory; @Input() visible = false; @Input() selectedNode: nodeData | null = null; @@ -47,28 +46,34 @@ export class DataOverviewDrawerComponent implements OnInit { @Output() closeDrawer = new EventEmitter(); - private sourceNodeProp!: string[]; - private targetNodeProp!: string[]; - private edgeProp!: string[]; - private selectedCategories! : graphCategory; //Ino niaz nadarim chon tooye get-graph component line 68 be bad ok kardim + constructor(private graphService: GraphService, private sigmaService: SigmaService) {} + + ngAfterViewInit(): void { + this.subsctibeToServices(); + } close(): void { this.closeDrawer.emit(); } - + search(): void { - // Logic for searching the node - const searchParam = { + console.log(this.selectedCategories) + const data: searchGraphNode = { sourceCategoryName: this.selectedCategories.sourceCategoryName, targetCategoryName: this.selectedCategories.targetCategoryName, - sourceCategoryClauses: this.sourceNodeProp, - targetCategoryClauses: this.targetNodeProp, - edgeCategoryClauses: this.edgeProp - }//I have no idea if this the right format + edgeCategoryName: this.selectedCategories.edgeCategoryName, + sourceCategoryClauses: { + AccountID: this.searchTerm, + }, + targetCategoryClauses: { + AccountID: this.searchTerm, + }, + edgeCategoryClauses: {}, + }; - this.graphService.searchNode(searchParam) + this.graphService.searchNode(data); } - + expand(): void { // Logic for expanding the node console.log('Expand clicked for node:', this.selectedNodeId); @@ -79,27 +84,11 @@ export class DataOverviewDrawerComponent implements OnInit { console.log('Delete clicked for node:', this.selectedNodeId); } - subscribeToServices(){ - // this.sigmaService.selectedGraphCategories$.subscribe({ - // next: (data)=>{ - // this.selectedCategories = data - // } - // }) va hamintor in - this.sigmaService.sourceNodeProp$.subscribe({ - next: (data)=>{ - this.sourceNodeProp = data - } - }) - this.sigmaService.targetNodeProp$.subscribe({ - next: (data)=>{ - this.targetNodeProp = data - } - }) - this.sigmaService.edgeProp$.subscribe({ - next: (data)=>{ - this.edgeProp = data - } - }) - + subsctibeToServices() { + this.sigmaService.selectedGraphCategories$.subscribe({ + next: (data) => { + this.selectedCategories.sourceCategoryName = data.sourceCategoryName; + }, + }); } } diff --git a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts index b434686..89dcd78 100644 --- a/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts +++ b/src/app/components/graph-components/toolbarl/toolbar-components/get-graph/get-graph.component.ts @@ -64,32 +64,5 @@ export class GetGraphComponent implements OnInit { }, }); this.sigmaService.setSelectedCategories(this.form.value) - - this.GraphService.getNodeProperties(this.form.value.SourceNodeCategoryName).subscribe({ - next: (data) => { - this.sigmaService.setSourceNodeProperties(data); - }, - error: () => { - return; - } - }); - - this.GraphService.getNodeProperties(this.form.value.TargetNodeCategoryName).subscribe({ - next: (data) => { - this.sigmaService.setTargetNodeProperties(data); - }, - error: () => { - return; - } - }); - - this.GraphService.getEdgeProperties(this.form.value.EdgeCategoryName).subscribe({ - next: (data) => { - this.sigmaService.setEdgeProperties(data); - }, - error: () => { - return; - } - }); } } diff --git a/src/app/models/search-graph-node.ts b/src/app/models/search-graph-node.ts new file mode 100644 index 0000000..8a0c396 --- /dev/null +++ b/src/app/models/search-graph-node.ts @@ -0,0 +1,8 @@ +export interface searchGraphNode { + sourceCategoryName: string; + targetCategoryName: string; + edgeCategoryName: string; + sourceCategoryClauses: {}; + targetCategoryClauses: {}; + edgeCategoryClauses: {}; +} diff --git a/src/app/services/graph/graph.service.ts b/src/app/services/graph/graph.service.ts index 95712a5..9f51a69 100644 --- a/src/app/services/graph/graph.service.ts +++ b/src/app/services/graph/graph.service.ts @@ -6,6 +6,7 @@ import { nodeData } from '../../models/node-data'; import { edgeData } from '../../models/edge-data'; import { graphRecords } from '../../models/graph-records'; import { graphCategory } from '../../models/graph-category'; +import { searchGraphNode } from '../../models/search-graph-node'; @Injectable({ providedIn: 'root', @@ -77,20 +78,10 @@ export class GraphService { { headers, withCredentials: true } ); } - - getNodeProperties(nodeCategory: string) { - const headers = { 'Content-Type': 'application/json' }; - - return this.http.get(`${this.URL}api/Attributes/nodes?nodeCategoryName=${nodeCategory}`, { headers, withCredentials: true }); - } - - getEdgeProperties(edgeCategory: string) { - const headers = { 'Content-Type': 'application/json' }; - - return this.http.get(`${this.URL}api/Attributes/edges?edgeCategoryName=${edgeCategory}`, { headers, withCredentials: true }); - } - - searchNode(data:any){ + + searchNode(data: searchGraphNode){ + console.log(data)//test kon 👌 Is it working ? (。_。)nope why nottt chi chi mige ?? (°ー°〃) + // telegram } } From d0b83148e084184724ab9d5a375c9e10906794f9 Mon Sep 17 00:00:00 2001 From: Armin Date: Sun, 8 Sep 2024 20:05:39 +0330 Subject: [PATCH 04/11] fixed categories --- .../data-overview-drawer.component.ts | 11 +++++++---- src/app/models/graph-category.ts | 6 +++--- src/app/services/graph/graph.service.ts | 2 +- src/app/services/sigma/sigma.service.ts | 6 +++--- 4 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts index 3c3bbf1..382fa48 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts @@ -59,9 +59,9 @@ export class DataOverviewDrawerComponent implements AfterViewInit { search(): void { console.log(this.selectedCategories) const data: searchGraphNode = { - sourceCategoryName: this.selectedCategories.sourceCategoryName, - targetCategoryName: this.selectedCategories.targetCategoryName, - edgeCategoryName: this.selectedCategories.edgeCategoryName, + sourceCategoryName: this.selectedCategories.SourceNodeCategoryName, + targetCategoryName: this.selectedCategories.TargetNodeCategoryName, + edgeCategoryName: this.selectedCategories.EdgeCategoryName, sourceCategoryClauses: { AccountID: this.searchTerm, }, @@ -85,9 +85,12 @@ export class DataOverviewDrawerComponent implements AfterViewInit { } subsctibeToServices() { + console.log('subscribed'); + this.sigmaService.selectedGraphCategories$.subscribe({ next: (data) => { - this.selectedCategories.sourceCategoryName = data.sourceCategoryName; + console.log(data); + this.selectedCategories = data }, }); } diff --git a/src/app/models/graph-category.ts b/src/app/models/graph-category.ts index 3655768..a912ce0 100644 --- a/src/app/models/graph-category.ts +++ b/src/app/models/graph-category.ts @@ -1,5 +1,5 @@ export interface graphCategory { - sourceCategoryName: string; - targetCategoryName: string; - edgeCategoryName: string; + SourceNodeCategoryName: string; + TargetNodeCategoryName: string; + EdgeCategoryName: string; } diff --git a/src/app/services/graph/graph.service.ts b/src/app/services/graph/graph.service.ts index 9f51a69..a172b0d 100644 --- a/src/app/services/graph/graph.service.ts +++ b/src/app/services/graph/graph.service.ts @@ -74,7 +74,7 @@ export class GraphService { const headers = { 'Content-Type': 'application/json' }; return this.http.get( - `${this.URL}/api/Graph/expansion?nodeId=${id}&sourceCategoryName=${categories.sourceCategoryName}&targetCategoryName=${categories.targetCategoryName}&edgeCategoryName=${categories.edgeCategoryName}`, + `${this.URL}/api/Graph/expansion?nodeId=${id}&sourceCategoryName=${categories.SourceNodeCategoryName}&targetCategoryName=${categories.TargetNodeCategoryName}&edgeCategoryName=${categories.EdgeCategoryName}`, { headers, withCredentials: true } ); } diff --git a/src/app/services/sigma/sigma.service.ts b/src/app/services/sigma/sigma.service.ts index 259e3e1..6b2654e 100644 --- a/src/app/services/sigma/sigma.service.ts +++ b/src/app/services/sigma/sigma.service.ts @@ -50,9 +50,9 @@ export class SigmaService { getGraph$ = this.getGraph.asObservable(); private selectedGraphCategories = new BehaviorSubject( { - sourceCategoryName: '', - targetCategoryName: '', - edgeCategoryName: '', + SourceNodeCategoryName: '', + TargetNodeCategoryName: '', + EdgeCategoryName: '', }); selectedGraphCategories$ = this.selectedGraphCategories.asObservable(); From 9929cf7a39245b2dd23a03669714ca3b16865655 Mon Sep 17 00:00:00 2001 From: Arash-Azarpoor Date: Sun, 8 Sep 2024 21:03:17 +0330 Subject: [PATCH 05/11] Add search api --- .../data-overview-drawer.component.ts | 9 +++++---- src/app/services/graph/graph.service.ts | 10 +++++----- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts index 382fa48..6bdb993 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts @@ -71,7 +71,11 @@ export class DataOverviewDrawerComponent implements AfterViewInit { edgeCategoryClauses: {}, }; - this.graphService.searchNode(data); + this.graphService.searchNode(data).subscribe({ + next: (data) => { + console.log(data); + } + }); } expand(): void { @@ -85,11 +89,8 @@ export class DataOverviewDrawerComponent implements AfterViewInit { } subsctibeToServices() { - console.log('subscribed'); - this.sigmaService.selectedGraphCategories$.subscribe({ next: (data) => { - console.log(data); this.selectedCategories = data }, }); diff --git a/src/app/services/graph/graph.service.ts b/src/app/services/graph/graph.service.ts index a172b0d..e3388a4 100644 --- a/src/app/services/graph/graph.service.ts +++ b/src/app/services/graph/graph.service.ts @@ -78,10 +78,10 @@ export class GraphService { { headers, withCredentials: true } ); } - - searchNode(data: searchGraphNode){ - console.log(data)//test kon 👌 Is it working ? (。_。)nope why nottt chi chi mige ?? (°ー°〃) - // telegram - + + searchNode(data: searchGraphNode) { + const headers = { 'Content-Type': 'application/json' }; + + return this.http.post(`${this.URL}/api/Graph`, data, { headers, withCredentials: true }); } } From 6706a67e06911cf7ef4df6eec3d171910417e866 Mon Sep 17 00:00:00 2001 From: Armin Date: Sun, 8 Sep 2024 21:27:28 +0330 Subject: [PATCH 06/11] fix edge id error --- .../sigma/sigma/sigma.component.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.ts index 45b2d75..e71e355 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.ts +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.ts @@ -196,13 +196,16 @@ export class SigmaComponent implements AfterViewInit { } private addEdges(edges: { id: string; source: string; target: string }[]) { - const attr = { - label: 'test', - size: 10, - }; + edges.forEach((edge: { id: string; source: string; target: string }) => { + const attr = { + id: edge.id, + label: 'test', + size: 10, + }; this.graph.addEdge(edge.source, edge.target, attr); }); + } private addDragNodeFuntionality() { @@ -340,7 +343,7 @@ export class SigmaComponent implements AfterViewInit { this.sigmaService.getGraph$.subscribe((data) => { const nodes = data['nodes']; const edges = data['edges']; - + nodes.forEach((element: { id: string; label: string }) => { this.nodesList.push({ id: element.id, @@ -381,8 +384,8 @@ export class SigmaComponent implements AfterViewInit { private edgeClickHandler() { this.sigmaInstance.on('clickEdge', (event) => { this.selectedEdgeId = (parseInt(event.edge.charAt(event.edge.length - 1)) + 1).toString(); - - this.uploadService.getEdgeById(event.edge.charAt(event.edge.length - 1)).subscribe({ + + this.uploadService.getEdgeById(this.graph.getEdgeAttributes(event.edge)['id']).subscribe({ next: (data) => { this.selectedEdge = data; }, From 88cbe8eb79510d60095ba51817c334ed168f60c2 Mon Sep 17 00:00:00 2001 From: Arash-Azarpoor Date: Sun, 8 Sep 2024 22:44:52 +0330 Subject: [PATCH 07/11] Handle search in front Co-authored-by: Armin --- .../data-overview-drawer.component.ts | 12 ++++++++++-- .../graph-components/sigma/sigma/sigma.component.ts | 6 ++++-- src/app/models/graph-records.ts | 1 + src/app/services/graph/graph.service.ts | 2 +- src/app/services/sigma/sigma.service.ts | 3 ++- 5 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts index 6bdb993..b6b7336 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts @@ -14,6 +14,7 @@ import { SigmaService } from '../../../services/sigma/sigma.service'; import { graphCategory } from '../../../models/graph-category'; import { FormsModule } from '@angular/forms'; import { searchGraphNode } from '../../../models/search-graph-node'; +import { NotificationService } from '../../../services/notification/notification.service'; @Component({ selector: 'app-data-overview-drawer', @@ -46,7 +47,7 @@ export class DataOverviewDrawerComponent implements AfterViewInit { @Output() closeDrawer = new EventEmitter(); - constructor(private graphService: GraphService, private sigmaService: SigmaService) {} + constructor(private graphService: GraphService, private sigmaService: SigmaService, private notificationService: NotificationService) {} ngAfterViewInit(): void { this.subsctibeToServices(); @@ -73,7 +74,14 @@ export class DataOverviewDrawerComponent implements AfterViewInit { this.graphService.searchNode(data).subscribe({ next: (data) => { - console.log(data); + if (data.nodes.length === 0) { + this.notificationService.createNotification('info', 'Info', 'No results found'); + return; + } + this.sigmaService.setGetGraph(data); + }, + error: (error) => { + this.notificationService.createNotification('error', 'Error', error); } }); } diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.ts index e71e355..8885760 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.ts +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.ts @@ -44,7 +44,7 @@ export class SigmaComponent implements AfterViewInit { private graph!: MultiGraph; private state: State = { searchQuery: '' }; private cancelCurrentAnimation: (() => void) | null = null; - private nodesList: GraphNode[] = []; + private nodesList: GraphNode[] = [];// bia tel \\hastam پیاممو ببین خب protected drawerVisible = false; protected selectedNode: nodeData | null = null; protected selectedEdge: edgeData | null = null; @@ -343,6 +343,7 @@ export class SigmaComponent implements AfterViewInit { this.sigmaService.getGraph$.subscribe((data) => { const nodes = data['nodes']; const edges = data['edges']; + this.nodesList = []; nodes.forEach((element: { id: string; label: string }) => { this.nodesList.push({ @@ -355,7 +356,8 @@ export class SigmaComponent implements AfterViewInit { expanded: true, }); }); - + this.graph.clear(); + this.sigmaInstance.refresh(); this.addNodes(this.nodesList); this.addEdges(edges); }); diff --git a/src/app/models/graph-records.ts b/src/app/models/graph-records.ts index cb3b57a..3e52b55 100644 --- a/src/app/models/graph-records.ts +++ b/src/app/models/graph-records.ts @@ -1,4 +1,5 @@ export interface graphRecords { nodes: { id: string; label: string }[]; edges: { id: string; source: string; target: string }[]; + message?: string; } diff --git a/src/app/services/graph/graph.service.ts b/src/app/services/graph/graph.service.ts index e3388a4..140620f 100644 --- a/src/app/services/graph/graph.service.ts +++ b/src/app/services/graph/graph.service.ts @@ -82,6 +82,6 @@ export class GraphService { searchNode(data: searchGraphNode) { const headers = { 'Content-Type': 'application/json' }; - return this.http.post(`${this.URL}/api/Graph`, data, { headers, withCredentials: true }); + return this.http.post(`${this.URL}/api/Graph`, data, { headers, withCredentials: true }); } } diff --git a/src/app/services/sigma/sigma.service.ts b/src/app/services/sigma/sigma.service.ts index 6b2654e..7aac17f 100644 --- a/src/app/services/sigma/sigma.service.ts +++ b/src/app/services/sigma/sigma.service.ts @@ -2,6 +2,7 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject, Subject } from 'rxjs'; import { GraphData } from '../../models/graph-data'; import { graphCategory } from '../../models/graph-category'; +import { graphRecords } from '../../models/graph-records'; @Injectable({ providedIn: 'root', @@ -98,7 +99,7 @@ export class SigmaService { this.searchedNode.next(node); } - setGetGraph(data: {nodes: {id:string , label:string}[] , edges: {id:string , source:string , target: string}[]}) { + setGetGraph(data: graphRecords) { this.getGraph.next(data); } From 5f7388e8060b641667a635eda776a9fdc90e783f Mon Sep 17 00:00:00 2001 From: Arash-Azarpoor Date: Sun, 8 Sep 2024 23:13:04 +0330 Subject: [PATCH 08/11] add notification for search with no result --- .../data-overview-drawer/data-overview-drawer.component.ts | 6 +++--- src/app/models/search-graph-node.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts index b6b7336..2c284cf 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core'; import { NzDropdownMenuComponent, NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzDrawerModule } from 'ng-zorro-antd/drawer'; import { NzInputModule } from 'ng-zorro-antd/input'; @@ -36,7 +36,7 @@ import { NotificationService } from '../../../services/notification/notification styleUrl: './data-overview-drawer.component.scss', }) export class DataOverviewDrawerComponent implements AfterViewInit { - protected searchTerm: string = ''; + protected searchTerm = ''; private selectedCategories!: graphCategory; @Input() visible = false; @@ -81,7 +81,7 @@ export class DataOverviewDrawerComponent implements AfterViewInit { this.sigmaService.setGetGraph(data); }, error: (error) => { - this.notificationService.createNotification('error', 'Error', error); + this.notificationService.createNotification('error', 'Error', error.message); } }); } diff --git a/src/app/models/search-graph-node.ts b/src/app/models/search-graph-node.ts index 8a0c396..2d130cc 100644 --- a/src/app/models/search-graph-node.ts +++ b/src/app/models/search-graph-node.ts @@ -2,7 +2,7 @@ export interface searchGraphNode { sourceCategoryName: string; targetCategoryName: string; edgeCategoryName: string; - sourceCategoryClauses: {}; - targetCategoryClauses: {}; - edgeCategoryClauses: {}; + sourceCategoryClauses: object; + targetCategoryClauses: object; + edgeCategoryClauses: object; } From bea2863dd8d0bc3ba9396a9ce7d378e8c5ba00df Mon Sep 17 00:00:00 2001 From: Armin Date: Mon, 9 Sep 2024 08:45:52 +0330 Subject: [PATCH 09/11] fix tests --- .../data-overview-drawer.component.spec.ts | 4 +++- src/app/services/graph/graph.service.spec.ts | 8 ++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts index 33d9d57..eac7a44 100644 --- a/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts +++ b/src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts @@ -1,6 +1,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { DataOverviewDrawerComponent } from './data-overview-drawer.component'; +import { provideHttpClient } from '@angular/common/http'; describe('DataOverviewDrawerComponent', () => { let component: DataOverviewDrawerComponent; @@ -8,7 +9,8 @@ describe('DataOverviewDrawerComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [DataOverviewDrawerComponent] + imports: [DataOverviewDrawerComponent], + providers: [provideHttpClient()] }) .compileComponents(); diff --git a/src/app/services/graph/graph.service.spec.ts b/src/app/services/graph/graph.service.spec.ts index 097750f..ffbe9a6 100644 --- a/src/app/services/graph/graph.service.spec.ts +++ b/src/app/services/graph/graph.service.spec.ts @@ -203,9 +203,9 @@ describe('GraphService', () => { // Arrange const id = 1; const categories: graphCategory = { - sourceCategoryName: 'Category1', - targetCategoryName: 'Category2', - edgeCategoryName: 'EdgeCategory1', + SourceNodeCategoryName: 'Category1', + TargetNodeCategoryName: 'Category2', + EdgeCategoryName: 'EdgeCategory1', }; const mockResponse: graphRecords = { nodes: [], edges: [] }; httpClientSpy.get.and.returnValue(of(mockResponse)); @@ -219,7 +219,7 @@ describe('GraphService', () => { expect(httpClientSpy.get.calls.count()).toBe(1); expect(httpClientSpy.get.calls.mostRecent().args[0]).toBe( - `${API_URL}/api/Graph/expansion?nodeId=${id}&sourceCategoryName=${categories.sourceCategoryName}&targetCategoryName=${categories.targetCategoryName}&edgeCategoryName=${categories.edgeCategoryName}` + `${API_URL}/api/Graph/expansion?nodeId=${id}&sourceCategoryName=${categories.SourceNodeCategoryName}&targetCategoryName=${categories.TargetNodeCategoryName}&edgeCategoryName=${categories.EdgeCategoryName}` ); }); }); From cfaa24c148c12b7d3a517d40acb39ea4ab5d784e Mon Sep 17 00:00:00 2001 From: Armin Date: Mon, 9 Sep 2024 10:31:38 +0330 Subject: [PATCH 10/11] added options --- .../sigma/sigma/sigma.component.ts | 41 +++++++++++++------ .../graph-tool-bar.component.html | 28 +++++++------ .../graph-tool-bar.component.scss | 13 ++++++ .../graph-tool-bar.component.ts | 21 ++++++++-- src/app/services/sigma/sigma.service.ts | 14 +++++++ 5 files changed, 89 insertions(+), 28 deletions(-) diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.ts index 8885760..89d4180 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.ts +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.ts @@ -44,13 +44,16 @@ export class SigmaComponent implements AfterViewInit { private graph!: MultiGraph; private state: State = { searchQuery: '' }; private cancelCurrentAnimation: (() => void) | null = null; - private nodesList: GraphNode[] = [];// bia tel \\hastam پیاممو ببین خب + private nodesList: GraphNode[] = []; + private renderEdgeLabel = true; + private toggleHover = false; protected drawerVisible = false; protected selectedNode: nodeData | null = null; protected selectedEdge: edgeData | null = null; protected selectedNodeId!: string; protected selectedEdgeId!: string; protected selectedCategories!: graphCategory; + constructor( private sigmaService: SigmaService, @@ -88,15 +91,15 @@ export class SigmaComponent implements AfterViewInit { this.addDragNodeFuntionality(); + + this.sigmaInstance.getMouseCaptor().on('mousedown', () => { if (!this.sigmaInstance.getCustomBBox()) this.sigmaInstance.setCustomBBox(this.sigmaInstance.getBBox()); }); this.handleLeaveNode(); - this.nodeSetting(); - - this.setReducerSetting(); + } protected resetCamera() { @@ -274,7 +277,6 @@ export class SigmaComponent implements AfterViewInit { } private expandNode(id: string, neighbors: graphRecords) { - console.log(id, neighbors); const centerCordinate = { x: this.graph.getNodeAttribute(id, 'x'), y: this.graph.getNodeAttribute(id, 'y'), @@ -301,7 +303,6 @@ export class SigmaComponent implements AfterViewInit { x: newX, y: newY, }; - console.log(newPositions); }); this.addEdges(neighbors.edges); @@ -314,7 +315,7 @@ export class SigmaComponent implements AfterViewInit { allowInvalidContainer: true, enableEdgeEvents: true, defaultEdgeType: 'curved', - renderEdgeLabels: true, + renderEdgeLabels: this.renderEdgeLabel, edgeProgramClasses: { straight: EdgeArrowProgram, curved: EdgeCurvedArrowProgram, @@ -328,6 +329,20 @@ export class SigmaComponent implements AfterViewInit { this.circularLayout(); }); + this.sigmaService.renderEdgeLabel$.subscribe((data)=>{ + this.renderEdgeLabel = data; + this.sigmaInstance.setSetting('renderEdgeLabels', this.renderEdgeLabel); + this.sigmaInstance.refresh(); + }) + + this.sigmaService.toggleHover$.subscribe((data)=>{ + this.toggleHover = data + + if(data){ + this.handleEnterNode() + } + }) + this.sigmaService.randomLayoutTrigger$.subscribe(() => { this.randomLayout(); }); @@ -401,10 +416,8 @@ export class SigmaComponent implements AfterViewInit { this.sigmaInstance.on('doubleClickNode', (event) => { event.preventSigmaDefault(); if (this.graph.getNodeAttribute(event.node, 'expanded')) { - console.log('its expanded'); this.collapseNode(event.node); } else { - console.log('it is not expandded'); this.mockBack.getNeighbourById(event.node).subscribe((data) => { this.expandNode(event.node, data); }); @@ -434,8 +447,14 @@ export class SigmaComponent implements AfterViewInit { private handleEnterNode() { this.sigmaInstance.on('enterNode', ({ node }) => { - this.setHoveredNode(node); + if (this.toggleHover) { + this.setHoveredNode(node); + } }); + + this.nodeSetting(); + + this.setReducerSetting(); } private handleLeaveNode() { @@ -474,8 +493,6 @@ export class SigmaComponent implements AfterViewInit { } collapseNode(id: string) { - console.log(`we gonna collapse ${id}`); - const centerCordinate = { x: this.graph.getNodeAttribute(id, 'x'), y: this.graph.getNodeAttribute(id, 'y'), diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html index 30527e8..38b5695 100644 --- a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html +++ b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.html @@ -4,7 +4,7 @@ nzPopoverTrigger="click" nz-popover nz-tooltip - nzTooltipTitle="Upload" + nzTooltipTitle="Upload" nzPopoverTitle="Upload" [nzPopoverContent]="upload" nzPopoverPlacement="bottom" @@ -20,7 +20,7 @@ nzPopoverTrigger="click" nz-popover nz-tooltip - nzTooltipTitle="Get Graph" + nzTooltipTitle="Get Graph" nzPopoverTitle="Get Graph" [nzPopoverContent]="getGgraph" nzPopoverPlacement="bottom" @@ -36,7 +36,7 @@ nzPopoverTrigger="click" nz-popover nz-tooltip - nzTooltipTitle="Layouts" + nzTooltipTitle="Layouts" nzPopoverTitle="Layouts" [nzPopoverContent]="layouts" nzPopoverPlacement="bottom" @@ -53,7 +53,7 @@ nzPopoverTrigger="click" nz-popover nz-tooltip - nzTooltipTitle="Settings" + nzTooltipTitle="Settings" nzPopoverTitle="Settings" [nzPopoverContent]="Options" nzPopoverPlacement="bottom" @@ -68,7 +68,7 @@
@@ -86,13 +86,17 @@ -
-

- Toggle show connected nodes on hover - -

-

More options to be added

+
+
+

Toggle show connected nodes on hover

+ +
+
+

Toggle edge label

+ +
+ diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss index e2c31e4..1998626 100644 --- a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss +++ b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss @@ -78,4 +78,17 @@ .grow-div{ flex-grow: 1; +} + +.option{ + display: flex; + width: 100%; + justify-content: space-between; + gap: 1rem; +} + +.option-container{ + display: flex; + flex-direction: column; + gap: 1.5rem; } \ No newline at end of file diff --git a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.ts b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.ts index 53a62fb..856b5f2 100644 --- a/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.ts +++ b/src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.ts @@ -10,7 +10,8 @@ import { LayoutsComponent } from '../toolbar-components/layouts/layouts.componen import { UploadComponentsComponent } from '../toolbar-components/upload-component/upload-layout/upload-components.component'; import { NzSwitchModule } from 'ng-zorro-antd/switch'; import { RouterLink } from '@angular/router'; -import { GetGraphComponent } from "../toolbar-components/get-graph/get-graph.component"; +import { GetGraphComponent } from '../toolbar-components/get-graph/get-graph.component'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'app-graph-tool-bar', @@ -26,13 +27,17 @@ import { GetGraphComponent } from "../toolbar-components/get-graph/get-graph.com LayoutsComponent, UploadComponentsComponent, NzSwitchModule, - GetGraphComponent -], + GetGraphComponent, + FormsModule, + ], providers: [], templateUrl: './graph-tool-bar.component.html', styleUrl: './graph-tool-bar.component.scss', }) export class GraphToolBarComponent { + protected isSwitchChecked = true; + protected hoverToggle = false; + constructor(private sigmaService: SigmaService) {} activeButton: number | null = null; @Output() openDrawer: EventEmitter = new EventEmitter(); @@ -41,8 +46,16 @@ export class GraphToolBarComponent { this.activeButton = index; } - openMenu(){ + openMenu() { this.setActiveButton(4); this.openDrawer.emit(true); } + + toggleRenderEdgeLabel() { + this.sigmaService.toggleRenderEdgeLabel(); + } + + toggleNodeHover(){ + this.sigmaService.toggleNodeHover(); + } } diff --git a/src/app/services/sigma/sigma.service.ts b/src/app/services/sigma/sigma.service.ts index 7aac17f..f1be705 100644 --- a/src/app/services/sigma/sigma.service.ts +++ b/src/app/services/sigma/sigma.service.ts @@ -66,6 +66,12 @@ export class SigmaService { private edgeProp = new BehaviorSubject(['']); edgeProp$ = this.edgeProp.asObservable(); + private renderEdgeLabel = new BehaviorSubject(true); + renderEdgeLabel$ = this.renderEdgeLabel.asObservable(); + + private toggleHover = new BehaviorSubject(false); + toggleHover$ = this.toggleHover.asObservable(); + changeData(data: GraphData) { this.graphData.next(data); } @@ -118,4 +124,12 @@ export class SigmaService { setEdgeProperties(data: string[]) { this.edgeProp.next(data) } + + toggleRenderEdgeLabel(){ + this.renderEdgeLabel.next(!this.renderEdgeLabel.value); + } + + toggleNodeHover(){ + this.toggleHover.next(!this.toggleHover.value); + } } \ No newline at end of file From 4b631eb7bec48ea65978c32e645efd539592a035 Mon Sep 17 00:00:00 2001 From: Armin Date: Mon, 9 Sep 2024 11:58:40 +0330 Subject: [PATCH 11/11] fixed collapse logic --- .../sigma/sigma/sigma.component.ts | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.ts b/src/app/components/graph-components/sigma/sigma/sigma.component.ts index 89d4180..3bf2521 100644 --- a/src/app/components/graph-components/sigma/sigma/sigma.component.ts +++ b/src/app/components/graph-components/sigma/sigma/sigma.component.ts @@ -284,6 +284,7 @@ export class SigmaComponent implements AfterViewInit { const newPositions: PlainObject> = {}; neighbors.nodes.forEach((neighbour, index) => { + if (!this.graph.hasNode(neighbour.id)) { this.graph.addNode(neighbour.id, { label: neighbour.label, x: centerCordinate.x, @@ -302,7 +303,7 @@ export class SigmaComponent implements AfterViewInit { newPositions[neighbour.id] = { x: newX, y: newY, - }; + };} }); this.addEdges(neighbors.edges); @@ -414,14 +415,18 @@ export class SigmaComponent implements AfterViewInit { private doubleClickHandler() { this.sigmaInstance.on('doubleClickNode', (event) => { + let neighborData : graphRecords = {nodes: [] , edges:[]} event.preventSigmaDefault(); if (this.graph.getNodeAttribute(event.node, 'expanded')) { this.collapseNode(event.node); } else { this.mockBack.getNeighbourById(event.node).subscribe((data) => { - this.expandNode(event.node, data); + neighborData = data + }); + this.expandNode(event.node, neighborData); } + }); this.sigmaInstance.on('doubleClickStage', (e) => { e.preventSigmaDefault(); @@ -499,16 +504,22 @@ export class SigmaComponent implements AfterViewInit { }; const newPositions: PlainObject> = {}; const neighbours = this.graph.neighbors(id); + neighbours.forEach((neighbour) => { - newPositions[neighbour] = { - x: centerCordinate.x, - y: centerCordinate.y, - }; - - setTimeout(() => { - this.graph.dropNode(neighbour); - }, 550); + const neighborNeighbors = this.graph.neighbors(neighbour); + const hasOnlyClickedNodeAsNeighbor = neighborNeighbors.length === 1 && neighborNeighbors[0] === id; + if (hasOnlyClickedNodeAsNeighbor) { + newPositions[neighbour] = { + x: centerCordinate.x, + y: centerCordinate.y, + }; + + setTimeout(() => { + this.graph.dropNode(neighbour); + }, 550); + } + }); this.graph.setNodeAttribute(id, 'expanded', false);