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

2025-05-03 11:17:14 +05:30
parent 6a79ef563c
commit b4e4bf7fb3
5 changed files with 452 additions and 416 deletions
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/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 organization = (email!.split("@")[1]).split(".")[0];
+  const email = localStorage.getItem("email");
+  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 organization = (email!.split("@")[1]).split(".")[0];
+      const email = localStorage.getItem("email");
+      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;
--- a/app/src/components/ui/features/RenameTooltip.tsx
+++ b/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">
--- a/app/src/components/ui/menu/EditWidgetOption.tsx
+++ b/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>
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/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}%`,
--- a/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
+++ b/app/src/modules/simulation/roboticArm/instances/animator/roboticArmAnimator.tsx
@@ -1,13 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useFrame } from '@react-three/fiber';
-import * as THREE from 'three';
-import { Line } from '@react-three/drei';
+import React, { useEffect, useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { Line } from "@react-three/drei";
 import {
  useAnimationPlaySpeed,
  usePauseButtonStore,
  usePlayButtonStore,
-    useResetButtonStore
-} from '../../../../../store/usePlayButtonStore';
+  useResetButtonStore,
+} 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 [circlePoints, setCirclePoints] = useState<[number, number, number][]>([]);
-    const [customCurvePoints, setCustomCurvePoints] = useState<THREE.Vector3[] | null>(null);
+  const [currentPath, setCurrentPath] = useState<[number, number, number][]>(
+    []
+  );
+  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 raisedEnd = [end[0], end[1] + 0.5, end[2]] as [number, number, number];
+      const raisedStart = [start[0], start[1] + 0.5, start[2]] as [
+        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 {
-                if (indexOfNearestStart >= indexOfNearestEnd) {
-                    for (let i = indexOfNearestStart; i !== (indexOfNearestEnd - 1 + 64) % 64; i = (i - 1 + 64) % 64) {
+      } else if (indexOfNearestStart >= indexOfNearestEnd) {
+        for (
+          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>