updated realTimeViz panel style

app/src/components/layout/sidebarLeft/Outline.tsx

@@ -12,7 +12,7 @@ const Outline: React.FC = () => {
 
   const dropdownItems = [
     { id: "1", name: "Ground Floor" },
-    { id: "2", name: "Floor 1" },
+    // { id: "2", name: "Floor 1" },
   ]; // Example dropdown items
 
   return (

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

@@ -98,14 +98,14 @@ export const DraggableWidget = ({
         widgetID: widget.id,
         organization: organization,
       };
-      console.log("deleteWidget: ", deleteWidget);
+
       if (visualizationSocket) {
         visualizationSocket.emit("v2:viz-widget:delete", deleteWidget);
       }
       const updatedWidgets = selectedZone.widgets.filter(
         (w: Widget) => w.id !== widget.id
       );
-      console.log("updatedWidgets: ", updatedWidgets);
+
       setSelectedZone((prevZone: any) => ({
         ...prevZone,
         widgets: updatedWidgets,
@@ -250,55 +250,30 @@ export const DraggableWidget = ({
     height: 0,
   });
   // Track canvas dimensions
-  useEffect(() => {
-    const canvas = document.getElementById("real-time-vis-canvas");
-    if (!canvas) return;
 
-    const updateCanvasDimensions = () => {
-      const rect = canvas.getBoundingClientRect();
-      setCanvasDimensions({
-        width: rect.width,
-        height: rect.height,
-      });
-    };
   
-    // Initial measurement
-    updateCanvasDimensions();
 
-    // Set up ResizeObserver to track changes
+// Current: Two identical useEffect hooks for canvas dimensions
-    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
+// Remove the duplicate and keep only one
-    resizeObserver.observe(canvas);
+useEffect(() => {
+  const canvas = document.getElementById("real-time-vis-canvas");
+  if (!canvas) return;
 
-    return () => {
+  const updateCanvasDimensions = () => {
-      resizeObserver.unobserve(canvas);
+    const rect = canvas.getBoundingClientRect();
-    };
+    setCanvasDimensions({
-  }, []);
+      width: rect.width,
+      height: rect.height,
+    });
+  };
 
-  useEffect(() => {
+  updateCanvasDimensions();
-    const canvas = document.getElementById("real-time-vis-canvas");
+  const resizeObserver = new ResizeObserver(updateCanvasDimensions);
-    if (!canvas) return;
+  resizeObserver.observe(canvas);
 
-    const updateCanvasDimensions = () => {
+  return () => resizeObserver.unobserve(canvas);
-      const rect = canvas.getBoundingClientRect();
+}, []);
-      setCanvasDimensions({
-        width: rect.width,
-        height: rect.height,
-      });
-    };
 
-    // Initial measurement
-    updateCanvasDimensions();
-
-    // Set up ResizeObserver to track changes
-    const resizeObserver = new ResizeObserver(updateCanvasDimensions);
-    resizeObserver.observe(canvas);
-
-    return () => {
-      resizeObserver.unobserve(canvas);
-    };
-  }, []);
-
-  console.log("selectedChartId: ", widget);
   return (
     <>
       <style>
@@ -418,4 +393,4 @@ export const DraggableWidget = ({
   );
 };
 
-// in style if widget .panel is top or bottom set width if left or right set height
+// while resize calculate  --realTimeViz-container-height pprperly

app/src/modules/scene/controls/selection/boundingBoxHelper.tsx

@@ -44,11 +44,13 @@ const BoundingBox = ({ boundingBoxRef }: any) => {
         };
     }, [selectedAssets]);
 
+    const savedTheme: string | null = localStorage.getItem("theme") || "light";
+    
     return (
         <>
             {points.length > 0 && (
                 <>
-                    <Line points={points} color="yellow" lineWidth={2.5} segments />
+                    <Line points={points} color={savedTheme === "dark" ? "#c4abf1" : "#6f42c1"} lineWidth={2.7} segments />
                     <mesh ref={boundingBoxRef} visible={false} position={boxProps.position}>
                         <boxGeometry args={boxProps.args} />
                         <meshBasicMaterial />

app/src/modules/scene/controls/selection/copyPasteControls.tsx

@@ -354,6 +354,7 @@ const CopyPasteControls = ({ itemsGroupRef, copiedObjects, setCopiedObjects, pas
 
                 }
 
+                obj.userData.modeluuid = newFloorItem.modeluuid;
                 itemsGroupRef.current.add(obj);
             }
         });

app/src/modules/scene/controls/selection/duplicationControls.tsx

@@ -336,6 +336,7 @@ const DuplicationControls = ({ itemsGroupRef, duplicatedObjects, setDuplicatedOb
 
                 }
 
+                obj.userData.modeluuid = newFloorItem.modeluuid;
                 itemsGroupRef.current.add(obj);
             }
         });

app/src/modules/scene/controls/selection/rotateControls.tsx

@@ -185,6 +185,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                 });
 
                 let eventData: Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema | undefined = simulationStates.find((events) => events.modeluuid === obj.userData.modeluuid);
+                console.log('eventData: ', eventData);
 
                 const email = localStorage.getItem("email");
                 const organization = email ? email.split("@")[1].split(".")[0] : "default";
@@ -232,6 +233,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                         newEventData.modelName = newFloorItem.modelname;
                         newEventData.position = newFloorItem.position;
                         newEventData.rotation = [obj.rotation.x, obj.rotation.y, obj.rotation.z];
+                        console.log('newEventData: ', newEventData);
 
                         setSimulationStates((prevEvents: (Types.ConveyorEventsSchema | Types.VehicleEventsSchema | Types.StaticMachineEventsSchema)[]) => {
                             const updatedEvents = (prevEvents || []).map(event =>

app/src/services/factoryBuilder/assest/assets/getCategoryAsset.ts

@@ -1,8 +1,7 @@
 let BackEnd_url = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
 export const getCategoryAsset = async (categoryName: any) => {
   try {
-    const response = await fetch(
+    const response = await fetch(`${BackEnd_url}/api/v2/getCategoryAssets/${categoryName}`,
-      `${BackEnd_url}/api/v2/getCategoryAssets/${categoryName}`,
       {
         method: "GET",
         headers: {

app/src/styles/pages/realTimeViz.scss

@@ -117,6 +117,7 @@
 
   .zone-wrapper.bottom {
     bottom: calc(var(--realTimeViz-container-height) * 0.27);
+    bottom: 200px;
   }
 
   .content-container {
@@ -306,7 +307,7 @@
 
         .chart-container {
 
-          min-width: 150px;
+          min-width: 160px;
         }
       }
     }
@@ -346,11 +347,8 @@
 
         .chart-container {
           width: 100%;
-
+          min-height: 160px;
-
-          min-height: 150px;
           max-height: 100%;
-          // border: 1px dashed var(--background-color-gray);
           border-radius: 8px;
           box-shadow: var(--box-shadow-medium);
           padding: 6px 0;
@@ -370,7 +368,8 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    bottom: calc(var(--realTimeViz-container-height) * 0.25);
+    bottom: calc(var(--realTimeViz-container-height) * 0.3);
+    bottom: 210px;
   }
 }