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

@@ -266,7 +266,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
     return (
         <>
             {customCurvePoints && customCurvePoints?.length >= 2 && currentPath && isPlaying && (
-                <mesh rotation={armBot.rotation} position={armBot.position}>
+                <mesh rotation={armBot.rotation} position={armBot.position} visible={false}>
                     <Line
                         points={customCurvePoints.map((p) => [p.x, p.y, p.z] as [number, number, number])}
                         color="green"
@@ -278,6 +278,7 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
             <group
                 position={[armBot.position[0], armBot.position[1] + 1.5, armBot.position[2]]}
                 rotation={[armBot.rotation[0], armBot.rotation[1], armBot.rotation[2]]}
+                visible={false}
             >
                 {/* Green ring */}
                 <mesh rotation={[-Math.PI / 2, 0, 0]} visible={false}>
@@ -285,6 +286,42 @@ function RoboticArmAnimator({ HandleCallback, restPosition, ikSolver, targetBone
                     <meshBasicMaterial color="green" side={THREE.DoubleSide} />
                 </mesh>
 
+                {/* Markers at 90°, 180°, 270°, 360° */}
+                {[90, 180, 270, 360].map((degree, index) => {
+                    const rad = ((degree) * Math.PI) / 180;
+                    const x = CIRCLE_RADIUS * Math.cos(rad);
+                    const z = CIRCLE_RADIUS * Math.sin(rad);
+                    const y = 0; // same plane as the ring (Y axis)
+
+                    return (
+                        <mesh key={index} position={[x, y, z]}>
+                            <sphereGeometry args={[0.05, 16, 16]} />
+                            <meshStandardMaterial color="red" />
+                        </mesh>
+                    );
+                })}
+
+                {[90, 180, 270, 360].map((degree, index) => {
+                    const rad = ((degree) * Math.PI) / 180;
+                    const x = CIRCLE_RADIUS * Math.cos(rad);
+                    const z = CIRCLE_RADIUS * Math.sin(rad);
+                    const y = 0.15; // lift the text slightly above the ring
+
+                    return (
+                        <Text
+                            key={`text-${index}`}
+                            position={[x, y, z]}
+                            fontSize={0.2}
+                            color="yellow"
+                            anchorX="center"
+                            anchorY="middle"
+                        >
+                            {degree}°
+                        </Text>
+                    );
+                })}
+
+
             </group>
 
         </>

app/src/modules/visualization/widgets/floating/DistanceLines.tsx

@@ -41,7 +41,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(-50%,0%)",
               }}
             >
-              {obj.position.top}px
+              {obj.position.top.toFixed(1)}px
             </span>
           </div>
         )}
@@ -67,7 +67,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(-50%,0%)",
               }}
             >
-              {obj.position.bottom}px
+              {obj.position.bottom.toFixed(1)}px
             </span>
           </div>
         )}
@@ -93,7 +93,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(0,-50%)",
               }}
             >
-              {obj.position.left}px
+              {obj.position.left.toFixed(1)}px
             </span>
           </div>
         )}
@@ -119,7 +119,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(0,-50%)",
               }}
             >
-              {obj.position.right}px
+              {obj.position.right.toFixed(1)}px
             </span>
           </div>
         )}

app/src/styles/layout/sidebar.scss

@@ -440,7 +440,7 @@
 
                 path {
                   stroke: var(--text-button-color);
-                  strokeWidth: 1.3;
+                  stroke-width: 1.3;
                 }
               }
             }
@@ -710,7 +710,7 @@
 
         path {
           stroke: var(--accent-color);
-          strokeWidth: 1.5px;
+          stroke-width: 1.5px;
         }
 
         &:hover {
@@ -1397,14 +1397,10 @@
 
 .skeleton-wrapper {
   display: flex;
-
-  .skeleton-content {}
-
   .asset-name {
     width: 40%;
     height: 10px;
   }
-
   .asset {
     width: 100%;
     height: 100%;
@@ -1417,8 +1413,7 @@
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
   height: calc(50vh + 150px);
-  overflow-y: hidden;
-  transition: height 0.4s ease-in-out;
+  transition: height 0.2s ease-in-out;
 }
 
 .sidebar-left-wrapper.closed,

app/src/styles/pages/realTimeViz.scss

@@ -65,7 +65,6 @@
 
     overflow: auto;
     max-width: calc(100% - 500px);
-    // min-width: 150px;
     z-index: 3;
     transform: translate(-50%, -10%);
     pointer-events: all;
@@ -431,7 +430,7 @@
 
       path {
         stroke: #f65648;
-        strokewidth: 1.3;
+        stroke-width: 1.3;
       }
     }
   }