updated pannels

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx

@@ -5,7 +5,7 @@ import Widgets3D from "./Widgets3D";
 import WidgetsFloating from "./WidgetsFloating";
 
 const Widgets = () => {
-  const [activeOption, setActiveOption] = useState("Floating");
+  const [activeOption, setActiveOption] = useState("2D");
 
   const handleToggleClick = (option: string) => {
     setActiveOption(option);

app/src/components/ui/Tools.tsx

@@ -57,6 +57,7 @@ const Tools: React.FC = () => {
 
   return (
     <div className="tools-container">
+      {!isPlaying && (
         <div className="drop-down-icons">
           <div className="activeDropicon">
             {activeSubTool == "cursor" && (
@@ -129,6 +130,7 @@ const Tools: React.FC = () => {
             )}
           </div>
         </div>
+      )}
       {!toggleThreeD && activeModule === "builder" && (
         <>
           <div className="split"></div>
@@ -191,7 +193,7 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
-      {activeModule === "visualization" && (
+      {activeModule === "visualization" && !isPlaying && (
         <>
           <div className="split"></div>
           <div className="draw-tools">
@@ -210,10 +212,14 @@ const Tools: React.FC = () => {
           </div>
         </>
       )}
+      {!isPlaying && (
+        <>
           <div className="split"></div>
           <div className="general-options">
             <div
-          className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
+              className={`tool-button ${
+                activeTool === "comment" ? "active" : ""
+              }`}
               onClick={() => {
                 setActiveTool("comment");
               }}
@@ -244,6 +250,13 @@ const Tools: React.FC = () => {
               3d
             </div>
           </div>
+        </>
+      )}
+      {isPlaying && (
+        <div className="exitPlay" onClick={() => setIsPlaying(false)}>
+          X
+        </div>
+      )}
     </div>
   );
 };

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",
+            height: `${panelSize - 5}px`,
-            right: rightActive ? "204px" : "0",
+            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",
+            top: topActive ? `${panelSize}px` : "0",
-            bottom: bottomActive ? "204px" : "0",
+            bottom: bottomActive ? `${panelSize}px` : "0",
             [side]: "0",
-            width: "200px",
           };
         default:
           return {};
@@ -83,7 +84,6 @@ 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;
 
@@ -95,16 +95,15 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
     addWidgetToPanel(draggedAsset, panel);
   };
 
-  // Helper functions
   const isPanelLocked = (panel: Side) =>
     selectedZone.lockedPanels.includes(panel);
 
   const getCurrentWidgetCount = (panel: Side) =>
-    selectedZone.widgets.filter(w => w.panel === panel).length;
+    selectedZone.widgets.filter((w) => w.panel === panel).length;
 
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 200;
+    const CHART_WIDTH = 250;
-    const CHART_HEIGHT = 200;
+    const CHART_HEIGHT = 250;
     const FALLBACK_HORIZONTAL_CAPACITY = 5;
     const FALLBACK_VERTICAL_CAPACITY = 3;
 
@@ -127,9 +126,9 @@ const Panel: React.FC<PanelProps> = ({ selectedZone, setSelectedZone }) => {
       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) => (

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%" : "",

app/src/store/useModuleStore.ts

@@ -7,7 +7,7 @@ interface ModuleStore {
 }
 
 const useModuleStore = create<ModuleStore>((set) => ({
-  activeModule: "builder", // Initial state
+  activeModule: "visualization", // Initial state
   setActiveModule: (module) => set({ activeModule: module }), // Update state
 }));
 

app/src/styles/components/tools.scss

@@ -4,7 +4,7 @@
 .tools-container {
   @include flex-center;
   position: fixed;
-  bottom: 32px;
+  bottom: 50px;
   left: 50%;
   transform: translate(-50%, 0);
   padding: 8px;
@@ -14,12 +14,14 @@
   width: fit-content;
   transition: width 0.2s;
   background-color: var(--background-color);
+
   .split {
     height: 20px;
     width: 2px;
     border-radius: 2px;
     background: var(--highlight-accent-color);
   }
+
   .draw-tools,
   .general-options,
   .activeDropicon {
@@ -29,42 +31,46 @@
     width: 0;
     opacity: 0;
     animation: expandWidth 0.2s ease-in-out forwards;
+
     .tool-button {
       @include flex-center;
       height: 28px;
       width: 28px;
       cursor: pointer;
       border-radius: #{$border-radius-small};
+
       &:hover {
-        background: color-mix(
+        background: color-mix(in srgb,
-          in srgb,
             var(--highlight-accent-color) 60%,
-          transparent
+            transparent);
-        );
       }
     }
+
     .active {
       background-color: var(--accent-color);
+
       &:hover {
         background-color: var(--accent-color);
       }
     }
   }
+
   .activeDropicon {
     gap: 2px;
+
     .drop-down-option-button {
       @include flex-center;
       height: 28px;
       cursor: pointer;
       border-radius: #{$border-radius-small};
       position: relative;
+
       &:hover {
-        background: color-mix(
+        background: color-mix(in srgb,
-          in srgb,
             var(--highlight-accent-color) 60%,
-          transparent
+            transparent);
-        );
       }
+
       .drop-down-container {
         position: absolute;
         bottom: 40px;
@@ -72,6 +78,7 @@
         box-shadow: #{$box-shadow-medium};
         padding: 8px;
         border-radius: #{$border-radius-large};
+
         .option-list {
           margin: 4px 0;
           display: flex;
@@ -80,18 +87,22 @@
           border-radius: #{$border-radius-medium};
           gap: 6px;
           padding: 4px;
+
           &:hover {
             background-color: var(--highlight-accent-color);
             color: var(--accent-color);
+
             path {
               stroke: var(--accent-color);
             }
           }
+
           .active-option {
             height: 12px;
             width: 12px;
             @include flex-center;
           }
+
           .option {
             color: inherit;
           }
@@ -99,6 +110,7 @@
       }
     }
   }
+
   .toggle-threed-button {
     @include flex-center;
     padding: 3px;
@@ -106,12 +118,14 @@
     background-color: var(--highlight-accent-color);
     gap: 2px;
     position: relative;
+
     .toggle-option {
       font-size: var(--font-size-small);
       padding: 2px;
       z-index: 1;
       transition: all 0.2s;
     }
+
     &::after {
       content: "";
       position: absolute;
@@ -123,15 +137,38 @@
       border-radius: #{$border-radius-small};
       transition: all 0.2s;
     }
+
     .active {
       color: var(--highlight-accent-color);
     }
   }
+
   .toggled {
     &::after {
       left: 24px;
     }
   }
+
+  .exitPlay {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: var(--accent-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.3s, transform 0.3s;
+    color: var(--background-color);
+  }
+
+
+  .exitPlay:hover {
+    background-color: var(--accent-color);
+    transform: scale(1.1);
+  }
+
 }
 
 @keyframes expandWidth {
@@ -139,6 +176,7 @@
     width: 0;
     opacity: 0;
   }
+
   to {
     width: fit-content;
     opacity: 1;

app/src/styles/pages/realTimeViz.scss

@@ -1,148 +1,26 @@
 @use "../abstracts/variables.scss" as *;
+@use "../abstracts/mixins.scss" as *;
 
 // Main Container
 .realTime-viz {
   background-color: var(--background-color);
   border-radius: 20px;
   box-shadow: $box-shadow-medium;
-  width: calc(100% - (320px + 270px + 90px));
+  width: 100%;
-  height: calc(100% - (200px + 80px));
+  height: 100%;
   position: absolute;
-  top: 50%;
+  top: 0;
-  left: calc(270px + 45px);
+  left: 0;
-  transform: translate(0, -50%);
+  transform: scale(1);
-
-  .icon {
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-
-  .icons-container {
-    .icon {
-      &:first-child {
-        &::after {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .zoon-wrapper {
-    display: flex;
-    background-color: var(--background-color);
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    gap: 6px;
-    padding: 4px;
-    border-radius: 8px;
-    max-width: 80%;
-    overflow: auto;
-    max-width: calc(100% - 450px);
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .zone {
-      width: auto;
-      background-color: var(--background-color);
-      border-radius: 6px;
-      padding: 4px 8px;
-      white-space: nowrap;
-      font-size: $small;
-    }
-
-    .active {
-      background-color: var(--accent-color);
-      color: var(--background-color);
-      // color: #FCFDFD !important;
-    }
-  }
-
-  .zoon-wrapper.bottom {
-    bottom: 210px;
-  }
-
-  @media (max-width: 1024px) {
-    width: 80%; // Increase width to take more space on smaller screens
-    height: 500px; // Reduce height to fit smaller screens
-    left: 50%; // Center horizontally
-
-    .main-container {
-      margin: 0 15px; // Reduce margin for better spacing
-    }
-
-    .zoon-wrapper {
-      bottom: 5px; // Adjust position for smaller screens
-
-      &.bottom {
-        bottom: 150px; // Adjust for bottom placement
-      }
-    }
-  }
-
-  .content-container {
-    display: flex;
-    height: 100vh;
-    transition: all 0.3s ease;
-  }
-
-  .main-container {
-    position: relative;
-    flex: 1;
-    height: 600px;
-    background-color: rgb(235, 235, 235);
-    margin: 0 30px;
-    transition: height 0.3s ease, margin 0.3s ease;
-
-    .zoon-wrapper {
-      display: flex;
-      background-color: rgba(224, 223, 255, 0.5);
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translate(-50%, 0);
-      gap: 6px;
-      padding: 4px;
-      border-radius: 8px;
-      max-width: 80%;
-      overflow: auto;
-      transition: transform 0.3s ease;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      .zone {
-        width: auto;
-        background-color: $background-color;
-        border-radius: 6px;
-        padding: 4px 8px;
-        white-space: nowrap;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-
-        &.active {
-          background-color: var(--primary-color);
-          color: var(--accent-color);
-        }
-      }
-
-      &.bottom {
-        bottom: 210px;
-      }
-    }
-  }
 
+  // Panels
   .panel {
     position: absolute;
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     border-radius: 6px;
-    overflow: visible !important;
+    overflow: hidden;
 
     .panel-content {
       position: relative;
@@ -159,7 +37,7 @@
       }
 
       .chart-container {
-        width: 100%;
+        width: 229px;
         height: 200px;
         max-height: 100%;
         border: 1px dotted #a9a9a9;
@@ -179,53 +57,89 @@
         color: var(--primary-color);
       }
     }
-
-
-    &.top-panel,
-    &.bottom-panel {
-      left: 0;
-      right: 0;
-
-      .fullScreen {
-        background-color: red;
   }
 
-      .panel-content {
+  // Panels for each side
+  .left-panel,
+  .right-panel {
+    .chart-container {
+      padding: 10px;
+      width: 100% !important;
+      height: 250px !important;
+
+    }
+  }
+
+  .top-panel,
+  .bottom-panel {
+    .chart-container {
+      padding: 10px;
+      width: 300px !important;
+      height: 100% !important;
+    }
+  }
+
+  // Zone Wrapper
+  .zoon-wrapper {
     display: flex;
-        flex-direction: row;
+    background-color: var(--background-color);
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    gap: 6px;
+    padding: 4px;
+    border-radius: 8px;
+    max-width: 80%;
+    overflow: auto;
+    max-width: calc(100% - 450px);
 
-        .chart-container {
+    &::-webkit-scrollbar {
-          height: 100%;
+      display: none;
-          width: 200px;
     }
+
+    .zone {
+      width: auto;
+      background-color: var(--background-color);
+      border-radius: 6px;
+      padding: 4px 8px;
+      white-space: nowrap;
+      font-size: $small;
+    }
+
+    .active {
+      background-color: var(--accent-color);
+      color: var(--background-color);
     }
   }
 
-    &.top-panel {
+  .zoon-wrapper.bottom {
-      top: 0;
+    bottom: 210px;
   }
 
-    &.bottom-panel {
+  .content-container {
-      bottom: 0;
+    display: flex;
+    height: 100vh;
+    transition: all 0.3s ease;
   }
 
-    &.left-panel {
+  .main-container {
-      left: 0;
+    position: relative;
-      top: 0;
+    flex: 1;
-      bottom: 0;
+    height: 600px;
+    background-color: rgb(235, 235, 235);
+    margin: 0 30px;
+    transition: height 0.3s ease, margin 0.3s ease;
+  }
+}
 
-      .chart-container {
+.playActiveFalse {
+  position: absolute;
+  top: 50%;
+  left: calc(270px + 45px);
+  transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
+  transform-origin: left;
   width: 100%;
-        height: 180px;
-      }
-    }
-
-    &.right-panel {
-      right: 0;
-      top: 0;
-      bottom: 0;
-    }
-  }
 }
 
 // Side Buttons
@@ -267,7 +181,6 @@
     height: 18px;
     display: flex;
     justify-content: center;
-    // align-items: center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
@@ -307,84 +220,18 @@
   }
 }
 
-.right.side-button-container {
+.right.side-button-container,
-  .extra-Bs {
-    flex-direction: column;
-  }
-}
-
 .left.side-button-container {
   .extra-Bs {
     flex-direction: column;
   }
 }
 
-// Theme Container
+.top-panel,
-.theme-container {
+.bottom-panel {
-  width: 250px;
+  .panel-content {
-  padding: 12px;
-  box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
-  border-radius: 8px;
-  background-color: white;
-  position: absolute;
-  top: 20px;
-  right: -100%;
-  transform: translate(-0%, 0);
 
-  h2 {
-    font-size: 12px;
-    margin-bottom: 8px;
-    color: #2b3344;
-  }
-
-  .theme-preset-wrapper {
     display: flex;
-    gap: 5px;
+    flex-direction: row !important;
-    flex-wrap: wrap;
-
-    .theme-preset {
-      display: flex;
-      gap: 2px;
-      margin-bottom: 10px;
-      border: 1px solid $border-color;
-      padding: 5px 10px;
-      border-radius: 4px;
-      transition: border 0.3s ease;
-
-      &.active {
-        border: 1px solid var(--primary-color);
-
-        &::after {
-          content: "";
-          position: absolute;
-          top: 1px;
-          left: 1px;
-          width: 10px;
-          height: 10px;
-          background-color: var(--primary-color);
-          border-radius: 50%;
-        }
-      }
-    }
-  }
-
-  .custom-color {
-    display: flex;
-    justify-content: space-between;
-
-    .color-displayer {
-      display: flex;
-      gap: 5px;
-      align-items: center;
-      border: 1px solid var(--accent-color);
-      border-radius: 4px;
-      padding: 0 5px;
-
-      input {
-        border: none;
-        outline: none;
-        border-radius: 50%;
-      }
-    }
   }
 }