Merge remote-tracking branch 'origin/v2-ui' into v2

app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx

@@ -1,24 +1,27 @@
 import React from "react";
-import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";
 
 interface PickAndPlaceActionProps {
-    pickPointValue: string;
+  clearPoints: () => void;
-    pickPointOnChange: (value: string) => void;
-    placePointValue: string;
-    placePointOnChange: (value: string) => void;
 }
 
 const PickAndPlaceAction: React.FC<PickAndPlaceActionProps> = ({
-    pickPointValue,
+  clearPoints,
-    pickPointOnChange,
-    placePointValue,
-    placePointOnChange,
 }) => {
   return (
-        <>
+    <div className="selected-actions-list">
-            <EyeDropInput label="Pick Point" value={pickPointValue} onChange={pickPointOnChange} />
+      <div className="value-field-container">
-            <EyeDropInput label="Unload Point" value={placePointValue} onChange={placePointOnChange} />
+        <div className="label">Reset</div>
-        </>
+        <button
+          type="button"
+          className="regularDropdown-container"
+          onClick={() => {
+            clearPoints();
+          }}
+        >
+          Clear
+        </button>
+      </div>
+    </div>
   );
 };
 

app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx

@@ -25,6 +25,7 @@ interface TravelActionProps {
     value: string;
     onChange: (value: string) => void;
   };
