Merge remote-tracking branch 'origin/realTimeVisulization' into simulation

app/src/modules/collaboration/users/Avatar.tsx

@@ -1,59 +1,59 @@
-import React, { useEffect, useState } from "react";
-import { getInitials } from "./functions/getInitials";
-import { getAvatarColor } from "./functions/getAvatarColor";
-
-interface AvatarProps {
-  name: string; // Name can be a full name or initials
-  size?: number;
-  index?: number;
-  textColor?: string;
-}
-
-const CustomAvatar: React.FC<AvatarProps> = ({
-  name,
-  size = 100,
-  index = 0,
-  textColor = "#ffffff",
-}) => {
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-
-  useEffect(() => {
-    const canvas = document.createElement("canvas"); // Create an offscreen canvas
-    canvas.width = size;
-    canvas.height = size;
-    const ctx = canvas.getContext("2d");
-    if (ctx) {
-      const initials = getInitials(name); // Convert name to initials if needed
-
-      // Draw background
-      ctx.fillStyle = getAvatarColor(index);
-      ctx.fillRect(0, 0, size, size);
-
-      // Draw initials
-      ctx.fillStyle = textColor;
-      ctx.font = `bold ${size / 2}px Arial`;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      ctx.fillText(initials, size / 2, size / 2);
-
-      // Generate image source
-      const dataURL = canvas.toDataURL("image/png");
-      setImageSrc(dataURL);
-    }
-  }, [name, size, textColor]);
-
-  if (!imageSrc) {
-    return null; // Return null while the image is being generated
-  }
-
-  return (
-    <img
-      className="user-image"
-      src={imageSrc}
-      alt="User Avatar"
-      style={{ width: "100%", height: "100%" }}
-    />
-  );
-};
-
-export default CustomAvatar;
+import React, { useEffect, useState } from "react";
+import { getInitials } from "./functions/getInitials";
+import { getAvatarColor } from "./functions/getAvatarColor";
+
+interface AvatarProps {
+  name: string; // Name can be a full name or initials
+  size?: number;
+  index?: number;
+  textColor?: string;
+}
+
+const CustomAvatar: React.FC<AvatarProps> = ({
+  name,
+  size = 100,
+  index = 0,
+  textColor = "#ffffff",
+}) => {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    const canvas = document.createElement("canvas"); // Create an offscreen canvas
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      const initials = getInitials(name); // Convert name to initials if needed
+
+      // Draw background
+      ctx.fillStyle = getAvatarColor(index);
+      ctx.fillRect(0, 0, size, size);
+
+      // Draw initials
+      ctx.fillStyle = textColor;
+      ctx.font = `bold ${size / 2}px Arial`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(initials, size / 2, size / 2);
+
+      // Generate image source
+      const dataURL = canvas.toDataURL("image/png");
+      setImageSrc(dataURL);
+    }
+  }, [name, size, textColor]);
+
+  if (!imageSrc) {
+    return null; // Return null while the image is being generated
+  }
+
+  return (
+    <img
+      className="user-image"
+      src={imageSrc}
+      alt="User Avatar"
+      style={{ width: "100%", height: "100%" }}
+    />
+  );
+};
+
+export default CustomAvatar;

app/src/modules/collaboration/users/functions/getAvatarColor.ts

@@ -1,26 +1,26 @@
-const avatarColors: string[] = [
-    "#FF5733", // Red Orange
-    "#48ac2a", // Leaf Green
-    "#0050eb", // Royal Blue
-    "#FF33A1", // Hot Pink
-    "#FF8C33", // Deep Orange
-    "#8C33FF", // Violet
-    "#FF3333", // Bright Red
-    "#43c06d", // Emerald Green
-    "#A133FF", // Amethyst Purple
-    "#C70039", // Crimson
-    "#900C3F", // Maroon
-    "#581845", // Plum
-    "#3498DB", // Sky Blue
-    "#2ECC71", // Green Mint
-    "#E74C3C", // Tomato Red
-    "#00adff", // Azure
-    "#DBAD05", // Amber Yellow
-    "#FF5733", // Red Orange
-    "#FF33A1", // Hot Pink
-    "#900C3F", // Maroon
-];
-
-export function getAvatarColor(index: number): string {
-    return avatarColors[index % avatarColors.length];
-}
+const avatarColors: string[] = [
+    "#FF5733", // Red Orange
+    "#48ac2a", // Leaf Green
+    "#0050eb", // Royal Blue
+    "#FF33A1", // Hot Pink
+    "#FF8C33", // Deep Orange
+    "#8C33FF", // Violet
+    "#FF3333", // Bright Red
+    "#43c06d", // Emerald Green
+    "#A133FF", // Amethyst Purple
+    "#C70039", // Crimson
+    "#900C3F", // Maroon
+    "#581845", // Plum
+    "#3498DB", // Sky Blue
+    "#2ECC71", // Green Mint
+    "#E74C3C", // Tomato Red
+    "#00adff", // Azure
+    "#DBAD05", // Amber Yellow
+    "#FF5733", // Red Orange
+    "#FF33A1", // Hot Pink
+    "#900C3F", // Maroon
+];
+
+export function getAvatarColor(index: number): string {
+    return avatarColors[index % avatarColors.length];
+}

app/src/modules/collaboration/users/functions/getInitials.ts

@@ -1,10 +1,10 @@
-export const getInitials = (fullName: string): string => {
-    // Extract initials from the name
-    const words = fullName.split(" ");
-    const initials = words
-        .map((word) => word[0])
-        .slice(0, 2)
-        .join("")
-        .toUpperCase();
-    return initials;
+export const getInitials = (fullName: string): string => {
+    // Extract initials from the name
+    const words = fullName.split(" ");
+    const initials = words
+        .map((word) => word[0])
+        .slice(0, 2)
+        .join("")
+        .toUpperCase();
+    return initials;
 };