updated pannels

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

@@ -49,29 +49,30 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
       const rightActive = previousPanels.includes("right");
       const topActive = previousPanels.includes("top");
       const bottomActive = previousPanels.includes("bottom");
+      const panelSize = isPlaying ? 355 : 305;
 
       switch (side) {
         case "top":
         case "bottom":
           return {
             width: `calc(100% - ${
-              (leftActive ? 204 : 0) + (rightActive ? 204 : 0)
+              (leftActive ? panelSize : 0) + (rightActive ? panelSize : 0)
             }px)`,
-            left: leftActive ? "204px" : "0",
-            right: rightActive ? "204px" : "0",
+            height: `${panelSize - 5}px`,
+            left: leftActive ? `${panelSize}px` : "0",
+            right: rightActive ? `${panelSize}px` : "0",
             [side]: "0",
-            height: "200px",
           };
         case "left":
         case "right":
           return {
+            width: `${panelSize - 5}px`,
             height: `calc(100% - ${
-              (topActive ? 204 : 0) + (bottomActive ? 204 : 0)
+              (topActive ? panelSize : 0) + (bottomActive ? panelSize : 0)
             }px)`,
-            top: topActive ? "204px" : "0",
-            bottom: bottomActive ? "204px" : "0",
+            top: topActive ? `${panelSize}px` : "0",
+            bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
-            width: "200px",
           };
         default:
           return {};
@@ -83,53 +84,51 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
   const handleDrop = (e: React.DragEvent, panel: Side) => {
     e.preventDefault();
     const { draggedAsset } = useWidgetStore.getState();
-    
     if (!draggedAsset) return;
     if (isPanelLocked(panel)) return;
-  
+
     const currentWidgetsCount = getCurrentWidgetCount(panel);
     const maxCapacity = calculatePanelCapacity(panel);
-  
+
     if (currentWidgetsCount >= maxCapacity) return;
-  
+
     addWidgetToPanel(draggedAsset, panel);
   };
-  
-  // Helper functions
-  const isPanelLocked = (panel: Side) => 
+
+  const isPanelLocked = (panel: Side) =>
     selectedZone.lockedPanels.includes(panel);
-  
-  const getCurrentWidgetCount = (panel: Side) => 
-    selectedZone.widgets.filter(w => w.panel === panel).length;
-  
+
+  const getCurrentWidgetCount = (panel: Side) =>
+    selectedZone.widgets.filter((w) => w.panel === panel).length;
+
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 200;
-    const CHART_HEIGHT = 200;
+    const CHART_WIDTH = 250;
+    const CHART_HEIGHT = 250;
     const FALLBACK_HORIZONTAL_CAPACITY = 5;
     const FALLBACK_VERTICAL_CAPACITY = 3;
-  
+
     const dimensions = panelDimensions[panel];
     if (!dimensions) {
-      return panel === "top" || panel === "bottom" 
+      return panel === "top" || panel === "bottom"
         ? FALLBACK_HORIZONTAL_CAPACITY
         : FALLBACK_VERTICAL_CAPACITY;
     }
-  
+
     return panel === "top" || panel === "bottom"
       ? Math.floor(dimensions.width / CHART_WIDTH)
       : Math.floor(dimensions.height / CHART_HEIGHT);
   };
-  
+
   const addWidgetToPanel = (asset: any, panel: Side) => {
     const newWidget = {
       ...asset,
       id: generateUniqueId(),
       panel,
     };
-  
-    setSelectedZone(prev => ({
+
+    setSelectedZone((prev) => ({
       ...prev,
-      widgets: [...prev.widgets, newWidget]
+      widgets: [...prev.widgets, newWidget],
     }));
   };
 
@@ -187,7 +186,6 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
               opacity: selectedZone.lockedPanels.includes(side) ? "0.8" : "1",
             }}
           >
-            <>{}</>
             {selectedZone.widgets
               .filter((w) => w.panel === side)
               .map((widget) => (
@@ -200,4 +198,4 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
   );
 };
 
-export default Panel;
+export default Panel;

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

@@ -72,7 +72,7 @@ const RealTimeVisulization: React.FC = () => {
     <div
       ref={containerRef}
       id="real-time-vis-canvas"
-      className="realTime-viz canvas"
+      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
       style={{
         height: isPlaying ? "100vh" : "",
         width: isPlaying ? "100%" : "",