+  clearPoints: () => void;
 }
 
 const TravelAction: React.FC<TravelActionProps> = ({
@@ -32,6 +33,7 @@ const TravelAction: React.FC<TravelActionProps> = ({
   unloadDuration,
   pickPoint,
   unloadPoint,
+  clearPoints,
 }) => {
   return (
     <>
@@ -41,9 +43,9 @@ const TravelAction: React.FC<TravelActionProps> = ({
         min={loadCapacity.min}
         max={loadCapacity.max}
         defaultValue={loadCapacity.defaultValue}
-                step={0.1}
+        step={1}
         activeOption="s"
-                onClick={() => { }}
+        onClick={() => {}}
         onChange={loadCapacity.onChange}
       />
       <InputWithDropDown
@@ -54,9 +56,23 @@ const TravelAction: React.FC<TravelActionProps> = ({
         defaultValue={unloadDuration.defaultValue}
         step={0.1}
         activeOption="s"
-                onClick={() => { }}
+        onClick={() => {}}
         onChange={unloadDuration.onChange}
       />
+      <div className="selected-actions-list">
+        <div className="value-field-container">
+          <div className="label">Reset</div>
+          <button
+            type="button"
+            className="regularDropdown-container"
+            onClick={() => {
+              clearPoints();
+            }}
+          >
+            Clear
+          </button>
+        </div>
+      </div>
       {pickPoint && (
         <EyeDropInput
           label="Pick Point"

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx

@@ -4,22 +4,38 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
-import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+  useSelectedAction,
+} from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import PickAndPlaceAction from "../actions/PickAndPlaceAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
 
 function RoboticArmMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
+  const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">(
-    const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
+    "default"
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    RoboticArmPointSchema | undefined
+  >();
   const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, getActionByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
+  const {
+    getPointByUuid,
+    getEventByModelUuid,
+    updateEvent,
+    updateAction,
+    addAction,
+    removeAction,
+  } = useProductStore();
   const { selectedProduct } = useSelectedProduct();
-    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
+  const { selectedAction, setSelectedAction, clearSelectedAction } =
+    useSelectedAction();
 
-    const email = localStorage.getItem('email')
+  const email = localStorage.getItem("email");
-    const organization = (email!.split("@")[1]).split(".")[0];
+  const organization = email!.split("@")[1].split(".")[0];
 
   useEffect(() => {
     if (selectedEventData) {
@@ -31,8 +47,13 @@ function RoboticArmMechanics() {
       if (point?.actions) {
         setSelectedPointData(point);
         if (point.actions.length > 0) {
-                    setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
+          setActiveOption(
-                    setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
+            point.actions[0].actionType as "default" | "pickAndPlace"
+          );
+          setSelectedAction(
+            point.actions[0].actionUuid,
+            point.actions[0].actionName
+          );
         }
       }
     } else {
@@ -50,17 +71,23 @@ function RoboticArmMechanics() {
       productName: productName,
       productId: productId,
       organization: organization,
-            eventDatas: eventData
+      eventDatas: eventData,
-        })
+    });
-    }
+  };
 
   const handleRenameAction = (newName: string) => {
     if (!selectedAction.actionId) return;
-        const event = updateAction(selectedProduct.productId, selectedAction.actionId, { actionName: newName });
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedAction.actionId,
+      { actionName: newName }
+    );
 
     if (selectedPointData) {
       const updatedActions = selectedPointData.actions.map((action) =>
-                action.actionUuid === selectedAction.actionId ? { ...action, actionName: newName } : action
+        action.actionUuid === selectedAction.actionId
+          ? { ...action, actionName: newName }
+          : action
       );
       setSelectedPointData({
         ...selectedPointData,
@@ -80,9 +107,13 @@ function RoboticArmMechanics() {
 
   const handleSpeedChange = (value: string) => {
     if (!selectedEventData) return;
-        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventData.data.modelUuid,
+      {
         speed: parseFloat(value),
-        });
+      }
+    );
 
     if (event) {
       updateBackend(
@@ -93,17 +124,19 @@ function RoboticArmMechanics() {
       );
     }
   };
-
+  const handleClearPoints = () => {
-    const handlePickPointChange = (value: string) => {
     if (!selectedAction.actionId || !selectedPointData) return;
-        const [x, y, z] = value.split(",").map(Number);
 
-        const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedAction.actionId,
+      {
         process: {
-                startPoint: [x, y, z] as [number, number, number],
+          startPoint: null,
-                endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null,
+          endPoint: null,
         },
-        });
+      }
+    );
 
     if (event) {
       updateBackend(
@@ -115,28 +148,6 @@ function RoboticArmMechanics() {
     }
   };
 
-    const handlePlacePointChange = (value: string) => {
-        if (!selectedAction.actionId || !selectedPointData) return;
-        const [x, y, z] = value.split(",").map(Number);
-
-        const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
-            process: {
-                startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
-                endPoint: [x, y, z] as [number, number, number],
-            },
-        });
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-
   const handleAddAction = () => {
     if (!selectedEventData || !selectedPointData) return;
 
@@ -189,8 +200,12 @@ function RoboticArmMechanics() {
       );
     }
 
-        const index = selectedPointData.actions.findIndex(a => a.actionUuid === actionUuid);
+    const index = selectedPointData.actions.findIndex(
-        const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
+      (a) => a.actionUuid === actionUuid
+    );
+    const newActions = selectedPointData.actions.filter(
+      (a) => a.actionUuid !== actionUuid
+    );
 
     const updatedPoint = {
       ...selectedPointData,
@@ -213,11 +228,17 @@ function RoboticArmMechanics() {
     options: ["pickAndPlace"],
   };
 
-    const currentSpeed = (getEventByModelUuid(
+  const currentSpeed =
-        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
+    (
-    ) as RoboticArmEventSchema | undefined)?.speed?.toString() || "0.5";
+      getEventByModelUuid(
+        selectedProduct.productId,
+        selectedEventData?.data.modelUuid || ""
+      ) as RoboticArmEventSchema | undefined
+    )?.speed?.toString() || "0.5";
 
-    const currentAction = selectedPointData?.actions.find((a) => a.actionUuid === selectedAction.actionId);
+  const currentAction = selectedPointData?.actions.find(
+    (a) => a.actionUuid === selectedAction.actionId
+  );
 
   const currentPickPoint = currentAction?.process.startPoint
     ? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}`
@@ -239,14 +260,13 @@ function RoboticArmMechanics() {
               defaultValue={"0.5"}
               max={10}
               activeOption="m/s"
-                            onClick={() => { }}
+              onClick={() => {}}
               onChange={handleSpeedChange}
             />
           </div>
         </div>
       </div>
       <section>
-
         <ActionsList
           selectedPointData={selectedPointData}
           multipleAction
@@ -258,7 +278,7 @@ function RoboticArmMechanics() {
           <div className="selected-actions-details">
             <div className="selected-actions-header">
               <RenameInput
-                                value={selectedAction.actionName || ''}
+                value={selectedAction.actionName || ""}
                 onRename={handleRenameAction}
               />
             </div>
@@ -266,18 +286,16 @@ function RoboticArmMechanics() {
               <LabledDropdown
                 defaultOption={activeOption}
                 options={availableActions.options}
-                                onSelect={() => { }}
+                onSelect={() => {}}
                 disabled={true}
               />
-                            <PickAndPlaceAction
+              <PickAndPlaceAction clearPoints={handleClearPoints} />
-                                pickPointValue={currentPickPoint}
-                                pickPointOnChange={handlePickPointChange}
-                                placePointValue={currentPlacePoint}
-                                placePointOnChange={handlePlacePointChange}
-                            />
             </div>
             <div className="tirgger">
-                            <Trigger selectedPointData={selectedPointData as any} type={'RoboticArm'} />
+              <Trigger
+                selectedPointData={selectedPointData as any}
+                type={"RoboticArm"}
+              />
             </div>
           </div>
         )}

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx

@@ -6,26 +6,34 @@ import Trigger from "../trigger/Trigger";
 import {
   useSelectedAction,
   useSelectedEventData,
+  useSelectedEventSphere,
   useSelectedProduct,
 } from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
+import { useVehicleStore } from "../../../../../../store/simulation/useVehicleStore";
 
 function VehicleMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
+  const [activeOption, setActiveOption] = useState<"default" | "travel">(
-    const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
+    "default"
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    VehiclePointSchema | undefined
+  >();
   const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+  const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } =
+    useProductStore();
   const { selectedProduct } = useSelectedProduct();
   const { setSelectedAction, clearSelectedAction } = useSelectedAction();
+  const { getVehicleById } = useVehicleStore();
 
-    const email = localStorage.getItem('email')
+  const email = localStorage.getItem("email");
-    const organization = (email!.split("@")[1]).split(".")[0];
+  const organization = email!.split("@")[1].split(".")[0];
 
   useEffect(() => {
-        if (selectedEventData && selectedEventData.data.type === 'vehicle') {
+    if (selectedEventData && selectedEventData.data.type === "vehicle") {
       const point = getPointByUuid(
         selectedProduct.productId,
         selectedEventData.data.modelUuid,
@@ -52,15 +60,19 @@ function VehicleMechanics() {
       productName: productName,
       productId: productId,
       organization: organization,
-            eventDatas: eventData
+      eventDatas: eventData,
-        })
+    });
-    }
+  };
 
   const handleSpeedChange = (value: string) => {
     if (!selectedEventData) return;
-        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventData.data.modelUuid,
+      {
         speed: parseFloat(value),
-        });
+      }
+    );
 
     if (event) {
       updateBackend(
@@ -77,9 +89,13 @@ function VehicleMechanics() {
     const validOption = option as "travel";
     setActiveOption(validOption);
 
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
         actionType: validOption,
-        });
+      }
+    );
 
     if (event) {
       updateBackend(
@@ -93,7 +109,11 @@ function VehicleMechanics() {
 
   const handleRenameAction = (newName: string) => {
     if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      { actionName: newName }
+    );
 
     if (event) {
       updateBackend(
@@ -107,9 +127,13 @@ function VehicleMechanics() {
 
   const handleLoadCapacityChange = (value: string) => {
     if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
         loadCapacity: parseFloat(value),
-        });
+      }
+    );
 
     if (event) {
       updateBackend(
@@ -123,9 +147,13 @@ function VehicleMechanics() {
 
   const handleUnloadDurationChange = (value: string) => {
     if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
         unLoadDuration: parseFloat(value),
-        });
+      }
+    );
 
     if (event) {
       updateBackend(
@@ -147,9 +175,13 @@ function VehicleMechanics() {
 
   // Get current values from store
 
-    const currentSpeed = (getEventByModelUuid(
+  const currentSpeed =
-        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
+    (
-    ) as VehicleEventSchema | undefined)?.speed?.toString() || "0.5";
+      getEventByModelUuid(
+        selectedProduct.productId,
+        selectedEventData?.data.modelUuid || ""
+      ) as VehicleEventSchema | undefined
+    )?.speed?.toString() || "0.5";
 
   const currentActionName = selectedPointData
     ? selectedPointData.action.actionName
@@ -163,9 +195,45 @@ function VehicleMechanics() {
     ? selectedPointData.action.unLoadDuration.toString()
     : "1";
 
-    const currentPickPoint = selectedPointData?.action.pickUpPoint;
+  const { selectedEventSphere } = useSelectedEventSphere();
 
-    const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
+  function handleClearPoints() {
+    const updatedVehicle = getVehicleById(
+      selectedEventSphere?.userData.modelUuid
+    );
+
+    if (
+      !selectedProduct?.productId ||
+      !selectedEventSphere?.userData?.modelUuid ||
+      !updatedVehicle?.point
+    )
+      return;
+
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventSphere.userData.modelUuid,
+      {
+        point: {
+          ...updatedVehicle.point,
+          action: {
+            ...updatedVehicle.point?.action,
+            pickUpPoint: null,
+            unLoadPoint: null,
+            steeringAngle: 0,
+          },
+        },
+      }
+    );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  }
 
   const availableActions = {
     defaultOption: "travel",
@@ -187,16 +255,14 @@ function VehicleMechanics() {
                   defaultValue={"0.5"}
                   max={10}
                   activeOption="m/s"
-                                    onClick={() => { }}
+                  onClick={() => {}}
                   onChange={handleSpeedChange}
                 />
               </div>
             </div>
           </div>
           <section>
-                        <ActionsList
+            <ActionsList selectedPointData={selectedPointData} />
-                            selectedPointData={selectedPointData}
-                        />
             <div className="selected-actions-details">
               <div className="selected-actions-header">
                 <RenameInput
@@ -227,6 +293,7 @@ function VehicleMechanics() {
                       defaultValue: "1",
                       onChange: handleUnloadDurationChange,
                     }}
+                    clearPoints={handleClearPoints}
                     // pickPoint={{
                     //     value: currentPickPoint,
                     //     onChange: handlePickPointChange,
@@ -240,7 +307,10 @@ function VehicleMechanics() {
               </div>
             </div>
             <div className="tirgger">
-                            <Trigger selectedPointData={selectedPointData as any} type={'Vehicle'} />
+              <Trigger
+                selectedPointData={selectedPointData as any}
+                type={"Vehicle"}
+              />
             </div>
           </section>
         </>

app/src/components/ui/inputs/EyeDropInput.tsx

@@ -1,21 +1,18 @@
 import React from "react";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
-import RegularDropDown from "./RegularDropDown";
 
 interface EyeDropInputProps {
   label: string;
   value: string;
   onChange: (value: string) => void;
-  options?: string[];
 }
 
 const EyeDropInput: React.FC<EyeDropInputProps> = ({
   label = "Object",
+  value,
   onChange,
 }) => {
   const handleEyeDropClick = () => {
-    // Here you would typically implement the eye dropper functionality
-    // For now, we'll just simulate selecting a value
     const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
     onChange(simulatedValue);
   };
@@ -24,15 +21,12 @@ const EyeDropInput: React.FC<EyeDropInputProps> = ({
     <div className="eye-dropper-input-container">
       <div className="label">{label}</div>
       <div className="input-container">
-        {/* <input disabled type="text" /> */}
+        <input disabled type="text" value={value}/>
-        <RegularDropDown
+        {/* <input type="text" value={activeValue ?? "null"} disabled /> */}
-          header="select object"
+        {/* <input type="button" value="Clear" onClick={handleEyeDropClick}/> */}
-          options={[]}
+        <button className="eye-picker-button" onClick={handleEyeDropClick}>
-          onSelect={() => { }}
-        />
-        <div className="eye-picker-button" onClick={handleEyeDropClick}>
           <EyeDroperIcon isActive={false} />
-        </div>
+        </button>
       </div>
     </div>
   );

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import {
-  CartBagIcon,
   ExpandIcon,
   IndicationArrow,
   SimulationStatusIcon,
@@ -107,7 +106,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
               <div className="value-container">
                 <div className="progress-bar">
                   {[...Array(5)].map((_, i) => {
-                    const percentage = (count ?? 0 / totalCapacity) * 100;
+                    const percentage = (count! / totalCapacity) * 100;
                     const start = i * 20;
                     const end = (i + 1) * 20;
                     // fill amount: 0 to 100
@@ -120,7 +119,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
                       fillPercent = ((percentage - start) / 20) * 100;
                     }
                     return (
-                      <div key={i} className="block">
+                      <div key={`block-${i}-${start}-${end}`} className="block">
                         <div
                           className="fill"
                           style={
@@ -134,7 +133,7 @@ const AssetDetailsCard: React.FC<AssetDetailsCardInterface> = ({
                   })}
                 </div>
                 <div className="value">
-                  {Math.round((count ?? 0 / totalCapacity) * 100).toString()}%
+                  {Math.round((count! / totalCapacity) * 100).toString()}%
                 </div>
               </div>
             </div>

app/src/modules/simulation/spatialUI/arm/armBotUI.tsx

@@ -3,6 +3,7 @@ import { useSelectedAction, useSelectedEventSphere, useSelectedProduct } from '.
 import { useGLTF } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
 import PickDropPoints from './PickDropPoints';
 import useDraggableGLTF from './useDraggableGLTF';
 import * as THREE from 'three';
@@ -23,6 +24,7 @@ const ArmBotUI = () => {
     const { selectedProduct } = useSelectedProduct();
     const { scene } = useThree();
     const { selectedAction } = useSelectedAction();
+    const { armBots } = useArmBotStore();
 
     const armUiPick = useGLTF(armPick) as any;
     const armUiDrop = useGLTF(armDrop) as any;
@@ -73,7 +75,7 @@ const ArmBotUI = () => {
                 }
             }
         }
-    }, [selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
+    }, [armBots, selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
 
     function getDefaultPositions(modelUuid: string): Positions {
         const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid);

app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx

@@ -23,7 +23,7 @@ const VehicleUI = () => {
   const prevMousePos = useRef({ x: 0, y: 0 });
   const { selectedEventSphere } = useSelectedEventSphere();
   const { selectedProduct } = useSelectedProduct();
-  const { getVehicleById } = useVehicleStore();
+  const { vehicles, getVehicleById } = useVehicleStore();
   const { updateEvent } = useProductStore();
   const [startPosition, setStartPosition] = useState<[number, number, number]>([
     0, 1, 0,
@@ -144,7 +144,7 @@ const VehicleUI = () => {
         setSteeringRotation([0, steeringAngle, 0]);
       }
     }, 10);
-  }, [selectedEventSphere, outerGroup.current]);
+  }, [selectedEventSphere, outerGroup.current, vehicles]);
 
   const handlePointerDown = (
     e: any,

app/src/modules/simulation/storageUnit/instances/animator/MaterialAnimator.tsx

@@ -58,7 +58,7 @@ const MaterialAnimator = ({
   }, [storageModel, storage.currentMaterials]);
 
   return (
-    <group position={[0, -padding, 0]}>
+    <group {...{ position: [0, -padding, 0] }}>
       {hasLoad &&
         storage.currentMaterials.map((mat, index) => (
           <MaterialModel

app/src/styles/layout/sidebar.scss

@@ -271,6 +271,7 @@
           height: calc(100% - 16px);
           max-height: 46vh;
           overflow: auto;
+          margin: 0;
         }
       }
     }
@@ -454,7 +455,6 @@
       height: calc(100% - 36px);
       position: relative;
       width: 304px;
-      padding-bottom: 10px;
 
       .no-event-selected {
         color: #666;
@@ -780,8 +780,9 @@
   .simulations-container,
   .event-proprties-wrapper {
     position: relative;
-    max-height: calc(60vh - (47px - 35px));
+    max-height: calc(62vh - (47px - 35px));
     width: 304px;
+    border-radius: #{$border-radius-large};
     overflow-x: hidden;
 
     .header {
@@ -1175,8 +1176,8 @@
     }
 
     .analysis-content-container {
-      min-height: 50vh;
+      min-height: 48vh;
-      max-height: 60vh;
+      max-height: 56vh;
       overflow-y: auto;
 
       .dropdown-header-container,