From 49da64140c05055eff7319d7263acfe7189ced1f Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 9 May 2025 10:18:13 +0530
Subject: [PATCH 1/2] Enhance sidebar animations: improve open/close
 transitions and add reveal effects for sidebar elements.

---
 app/src/components/ui/list/DropDownList.tsx   |   1 +
 .../collaboration/camera/collabCams.tsx       |   9 +-
 .../instances/animator/vehicleAnimator.tsx    |   3 +-
 .../visualization/zone/zoneCameraTarget.tsx   | 172 +++++++++---------
 app/src/styles/layout/sidebar.scss            |  66 ++++---
 5 files changed, 146 insertions(+), 105 deletions(-)
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index 2a77303..89971a2 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -123,6 +123,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
             </div>
           )}
           <button
+            title="collapse-btn"
             className="collapse-icon option"
             style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
             onClick={handleToggle}
diff --git a/app/src/modules/collaboration/camera/collabCams.tsx b/app/src/modules/collaboration/camera/collabCams.tsx
index 6ce26b0..fab6efe 100644
--- a/app/src/modules/collaboration/camera/collabCams.tsx
+++ b/app/src/modules/collaboration/camera/collabCams.tsx
@@ -12,6 +12,7 @@ import CollabUserIcon from "./collabUserIcon";
 import useModuleStore from "../../../store/useModuleStore";
 import { getAvatarColor } from "../functions/getAvatarColor";
 import { useSelectedUserStore } from "../../../store/useCollabStore";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
 
 const CamModelsGroup = () => {
   const navigate = useNavigate();
@@ -21,6 +22,7 @@ const CamModelsGroup = () => {
   const { socket } = useSocketStore();
   const { activeModule } = useModuleStore();
   const { selectedUser, setSelectedUser } = useSelectedUserStore();
+  const { isPlaying } = usePlayButtonStore();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const loader = new GLTFLoader();
@@ -244,7 +246,8 @@ const CamModelsGroup = () => {
           object={cam}
           visible={
             selectedUser?.name !== cam.userData.userName &&
-            activeModule !== "visualization"
+            activeModule !== "visualization" &&
+            !isPlaying
           }
         >
           <Html
@@ -258,7 +261,9 @@ const CamModelsGroup = () => {
               fontFamily: "Arial, sans-serif",
               display: `${activeModule !== "visualization" ? "" : "none"}`,
               opacity: `${
-                selectedUser?.name !== cam.userData.userName ? 1 : 0
+                selectedUser?.name !== cam.userData.userName && !isPlaying
+                  ? 1
+                  : 0
               }`,
               transition: "opacity .2s ease",
             }}
diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
index ba16302..d2ecfc3 100644
--- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
+++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
@@ -146,7 +146,8 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
     return (
         <>
             {currentPath.length > 0 && (
-                <group >
+                // helper
+                <group visible={false}>
                     <Line points={currentPath} color="blue" lineWidth={3} />
                     {currentPath.map((point, index) => (
                         <mesh key={index} position={point}>
diff --git a/app/src/modules/visualization/zone/zoneCameraTarget.tsx b/app/src/modules/visualization/zone/zoneCameraTarget.tsx
index c3116ef..1417e58 100644
--- a/app/src/modules/visualization/zone/zoneCameraTarget.tsx
+++ b/app/src/modules/visualization/zone/zoneCameraTarget.tsx
@@ -2,90 +2,100 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
-import { useEditPosition, usezonePosition, usezoneTarget } from "../../../store/store";
+import {
+  useEditPosition,
+  usezonePosition,
+  usezoneTarget,
+} from "../../../store/store";
 
 export default function ZoneCentreTarget() {
-    const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-    const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
-    const sphereRef = useRef<THREE.Mesh>(null);
-    const { camera, controls }: any = useThree();
-    const { zonePosition, setZonePosition } = usezonePosition();
-    const { zoneTarget, setZoneTarget } = usezoneTarget();
-    const { Edit, setEdit } = useEditPosition();
+  const { selectedZone } = useSelectedZoneStore();
+  const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
+    null
+  );
+  const sphereRef = useRef<THREE.Mesh>(null);
+  const { controls }: any = useThree();
+  const { setZonePosition } = usezonePosition();
+  const { setZoneTarget } = usezoneTarget();
+  const { Edit } = useEditPosition();
 
-    useEffect(() => {
-        if (
-            selectedZone.zoneViewPortTarget &&
-            JSON.stringify(previousZoneCentre) !== JSON.stringify(selectedZone.zoneViewPortTarget)
-        ) {
-            setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
-        }
-    }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
+  useEffect(() => {
+    if (
+      selectedZone.zoneViewPortTarget &&
+      JSON.stringify(previousZoneCentre) !==
+        JSON.stringify(selectedZone.zoneViewPortTarget)
+    ) {
+      setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
+    }
+  }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
 
-    const centrePoint = useMemo(() => {
-        if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
-        return previousZoneCentre.map((value, index) =>
-            (value + selectedZone.zoneViewPortTarget[index]) / 2
-        );
-    }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
-
-    useEffect(() => {
-        if (selectedZone.zoneName !== "") {
-            if (sphereRef.current) {
-                sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]);
-            }
-            if (centrePoint) {
-
-                if (centrePoint.length > 0) {
-
-                    // let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
-                    // let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
-
-                    // const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
-
-                    // const worldUp = new THREE.Vector3(0, 0, 1);
-                    // const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
-                    // const up = new THREE.Vector3().crossVectors(direction, right).normalize();
-                    // const offsetPosition = up.clone().multiplyScalar(20);
-                    // camPosition.add(offsetPosition);
-
-                    const setCam = async () => {
-                        controls.setLookAt(centrePoint[0], 100, centrePoint[2], ...centrePoint, true);
-                        setTimeout(() => {
-                            controls?.setLookAt(
-                                ...selectedZone.zoneViewPortPosition,
-                                selectedZone.zoneViewPortTarget[0],
-                                selectedZone.zoneViewPortTarget[1],
-                                selectedZone.zoneViewPortTarget[2],
-                                true
-                            );
-                        }, 400)
-                    };
-                    setCam();
-                } else {
-
-                    const setCam = async () => {
-                        controls?.setLookAt(
-                            ...selectedZone.zoneViewPortPosition,
-                            selectedZone.zoneViewPortTarget[0],
-                            selectedZone.zoneViewPortTarget[1],
-                            selectedZone.zoneViewPortTarget[2],
-                            true
-                        );
-                    };
-                    setCam();
-                }
-            }
-        }
-    }, [selectedZone.zoneViewPortTarget]);
-
-    useFrame(() => {
-        if (Edit) {
-            setZonePosition([controls.getPosition().x, controls.getPosition().y, controls.getPosition().z])
-            setZoneTarget([controls.getTarget().x, controls.getTarget().y, controls.getTarget().z])
-        }
-    })
-    return (
-        <> </>
+  const centrePoint = useMemo(() => {
+    if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
+    return previousZoneCentre.map(
+      (value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
     );
+  }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
+
+  useEffect(() => {
+    if (selectedZone.zoneName !== "") {
+      if (sphereRef.current) {
+        sphereRef.current.position.set(
+          selectedZone.zoneViewPortTarget[0],
+          selectedZone.zoneViewPortTarget[1],
+          selectedZone.zoneViewPortTarget[2]
+        );
+      }
+      if (centrePoint) {
+        if (centrePoint.length > 0) {
+          const setCam = async () => {
+            controls.setLookAt(
+              centrePoint[0],
+              100,
+              centrePoint[2],
+              ...centrePoint,
+              true
+            );
+            setTimeout(() => {
+              controls?.setLookAt(
+                ...selectedZone.zoneViewPortPosition,
+                selectedZone.zoneViewPortTarget[0],
+                selectedZone.zoneViewPortTarget[1],
+                selectedZone.zoneViewPortTarget[2],
+                true
+              );
+            }, 400);
+          };
+          setCam();
+        } else {
+          const setCam = async () => {
+            controls?.setLookAt(
+              ...selectedZone.zoneViewPortPosition,
+              selectedZone.zoneViewPortTarget[0],
+              selectedZone.zoneViewPortTarget[1],
+              selectedZone.zoneViewPortTarget[2],
+              true
+            );
+          };
+          setCam();
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedZone.zoneViewPortTarget]);
+
+  useFrame(() => {
+    if (Edit) {
+      setZonePosition([
+        controls.getPosition().x,
+        controls.getPosition().y,
+        controls.getPosition().z,
+      ]);
+      setZoneTarget([
+        controls.getTarget().x,
+        controls.getTarget().y,
+        controls.getTarget().z,
+      ]);
+    }
+  });
+  return <></>;
 }
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index 6e1889e..f14d769 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -1437,9 +1437,11 @@
           width: 100%;
           height: 100%;
           font-size: var(--font-size-regular);
-          background: linear-gradient(0deg,
-              rgba(37, 24, 51, 0) 0%,
-              rgba(52, 41, 61, 0.5) 100%);
+          background: linear-gradient(
+            0deg,
+            rgba(37, 24, 51, 0) 0%,
+            rgba(52, 41, 61, 0.5) 100%
+          );
           pointer-events: none;
           backdrop-filter: blur(8px);
           opacity: 0;
@@ -1480,26 +1482,48 @@
 
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
-  height: calc(54vh + 150px);
   transition: height 0.2s ease-in-out;
-  .sidebar-left-container {
-    height: 100%;
-    .sidebar-left-content-container{
-      max-height: 80%;
-      .widget-left-sideBar{
-        height: 80%;
-        .widget2D.widgets-wrapper{
-
-          min-height: 50vh;
-          height: 60%;
-
-        }
-      }
-    }
-  }
 }
 
 .sidebar-left-wrapper.closed,
 .sidebar-right-wrapper.closed {
-  height: 52px;
-}
\ No newline at end of file
+  animation: closeSidebar 0.2s linear forwards;
+}
+
+.sidebar-left-wrapper.open,
+.sidebar-right-wrapper.open {
+  height: fit-content;
+  animation: openSidebar 0.2s linear;
+  .sidebar-right-container,
+  .sidebar-left-container {
+    opacity: 0;
+    animation: revealSmooth 0.3s 0.1s linear forwards;
+  }
+}
+
+@keyframes revealSmooth {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes closeSidebar{
+  from{
+    height: 60%;
+  }
+  to{
+    height: 52px;
+  }
+}
+
+@keyframes openSidebar{
+  from{
+    height: 52px;
+  }
+  to{
+    height: 60%;
+  }
+}

From ffb65b3369d0dd8143152bf7d3ee6be672c3cc80 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 9 May 2025 13:48:39 +0530
Subject: [PATCH 2/2] Refactor MachineInstances component: enhance rendering
 logic by adding MachineContentUi and improving structure; create
 MachineContentUi component for better separation of concerns.

---
 .../machine/instances/machineInstances.tsx    | 29 +++++++++-------
 .../simulation/ui3d/MachineContentUi.tsx      | 34 +++++++++++++++++++
 .../simulation/ui3d/RoboticArmContentUi.tsx   |  4 +--
 3 files changed, 52 insertions(+), 15 deletions(-)
 create mode 100644 app/src/modules/simulation/ui3d/MachineContentUi.tsx

diff --git a/app/src/modules/simulation/machine/instances/machineInstances.tsx b/app/src/modules/simulation/machine/instances/machineInstances.tsx
index 594265d..d56fe44 100644
--- a/app/src/modules/simulation/machine/instances/machineInstances.tsx
+++ b/app/src/modules/simulation/machine/instances/machineInstances.tsx
@@ -1,17 +1,20 @@
-import React from 'react'
-import MachineInstance from './machineInstance/machineInstance'
-import { useMachineStore } from '../../../../store/simulation/useMachineStore';
+import React from "react";
+import MachineInstance from "./machineInstance/machineInstance";
+import { useMachineStore } from "../../../../store/simulation/useMachineStore";
+import MachineContentUi from "../../ui3d/MachineContentUi";
 
 function MachineInstances() {
-    const { machines } = useMachineStore();
-    return (
-        <>
-            {machines.map((machine: MachineStatus) => (
-                <MachineInstance key={machine.modelUuid} machineDetail={machine} />
-            ))}
-
-        </>
-    )
+  const { machines } = useMachineStore();
+  return (
+    <>
+      {machines.map((machine: MachineStatus) => (
+        <React.Fragment key={machine.modelUuid}>
+          <MachineInstance machineDetail={machine} />
+          <MachineContentUi machine={machine} />
+        </React.Fragment>
+      ))}
+    </>
+  );
 }
 
-export default MachineInstances
\ No newline at end of file
+export default MachineInstances;
diff --git a/app/src/modules/simulation/ui3d/MachineContentUi.tsx b/app/src/modules/simulation/ui3d/MachineContentUi.tsx
new file mode 100644
index 0000000..bad89ed
--- /dev/null
+++ b/app/src/modules/simulation/ui3d/MachineContentUi.tsx
@@ -0,0 +1,34 @@
+import { Html } from "@react-three/drei";
+import React from "react";
+import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
+import { Vector3 } from "three";
+
+type MachineContentUiProps = {
+  machine: MachineStatus;
+};
+
+const MachineContentUi: React.FC<MachineContentUiProps> = ({ machine }) => {
+  return (
+    <Html
+      // data
+      position={
+        new Vector3(
+          machine.position[0],
+          machine.point.position[1],
+          machine.position[2]
+        )
+      }
+      // class none
+      // other
+      zIndexRange={[1, 0]}
+      prepend
+      sprite
+      center
+      distanceFactor={20}
+    >
+      <AssetDetailsCard name={machine.modelName} status={machine.state} />
+    </Html>
+  );
+};
+
+export default MachineContentUi;
diff --git a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
index c85e387..dbe32c6 100644
--- a/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
+++ b/app/src/modules/simulation/ui3d/RoboticArmContentUi.tsx
@@ -3,11 +3,11 @@ import React from "react";
 import AssetDetailsCard from "../../../components/ui/simulation/AssetDetailsCard";
 import { Vector3 } from "three";
 
-type VehicleContentUiProps = {
+type RoboticArmContentUiProps = {
   roboticArm: ArmBotStatus;
 };
 
-const RoboticArmContentUi: React.FC<VehicleContentUiProps> = ({ roboticArm }) => {
+const RoboticArmContentUi: React.FC<RoboticArmContentUiProps> = ({ roboticArm }) => {
   return (
     <Html
       // data
