refactor: update VehicleMechanics to use LabledDropdown for start and end point selection; clean up unused MQTT code and improve zone data fetching logic

app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useMemo } from "react";
 import { InfoIcon } from "../../../icons/ExportCommonIcons";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
-import EyeDropInput from "../../../ui/inputs/EyeDropInput";
 import { useSelectedActionSphere, useSimulationPaths } from "../../../../store/store";
 import * as Types from '../../../../types/world/worldTypes';
+import LabledDropdown from "../../../ui/inputs/LabledDropdown";
 
 const VehicleMechanics: React.FC = () => {
     const { selectedActionSphere } = useSelectedActionSphere();
@@ -11,17 +11,31 @@ const VehicleMechanics: React.FC = () => {
 
     const propertiesContainerRef = useRef<HTMLDivElement>(null);
 
-    const selectedPoint = useMemo(() => {
-        if (!selectedActionSphere?.point?.uuid) return null;
+    const { selectedPoint, connectedPointUuids } = useMemo(() => {
+        if (!selectedActionSphere?.point?.uuid) return { selectedPoint: null, connectedPointUuids: [] };
 
         const vehiclePaths = simulationPaths.filter(
             (path): path is Types.VehicleEventsSchema => path.type === "Vehicle"
         );
 
-        return vehiclePaths.find(
+        const point = vehiclePaths.find(
             (path) => path.point.uuid === selectedActionSphere.point.uuid
         )?.point;
-    }, [selectedActionSphere, simulationPaths, selectedActionSphere?.point?.uuid]);
+
+        if (!point) return { selectedPoint: null, connectedPointUuids: [] };
+
+        const connectedUuids: string[] = [];
+        if (point.connections?.targets) {
+            point.connections.targets.forEach(target => {
+                connectedUuids.push(target.pointUUID);
+            });
+        }
+
+        return {
+            selectedPoint: point,
+            connectedPointUuids: connectedUuids
+        };
+    }, [selectedActionSphere, simulationPaths]);
 
     const handleActionUpdate = React.useCallback((updatedAction: Partial<Types.VehicleEventsSchema['point']['actions']>) => {
         if (!selectedActionSphere?.point?.uuid) return;
@@ -45,12 +59,12 @@ const VehicleMechanics: React.FC = () => {
         setSimulationPaths(updatedPaths);
     }, [selectedActionSphere?.point?.uuid, simulationPaths, setSimulationPaths]);
 
-    const handleStartPointChange = React.useCallback((position: string) => {
-        handleActionUpdate({ start: position });
+    const handleStartPointChange = React.useCallback((uuid: string) => {
+        handleActionUpdate({ start: uuid });
     }, [handleActionUpdate]);
 
-    const handleEndPointChange = React.useCallback((position: string) => {
-        handleActionUpdate({ end: position });
+    const handleEndPointChange = React.useCallback((uuid: string) => {
+        handleActionUpdate({ end: uuid });
     }, [handleActionUpdate]);
 
     const handleHitCountChange = React.useCallback((hitCount: number) => {
@@ -92,18 +106,20 @@ const VehicleMechanics: React.FC = () => {
 
                     {selectedPoint && (
                         <>
-                            <EyeDropInput
+                            <LabledDropdown
                                 key={`start-${selectedPoint.uuid}`}
                                 label="Start Point"
-                                value={selectedPoint.actions.start}
-                                onChange={handleStartPointChange}
+                                defaultOption={selectedPoint.actions.start || "Select start point"}
+                                options={connectedPointUuids}
+                                onSelect={handleStartPointChange}
                             />
 
-                            <EyeDropInput
+                            <LabledDropdown
                                 key={`end-${selectedPoint.uuid}`}
                                 label="End Point"
-                                value={selectedPoint.actions.end}
-                                onChange={handleEndPointChange}
+                                defaultOption={selectedPoint.actions.end || "Select end point"}
+                                options={connectedPointUuids}
+                                onSelect={handleEndPointChange}
                             />
 
                             <InputWithDropDown
@@ -128,7 +144,6 @@ const VehicleMechanics: React.FC = () => {
                             />
                         </>
                     )}
-
                 </div>
 
                 <div className="footer">

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -76,7 +76,7 @@ const RealTimeVisulization: React.FC = () => {
     }
 
     GetZoneData();
-  }, []); // Removed `zones` from dependencies
+  }, [activeModule]); // Removed `zones` from dependencies
 
 
   useEffect(() => {
@@ -97,7 +97,7 @@ const RealTimeVisulization: React.FC = () => {
       };
     });
   }, [selectedZone]);
-  
+
   useEffect(() => {
 
   }, [floatingWidgets])

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
+import RegularDropDown from "./RegularDropDown";
 
 interface EyeDropInputProps {
   label: string;
@@ -23,7 +24,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" /> */}
+        <RegularDropDown
+          header="select object"
+          options={[]}
+          onSelect={() => { }}
+        />
         <div className="eye-picker-button" onClick={handleEyeDropClick}>
           <EyeDroperIcon isActive={false} />
         </div>