refactor(*): Dashboard graph to back (#63)

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

src/app/components/dashboard-content/dashboard-content.component.scss

@@ -1,4 +1,5 @@
 .container {
+  inline-size: calc(100vw - 41.4rem);
   display: flex;
   flex-direction: column;
   gap: 4rem;
@@ -7,7 +8,7 @@
     inline-size: 100%;
     background-color: #fff;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-    border-radius: 1.5rem;
+    border-radius: 1rem;
     padding-block: 4rem;
     display: flex;
     flex-direction: column;
@@ -31,7 +32,7 @@
     &__content-container {
       background-color: #fff;
       box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-      border-radius: 2rem;
+      border-radius: 1rem;
       overflow: hidden;
 
       &__title-container {

src/app/components/dashboard-navbar/dashboard-navbar.component.scss

@@ -6,7 +6,7 @@
 .navbar {
   @include flex;
   justify-content: space-between;
-  padding: 0.5rem 1rem;
+  padding-block: 0.5rem;
 
   &__left {
     @include flex;

src/app/components/edit-user-components/edit-password/edit-password.component.scss

@@ -8,7 +8,7 @@
 .edit-profile-container {
   background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-  border-radius: 2rem;
+  border-radius: 1rem;
   overflow: hidden;
 
   &__title-container {

src/app/components/edit-user-components/edit-profile/edit-profile.component.scss

@@ -8,7 +8,7 @@
 .edit-profile-container {
   background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-  border-radius: 2rem;
+  border-radius: 1rem;
   overflow: hidden;
 
   &__title-container {

src/app/components/edit-user-components/edit-profile/edit-profile.component.ts

@@ -87,7 +87,10 @@ export class EditProfileComponent implements OnChanges, OnInit {
       next: (response) => {
         const successMessage = 'Success';
         this.notificationService.createNotification('success', successMessage, response.message);
-        this.logout();
+
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
       },
       error: (error: HttpErrorResponse) => {
         let errorMessage = 'An unexpected error occurred';
@@ -107,6 +110,14 @@ export class EditProfileComponent implements OnChanges, OnInit {
       next: (response) => {
         const successMessage = 'Success';
         this.notificationService.createNotification('success', successMessage, response.message);
+
+        this.userService.userData$.subscribe((data) => {
+          if (data.id === this.userData.id) {
+            setTimeout(() => {
+              window.location.reload();
+            }, 1000);
+          }
+        });
       },
       error: (error: HttpErrorResponse) => {
         let errorMessage = 'An unexpected error occurred';
@@ -121,20 +132,6 @@ export class EditProfileComponent implements OnChanges, OnInit {
     });
   }
 
-  private logout() {
-    this.userService.logout().subscribe({
-      next: () => {
-        this.notificationService.createNotification('info', 'Logged Out', 'You have been logged out successfully.');
-        setTimeout(() => {
-          this.router.navigate(['/landing']);
-        }, 2000);
-      },
-      error: (error: HttpErrorResponse) => {
-        console.error('Error logging out', error);
-      },
-    });
-  }
-
   protected getErrorTip(control: formInput): string {
     const formControl = this.userForm.get(control.name);
 

src/app/components/edit-user-components/edit-role/edit-role.component.scss

@@ -8,7 +8,7 @@
 .role-container {
   background-color: #fff;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
-  border-radius: 2rem;
+  border-radius: 1rem;
   overflow: hidden;
 
   &__title-container {

src/app/components/edit-user-components/edit-role/edit-role.component.ts

@@ -76,6 +76,11 @@ export class EditRoleComponent implements OnChanges {
       this.userService.updateRole(this.roleForm.value.roles, this.userData ? this.userData.id : 0).subscribe({
         next: (response) => {
           this.notificationService.createNotification('success', 'Success', response.message);
+          this.userService.userData$.subscribe((data) => {
+            if (data.id === this.userData?.id) {
+              this.logout();
+            }
+          });
         },
         error: (error: HttpErrorResponse) => {
           let errorMessage = 'An unexpected error occurred';
@@ -114,4 +119,18 @@ export class EditRoleComponent implements OnChanges {
   protected onTagChange(value: string[]): void {
     this.roleForm.get('roles')?.setValue(value);
   }
+
+  private logout() {
+    this.userService.logout().subscribe({
+      next: () => {
+        this.notificationService.createNotification('info', 'Logged Out', 'You have been logged out successfully.');
+        setTimeout(() => {
+          window.location.href = '/';
+        }, 1000);
+      },
+      error: (error: HttpErrorResponse) => {
+        console.error('Error logging out', error);
+      },
+    });
+  }
 }

src/app/components/edit-user-components/edit-user/edit-user.component.scss

@@ -1,5 +1,6 @@
 .edit-user-container {
-    display: flex;
-    flex-direction: column;
-    gap: 4rem;
-}
+  width: calc(100vw - 41.4rem);
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}

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

@@ -29,5 +29,6 @@
     </button>
   </div>
 <app-graph-tool-bar></app-graph-tool-bar>
+
   <div id="sigma-container"></div>
 </div>

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

@@ -1,6 +1,6 @@
 #sigma-container {
   flex-grow: 1;
-  width: calc(100vw - 35rem - 6.4rem);
+  inline-size: calc(100vw - 41.4rem);
   height: 100%;
   background-color: #f8f6f4;
 }

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

@@ -1,7 +1,6 @@
 import { AfterViewInit, Component } from '@angular/core';
 import { MultiGraph } from 'graphology';
 import Sigma from 'sigma';
-import { nodes, edges } from './data';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { SigmaService } from '../../../../services/sigma/sigma.service';
 import { GraphData } from '../../../../models/graph-data';
@@ -13,9 +12,8 @@ import { EdgeArrowProgram } from 'sigma/rendering';
 import { EdgeCurvedArrowProgram } from '@sigma/edge-curve';
 import { MockBackService } from '../../../../services/mock-back/mock-back.service';
 import { State } from '../../../../models/graph-state';
-import { GraphToolBarComponent } from "../../toolbarl/graph-tool-bar/graph-tool-bar.component";
-
-// ********** This component can be a bit confusing so I have to use comments to ease the understanding (Sorry if the comments are a bit informal ^.^) **********
+import { GraphNode } from '../../../../models/graph-Nodes';
+import { GraphToolBarComponent } from '../../toolbarl/graph-tool-bar/graph-tool-bar.component';
 
 @Component({
   selector: 'app-sigma',
@@ -27,12 +25,12 @@ import { GraphToolBarComponent } from "../../toolbarl/graph-tool-bar/graph-tool-
 export class SigmaComponent implements AfterViewInit {
   private initialCameraState: { x: number; y: number; ratio: number } | null = null;
   private sigmaInstance!: Sigma;
-  private nodes = 0;
   private draggedNode: string | null = null;
   private isDragging = false;
   private graph!: MultiGraph;
   private state: State = { searchQuery: '' };
   private cancelCurrentAnimation: (() => void) | null = null;
+  private nodesList: GraphNode[] = [];
 
   constructor(private sigmaService: SigmaService, private mockBack: MockBackService) {}
 
@@ -45,13 +43,13 @@ export class SigmaComponent implements AfterViewInit {
 
     this.initializeGraph();
 
-    this.graph.addNode(this.mockBack.addSingleNode('0')?.id, {
-      label: this.mockBack.addSingleNode('0')?.label,
-      x: this.mockBack.addSingleNode('0')?.x,
-      y: this.mockBack.addSingleNode('0')?.y,
-      size: this.mockBack.addSingleNode('0')?.size,
-      color: this.mockBack.addSingleNode('0')?.color,
-    });
+    // this.graph.addNode(this.mockBack.addSingleNode('0')?.id, {
+    //   label: this.mockBack.addSingleNode('0')?.label,
+    //   x: this.mockBack.addSingleNode('0')?.x,
+    //   y: this.mockBack.addSingleNode('0')?.y,
+    //   size: this.mockBack.addSingleNode('0')?.size,
+    //   color: this.mockBack.addSingleNode('0')?.color,
+    // });
 
     this.subscribeToServices();
 
@@ -169,22 +167,26 @@ export class SigmaComponent implements AfterViewInit {
     });
   }
 
-  private addNodes() {
-    nodes.forEach((node) => {
+  private addNodes(nodes: GraphNode[]) {
+    nodes.forEach((node: GraphNode) => {
       this.graph.addNode(node.id, {
         label: node.label,
         x: node.x,
         y: node.y,
-        size: node.size,
         color: node.color,
+        size: 20,
+        expanded: node.expanded,
       });
     });
   }
 
-  private addEdges() {
-    // Add edges
-    edges.forEach((edge) => {
-      this.graph.addEdge(edge.source, edge.target, edge.attr);
+  private addEdges(edges: {id:string , source: string , target: string}[]) {
+    const attr = {
+      label: 'test',
+      size: 10,
+    };
+    edges.forEach((edge: {id:string , source: string , target: string}) => {
+      this.graph.addEdge(edge.source, edge.target, attr);
     });
   }
 
@@ -253,9 +255,10 @@ export class SigmaComponent implements AfterViewInit {
     });
   }
 
-  private expandNode(id: string, neighbors: {id:string , label: string , x: number , y:number , size: number , color:string}[]) {
+  private expandNode(id: string, neighbors: GraphNode[]) {
+    console.log(this.graph.getNodeAttribute(id, 'expanded'));
     console.log(neighbors);
-    
+
     const centerX = this.graph.getNodeAttribute(id, 'x');
     const centerY = this.graph.getNodeAttribute(id, 'y');
     const newPositions: PlainObject<PlainObject<number>> = {};
@@ -265,7 +268,7 @@ export class SigmaComponent implements AfterViewInit {
     };
 
     if (this.graph.getNodeAttribute(id, 'expanded') === true) {
-      neighbors.forEach((node: {id:string , label: string , x: number , y:number , size: number , color:string}) => {
+      neighbors.forEach((node: GraphNode) => {
         if (!hasOtherNeighbors(node.id, id)) {
           newPositions[node.id] = {
             x: centerX,
@@ -280,7 +283,7 @@ export class SigmaComponent implements AfterViewInit {
       animateNodes(this.graph, newPositions, { duration: 300 });
     } else {
       if (centerX !== undefined && centerY !== undefined) {
-        neighbors.forEach((node: {id:string , label: string , x: number , y:number , size: number , color:string}, index: number) => {
+        neighbors.forEach((node: GraphNode, index: number) => {
           const angle = (index * (2 * Math.PI)) / neighbors.length;
           const radius = 0.2;
 
@@ -294,6 +297,7 @@ export class SigmaComponent implements AfterViewInit {
               y: node.y,
               size: node.size,
               color: node.color,
+              expanded: true,
             });
             this.graph.setNodeAttribute(node.id, 'x', centerX);
             this.graph.setNodeAttribute(node.id, 'y', centerY);
@@ -306,9 +310,11 @@ export class SigmaComponent implements AfterViewInit {
           this.sigmaInstance.refresh();
           this.graph.setNodeAttribute(node.id, 'hidden', false);
         });
+
         this.mockBack.getEdgesForNeighbors(id).forEach((edge) => {
           this.graph.addEdge(edge.source, edge.target, edge.attr);
         });
+
         this.graph.setNodeAttribute(id, 'expanded', true);
         animateNodes(this.graph, newPositions, { duration: 300 });
       }
@@ -344,6 +350,26 @@ export class SigmaComponent implements AfterViewInit {
       this.sigmaInstance.getCamera().animate(nodePosition, { duration: 500 });
       this.nodeSetting();
     });
+
+    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,
+          label: element.label,
+          x: Math.random() * 2,
+          y: Math.random() * 2,
+          color: '#000',
+          size: 10,
+          expanded: true,
+        });
+      });
+
+      this.addNodes(this.nodesList);
+      this.addEdges(edges);
+    });
   }
 
   private nodeClickHandler() {
@@ -368,8 +394,11 @@ export class SigmaComponent implements AfterViewInit {
 
   private doubleClickHandler() {
     this.sigmaInstance.on('doubleClickNode', (event) => {
+      const neighbors = this.graph.neighbors(event.node);
+      const neighborNodes = this.nodesList.filter((node) => neighbors.includes(node.id));
+
       event.preventSigmaDefault();
-      this.expandNode(event.node, this.mockBack.getNeighbours(event.node));
+      this.expandNode(event.node, neighborNodes);
     });
     this.sigmaInstance.on('doubleClickStage', (e) => {
       e.preventSigmaDefault();

src/app/components/graph-components/toolbarl/graph-tool-bar/graph-tool-bar.component.scss

@@ -8,9 +8,11 @@
   flex-direction: row;
   padding-block-end: 0.25rem; 
   position: absolute;
-z-index: 999999999999999999999999;
+  z-index: 10;
+
   &__btn-container{
     gap: 2rem !important;
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
     padding-inline: 1rem;
     background-color: #fff;
     border-radius: 2rem;