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

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

@@ -53,8 +53,13 @@ type Widget = {
   data: any;
 };
 
+// Define the type for HiddenPanels, where keys are zone IDs and values are arrays of hidden sides
+interface HiddenPanels {
+  [zoneId: string]: Side[];
+}
+
 const RealTimeVisulization: React.FC = () => {
-  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
+  const [hiddenPanels, setHiddenPanels] = React.useState<HiddenPanels>({});
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
@@ -74,7 +79,6 @@ const RealTimeVisulization: React.FC = () => {
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
 
-
   useEffect(() => {
     async function GetZoneData() {
       const email = localStorage.getItem("email") || "";
@@ -101,7 +105,7 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) { }
+      } catch (error) {}
     }
 
     GetZoneData();
@@ -229,8 +233,6 @@ const RealTimeVisulization: React.FC = () => {
     };
   }, [setRightClickSelected]);
 
-
-
   return (
     <>
       <div
@@ -263,7 +265,6 @@ const RealTimeVisulization: React.FC = () => {
             }}
             onDrop={(event) => handleDrop(event)}
             onDragOver={(event) => event.preventDefault()}
-
           >
             <Scene />
           </div>