Refactor Simulations, RenameTooltip, EditWidgetOption, and RoboticArmAnimator components: streamline imports, enhance UI elements, and improve event handling logic.

app/src/components/layout/sidebarRight/simulation/Simulations.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import {
   AddIcon,
   ArrowIcon,
@@ -39,19 +39,30 @@ const List: React.FC<ListProps> = ({ val }) => {
 
 const Simulations: React.FC = () => {
   const productsContainerRef = useRef<HTMLDivElement>(null);
-    const { products, addProduct, removeProduct, renameProduct, addEvent, removeEvent, } = useProductStore();
+  const {
+    products,
+    addProduct,
+    removeProduct,
+    renameProduct,
+    addEvent,
+    removeEvent,
+  } = useProductStore();
   const { selectedProduct, setSelectedProduct } = useSelectedProduct();
   const { getEventByModelUuid } = useEventsStore();
   const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
-    const email = localStorage.getItem('email')
+  const email = localStorage.getItem("email");
-    const organization = (email!.split("@")[1]).split(".")[0];
+  const organization = email!.split("@")[1].split(".")[0];
   const [openObjects, setOpenObjects] = useState(true);
 
   const handleAddProduct = () => {
     const id = generateUUID();
     const name = `Product ${products.length + 1}`;
     addProduct(name, id);
-        upsertProductOrEventApi({ productName: name, productId: id, organization: organization });
+    upsertProductOrEventApi({
+      productName: name,
+      productId: id,
+      organization: organization,
+    });
   };
 
   const handleRemoveProduct = (productId: string) => {
@@ -88,12 +99,12 @@ const Simulations: React.FC = () => {
 
   const handleRemoveEventFromProduct = () => {
     if (selectedAsset) {
-            const email = localStorage.getItem('email')
+      const email = localStorage.getItem("email");
-            const organization = (email!.split("@")[1]).split(".")[0];
+      const organization = email!.split("@")[1].split(".")[0];
       deleteEventDataApi({
         productId: selectedProduct.productId,
         modelUuid: selectedAsset.modelUuid,
-                organization: organization
+        organization: organization,
       });
       removeEvent(selectedProduct.productId, selectedAsset.modelUuid);
       clearSelectedAsset();
@@ -104,7 +115,8 @@ const Simulations: React.FC = () => {
     (product) => product.productId === selectedProduct.productId
   );
 
-    const events: Event[] = selectedProductData?.eventDatas.map((event) => ({
+  const events: Event[] =
+    selectedProductData?.eventDatas.map((event) => ({
       pathName: event.modelName,
     })) || [];
 
@@ -115,9 +127,9 @@ const Simulations: React.FC = () => {
         <div className="actions section">
           <div className="header">
             <div className="header-value">Products</div>
-                        <div className="add-button" onClick={handleAddProduct}>
+            <button className="add-button" onClick={handleAddProduct}>
               <AddIcon /> Add
-                        </div>
+            </button>
           </div>
           <div
             className="lists-main-container"
@@ -128,11 +140,13 @@ const Simulations: React.FC = () => {
               {products.map((product, index) => (
                 <div
                   key={product.productId}
-                                    className={`list-item ${selectedProduct.productId === product.productId
+                  className={`list-item ${
+                    selectedProduct.productId === product.productId
                       ? "active"
                       : ""
                   }`}
                 >
+                  {/* eslint-disable-next-line */}
                   <div
                     className="value"
                     onClick={() =>
@@ -153,23 +167,23 @@ const Simulations: React.FC = () => {
                     />
                   </div>
                   {products.length > 1 && (
-                                        <div
+                    <button
                       className="remove-button"
                       onClick={() => handleRemoveProduct(product.productId)}
                     >
                       <RemoveIcon />
-                                        </div>
+                    </button>
                   )}
                 </div>
               ))}
             </div>
-                        <div
+            <button
               className="resize-icon"
               id="action-resize"
-                            onMouseDown={(e) => handleResize(e, productsContainerRef)}
+              onMouseDown={(e: any) => handleResize(e, productsContainerRef)}
             >
               <ResizeHeightIcon />
-                        </div>
+            </button>
           </div>
         </div>
 
@@ -184,7 +198,9 @@ const Simulations: React.FC = () => {
             </div>
           </button>
           {openObjects &&
-                        events.map((event, index) => <List key={index} val={event} />)}
+            events.map((event, index) => (
+              <List key={`${index}-${event.pathName}`} val={event} />
+            ))}
         </div>
 
         <div className="compare-simulations-container">
@@ -192,7 +208,7 @@ const Simulations: React.FC = () => {
             Need to Compare Layout?
           </div>
           <div className="content">
-                        Click <span>'Compare'</span> to review and analyze the layout
+            Click '<span>Compare</span>' to review and analyze the layout
             differences between them.
           </div>
           <div className="input">
@@ -211,7 +227,7 @@ const Simulations: React.FC = () => {
                   event: getEventByModelUuid(selectedAsset.modelUuid),
                   addEvent,
                   selectedProduct,
-                                    clearSelectedAsset
+                  clearSelectedAsset,
                 });
               } else {
                 handleRemoveEventFromProduct();
@@ -221,7 +237,7 @@ const Simulations: React.FC = () => {
         </RenderOverlay>
       )}
     </div>
-    )
+  );
 };
 
 export default Simulations;

app/src/components/ui/features/RenameTooltip.tsx

@@ -25,10 +25,8 @@ const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
     <div
       className="rename-tool-tip"
       style={{
-        position: "absolute",
         top: `${top}px`,
         left: `${left}px`,
-        zIndex: 100,
       }}
     >
       <div className="header">

app/src/components/ui/menu/EditWidgetOption.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import {
   useLeftData,
   useTopData,
@@ -28,13 +28,13 @@ const EditWidgetOption: React.FC<EditWidgetOptionProps> = ({
     >
       <div className="context-menu-options">
         {options.map((option, index) => (
-          <div
+          <button
             className="option"
-            key={index}
+            key={`${index}-${option}`}
             onClick={() => onClick(option)}
           >
             {option}
-          </div>
+          </button>
         ))}
       </div>
     </div>

app/src/components/ui/simulation/simulationPlayer.tsx

@@ -64,8 +64,6 @@ const SimulationPlayer: React.FC = () => {
 
   const handleMouseDown = () => {
     isDragging.current = true;
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
   };
 
   const handleMouseMove = (e: MouseEvent) => {
@@ -80,11 +78,11 @@ const SimulationPlayer: React.FC = () => {
 
   const handleMouseUp = () => {
     isDragging.current = false;
-    document.removeEventListener("mousemove", handleMouseMove);
-    document.removeEventListener("mouseup", handleMouseUp);
   };
 
   useEffect(() => {
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
     return () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
@@ -109,24 +107,6 @@ const SimulationPlayer: React.FC = () => {
     { name: "process 9", completed: 90 }, // 90% completed
     { name: "process 10", completed: 30 }, // 30% completed
   ];
-  // Move getRandomColor out of render
-  const getRandomColor = () => {
-    const letters = "0123456789ABCDEF";
-    let color = "#";
-    for (let i = 0; i < 6; i++) {
-      color += letters[Math.floor(Math.random() * 16)];
-    }
-    return color;
-  };
-
-  // Store colors for each process item
-  const [_, setProcessColors] = useState<string[]>([]);
-
-  // Generate colors on mount or when process changes
-  useEffect(() => {
-    const generatedColors = process.map(() => getRandomColor());
-    setProcessColors(generatedColors);
-  }, []);
 
   const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
   const totalSegments = intervals.length;
@@ -218,7 +198,7 @@ const SimulationPlayer: React.FC = () => {
                 </div>
               </div>
             )}
-            {subModule === "simulations" && (
+            {subModule !== "analysis" && (
               <div className="header">
                 <InfoIcon />
                 {playSimulation
@@ -281,7 +261,7 @@ const SimulationPlayer: React.FC = () => {
                     const segmentProgress = (index / totalSegments) * 100;
                     const isFilled = progress >= segmentProgress;
                     return (
-                      <React.Fragment key={index}>
+                      <React.Fragment key={`${index}-${label}`}>
                         <div className="label-dot-wrapper">
                           <div className="label">{label} mins</div>
                           <div
@@ -360,6 +340,7 @@ const SimulationPlayer: React.FC = () => {
                 className="process-wrapper"
                 style={{ padding: expand ? "0px" : "5px 35px" }}
               >
+                {/* eslint-disable-next-line */}
                 <div
                   className="process-container"
                   ref={processWrapperRef}
@@ -367,7 +348,7 @@ const SimulationPlayer: React.FC = () => {
                 >
                   {process.map((item, index) => (
                     <div
-                      key={index}
+                      key={`${index}-${item.name}`}
                       className="process"
                       style={{
                         width: `${item.completed}%`,

app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from "react";
-import { useFrame } from '@react-three/fiber';
+import { useFrame } from "@react-three/fiber";
-import * as THREE from 'three';
+import * as THREE from "three";
-import { Line } from '@react-three/drei';
+import { Line } from "@react-three/drei";
 import {
   useAnimationPlaySpeed,
   usePauseButtonStore,
   usePlayButtonStore,
-    useResetButtonStore
+  useResetButtonStore,
-} from '../../../../../store/usePlayButtonStore';
+} from "../../../../../store/usePlayButtonStore";
 
 function RoboticArmAnimator({
   HandleCallback,
@@ -16,13 +16,19 @@ function RoboticArmAnimator({
   targetBone,
   armBot,
   logStatus,
-    path
+  path,
 }: any) {
   const progressRef = useRef(0);
   const curveRef = useRef<THREE.Vector3[] | null>(null);
-    const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
+  const [currentPath, setCurrentPath] = useState<[number, number, number][]>(
-    const [circlePoints, setCirclePoints] = useState<[number, number, number][]>([]);
+    []
-    const [customCurvePoints, setCustomCurvePoints] = useState<THREE.Vector3[] | null>(null);
+  );
+  const [circlePoints, setCirclePoints] = useState<[number, number, number][]>(
+    []
+  );
+  const [customCurvePoints, setCustomCurvePoints] = useState<
+    THREE.Vector3[] | null
+  >(null);
 
   // Zustand stores
   const { isPlaying } = usePlayButtonStore();
@@ -45,11 +51,10 @@ function RoboticArmAnimator({
 
   // Handle circle points based on armBot position
   useEffect(() => {
-        const points = generateRingPoints(1.6, 64)
+    const points = generateRingPoints(1.6, 64);
     setCirclePoints(points);
   }, [armBot.position]);
 
-
   function generateRingPoints(radius: any, segments: any) {
     const points: [number, number, number][] = [];
     for (let i = 0; i < segments; i++) {
@@ -63,7 +68,11 @@ function RoboticArmAnimator({
     return points;
   }
 
-    const findNearestIndex = (nearestPoint: [number, number, number], points: [number, number, number][], epsilon = 1e-6) => {
+  const findNearestIndex = (
+    nearestPoint: [number, number, number],
+    points: [number, number, number][],
+    epsilon = 1e-6
+  ) => {
     for (let i = 0; i < points.length; i++) {
       const [x, y, z] = points[i];
       if (
@@ -77,15 +86,22 @@ function RoboticArmAnimator({
     return -1; // Not found
   };
 
-
   // Handle nearest points and final path (including arc points)
   useEffect(() => {
     if (circlePoints.length > 0 && currentPath.length > 0) {
       const start = currentPath[0];
       const end = currentPath[currentPath.length - 1];
 
-            const raisedStart = [start[0], start[1] + 0.5, start[2]] as [number, number, number];
+      const raisedStart = [start[0], start[1] + 0.5, start[2]] as [
-            const raisedEnd = [end[0], end[1] + 0.5, end[2]] as [number, number, number];
+        number,
+        number,
+        number
+      ];
+      const raisedEnd = [end[0], end[1] + 0.5, end[2]] as [
+        number,
+        number,
+        number
+      ];
 
       const findNearest = (target: [number, number, number]) => {
         return circlePoints.reduce((nearest, point) => {
@@ -107,14 +123,19 @@ function RoboticArmAnimator({
 
       const nearestToEnd = findNearest(raisedEnd);
 
-            const indexOfNearestStart = findNearestIndex(nearestToStart, circlePoints);
+      const indexOfNearestStart = findNearestIndex(
+        nearestToStart,
+        circlePoints
+      );
 
       const indexOfNearestEnd = findNearestIndex(nearestToEnd, circlePoints);
 
       // Find clockwise and counter-clockwise distances
-            const clockwiseDistance = (indexOfNearestEnd - indexOfNearestStart + 64) % 64;
+      const clockwiseDistance =
+        (indexOfNearestEnd - indexOfNearestStart + 64) % 64;
 
-            const counterClockwiseDistance = (indexOfNearestStart - indexOfNearestEnd + 64) % 64;
+      const counterClockwiseDistance =
+        (indexOfNearestStart - indexOfNearestEnd + 64) % 64;
 
       const clockwiseIsShorter = clockwiseDistance <= counterClockwiseDistance;
 
@@ -123,24 +144,25 @@ function RoboticArmAnimator({
 
       if (clockwiseIsShorter) {
         if (indexOfNearestStart <= indexOfNearestEnd) {
-                    arcPoints = circlePoints.slice(indexOfNearestStart, indexOfNearestEnd + 1);
+          arcPoints = circlePoints.slice(
+            indexOfNearestStart,
+            indexOfNearestEnd + 1
+          );
         } else {
           // Wrap around
           arcPoints = [
             ...circlePoints.slice(indexOfNearestStart, 64),
-                        ...circlePoints.slice(0, indexOfNearestEnd + 1)
+            ...circlePoints.slice(0, indexOfNearestEnd + 1),
           ];
         }
-            } else {
+      } else if (indexOfNearestStart >= indexOfNearestEnd) {
-                if (indexOfNearestStart >= indexOfNearestEnd) {
+        for (
-                    for (let i = indexOfNearestStart; i !== (indexOfNearestEnd - 1 + 64) % 64; i = (i - 1 + 64) % 64) {
+          let i = indexOfNearestStart;
+          i !== (indexOfNearestEnd - 1 + 64) % 64;
+          i = (i - 1 + 64) % 64
+        ) {
           arcPoints.push(circlePoints[i]);
         }
-                } else {
-                    for (let i = indexOfNearestStart; i !== (indexOfNearestEnd - 1 + 64) % 64; i = (i - 1 + 64) % 64) {
-                        arcPoints.push(circlePoints[i]);
-                    }
-                }
       }
 
       // Continue your custom path logic
@@ -148,13 +170,20 @@ function RoboticArmAnimator({
         new THREE.Vector3(start[0], start[1], start[2]), // start
         new THREE.Vector3(raisedStart[0], raisedStart[1], raisedStart[2]), // lift up
         new THREE.Vector3(nearestToStart[0], raisedStart[1], nearestToStart[2]), // move to arc start
-                ...arcPoints.map(point => new THREE.Vector3(point[0], raisedStart[1], point[2])),
+        ...arcPoints.map(
+          (point) => new THREE.Vector3(point[0], raisedStart[1], point[2])
+        ),
         new THREE.Vector3(nearestToEnd[0], raisedEnd[1], nearestToEnd[2]), // move from arc end
         new THREE.Vector3(raisedEnd[0], raisedEnd[1], raisedEnd[2]), // lowered end
-                new THREE.Vector3(end[0], end[1], end[2]) // end
+        new THREE.Vector3(end[0], end[1], end[2]), // end
       ];
 
-            const customCurve = new THREE.CatmullRomCurve3(pathVectors, false, 'centripetal', 1);
+      const customCurve = new THREE.CatmullRomCurve3(
+        pathVectors,
+        false,
+        "centripetal",
+        1
+      );
       const generatedPoints = customCurve.getPoints(100);
       setCustomCurvePoints(generatedPoints);
     }
@@ -164,13 +193,16 @@ function RoboticArmAnimator({
   useFrame((_, delta) => {
     if (!ikSolver) return;
 
-        const bone = ikSolver.mesh.skeleton.bones.find((b: any) => b.name === targetBone);
+    const bone = ikSolver.mesh.skeleton.bones.find(
+      (b: any) => b.name === targetBone
+    );
     if (!bone) return;
 
     if (isPlaying) {
       if (!isPaused && customCurvePoints && currentPath.length > 0) {
         const curvePoints = customCurvePoints;
-                const speedAdjustedProgress = progressRef.current + (speed * armBot.speed);
+        const speedAdjustedProgress =
+          progressRef.current + speed * armBot.speed;
         const index = Math.floor(speedAdjustedProgress);
 
         if (index >= curvePoints.length) {
@@ -185,7 +217,7 @@ function RoboticArmAnimator({
           progressRef.current = speedAdjustedProgress;
         }
       } else if (isPaused) {
-                logStatus(armBot.modelUuid, 'Simulation Paused');
+        logStatus(armBot.modelUuid, "Simulation Paused");
       }
 
       ikSolver.update();
@@ -196,20 +228,29 @@ function RoboticArmAnimator({
     }
   });
 
-
   return (
     <>
       {customCurvePoints && currentPath && isPlaying && (
         <mesh rotation={armBot.rotation} position={armBot.position}>
           <Line
-                        points={customCurvePoints.map((p) => [p.x, p.y, p.z] as [number, number, number])}
+            points={customCurvePoints.map(
+              (p) => [p.x, p.y, p.z] as [number, number, number]
+            )}
             color="green"
             lineWidth={5}
             dashed={false}
           />
         </mesh>
       )}
-            <mesh position={[armBot.position[0], armBot.position[1] + 1.5, armBot.position[2]]} rotation={[-Math.PI / 2, 0, 0]}>
+      <mesh
+        position={[
+          armBot.position[0],
+          armBot.position[1] + 1.5,
+          armBot.position[2],
+        ]}
+        rotation={[-Math.PI / 2, 0, 0]}
+        visible={false}
+      >
         <ringGeometry args={[1.59, 1.61, 64]} />
         <meshBasicMaterial color="green" side={THREE.DoubleSide} />
       </mesh>