feat(graph): Add search (#70)

Co-authored-by: Armin <[email protected]>

Co-authored-by: Arash-Azarpoor <[email protected]>

src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.html

@@ -8,10 +8,12 @@
 >
   <div *nzDrawerContent>
     <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
-      <input type="text" nz-input placeholder="Search nodes" />
+      <input type="text" nz-input placeholder="Search nodes" [(ngModel)]="searchTerm" />
     </nz-input-group>
     <ng-template #suffixIconButton>
-      <button nz-button nzType="primary" nzSearch><span nz-icon nzType="search"></span></button>
+      <button nz-button nzType="primary" nzSearch (click)="search()">
+        <span nz-icon nzType="search"></span>
+      </button>
     </ng-template>
     <nz-divider></nz-divider>
     <div class="node-container">

src/app/components/graph-components/data-overview-drawer/data-overview-drawer.component.spec.ts

@@ -1,14 +1,16 @@
 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;
   let fixture: ComponentFixture<DataOverviewDrawerComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [DataOverviewDrawerComponent]
+      imports: [DataOverviewDrawerComponent],
+      providers: [provideHttpClient()]
     })
     .compileComponents();
 

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 { 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';
@@ -9,6 +9,12 @@ 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';
+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',
@@ -23,12 +29,16 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     NzBadgeComponent,
     NzIconModule,
     NzDropdownMenuComponent,
-    NzDropDownModule
+    NzDropDownModule,
+    FormsModule,
   ],
   templateUrl: './data-overview-drawer.component.html',
-  styleUrl: './data-overview-drawer.component.scss'
+  styleUrl: './data-overview-drawer.component.scss',
 })
-export class DataOverviewDrawerComponent {
+export class DataOverviewDrawerComponent implements AfterViewInit {
+  protected searchTerm = '';
+  private selectedCategories!: graphCategory;
+
   @Input() visible = false;
   @Input() selectedNode: nodeData | null = null;
   @Input() selectedEdge: edgeData | null = null;
@@ -37,10 +47,45 @@ export class DataOverviewDrawerComponent {
 
   @Output() closeDrawer = new EventEmitter<void>();
 
+  constructor(private graphService: GraphService, private sigmaService: SigmaService, private notificationService: NotificationService) {}
+
+  ngAfterViewInit(): void {
+    this.subsctibeToServices();
+  }
+
   close(): void {
     this.closeDrawer.emit();
   }
 
+  search(): void {
+    console.log(this.selectedCategories)
+    const data: searchGraphNode = {
+      sourceCategoryName: this.selectedCategories.SourceNodeCategoryName,
+      targetCategoryName: this.selectedCategories.TargetNodeCategoryName,
+      edgeCategoryName: this.selectedCategories.EdgeCategoryName,
+      sourceCategoryClauses: {
+        AccountID: this.searchTerm,
+      },
+      targetCategoryClauses: {
+        AccountID: this.searchTerm,
+      },
+      edgeCategoryClauses: {},
+    };
+
+    this.graphService.searchNode(data).subscribe({
+      next: (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.message);
+      }
+    });
+  }
+
   expand(): void {
     // Logic for expanding the node
     console.log('Expand clicked for node:', this.selectedNodeId);
@@ -50,4 +95,12 @@ export class DataOverviewDrawerComponent {
     // Logic for deleting the node
     console.log('Delete clicked for node:', this.selectedNodeId);
   }
+
+  subsctibeToServices() {
+    this.sigmaService.selectedGraphCategories$.subscribe({
+      next: (data) => {
+        this.selectedCategories = data
+      },
+    });
+  }
 }

src/app/components/graph-components/sigma/sigma/sigma.component.ts

@@ -45,12 +45,15 @@ export class SigmaComponent implements AfterViewInit {
   private state: State = { searchQuery: '' };
   private cancelCurrentAnimation: (() => void) | null = null;
   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() {
@@ -196,13 +199,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() {
@@ -271,14 +277,14 @@ 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'),
     };
     const newPositions: PlainObject<PlainObject<number>> = {};
 
     neighbors.nodes.forEach((neighbour, index) => {
+      if (!this.graph.hasNode(neighbour.id)) {
       this.graph.addNode(neighbour.id, {
         label: neighbour.label,
         x: centerCordinate.x,
@@ -297,8 +303,7 @@ export class SigmaComponent implements AfterViewInit {
       newPositions[neighbour.id] = {
         x: newX,
         y: newY,
-      };
-      console.log(newPositions);
+      };}
     });
 
     this.addEdges(neighbors.edges);
@@ -311,7 +316,7 @@ export class SigmaComponent implements AfterViewInit {
       allowInvalidContainer: true,
       enableEdgeEvents: true,
       defaultEdgeType: 'curved',
-      renderEdgeLabels: true,
+      renderEdgeLabels: this.renderEdgeLabel,
       edgeProgramClasses: {
         straight: EdgeArrowProgram,
         curved: EdgeCurvedArrowProgram,
@@ -325,6 +330,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();
     });
@@ -340,7 +359,8 @@ 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({
           id: element.id,
@@ -352,7 +372,8 @@ export class SigmaComponent implements AfterViewInit {
           expanded: true,
         });
       });
-
+      this.graph.clear();
+      this.sigmaInstance.refresh();
       this.addNodes(this.nodesList);
       this.addEdges(edges);
     });
@@ -381,8 +402,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;
         },
@@ -394,16 +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')) {
-        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);
+          neighborData = data
+
         });
+        this.expandNode(event.node, neighborData);
       }
+
     });
     this.sigmaInstance.on('doubleClickStage', (e) => {
       e.preventSigmaDefault();
@@ -429,8 +452,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() {
@@ -469,24 +498,28 @@ 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'),
     };
     const newPositions: PlainObject<PlainObject<number>> = {};
     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);