diff --git a/public/profile/profile-background.webp b/public/profile/profile-background.webp
new file mode 100644
index 0000000..9560106
Binary files /dev/null and b/public/profile/profile-background.webp differ
diff --git a/src/app/components/dashboard-content/dashboard-content.component.scss b/src/app/components/dashboard-content/dashboard-content.component.scss
index e958d65..f8ec00b 100644
--- a/src/app/components/dashboard-content/dashboard-content.component.scss
+++ b/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 {
diff --git a/src/app/components/dashboard-navbar/dashboard-navbar.component.scss b/src/app/components/dashboard-navbar/dashboard-navbar.component.scss
index 8044109..5e69ea3 100644
--- a/src/app/components/dashboard-navbar/dashboard-navbar.component.scss
+++ b/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;
diff --git a/src/app/components/edit-user-components/edit-password/edit-password.component.scss b/src/app/components/edit-user-components/edit-password/edit-password.component.scss
index 978a740..23ccf59 100644
--- a/src/app/components/edit-user-components/edit-password/edit-password.component.scss
+++ b/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 {
diff --git a/src/app/components/edit-user-components/edit-profile/edit-profile.component.scss b/src/app/components/edit-user-components/edit-profile/edit-profile.component.scss
index d8c2458..9e4fcaf 100644
--- a/src/app/components/edit-user-components/edit-profile/edit-profile.component.scss
+++ b/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 {
diff --git a/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts b/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts
index 9fc08b2..53e5834 100644
--- a/src/app/components/edit-user-components/edit-profile/edit-profile.component.ts
+++ b/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);
diff --git a/src/app/components/edit-user-components/edit-role/edit-role.component.scss b/src/app/components/edit-user-components/edit-role/edit-role.component.scss
index 5f7c531..a508ec1 100644
--- a/src/app/components/edit-user-components/edit-role/edit-role.component.scss
+++ b/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 {
diff --git a/src/app/components/edit-user-components/edit-role/edit-role.component.ts b/src/app/components/edit-user-components/edit-role/edit-role.component.ts
index 64bd177..69e19c8 100644
--- a/src/app/components/edit-user-components/edit-role/edit-role.component.ts
+++ b/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);
+ },
+ });
+ }
}
diff --git a/src/app/components/edit-user-components/edit-user/edit-user.component.scss b/src/app/components/edit-user-components/edit-user/edit-user.component.scss
index aae4668..56cbc66 100644
--- a/src/app/components/edit-user-components/edit-user/edit-user.component.scss
+++ b/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;
-}
\ No newline at end of file
+ width: calc(100vw - 41.4rem);
+ display: flex;
+ flex-direction: column;
+ gap: 4rem;
+}
diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.html b/src/app/components/graph-components/sigma/sigma/sigma.component.html
index 4e774c0..5b2a404 100644
--- a/src/app/components/graph-components/sigma/sigma/sigma.component.html
+++ b/src/app/components/graph-components/sigma/sigma/sigma.component.html
@@ -29,5 +29,6 @@
+
diff --git a/src/app/components/graph-components/sigma/sigma/sigma.component.scss b/src/app/components/graph-components/sigma/sigma/sigma.component.scss
index 655d8e2..78ae6ba 100644
--- a/src/app/components/graph-components/sigma/sigma/sigma.component.scss
+++ b/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;
}
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 b5fb613..d928b57 100644
--- a/src/app/components/graph-components/sigma/sigma/sigma.component.ts
+++ b/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> = {};
@@ -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();
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 126c835..686bff1 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
@@ -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;
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 fdba2c2..5ca7228 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
@@ -1,16 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { NzMessageService } from 'ng-zorro-antd/message';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzTypographyModule } from 'ng-zorro-antd/typography';
import { UploadGraphService } from '../../../../../services/upload-graph/upload-graph.service';
import { NotificationService } from '../../../../../services/notification/notification.service';
import { NzButtonComponent } from 'ng-zorro-antd/button';
+import { SigmaService } from '../../../../../services/sigma/sigma.service';
@Component({
selector: 'app-get-graph',
standalone: true,
- imports: [NzSelectModule, NzTypographyModule ,ReactiveFormsModule , NzButtonComponent],
+ imports: [NzSelectModule, NzTypographyModule, ReactiveFormsModule, NzButtonComponent],
templateUrl: './get-graph.component.html',
styleUrl: './get-graph.component.scss',
})
@@ -21,9 +21,9 @@ export class GetGraphComponent implements OnInit {
constructor(
private fb: FormBuilder,
- private msg: NzMessageService,
private uploadGraphService: UploadGraphService,
- private notificationService: NotificationService
+ private sigmaService: SigmaService,
+ private notificationService : NotificationService
) {
this.form = this.fb.group({
SourceNodeCategoryName: ['', Validators.required],
@@ -53,7 +53,11 @@ export class GetGraphComponent implements OnInit {
}
protected submit() {
-console.log("fu");
-
+ this.uploadGraphService.getGraph().subscribe({
+ next: (data) => {
+ this.sigmaService.setGetGraph(data);
+ this.notificationService.createNotification('success', 'Success', 'Graph data loaded successfully!');
+ },
+ });
}
}
diff --git a/src/app/components/manage-users-components/users-table/users-table.component.html b/src/app/components/manage-users-components/users-table/users-table.component.html
index 2b5801b..bcd73a2 100644
--- a/src/app/components/manage-users-components/users-table/users-table.component.html
+++ b/src/app/components/manage-users-components/users-table/users-table.component.html
@@ -10,7 +10,7 @@ Manage Users
Users
-