From ba615cefed63ef675eb0f96b18c5e4a5feccca37 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Fri, 17 Oct 2025 10:27:43 +0530
Subject: [PATCH] Refactor simulation styles and update API services

- Refactored SCSS styles for simulation player and dashboard components to improve readability and maintainability.
- Changed property names in Block and UIElement types for clarity.
- Implemented getDashBoardBlocksApi and upsertDashBoardBlocksApi services for fetching and updating dashboard blocks.
- Removed unnecessary transition property in simulation dashboard styles.
---
 .../SimulationDashboard/DashboardEditor.tsx   |  224 ++-
 .../components/block/BlockComponent.tsx       |   40 +-
 .../components/block/BlockGrid.tsx            |    4 +-
 .../components/element/ElementComponent.tsx   |   29 +-
 .../components/element/ElementEditor.tsx      |   29 +-
 .../components/layout/scenes/MainScene.tsx    |    4 +-
 app/src/components/ui/Tools.tsx               |  126 +-
 .../ui/list/OutlineList/AssetOutline.tsx      |    8 +-
 app/src/modules/builder/hooks/useZoomMesh.tsx |   64 +-
 .../collaboration/functions/getAvatarColor.ts |   10 +
 .../dashBoard/getDashBoardBlocks.ts           |   27 +
 .../dashBoard/upsertDashBoardBlocks.ts        |   30 +
 .../simulation/useSimulationDashBoardStore.ts |  138 +-
 .../components/simulation/_simulation.scss    | 1233 ++++++++---------
 .../_simulationDashBoard.scss                 |    2 +-
 app/src/types/exportedTypes.ts                |    4 +-
 16 files changed, 1016 insertions(+), 956 deletions(-)
 create mode 100644 app/src/services/visulization/dashBoard/getDashBoardBlocks.ts
 create mode 100644 app/src/services/visulization/dashBoard/upsertDashBoardBlocks.ts

diff --git a/app/src/components/SimulationDashboard/DashboardEditor.tsx b/app/src/components/SimulationDashboard/DashboardEditor.tsx
index e3e4314..f7d780c 100644
--- a/app/src/components/SimulationDashboard/DashboardEditor.tsx
+++ b/app/src/components/SimulationDashboard/DashboardEditor.tsx
@@ -1,3 +1,4 @@
+import { useParams } from "react-router-dom";
 import React, { useState, useRef, useEffect } from "react";
 import { dataModelManager } from "./data/dataModel";
 import ControlPanel from "./ControlPanel";
@@ -5,16 +6,24 @@ import SwapModal from "./SwapModal";
 import DataModelPanel from "./components/models/DataModelPanel";
 
 import { useSceneContext } from "../../modules/scene/sceneContext";
+import useModuleStore from "../../store/ui/useModuleStore";
 import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize";
 import { handleElementDragStart, handleElementResizeStart, handleBlockResizeStart, handleSwapStart, handleSwapTarget, handleBlockClick, handleElementClick } from "./functions/eventHandlers";
 import BlockGrid from "./components/block/BlockGrid";
 import ElementDropdown from "./components/element/ElementDropdown";
 import BlockEditor from "./components/block/BlockEditor";
 import ElementEditor from "./components/element/ElementEditor";
+import useCallBackOnKey from "../../utils/hooks/useCallBackOnKey";
 import { handleBlockDragStart } from "./functions/block/handleBlockDragStart";
 
+import { getDashBoardBlocksApi } from "../../services/visulization/dashBoard/getDashBoardBlocks";
+import { upsetDashBoardBlocksApi } from "../../services/visulization/dashBoard/upsertDashBoardBlocks";
+
 const DashboardEditor: React.FC = () => {
-    const { simulationDashBoardStore } = useSceneContext();
+    const { simulationDashBoardStore, versionStore } = useSceneContext();
+    const { selectedVersion } = versionStore();
+    const { projectId } = useParams();
+    const { activeModule } = useModuleStore();
     const {
         blocks,
         setBlocks,
@@ -33,7 +42,9 @@ const DashboardEditor: React.FC = () => {
         updateElementData,
         updateGraphData,
         updateGraphTitle,
+        updateGraphType,
         swapElements,
+        subscribe,
     } = simulationDashBoardStore();
     const [selectedBlock, setSelectedBlock] = useState<string | null>(null);
     const [selectedElement, setSelectedElement] = useState<string | null>(null);
@@ -63,8 +74,40 @@ const DashboardEditor: React.FC = () => {
     const dropdownRef = useRef<HTMLDivElement>(null);
     const blockRef = useRef<HTMLDivElement>(null);
 
-    const currentBlock = blocks.find((b) => b.id === selectedBlock);
-    const currentElement = currentBlock?.elements.find((el) => el.id === selectedElement);
+    const currentBlock = blocks.find((b) => b.blockUuid === selectedBlock);
+    const currentElement = currentBlock?.elements.find((el) => el.elementUuid === selectedElement);
+
+    useEffect(() => {
+        if (!projectId || !selectedVersion) return;
+        // getDashBoardBlocksApi(projectId, selectedVersion.versionId).then((data) => {
+        //     if (data.data && data.data.blocks) {
+        //         console.log("data: ", data);
+        //         setBlocks(data.data.blocks);
+        //     }
+        // });
+    }, [projectId, selectedVersion]);
+
+    useEffect(() => {
+        const unsubscribe = subscribe(() => {
+            if (!projectId || !selectedVersion) return;
+
+            // upsetDashBoardBlocksApi({ projectId, versionId: selectedVersion.versionId, blocks }).then((data) => {
+            //     console.log("data: ", data);
+            // });
+        });
+
+        return () => {
+            unsubscribe();
+        };
+    }, [blocks, projectId, selectedVersion]);
+
+    useCallBackOnKey(
+        () => {
+            console.log(blocks);
+        },
+        "Ctrl+S",
+        { dependencies: [blocks], noRepeat: true, allowOnInput: true }
+    );
 
     // Subscribe to data model changes
     useEffect(() => {
@@ -140,86 +183,144 @@ const DashboardEditor: React.FC = () => {
     }, [selectedBlock, selectedElement]);
 
     // Drag and drop handler
-    useEffect(() => {
-        const handleMouseMove = (e: MouseEvent): void => {
-            // Element dragging - use elementDragOffset
-            if (draggingElement && selectedBlock && currentElement?.positionType === "absolute") {
-                const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
-                if (blockElement) {
-                    const blockRect = blockElement.getBoundingClientRect();
-                    const newX = e.clientX - blockRect.left - elementDragOffset.x; // Use elementDragOffset
-                    const newY = e.clientY - blockRect.top - elementDragOffset.y; // Use elementDragOffset
+useEffect(() => {
+    const handleMouseMove = (e: MouseEvent): void => {
+        // Element dragging - direct DOM manipulation
+        if (draggingElement && selectedBlock && currentElement?.positionType === "absolute") {
+            const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
+            const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement;
+            
+            if (blockElement && elementToDrag) {
+                const blockRect = blockElement.getBoundingClientRect();
+                const newX = e.clientX - blockRect.left - elementDragOffset.x;
+                const newY = e.clientY - blockRect.top - elementDragOffset.y;
 
-                    updateElementPosition(selectedBlock, draggingElement, {
-                        x: Math.max(0, Math.min(blockRect.width - 50, newX)),
-                        y: Math.max(0, Math.min(blockRect.height - 30, newY)),
-                    });
-                }
+                // Direct DOM manipulation
+                elementToDrag.style.left = `${Math.max(0, Math.min(blockRect.width - 50, newX))}px`;
+                elementToDrag.style.top = `${Math.max(0, Math.min(blockRect.height - 30, newY))}px`;
             }
+        }
 
-            // Block dragging - use blockDragOffset
-            if (draggingBlock && currentBlock?.positionType && (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed")) {
-                const editorElement = editorRef.current;
-                if (editorElement) {
-                    const editorRect = editorElement.getBoundingClientRect();
-                    const newX = e.clientX - editorRect.left - blockDragOffset.x; // Use blockDragOffset
-                    const newY = e.clientY - editorRect.top - blockDragOffset.y; // Use blockDragOffset
+        // Block dragging - direct DOM manipulation
+        if (draggingBlock && currentBlock?.positionType && (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed")) {
+            const editorElement = editorRef.current;
+            const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement;
+            
+            if (editorElement && blockToDrag) {
+                const editorRect = editorElement.getBoundingClientRect();
+                const newX = e.clientX - editorRect.left - blockDragOffset.x;
+                const newY = e.clientY - editorRect.top - blockDragOffset.y;
 
-                    updateBlockPosition(draggingBlock, {
-                        x: Math.max(0, Math.min(editorRect.width - (currentBlock.size?.width || 400), newX)),
-                        y: Math.max(0, Math.min(editorRect.height - (currentBlock.size?.height || 300), newY)),
-                    });
-                }
+                // Direct DOM manipulation
+                blockToDrag.style.left = `${Math.max(0, Math.min(editorRect.width - (currentBlock.size?.width || 400), newX))}px`;
+                blockToDrag.style.top = `${Math.max(0, Math.min(editorRect.height - (currentBlock.size?.height || 300), newY))}px`;
             }
+        }
 
-            if ((resizingElement || resizingBlock) && resizeStart) {
-                if (resizingElement && selectedBlock) {
+        // Resizing - direct DOM manipulation
+        if ((resizingElement || resizingBlock) && resizeStart) {
+            if (resizingElement && selectedBlock) {
+                const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement;
+                if (elementToResize) {
                     const deltaX = e.clientX - resizeStart.x;
                     const deltaY = e.clientY - resizeStart.y;
 
                     const newWidth = Math.max(100, resizeStart.width + deltaX);
                     const newHeight = Math.max(50, resizeStart.height + deltaY);
 
-                    updateElementSize(selectedBlock, resizingElement, {
-                        width: newWidth,
-                        height: newHeight,
-                    });
-                } else if (resizingBlock) {
+                    // Direct DOM manipulation
+                    elementToResize.style.width = `${newWidth}px`;
+                    elementToResize.style.height = `${newHeight}px`;
+                }
+            } else if (resizingBlock) {
+                const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement;
+                if (blockToResize) {
                     const deltaX = e.clientX - resizeStart.x;
                     const deltaY = e.clientY - resizeStart.y;
 
-                    const currentBlock = blocks.find((b) => b.id === resizingBlock);
+                    const currentBlock = blocks.find((b) => b.blockUuid === resizingBlock);
                     const minSize = currentBlock ? calculateMinBlockSize(currentBlock) : { width: 300, height: 200 };
 
                     const newWidth = Math.max(minSize.width, resizeStart.width + deltaX);
                     const newHeight = Math.max(minSize.height, resizeStart.height + deltaY);
 
-                    updateBlockSize(resizingBlock, {
-                        width: newWidth,
-                        height: newHeight,
-                    });
+                    // Direct DOM manipulation
+                    blockToResize.style.width = `${newWidth}px`;
+                    blockToResize.style.height = `${newHeight}px`;
                 }
             }
-        };
+        }
+    };
 
-        const handleMouseUp = (): void => {
-            setDraggingElement(null);
-            setResizingElement(null);
-            setDraggingBlock(null);
-            setResizingBlock(null);
-            setResizeStart(null);
-        };
-
-        if (draggingElement || draggingBlock || resizingElement || resizingBlock) {
-            document.addEventListener("mousemove", handleMouseMove);
-            document.addEventListener("mouseup", handleMouseUp);
+    const handleMouseUp = (): void => {
+        // Update state only on mouse up for elements
+        if (draggingElement && selectedBlock && currentElement?.positionType === "absolute") {
+            const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
+            const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement;
+            
+            if (blockElement && elementToDrag) {
+                const computedStyle = window.getComputedStyle(elementToDrag);
+                const x = parseFloat(computedStyle.left);
+                const y = parseFloat(computedStyle.top);
+                
+                updateElementPosition(selectedBlock, draggingElement, { x, y });
+            }
         }
 
-        return () => {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
-        };
-    }, [draggingElement, resizingElement, draggingBlock, resizingBlock, elementDragOffset, blockDragOffset, selectedBlock, currentElement, resizeStart, currentBlock, blocks]);
+        // Update state only on mouse up for blocks
+        if (draggingBlock && currentBlock?.positionType && (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed")) {
+            const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement;
+            
+            if (blockToDrag) {
+                const computedStyle = window.getComputedStyle(blockToDrag);
+                const x = parseFloat(computedStyle.left);
+                const y = parseFloat(computedStyle.top);
+                
+                updateBlockPosition(draggingBlock, { x, y });
+            }
+        }
+
+        // Update state only on mouse up for resizing
+        if (resizingElement && selectedBlock) {
+            const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement;
+            if (elementToResize) {
+                const computedStyle = window.getComputedStyle(elementToResize);
+                const width = parseFloat(computedStyle.width);
+                const height = parseFloat(computedStyle.height);
+                
+                updateElementSize(selectedBlock, resizingElement, { width, height });
+            }
+        }
+
+        if (resizingBlock) {
+            const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement;
+            if (blockToResize) {
+                const computedStyle = window.getComputedStyle(blockToResize);
+                const width = parseFloat(computedStyle.width);
+                const height = parseFloat(computedStyle.height);
+                
+                updateBlockSize(resizingBlock, { width, height });
+            }
+        }
+
+        // Reset all dragging states
+        setDraggingElement(null);
+        setResizingElement(null);
+        setDraggingBlock(null);
+        setResizingBlock(null);
+        setResizeStart(null);
+    };
+
+    if (draggingElement || draggingBlock || resizingElement || resizingBlock) {
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+    };
+}, [draggingElement, resizingElement, draggingBlock, resizingBlock, elementDragOffset, blockDragOffset, selectedBlock, currentElement, resizeStart, currentBlock, blocks]);
 
     // Update dropdown position when showElementDropdown changes
     useEffect(() => {
@@ -234,7 +335,9 @@ const DashboardEditor: React.FC = () => {
 
     return (
         <div ref={editorRef} className="dashboard-editor">
-            <ControlPanel editMode={editMode} setEditMode={setEditMode} addBlock={() => addBlock()} showDataModelPanel={showDataModelPanel} setShowDataModelPanel={setShowDataModelPanel} />
+            {activeModule === "visualization" && (
+                <ControlPanel editMode={editMode} setEditMode={setEditMode} addBlock={() => addBlock()} showDataModelPanel={showDataModelPanel} setShowDataModelPanel={setShowDataModelPanel} />
+            )}
 
             <BlockGrid
                 blocks={blocks}
@@ -285,8 +388,6 @@ const DashboardEditor: React.FC = () => {
                     currentElement={currentElement}
                     selectedBlock={selectedBlock}
                     selectedElement={selectedElement}
-                    blocks={blocks}
-                    setBlocks={setBlocks}
                     updateElementStyle={(blockId, elementId, style) => updateElementStyle(blockId, elementId, style)}
                     updateElementSize={(blockId, elementId, size) => updateElementSize(blockId, elementId, size)}
                     updateElementPosition={(blockId, elementId, position) => updateElementPosition(blockId, elementId, position)}
@@ -295,6 +396,7 @@ const DashboardEditor: React.FC = () => {
                     updateElementData={(blockId, elementId, updates) => updateElementData(blockId, elementId, updates)}
                     updateGraphData={(blockId, elementId, newData) => updateGraphData(blockId, elementId, newData)}
                     updateGraphTitle={(blockId, elementId, title) => updateGraphTitle(blockId, elementId, title)}
+                    updateGraphType={(blockId, elementId, type) => updateGraphType(blockId, elementId, type)}
                     setSwapSource={setSwapSource}
                     setShowSwapUI={setShowSwapUI}
                     dataModelManager={dataModelManager}
diff --git a/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx b/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx
index f159412..8970db2 100644
--- a/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx
+++ b/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx
@@ -44,36 +44,27 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
     handleBlockDragStart,
 }) => {
     const minSize = calculateMinBlockSize(block);
-    const isSelected = selectedBlock === block.id;
-    const isDraggable =
-        editMode && (block.positionType === "absolute" || block.positionType === "fixed");
+    const isSelected = selectedBlock === block.blockUuid;
+    const isDraggable = editMode && (block.positionType === "absolute" || block.positionType === "fixed");
 
     const handleMouseDown = (event: React.MouseEvent) => {
         if (isDraggable) {
-            handleBlockDragStart(block.id, event);
+            handleBlockDragStart(block.blockUuid, event);
         }
-        handleBlockClick(block.id, event);
+        handleBlockClick(block.blockUuid, event);
     };
 
     return (
         <div
-            key={block.id}
-            data-block-id={block.id}
+            key={block.blockUuid}
+            data-block-id={block.blockUuid}
             ref={isSelected ? blockRef : null}
-            className={`block ${isSelected ? "selected" : ""} ${editMode ? "edit-mode" : ""} ${
-                isDraggable ? "draggable" : ""
-            }`}
+            className={`block ${isSelected ? "selected" : ""} ${editMode ? "edit-mode" : ""} ${isDraggable ? "draggable" : ""}`}
             style={{
                 ...block.style,
                 position: block.positionType || "relative",
-                left:
-                    block.positionType === "absolute" || block.positionType === "fixed"
-                        ? `${block.position?.x || 0}px`
-                        : "auto",
-                top:
-                    block.positionType === "absolute" || block.positionType === "fixed"
-                        ? `${block.position?.y || 0}px`
-                        : "auto",
+                left: block.positionType === "absolute" || block.positionType === "fixed" ? `${block.position?.x || 0}px` : "auto",
+                top: block.positionType === "absolute" || block.positionType === "fixed" ? `${block.position?.y || 0}px` : "auto",
                 width: block.size?.width || 400,
                 height: block.size?.height || 300,
                 minWidth: minSize.width,
@@ -88,7 +79,7 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
                 <button
                     onClick={(e) => {
                         e.stopPropagation();
-                        setShowElementDropdown(showElementDropdown === block.id ? null : block.id);
+                        setShowElementDropdown(showElementDropdown === block.blockUuid ? null : block.blockUuid);
                     }}
                     className="add-element-button"
                 >
@@ -99,9 +90,9 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
             {/* Elements */}
             {block.elements.map((el) => (
                 <ElementComponent
-                    key={el.id}
+                    key={el.elementUuid}
                     element={el}
-                    blockId={block.id}
+                    blockId={block.blockUuid}
                     editMode={editMode}
                     selectedElement={selectedElement}
                     showSwapUI={showSwapUI}
@@ -115,12 +106,7 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
             ))}
 
             {/* Block resize handle */}
-            {editMode && isSelected && (
-                <div
-                    className="resize-handle"
-                    onMouseDown={(e) => handleBlockResizeStart(block.id, e)}
-                />
-            )}
+            {editMode && isSelected && <div className="resize-handle" onMouseDown={(e) => handleBlockResizeStart(block.blockUuid, e)} />}
 
             {/* Drag handle indicator for absolute/fixed blocks */}
             {isDraggable && editMode && (
diff --git a/app/src/components/SimulationDashboard/components/block/BlockGrid.tsx b/app/src/components/SimulationDashboard/components/block/BlockGrid.tsx
index c2f02eb..6156773 100644
--- a/app/src/components/SimulationDashboard/components/block/BlockGrid.tsx
+++ b/app/src/components/SimulationDashboard/components/block/BlockGrid.tsx
@@ -50,7 +50,7 @@ const BlockGrid: React.FC<BlockGridProps> = ({
         <div className="block-grid">
             {blocks.map((block) => (
                 <BlockComponent
-                    key={block.id}
+                    key={block.blockUuid}
                     block={block}
                     editMode={editMode}
                     selectedBlock={selectedBlock}
@@ -68,7 +68,7 @@ const BlockGrid: React.FC<BlockGridProps> = ({
                     handleBlockDragStart={handleBlockDragStart}
                     setShowElementDropdown={setShowElementDropdown}
                     showElementDropdown={showElementDropdown}
-                    blockRef={selectedBlock === block.id ? blockRef : noopRef}
+                    blockRef={selectedBlock === block.blockUuid ? blockRef : noopRef}
                 />
             ))}
         </div>
diff --git a/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx b/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx
index 02d4b02..00a36d8 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx
@@ -30,8 +30,8 @@ const ElementComponent: React.FC<ElementComponentProps> = ({
     handleSwapStart,
     handleSwapTarget,
 }) => {
-    const isSelected = selectedElement === element.id;
-    const isSwapSource = swapSource === element.id;
+    const isSelected = selectedElement === element.elementUuid;
+    const isSwapSource = swapSource === element.elementUuid;
 
     const elementClasses = [
         "element",
@@ -47,14 +47,13 @@ const ElementComponent: React.FC<ElementComponentProps> = ({
 
     return (
         <div
-            key={element.id}
-            data-element-id={element.id}
+            key={element.elementUuid}
+            data-element-id={element.elementUuid}
             className={elementClasses}
             style={{
                 ...element.style,
                 position: element.positionType || "relative",
-                left:
-                    element.positionType === "absolute" ? `${element.position?.x || 0}px` : "auto",
+                left: element.positionType === "absolute" ? `${element.position?.x || 0}px` : "auto",
                 top: element.positionType === "absolute" ? `${element.position?.y || 0}px` : "auto",
                 width: element.size?.width || "auto",
                 height: element.size?.height || "auto",
@@ -63,30 +62,24 @@ const ElementComponent: React.FC<ElementComponentProps> = ({
             onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                if (showSwapUI && swapSource !== element.id) {
-                    handleSwapTarget(element.id, e);
+                if (showSwapUI && swapSource !== element.elementUuid) {
+                    handleSwapTarget(element.elementUuid, e);
                 } else {
-                    handleElementClick(blockId, element.id, e);
+                    handleElementClick(blockId, element.elementUuid, e);
                 }
             }}
-            onMouseDown={(e) => handleElementDragStart(element.id, e)}
+            onMouseDown={(e) => handleElementDragStart(element.elementUuid, e)}
         >
             <ElementContent element={element} resolvedData={resolveElementValue(element)} />
 
             {editMode && (
                 <>
                     {element.positionType === "relative" && (
-                        <button
-                            onClick={(e) => handleSwapStart(element.id, e)}
-                            className="swap-button"
-                        >
+                        <button onClick={(e) => handleSwapStart(element.elementUuid, e)} className="swap-button">
                             Swap
                         </button>
                     )}
-                    <div
-                        className="resize-handle"
-                        onMouseDown={(e) => handleElementResizeStart(element.id, e)}
-                    />
+                    <div className="resize-handle" onMouseDown={(e) => handleElementResizeStart(element.elementUuid, e)} />
                 </>
             )}
         </div>
diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
index 2d17fc3..acc239f 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
@@ -1,5 +1,5 @@
 import type { RefObject } from "react";
-import { ExtendedCSSProperties, UIElement, Block } from "../../../../types/exportedTypes";
+import { ExtendedCSSProperties, UIElement } from "../../../../types/exportedTypes";
 import { getCurrentElementStyleValue } from "../../functions/helpers/getCurrentElementStyleValue";
 import type { DataModelManager } from "../../data/dataModel";
 
@@ -8,8 +8,6 @@ interface ElementEditorProps {
     currentElement: UIElement;
     selectedBlock: string;
     selectedElement: string;
-    blocks: Block[];
-    setBlocks: (blocks: Block[]) => void;
     updateElementStyle: (blockId: string, elementId: string, style: ExtendedCSSProperties) => void;
     updateElementSize: (blockId: string, elementId: string, size: { width: number; height: number }) => void;
     updateElementPosition: (blockId: string, elementId: string, position: { x: number; y: number }) => void;
@@ -18,6 +16,7 @@ interface ElementEditorProps {
     updateElementData: (blockId: string, elementId: string, updates: Partial<DataBinding>) => void;
     updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
     updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
+    updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
     setSwapSource: (source: string | null) => void;
     setShowSwapUI: (show: boolean) => void;
     dataModelManager: DataModelManager;
@@ -28,8 +27,6 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     currentElement,
     selectedBlock,
     selectedElement,
-    blocks,
-    setBlocks,
     updateElementStyle,
     updateElementSize,
     updateElementPosition,
@@ -38,6 +35,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     updateElementData,
     updateGraphData,
     updateGraphTitle,
+    updateGraphType,
     setSwapSource,
     setShowSwapUI,
     dataModelManager,
@@ -352,26 +350,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                         <label className="form-label">Chart Type: </label>
                         <select
                             value={currentElement.graphType || "line"}
-                            onChange={(e) => {
-                                const newGraphType = e.target.value as "line" | "bar" | "area" | "pie" | "radar";
-                                setBlocks(
-                                    blocks.map((b) =>
-                                        b.id === selectedBlock
-                                            ? {
-                                                  ...b,
-                                                  elements: b.elements.map((el) =>
-                                                      el.id === selectedElement
-                                                          ? {
-                                                                ...el,
-                                                                graphType: newGraphType,
-                                                            }
-                                                          : el
-                                                  ),
-                                              }
-                                            : b
-                                    )
-                                );
-                            }}
+                            onChange={(e) => updateGraphType(selectedBlock, selectedElement, e.target.value as GraphTypes)}
                             className="form-select"
                         >
                             <option value="line">Line Chart</option>
diff --git a/app/src/components/layout/scenes/MainScene.tsx b/app/src/components/layout/scenes/MainScene.tsx
index ea2e800..caaae0d 100644
--- a/app/src/components/layout/scenes/MainScene.tsx
+++ b/app/src/components/layout/scenes/MainScene.tsx
@@ -27,13 +27,13 @@ import RenameTooltip from "../../ui/features/RenameTooltip";
 import VersionSaved from "../sidebarRight/versionHisory/VersionSaved";
 import Footer from "../../footer/Footer";
 import ThreadChat from "../../ui/collaboration/threads/ThreadChat";
+import DashboardEditor from "../../SimulationDashboard/DashboardEditor";
 import Scene from "../../../modules/scene/scene";
 
 import { recentlyViewedApi } from "../../../services/dashboard/recentlyViewedApi";
 import { setAssetsApi } from "../../../services/builder/asset/floorAsset/setAssetsApi";
 import { getVersionHistoryApi } from "../../../services/builder/versionControl/getVersionHistoryApi";
 import { getUserData } from "../../../functions/getUserData";
-import DashboardEditor from "../../SimulationDashboard/DashboardEditor";
 
 function MainScene() {
     const { setMainState, clearComparisonState } = useSimulationState();
@@ -205,7 +205,7 @@ function MainScene() {
                     {activeModule !== "market" && !isPlaying && !isComparing && <Tools />}
                     {isPlaying && activeModule === "simulation" && loadingProgress === 0 && <SimulationPlayer />}
                     {isPlaying && activeModule !== "simulation" && <ControlsPlayer />}
-                    {activeModule === "visualization" && <DashboardEditor />}
+                    {(activeModule === "visualization" || (isPlaying && activeModule === "simulation")) && <DashboardEditor />}
 
                     {isRenameMode && selectedAssets.length === 1 && <RenameTooltip name={selectedAssets[0].userData.modelName} onSubmit={handleObjectRename} />}
 
diff --git a/app/src/components/ui/Tools.tsx b/app/src/components/ui/Tools.tsx
index dea4421..8e1a82b 100644
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -1,31 +1,12 @@
 import React, { useEffect, useRef, useState } from "react";
-import {
-    AsileIcon,
-    CommentIcon,
-    CursorIcon,
-    DeleteIcon,
-    FloorIcon,
-    FreeMoveIcon,
-    MeasureToolIcon,
-    PenIcon,
-    PlayIcon,
-    SaveTemplateIcon,
-    WallIcon,
-    ZoneIcon,
-} from "../icons/ExportToolsIcons";
+import { AsileIcon, CommentIcon, CursorIcon, DeleteIcon, FloorIcon, FreeMoveIcon, MeasureToolIcon, PenIcon, PlayIcon, SaveTemplateIcon, WallIcon, ZoneIcon } from "../icons/ExportToolsIcons";
 import { ArrowIcon, TickIcon } from "../icons/ExportCommonIcons";
 import useModuleStore from "../../store/ui/useModuleStore";
 import { handleSaveTemplate } from "../../modules/visualization/functions/handleSaveTemplate";
 import { usePlayButtonStore } from "../../store/ui/usePlayButtonStore";
 import useTemplateStore from "../../store/ui/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/visualization/old/useZoneStore";
-import {
-    useActiveTool,
-    useToggleView,
-    useToolMode,
-    useActiveSubTool,
-    useShortcutStore,
-} from "../../store/builder/store";
+import { useActiveTool, useToggleView, useToolMode, useActiveSubTool, useShortcutStore } from "../../store/builder/store";
 import { useSocketStore } from "../../store/socket/useSocketStore";
 import { useToggleStore } from "../../store/ui/useUIToggleStore";
 import { use3DWidget, useFloatingWidget } from "../../store/visualization/old/useDroppedObjectsStore";
@@ -66,7 +47,8 @@ const Tools: React.FC = () => {
     const { widgets3D } = use3DWidget();
 
     const { visualizationSocket } = useSocketStore();
-    const { versionStore } = useSceneContext();
+    const { versionStore, simulationDashBoardStore } = useSceneContext();
+    const { saveBlocks } = simulationDashBoardStore();
     const { selectedVersion } = versionStore();
     const { projectId } = useParams();
 
@@ -75,10 +57,7 @@ const Tools: React.FC = () => {
 
     // 1. Set UI toggles on initial render
     useEffect(() => {
-        setToggleUI(
-            localStorage.getItem("navBarUiLeft") !== "false",
-            localStorage.getItem("navBarUiRight") !== "false"
-        );
+        setToggleUI(localStorage.getItem("navBarUiLeft") !== "false", localStorage.getItem("navBarUiRight") !== "false");
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
@@ -172,67 +151,28 @@ const Tools: React.FC = () => {
         }
         setActiveTool("cursor");
         setActiveSubTool("cursor");
-        setToggleUI(
-            localStorage.getItem("navBarUiLeft") !== "false",
-            localStorage.getItem("navBarUiRight") !== "false"
-        );
+        setToggleUI(localStorage.getItem("navBarUiLeft") !== "false", localStorage.getItem("navBarUiRight") !== "false");
     };
 
     const renderBuilderTools = () => (
         <>
             {toggleView && (
                 <div className="draw-tools">
-                    <ToolButton
-                        toolId="drawWall"
-                        icon={WallIcon}
-                        tooltip="draw wall (q)"
-                        active={activeTool === "draw-wall"}
-                        onClick={() => setActiveTool("draw-wall")}
-                    />
-                    <ToolButton
-                        toolId="drawZone"
-                        icon={ZoneIcon}
-                        tooltip="draw zone (e)"
-                        active={activeTool === "draw-zone"}
-                        onClick={() => setActiveTool("draw-zone")}
-                    />
-                    <ToolButton
-                        toolId="drawAisle"
-                        icon={AsileIcon}
-                        tooltip="draw aisle (r)"
-                        active={activeTool === "draw-aisle"}
-                        onClick={() => setActiveTool("draw-aisle")}
-                    />
-                    <ToolButton
-                        toolId="drawFloor"
-                        icon={FloorIcon}
-                        tooltip="draw floor (t)"
-                        active={activeTool === "draw-floor"}
-                        onClick={() => setActiveTool("draw-floor")}
-                    />
+                    <ToolButton toolId="drawWall" icon={WallIcon} tooltip="draw wall (q)" active={activeTool === "draw-wall"} onClick={() => setActiveTool("draw-wall")} />
+                    <ToolButton toolId="drawZone" icon={ZoneIcon} tooltip="draw zone (e)" active={activeTool === "draw-zone"} onClick={() => setActiveTool("draw-zone")} />
+                    <ToolButton toolId="drawAisle" icon={AsileIcon} tooltip="draw aisle (r)" active={activeTool === "draw-aisle"} onClick={() => setActiveTool("draw-aisle")} />
+                    <ToolButton toolId="drawFloor" icon={FloorIcon} tooltip="draw floor (t)" active={activeTool === "draw-floor"} onClick={() => setActiveTool("draw-floor")} />
                 </div>
             )}
             <div className="draw-tools">
-                <ToolButton
-                    toolId="measureScale"
-                    icon={MeasureToolIcon}
-                    tooltip="measure scale (m)"
-                    active={activeTool === "measure"}
-                    onClick={() => setActiveTool("measure")}
-                />
+                <ToolButton toolId="measureScale" icon={MeasureToolIcon} tooltip="measure scale (m)" active={activeTool === "measure"} onClick={() => setActiveTool("measure")} />
             </div>
         </>
     );
 
     const renderSimulationTools = () => (
         <div className="draw-tools">
-            <ToolButton
-                toolId="pen"
-                icon={PenIcon}
-                tooltip="pen"
-                active={activeTool === "pen"}
-                onClick={() => setActiveTool("pen")}
-            />
+            <ToolButton toolId="pen" icon={PenIcon} tooltip="pen" active={activeTool === "pen"} onClick={() => setActiveTool("pen")} />
         </div>
     );
 
@@ -243,7 +183,8 @@ const Tools: React.FC = () => {
                 icon={SaveTemplateIcon}
                 tooltip="save template"
                 active={false}
-                onClick={() =>
+                onClick={() => {
+                    saveBlocks();
                     handleSaveTemplate({
                         addTemplate,
                         floatingWidget,
@@ -253,18 +194,14 @@ const Tools: React.FC = () => {
                         visualizationSocket,
                         projectId,
                         versionId: selectedVersion?.versionId || "",
-                    })
-                }
+                    });
+                }}
             />
         </div>
     );
 
     const renderModeSwitcher = () => (
-        <button
-            id="toggle-threed-button"
-            className={`toggle-threed-button${!toggleView ? " toggled" : ""}`}
-            onClick={toggle2D3D}
-        >
+        <button id="toggle-threed-button" className={`toggle-threed-button${!toggleView ? " toggled" : ""}`} onClick={toggle2D3D}>
             <div className="tooltip">toggle view (tab)</div>
             <div className={`toggle-option${toggleView ? " active" : ""}`}>2d</div>
             <div className={`toggle-option${!toggleView ? " active" : ""}`}>3d</div>
@@ -337,13 +274,7 @@ const Tools: React.FC = () => {
                 )}
                 {/* Dropdown Menu */}
                 {activeModule !== "visualization" && (
-                    <button
-                        id="drop-down-button"
-                        title="drop-down"
-                        className="drop-down-option-button"
-                        ref={dropdownRef}
-                        onClick={() => setOpenDrop(!openDrop)}
-                    >
+                    <button id="drop-down-button" title="drop-down" className="drop-down-option-button" ref={dropdownRef} onClick={() => setOpenDrop(!openDrop)}>
                         <ArrowIcon />
                         {openDrop && (
                             <div className="drop-down-container">
@@ -358,9 +289,7 @@ const Tools: React.FC = () => {
                                             setOpenDrop(false);
                                         }}
                                     >
-                                        <div className="active-option">
-                                            {activeSubTool === option && <TickIcon />}
-                                        </div>
+                                        <div className="active-option">{activeSubTool === option && <TickIcon />}</div>
                                         {getIconComponent(option)}
                                         <div className="option">{option}</div>
                                     </button>
@@ -376,14 +305,7 @@ const Tools: React.FC = () => {
                     <div className="split"></div>
                     <div className="transform-tools">
                         {["move", "rotate"].map((tool) => (
-                            <ToolButton
-                                key={tool}
-                                toolId={tool}
-                                icon={getIconByTool(tool)}
-                                tooltip={`${tool}`}
-                                active={activeTool === tool}
-                                onClick={() => setActiveTool(tool)}
-                            />
+                            <ToolButton key={tool} toolId={tool} icon={getIconByTool(tool)} tooltip={`${tool}`} active={activeTool === tool} onClick={() => setActiveTool(tool)} />
                         ))}
                     </div>
                 </>
@@ -396,13 +318,7 @@ const Tools: React.FC = () => {
 
             <div className="split"></div>
             <div className="general-options">
-                <ToolButton
-                    toolId="comment"
-                    icon={CommentIcon}
-                    tooltip="comment"
-                    active={activeTool === "comment"}
-                    onClick={() => setActiveTool("comment")}
-                />
+                <ToolButton toolId="comment" icon={CommentIcon} tooltip="comment" active={activeTool === "comment"} onClick={() => setActiveTool("comment")} />
                 {!toggleView && (
                     <ToolButton
                         toolId="play"
diff --git a/app/src/components/ui/list/OutlineList/AssetOutline.tsx b/app/src/components/ui/list/OutlineList/AssetOutline.tsx
index b386776..8be3a61 100644
--- a/app/src/components/ui/list/OutlineList/AssetOutline.tsx
+++ b/app/src/components/ui/list/OutlineList/AssetOutline.tsx
@@ -142,11 +142,9 @@ const TreeNode = ({
                     <button className="control-button" title={isVisible ? "Visible" : "Hidden"} onClick={(e) => handleOptionClick(e, "visibility")}>
                         <EyeIcon isClosed={!isVisible} />
                     </button>
-                    {isGroupNode && item.children && item.children.length > 0 && (
-                        <button className="control-button" title="Focus" onClick={(e) => handleOptionClick(e, "focus")}>
-                            <FocusIcon />
-                        </button>
-                    )}
+                    <button className="control-button" title="Focus" onClick={(e) => handleOptionClick(e, "focus")}>
+                        <FocusIcon />
+                    </button>
                     <button className="control-button" title={isLocked ? "Locked" : "Unlocked"} onClick={(e) => handleOptionClick(e, "lock")}>
                         <LockIcon isLocked={isLocked} />
                     </button>
diff --git a/app/src/modules/builder/hooks/useZoomMesh.tsx b/app/src/modules/builder/hooks/useZoomMesh.tsx
index f59819e..84b7158 100644
--- a/app/src/modules/builder/hooks/useZoomMesh.tsx
+++ b/app/src/modules/builder/hooks/useZoomMesh.tsx
@@ -1,4 +1,4 @@
-import { Box3, Object3D, Vector3, PerspectiveCamera } from "three";
+import { Box3, Object3D, Vector3, PerspectiveCamera, Sphere } from "three";
 import { useCallback } from "react";
 import { useSceneContext } from "../../scene/sceneContext";
 
@@ -15,9 +15,10 @@ export function useZoomMesh() {
             if (models.length === 0) return;
 
             const box = new Box3();
-            models.forEach((model) => {
+
+            for (const model of models) {
                 box.expandByObject(model);
-            });
+            }
 
             const cam = camera.current;
             if (!(cam instanceof PerspectiveCamera)) {
@@ -25,50 +26,29 @@ export function useZoomMesh() {
                 return;
             }
 
-            const camPos = new Vector3();
-            cam.getWorldPosition(camPos);
-            const camDir = new Vector3(0, 0, -1).transformDirection(cam.matrixWorld);
             const boxCenter = box.getCenter(new Vector3());
+            const boxSize = box.getSize(new Vector3());
+            const boundingSphere = new Sphere();
+            box.getBoundingSphere(boundingSphere);
+
+            const radius = boundingSphere.radius;
             const fov = (cam.fov * Math.PI) / 180;
-            const aspect = cam.aspect;
-            const halfFovY = fov / 2;
-            const halfFovX = Math.atan(Math.tan(halfFovY) * aspect);
-            const camRight = new Vector3(1, 0, 0).transformDirection(cam.matrixWorld);
-            const camUp = new Vector3(0, 1, 0).transformDirection(cam.matrixWorld);
+            const distance = radius / Math.sin(fov / 2);
+            const distanceWithMargin = distance * 0.75;
+            const camDirection = new Vector3();
+            cam.getWorldDirection(camDirection);
 
-            const corners = [];
-            for (let i = 0; i < 8; i++) {
-                const corner = new Vector3();
-                corner.x = i & 1 ? box.max.x : box.min.x;
-                corner.y = i & 2 ? box.max.y : box.min.y;
-                corner.z = i & 4 ? box.max.z : box.min.z;
-                corners.push(corner);
+            const newCameraPosition = new Vector3().copy(boxCenter).sub(camDirection.multiplyScalar(distanceWithMargin));
+
+            const minDistance = Math.max(radius * 0.5, boxSize.length() * 0.1);
+            const currentDistance = newCameraPosition.distanceTo(boxCenter);
+
+            if (currentDistance < minDistance) {
+                const direction = new Vector3().subVectors(newCameraPosition, boxCenter).normalize();
+                newCameraPosition.copy(boxCenter).add(direction.multiplyScalar(minDistance));
             }
 
-            let maxRight = 0;
-            let maxUp = 0;
-            for (const corner of corners) {
-                const toCorner = corner.clone().sub(boxCenter);
-                const projRight = Math.abs(toCorner.dot(camRight));
-                const projUp = Math.abs(toCorner.dot(camUp));
-                maxRight = Math.max(maxRight, projRight);
-                maxUp = Math.max(maxUp, projUp);
-            }
-
-            const distX = maxRight / Math.sin(halfFovX);
-            const distY = maxUp / Math.sin(halfFovY);
-            const requiredDist = Math.max(distX, distY);
-            const toBox = boxCenter.clone().sub(camPos);
-            const currentDistAlongView = toBox.dot(camDir);
-
-            if (currentDistAlongView <= 0) {
-                const newPos = boxCenter.clone().add(camDir.clone().multiplyScalar(requiredDist));
-                controls.current.setLookAt(newPos.x, newPos.y, newPos.z, boxCenter.x, boxCenter.y, boxCenter.z, true);
-                return;
-            }
-
-            const targetCamPos = boxCenter.clone().sub(camDir.clone().multiplyScalar(requiredDist));
-            controls.current.setLookAt(targetCamPos.x, targetCamPos.y, targetCamPos.z, boxCenter.x, boxCenter.y, boxCenter.z, true);
+            controls.current.setLookAt(newCameraPosition.x, newCameraPosition.y, newCameraPosition.z, boxCenter.x, boxCenter.y, boxCenter.z, true);
         },
         [scene, camera, controls]
     );
diff --git a/app/src/modules/collaboration/functions/getAvatarColor.ts b/app/src/modules/collaboration/functions/getAvatarColor.ts
index 7a3d1de..5b5264c 100644
--- a/app/src/modules/collaboration/functions/getAvatarColor.ts
+++ b/app/src/modules/collaboration/functions/getAvatarColor.ts
@@ -54,3 +54,13 @@ export function getAvatarColor(index: number, userId?: string): string {
     // Fallback: Assign a color using the index if no userId or local storage is unavailable
     return avatarColors[index % avatarColors.length];
 }
+
+export function getAvatarColorUsingUserID(userId: string): string {
+    // Simple deterministic color based on userId hash
+    let hash = 0;
+    for (let i = 0; i < userId.length; i++) {
+        hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    hash = Math.abs(hash);
+    return avatarColors[hash % avatarColors.length];
+}
\ No newline at end of file
diff --git a/app/src/services/visulization/dashBoard/getDashBoardBlocks.ts b/app/src/services/visulization/dashBoard/getDashBoardBlocks.ts
new file mode 100644
index 0000000..95ea2d2
--- /dev/null
+++ b/app/src/services/visulization/dashBoard/getDashBoardBlocks.ts
@@ -0,0 +1,27 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const getDashBoardBlocksApi = async (projectId: string, versionId: string) => {
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/V1/simulation/blocks/${projectId}/${versionId}`, {
+            method: "GET",
+            headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+        });
+        const newAccessToken = response.headers.get("x-access-token");
+        if (newAccessToken) {
+            localStorage.setItem("token", newAccessToken);
+        }
+
+        if (!response.ok) {
+            echo.error("Failed to fetch dashBoardBlocks");
+        }
+
+        return await response.json();
+    } catch {
+        echo.error("Failed to fetch dashBoardBlocks");
+    }
+};
diff --git a/app/src/services/visulization/dashBoard/upsertDashBoardBlocks.ts b/app/src/services/visulization/dashBoard/upsertDashBoardBlocks.ts
new file mode 100644
index 0000000..19e6381
--- /dev/null
+++ b/app/src/services/visulization/dashBoard/upsertDashBoardBlocks.ts
@@ -0,0 +1,30 @@
+import { Block } from "../../../types/exportedTypes";
+
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const upsetDashBoardBlocksApi = async ({ projectId, versionId, blocks }: { projectId: string; versionId: string; blocks: Block[] }) => {
+    try {
+        const response = await fetch(`${url_Backend_dwinzo}/api/V1/simulation/blocks/upsert`, {
+            method: "POST",
+            headers: {
+                Authorization: "Bearer <access_token>",
+                "Content-Type": "application/json",
+                token: localStorage.getItem("token") || "",
+                refresh_token: localStorage.getItem("refreshToken") || "",
+            },
+            body: JSON.stringify({ projectId, versionId, blocks }),
+        });
+        const newAccessToken = response.headers.get("x-access-token");
+        if (newAccessToken) {
+            localStorage.setItem("token", newAccessToken);
+        }
+
+        if (!response.ok) {
+            echo.error("Failed to upsert dashBoardBlocks");
+        }
+
+        return await response.json();
+    } catch {
+        echo.error("Failed to upsert dashBoardBlocks");
+    }
+};
diff --git a/app/src/store/simulation/useSimulationDashBoardStore.ts b/app/src/store/simulation/useSimulationDashBoardStore.ts
index 73eb5ef..edee36e 100644
--- a/app/src/store/simulation/useSimulationDashBoardStore.ts
+++ b/app/src/store/simulation/useSimulationDashBoardStore.ts
@@ -9,6 +9,11 @@ interface SimulationDashboardStore {
     selectedBlockId: string | null;
     selectedElementId: string | null;
 
+    // Subscription management
+    subscribe: (callback: () => void) => () => void;
+    _notifySubscribers: () => void;
+    saveBlocks: () => void;
+
     // Block operations
     addBlock: () => void;
     removeBlock: (blockId: string) => void;
@@ -39,6 +44,7 @@ interface SimulationDashboardStore {
     updateElementData: (blockId: string, elementId: string, updates: Partial<DataBinding>) => void;
     updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
     updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
+    updateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => void;
 
     // Selection and hover management
     setSelectedBlock: (blockId: string | null) => void;
@@ -56,6 +62,8 @@ interface SimulationDashboardStore {
     hasElement: (blockId: string, elementId: string) => boolean;
 }
 
+const subscribers = new Set<() => void>();
+
 export const createSimulationDashboardStore = () => {
     return create<SimulationDashboardStore>()(
         immer((set, get) => ({
@@ -63,11 +71,32 @@ export const createSimulationDashboardStore = () => {
             selectedBlockId: null,
             selectedElementId: null,
 
+            subscribe: (callback: () => void) => {
+                subscribers.add(callback);
+                return () => {
+                    subscribers.delete(callback);
+                };
+            },
+
+            _notifySubscribers: () => {
+                subscribers.forEach((callback) => {
+                    try {
+                        callback();
+                    } catch (error) {
+                        console.error("Error in store subscriber:", error);
+                    }
+                });
+            },
+
+            saveBlocks: () => {
+                get()._notifySubscribers();
+            },
+
             // Block operations
             addBlock: () => {
                 set((state) => {
                     const newBlock: Block = {
-                        id: MathUtils.generateUUID(),
+                        blockUuid: MathUtils.generateUUID(),
                         style: {
                             backgroundColor: "rgba(50, 50, 50, 0.8)",
                             backdropFilter: "blur(10px)",
@@ -90,7 +119,7 @@ export const createSimulationDashboardStore = () => {
 
             removeBlock: (blockId) => {
                 set((state) => {
-                    state.blocks = state.blocks.filter((block) => block.id !== blockId);
+                    state.blocks = state.blocks.filter((block) => block.blockUuid !== blockId);
                     if (state.selectedBlockId === blockId) {
                         state.selectedBlockId = null;
                     }
@@ -99,7 +128,7 @@ export const createSimulationDashboardStore = () => {
 
             updateBlock: (blockId, updates) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         Object.assign(block, updates);
                     }
@@ -123,7 +152,7 @@ export const createSimulationDashboardStore = () => {
             // Block styling and positioning
             updateBlockStyle: (blockId, newStyle) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         block.style = { ...block.style, ...newStyle };
                     }
@@ -132,7 +161,7 @@ export const createSimulationDashboardStore = () => {
 
             updateBlockSize: (blockId, size) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         block.size = size;
                     }
@@ -141,7 +170,7 @@ export const createSimulationDashboardStore = () => {
 
             updateBlockPosition: (blockId, position) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         block.position = position;
                     }
@@ -150,7 +179,7 @@ export const createSimulationDashboardStore = () => {
 
             updateBlockPositionType: (blockId, positionType) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         block.positionType = positionType;
                     }
@@ -159,7 +188,7 @@ export const createSimulationDashboardStore = () => {
 
             updateBlockZIndex: (blockId, zIndex) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         block.zIndex = zIndex;
                     }
@@ -169,10 +198,10 @@ export const createSimulationDashboardStore = () => {
             // Element operations
             addElement: (blockId, type, graphType) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         const newElement: UIElement = {
-                            id: MathUtils.generateUUID(),
+                            elementUuid: MathUtils.generateUUID(),
                             type: type,
                             graphType,
                             graphTitle: graphType ? `${graphType.charAt(0).toUpperCase() + graphType.slice(1)} Chart` : undefined,
@@ -226,9 +255,9 @@ export const createSimulationDashboardStore = () => {
 
             removeElement: (blockId, elementId) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        block.elements = block.elements.filter((el) => el.id !== elementId);
+                        block.elements = block.elements.filter((el) => el.elementUuid !== elementId);
                         if (state.selectedElementId === elementId) {
                             state.selectedElementId = null;
                         }
@@ -238,9 +267,9 @@ export const createSimulationDashboardStore = () => {
 
             updateElement: (blockId, elementId, updates) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             Object.assign(element, updates);
                         }
@@ -251,9 +280,9 @@ export const createSimulationDashboardStore = () => {
             // Element styling and positioning
             updateElementStyle: (blockId, elementId, newStyle) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             element.style = { ...element.style, ...newStyle };
                         }
@@ -263,9 +292,9 @@ export const createSimulationDashboardStore = () => {
 
             updateElementSize: (blockId, elementId, size) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             element.size = size;
                         }
@@ -275,9 +304,9 @@ export const createSimulationDashboardStore = () => {
 
             updateElementPosition: (blockId, elementId, position) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             element.position = position;
                         }
@@ -287,9 +316,9 @@ export const createSimulationDashboardStore = () => {
 
             updateElementPositionType: (blockId, elementId, positionType) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             element.positionType = positionType;
                         }
@@ -299,9 +328,9 @@ export const createSimulationDashboardStore = () => {
 
             updateElementZIndex: (blockId, elementId, zIndex) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             element.zIndex = zIndex;
                         }
@@ -312,9 +341,9 @@ export const createSimulationDashboardStore = () => {
             // Element data operations
             updateElementData: (blockId, elementId, updates) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element?.data) {
                             element.data = { ...element.data, ...updates };
                         }
@@ -324,9 +353,9 @@ export const createSimulationDashboardStore = () => {
 
             updateGraphData: (blockId, elementId, newData) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             element.graphData = newData;
                         }
@@ -336,9 +365,9 @@ export const createSimulationDashboardStore = () => {
 
             updateGraphTitle: (blockId, elementId, title) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
-                        const element = block.elements.find((el) => el.id === elementId);
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
                         if (element) {
                             element.graphTitle = title;
                         }
@@ -346,6 +375,21 @@ export const createSimulationDashboardStore = () => {
                 });
             },
 
+            updateGraphType: (blockId, elementId, graphType) => {
+                set((state) => {
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
+                    if (block) {
+                        const element = block.elements.find((el) => el.elementUuid === elementId);
+                        if (element && element.type === "graph") {
+                            element.graphType = graphType;
+                            element.graphTitle = `${graphType.charAt(0).toUpperCase() + graphType.slice(1)} Chart`;
+
+                            element.graphData = defaultGraphData;
+                        }
+                    }
+                });
+            },
+
             // Selection and hover management
             setSelectedBlock: (blockId) => {
                 set((state) => {
@@ -366,16 +410,16 @@ export const createSimulationDashboardStore = () => {
             // Element swapping
             swapElements: (blockId, elementId1, elementId2) => {
                 set((state) => {
-                    const block = state.blocks.find((b) => b.id === blockId);
+                    const block = state.blocks.find((b) => b.blockUuid === blockId);
                     if (block) {
                         block.elements = block.elements.map((el) => {
-                            if (el.id === elementId1) {
-                                const targetElement = block.elements.find((e) => e.id === elementId2);
-                                return targetElement ? { ...targetElement, id: elementId1 } : el;
+                            if (el.elementUuid === elementId1) {
+                                const targetElement = block.elements.find((e) => e.elementUuid === elementId2);
+                                return targetElement ? { ...targetElement, elementUuid: elementId1 } : el;
                             }
-                            if (el.id === elementId2) {
-                                const sourceElement = block.elements.find((e) => e.id === elementId1);
-                                return sourceElement ? { ...sourceElement, id: elementId2 } : el;
+                            if (el.elementUuid === elementId2) {
+                                const sourceElement = block.elements.find((e) => e.elementUuid === elementId1);
+                                return sourceElement ? { ...sourceElement, elementUuid: elementId2 } : el;
                             }
                             return el;
                         });
@@ -385,37 +429,37 @@ export const createSimulationDashboardStore = () => {
 
             // Helper functions
             getBlockById: (blockId) => {
-                return get().blocks.find((b) => b.id === blockId);
+                return get().blocks.find((b) => b.blockUuid === blockId);
             },
 
             getElementById: (blockId, elementId) => {
-                const block = get().blocks.find((b) => b.id === blockId);
-                return block?.elements.find((el) => el.id === elementId);
+                const block = get().blocks.find((b) => b.blockUuid === blockId);
+                return block?.elements.find((el) => el.elementUuid === elementId);
             },
 
             getSelectedBlock: () => {
                 const { selectedBlockId, blocks } = get();
-                return selectedBlockId ? blocks.find((b) => b.id === selectedBlockId) : undefined;
+                return selectedBlockId ? blocks.find((b) => b.blockUuid === selectedBlockId) : undefined;
             },
 
             getSelectedElement: () => {
                 const { selectedElementId, selectedBlockId, blocks } = get();
                 if (!selectedElementId || !selectedBlockId) return undefined;
 
-                const block = blocks.find((b) => b.id === selectedBlockId);
-                return block?.elements.find((el) => el.id === selectedElementId);
+                const block = blocks.find((b) => b.blockUuid === selectedBlockId);
+                return block?.elements.find((el) => el.elementUuid === selectedElementId);
             },
 
             hasBlock: (blockId) => {
-                return get().blocks.some((b) => b.id === blockId);
+                return get().blocks.some((b) => b.blockUuid === blockId);
             },
 
             hasElement: (blockId, elementId) => {
-                const block = get().blocks.find((b) => b.id === blockId);
-                return block?.elements.some((el) => el.id === elementId) || false;
+                const block = get().blocks.find((b) => b.blockUuid === blockId);
+                return block?.elements.some((el) => el.elementUuid === elementId) || false;
             },
         }))
     );
 };
 
-export type SimulationDashboardStoreType = ReturnType<typeof createSimulationDashboardStore>;
+export type SimulationDashboardStoreType = ReturnType<typeof createSimulationDashboardStore>;
\ No newline at end of file
diff --git a/app/src/styles/components/simulation/_simulation.scss b/app/src/styles/components/simulation/_simulation.scss
index 08daf8f..aa94bb1 100644
--- a/app/src/styles/components/simulation/_simulation.scss
+++ b/app/src/styles/components/simulation/_simulation.scss
@@ -2,693 +2,688 @@
 @use "../../abstracts/mixins" as *;
 
 .simulation-player-wrapper {
-  position: fixed;
-  bottom: 32px;
-  left: 50%;
-  z-index: 2;
-  transform: translate(-50%, 0);
-  max-width: calc(100vw - (2 * 328px));
-  width: 100%;
-  transition: all 0.3s;
+    position: fixed;
+    bottom: 32px;
+    left: 50%;
+    z-index: #{$z-index-tools};
+    transform: translate(-50%, 0);
+    max-width: calc(100vw - (2 * 328px));
+    width: 100%;
+    transition: all 0.3s;
 
-  &.hide {
-    width: fit-content;
+    &.hide {
+        width: fit-content;
 
-    .simulation-player-container .controls-container .simulation-button-container {
-      width: 32px;
-      height: 24px;
-    }
-  }
-
-  .simulation-player-container {
-    background: var(--background-color);
-    padding: 7px;
-    border-radius: #{$border-radius-xlarge};
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    backdrop-filter: blur(10px);
-    outline: 1px solid var(--border-color);
-
-    .progresser-wrapper {
-      outline: 1px solid var(--border-color);
-      background: var(--background-color);
-      border-radius: #{$border-radius-large};
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      padding: 12px 5px;
-      padding-top: 38px;
-      transition: height 0.2s linear;
+        .simulation-player-container .controls-container .simulation-button-container {
+            width: 32px;
+            height: 24px;
+        }
     }
 
-    .controls-container {
-      @include flex-space-between;
-      gap: 12px;
-      justify-content: space-between;
-
-      .header {
-        @include flex-center;
-        gap: 6px;
-        padding: 0 8px;
-
-        svg {
-          scale: 1.3;
-        }
-      }
-
-      .production-details,
-      .controls-wrapper {
-        @include flex-center;
-        gap: 6px;
-      }
-
-      .production-details {
-        .production-wrapper {
-          display: flex;
-          // align-items: center;
-          flex-direction: column;
-          gap: 6px;
-
-          .header {
-            display: flex;
-            flex-direction: row;
-            justify-content: start;
-            gap: 6px;
-          }
-
-          .progress-wrapper {
-            width: 164px;
-            height: 8px;
-            border-radius: #{$border-radius-small};
-            background: var(--background-color-solid);
-
-            .progress {
-              border-radius: #{$border-radius-small};
-              height: 100%;
-              background-color: var(--background-color-accent);
-            }
-          }
-        }
-      }
-
-      .expand-icon-container {
-        @include flex-center;
-        padding: 0 8px;
-        cursor: pointer;
-      }
-
-      .simulation-button-container {
-        @include flex-center;
-        gap: 2px;
-        padding: 4px 8px;
-        width: 64px;
+    .simulation-player-container {
         background: var(--background-color);
-        border-radius: #{$border-radius-extra-large};
-        height: fit-content;
-        cursor: pointer;
-        transition: all 0.2s;
-        outline: 1px solid transparent;
-
-        &:hover {
-          outline: 1px solid var(--border-color);
-          background: var(--background-color);
-          color: var(--accent-color);
-
-          path {
-            stroke: var(--accent-color);
-          }
-        }
-      }
-    }
-
-    .speed-control-container {
-      @include flex-center;
-      gap: 32px;
-      padding: 5px 16px;
-      border-radius: #{$border-radius-medium};
-      box-sizing: #{$box-shadow-medium};
-      position: relative;
-
-      .min-value,
-      .max-value {
+        padding: 7px;
+        border-radius: #{$border-radius-xlarge};
         display: flex;
-        align-items: center;
-        font-weight: var(--font-weight-bold);
-      }
+        flex-direction: column;
+        gap: 8px;
+        backdrop-filter: blur(10px);
+        outline: 1px solid var(--border-color);
 
-      .slider-container {
-        width: 100%;
-        max-width: 80vw;
-        height: 28px;
-        border-radius: #{$border-radius-small};
-        position: relative;
-
-        .speed-label {
-          font-size: var(--font-size-tiny);
-          position: absolute;
-          bottom: -7px;
-          transform: translate(-50%, -0%);
-
-          &:first-child {
-            left: 0;
-          }
-
-          &:last-child {
-            right: -10px;
-          }
-        }
-
-        &::after {
-          content: "";
-          background: var(--background-color-solid);
-          opacity: 0.4;
-          position: absolute;
-          top: 50%;
-          transform: translate(0, -50%);
-          width: 100%;
-          height: 3px;
-        }
-
-        .custom-slider-wrapper {
-          height: 100%;
-          width: 100%;
-          padding: 0 26px;
-          background: transparent;
-          border-radius: #{$border-radius-large};
-        }
-
-        .custom-slider {
-          height: 100%;
-          width: 100%;
-          position: relative;
-
-          .slider-input {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            z-index: 3;
-            cursor: pointer;
-          }
-
-          .slider-handle {
-            position: absolute;
-            top: 50%;
-            min-width: 44px;
-            padding: 0 8px;
-            line-height: 20px;
-            text-align: center;
-            background: var(--background-color-button);
-            color: var(--text-button-color);
+        .progresser-wrapper {
+            outline: 1px solid var(--border-color);
+            background: var(--background-color);
             border-radius: #{$border-radius-large};
-            transform: translate(-50%, -50%);
-            font-size: var(--font-size-small);
-            cursor: pointer;
-            z-index: 2;
-          }
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            padding: 12px 5px;
+            padding-top: 38px;
+            transition: height 0.2s linear;
         }
 
-        .marker {
-          position: absolute;
-          background: var(--background-color-solid);
-          opacity: 0.6;
-          width: 2px;
-          height: 12px;
-          top: 8px;
-          z-index: 1;
+        .controls-container {
+            @include flex-space-between;
+            gap: 12px;
+            justify-content: space-between;
+
+            .header {
+                @include flex-center;
+                gap: 6px;
+                padding: 0 8px;
+
+                svg {
+                    scale: 1.3;
+                }
+            }
+
+            .production-details,
+            .controls-wrapper {
+                @include flex-center;
+                gap: 6px;
+            }
+
+            .production-details {
+                .production-wrapper {
+                    display: flex;
+                    // align-items: center;
+                    flex-direction: column;
+                    gap: 6px;
+
+                    .header {
+                        display: flex;
+                        flex-direction: row;
+                        justify-content: start;
+                        gap: 6px;
+                    }
+
+                    .progress-wrapper {
+                        width: 164px;
+                        height: 8px;
+                        border-radius: #{$border-radius-small};
+                        background: var(--background-color-solid);
+
+                        .progress {
+                            border-radius: #{$border-radius-small};
+                            height: 100%;
+                            background-color: var(--background-color-accent);
+                        }
+                    }
+                }
+            }
+
+            .expand-icon-container {
+                @include flex-center;
+                padding: 0 8px;
+                cursor: pointer;
+            }
+
+            .simulation-button-container {
+                @include flex-center;
+                gap: 2px;
+                padding: 4px 8px;
+                width: 64px;
+                background: var(--background-color);
+                border-radius: #{$border-radius-extra-large};
+                height: fit-content;
+                cursor: pointer;
+                transition: all 0.2s;
+                outline: 1px solid transparent;
+
+                &:hover {
+                    outline: 1px solid var(--border-color);
+                    background: var(--background-color);
+                    color: var(--accent-color);
+
+                    path {
+                        stroke: var(--accent-color);
+                    }
+                }
+            }
         }
 
-        .marker.marker-10 {
-          left: 10%;
-        }
-
-        .marker.marker-20 {
-          left: 20%;
-        }
-
-        .marker.marker-30 {
-          left: 30%;
-        }
-
-        .marker.marker-40 {
-          left: 40%;
-        }
-
-        .marker.marker-50 {
-          left: 50%;
-        }
-
-        .marker.marker-60 {
-          left: 60%;
-        }
-
-        .marker.marker-70 {
-          left: 70%;
-        }
-
-        .marker.marker-80 {
-          left: 80%;
-        }
-
-        .marker.marker-90 {
-          left: 90%;
-        }
-      }
-    }
-
-    .time-displayer {
-      @include flex-space-between;
-      gap: 24px;
-      height: auto;
-      opacity: 1;
-      transition: all 0.5s ease;
-
-      .start-time-wrappper,
-      .end-time-wrappper {
-        @include flex-center;
-        gap: 4px;
-
-        .icon {
-          @include flex-center;
-        }
-      }
-
-      .time-progresser {
-        flex: 1;
-
-        .timeline {
-          padding: 16px;
-          outline: 1px solid var(--border-color);
-          background: var(--background-color);
-          border-radius: #{$border-radius-xxx};
-          display: flex;
-          align-items: center;
-          width: 100%;
-          height: 33px;
-
-          .label-dot-wrapper {
+        .speed-control-container {
             @include flex-center;
+            gap: 32px;
+            padding: 5px 16px;
+            border-radius: #{$border-radius-medium};
+            box-sizing: #{$box-shadow-medium};
             position: relative;
 
-            .label {
-              position: absolute;
-              top: -36px;
-              transform: translate(0, -0);
-              font-size: 12px;
-              color: var(--text-color);
-              white-space: nowrap;
+            .min-value,
+            .max-value {
+                display: flex;
+                align-items: center;
+                font-weight: var(--font-weight-bold);
             }
 
-            .dot {
-              width: 14px;
-              height: 14px;
-              border-radius: #{$border-radius-circle};
-              background-color: #d3d3e2;
+            .slider-container {
+                width: 100%;
+                max-width: 80vw;
+                height: 28px;
+                border-radius: #{$border-radius-small};
+                position: relative;
 
-              &.filled {
-                background-color: var(--accent-color);
-                border: 4px solid #8f5cf2;
-              }
+                .speed-label {
+                    font-size: var(--font-size-tiny);
+                    position: absolute;
+                    bottom: -7px;
+                    transform: translate(-50%, -0%);
+
+                    &:first-child {
+                        left: 0;
+                    }
+
+                    &:last-child {
+                        right: -10px;
+                    }
+                }
+
+                &::after {
+                    content: "";
+                    background: var(--background-color-solid);
+                    opacity: 0.4;
+                    position: absolute;
+                    top: 50%;
+                    transform: translate(0, -50%);
+                    width: 100%;
+                    height: 3px;
+                }
+
+                .custom-slider-wrapper {
+                    height: 100%;
+                    width: 100%;
+                    padding: 0 26px;
+                    background: transparent;
+                    border-radius: #{$border-radius-large};
+                }
+
+                .custom-slider {
+                    height: 100%;
+                    width: 100%;
+                    position: relative;
+
+                    .slider-input {
+                        position: absolute;
+                        width: 100%;
+                        height: 100%;
+                        opacity: 0;
+                        z-index: 3;
+                        cursor: pointer;
+                    }
+
+                    .slider-handle {
+                        position: absolute;
+                        top: 50%;
+                        min-width: 44px;
+                        padding: 0 8px;
+                        line-height: 20px;
+                        text-align: center;
+                        background: var(--background-color-button);
+                        color: var(--text-button-color);
+                        border-radius: #{$border-radius-large};
+                        transform: translate(-50%, -50%);
+                        font-size: var(--font-size-small);
+                        cursor: pointer;
+                        z-index: 2;
+                    }
+                }
+
+                .marker {
+                    position: absolute;
+                    background: var(--background-color-solid);
+                    opacity: 0.6;
+                    width: 2px;
+                    height: 12px;
+                    top: 8px;
+                    z-index: 1;
+                }
+
+                .marker.marker-10 {
+                    left: 10%;
+                }
+
+                .marker.marker-20 {
+                    left: 20%;
+                }
+
+                .marker.marker-30 {
+                    left: 30%;
+                }
+
+                .marker.marker-40 {
+                    left: 40%;
+                }
+
+                .marker.marker-50 {
+                    left: 50%;
+                }
+
+                .marker.marker-60 {
+                    left: 60%;
+                }
+
+                .marker.marker-70 {
+                    left: 70%;
+                }
+
+                .marker.marker-80 {
+                    left: 80%;
+                }
+
+                .marker.marker-90 {
+                    left: 90%;
+                }
             }
-          }
-
-          .line {
-            flex-grow: 1;
-            height: 4px;
-            background-color: #d3d3e2;
-            margin: 0 4px;
-
-            &.filled {
-              background-color: #8f5cf2;
-            }
-          }
         }
-      }
-    }
-  }
 
-  .open {
+        .time-displayer {
+            @include flex-space-between;
+            gap: 24px;
+            height: auto;
+            opacity: 1;
+            transition: all 0.5s ease;
 
-    .start-displayer,
-    .end-displayer {
-      display: none;
+            .start-time-wrappper,
+            .end-time-wrappper {
+                @include flex-center;
+                gap: 4px;
+
+                .icon {
+                    @include flex-center;
+                }
+            }
+
+            .time-progresser {
+                flex: 1;
+
+                .timeline {
+                    padding: 16px;
+                    outline: 1px solid var(--border-color);
+                    background: var(--background-color);
+                    border-radius: #{$border-radius-xxx};
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    height: 33px;
+
+                    .label-dot-wrapper {
+                        @include flex-center;
+                        position: relative;
+
+                        .label {
+                            position: absolute;
+                            top: -36px;
+                            transform: translate(0, -0);
+                            font-size: 12px;
+                            color: var(--text-color);
+                            white-space: nowrap;
+                        }
+
+                        .dot {
+                            width: 14px;
+                            height: 14px;
+                            border-radius: #{$border-radius-circle};
+                            background-color: #d3d3e2;
+
+                            &.filled {
+                                background-color: var(--accent-color);
+                                border: 4px solid #8f5cf2;
+                            }
+                        }
+                    }
+
+                    .line {
+                        flex-grow: 1;
+                        height: 4px;
+                        background-color: #d3d3e2;
+                        margin: 0 4px;
+
+                        &.filled {
+                            background-color: #8f5cf2;
+                        }
+                    }
+                }
+            }
+        }
     }
 
-    .timmer {
-      display: none;
-    }
+    .open {
+        .start-displayer,
+        .end-displayer {
+            display: none;
+        }
 
-    .progresser-wrapper {
-      padding-top: 4px;
-    }
+        .timmer {
+            display: none;
+        }
 
-    .time-displayer {
-      height: 0;
-      opacity: 0;
-      pointer-events: none;
-      display: none;
-    }
+        .progresser-wrapper {
+            padding-top: 4px;
+        }
 
-    .processDisplayer {
-      padding: 0 8px;
-      background: transparent;
+        .time-displayer {
+            height: 0;
+            opacity: 0;
+            pointer-events: none;
+            display: none;
+        }
 
-      .process-player {
-        width: 0;
-        display: none !important;
-      }
+        .processDisplayer {
+            padding: 0 8px;
+            background: transparent;
+
+            .process-player {
+                width: 0;
+                display: none !important;
+            }
+        }
     }
-  }
 }
 
 .controls-player-container {
-  min-width: 26vw;
-  max-width: 80vw;
-  border-radius: 15px;
-  gap: 40px;
-  background: var(--background-color);
-  backdrop-filter: blur(20px);
-  cursor: pointer;
-  @include flex-center;
-  justify-content: space-between;
-  position: fixed;
-  bottom: 32px;
-  left: 50%;
-  transform: translate(-50%, 0);
-  color: var(--accent-color);
-  z-index: 2;
-  isolation: isolate;
-  font-weight: 700;
-  padding: 8px;
-  transition: all 0.2s;
+    min-width: 26vw;
+    max-width: 80vw;
+    border-radius: 15px;
+    gap: 40px;
+    background: var(--background-color);
+    backdrop-filter: blur(20px);
+    cursor: pointer;
+    @include flex-center;
+    justify-content: space-between;
+    position: fixed;
+    bottom: 32px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    color: var(--accent-color);
+    z-index: 2;
+    isolation: isolate;
+    font-weight: 700;
+    padding: 8px;
+    transition: all 0.2s;
 
-  &.hide {
-    min-width: auto;
-    width: 92px;
-  }
-
-  .controls-left,
-  .controls-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    font-size: var(--font-size-small);
-
-    .label {
-      text-transform: capitalize;
-      font-size: var(--font-size-small);
+    &.hide {
+        min-width: auto;
+        width: 92px;
     }
 
-    .walkMode-wrapper {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .input-toggle-container {
-        padding: 0;
-        gap: 4px;
+    .controls-left,
+    .controls-right {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        font-size: var(--font-size-small);
 
         .label {
-          font-size: var(--font-size-small);
+            text-transform: capitalize;
+            font-size: var(--font-size-small);
+        }
+
+        .walkMode-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            .input-toggle-container {
+                padding: 0;
+                gap: 4px;
+
+                .label {
+                    font-size: var(--font-size-small);
+                }
+            }
+        }
+
+        .btn-wrapper {
+            @include flex-center;
+            gap: 2px;
+            padding: 4px 8px;
+            width: 64px;
+            background: var(--background-color);
+            border-radius: 20px;
+            height: fit-content;
+            cursor: pointer;
+            transition: all 0.2s;
+            outline: 1px solid transparent;
+
+            &:hover {
+                outline: 1px solid var(--border-color);
+                color: var(--accent-color);
+            }
+
+            &.hide {
+                width: 32px;
+            }
+
+            .icon {
+                width: 16px;
+                height: 16px;
+                @include flex-center;
+            }
         }
-      }
     }
-
-    .btn-wrapper {
-      @include flex-center;
-      gap: 2px;
-      padding: 4px 8px;
-      width: 64px;
-      background: var(--background-color);
-      border-radius: 20px;
-      height: fit-content;
-      cursor: pointer;
-      transition: all 0.2s;
-      outline: 1px solid transparent;
-
-      &:hover {
-        outline: 1px solid var(--border-color);
-        color: var(--accent-color);
-      }
-
-      &.hide {
-        width: 32px;
-      }
-
-      .icon {
-        width: 16px;
-        height: 16px;
-        @include flex-center;
-      }
-    }
-  }
 }
 
 .processDisplayer {
-  border-radius: #{$border-radius-large};
-  outline: 1px solid var(--border-color);
-  background: var(--background-color);
-  padding: 20px 6px;
-  position: relative;
-
-  .timmer {
-    width: auto;
-    position: absolute;
-    bottom: 0;
-    font-size: var(--font-size-tiny);
-  }
-
-  .start-displayer {
-    bottom: 4px;
-    left: 16px;
-  }
-
-  .end-displayer {
-    bottom: 4px;
-    width: auto;
-    right: 16px;
-  }
-
-  .process-player {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    width: 3.946108102798462px;
-    height: 26px;
-    left: 86.81px;
     border-radius: #{$border-radius-large};
-    border-width: 1px;
-    background: var(--background-color-accent, #6f42c1);
-  }
+    outline: 1px solid var(--border-color);
+    background: var(--background-color);
+    padding: 20px 6px;
+    position: relative;
 
-  .process-wrapper {
-    .process-container {
-      position: relative;
-      display: flex;
-      width: 100%;
-
-      .process {
-        height: 5px;
-        border-radius: #{$border-radius-small};
-        color: white;
-        text-align: center;
-        line-height: 30px;
-        transition: width 0.3s ease;
-      }
+    .timmer {
+        width: auto;
+        position: absolute;
+        bottom: 0;
+        font-size: var(--font-size-tiny);
+    }
+
+    .start-displayer {
+        bottom: 4px;
+        left: 16px;
+    }
+
+    .end-displayer {
+        bottom: 4px;
+        width: auto;
+        right: 16px;
+    }
+
+    .process-player {
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+        width: 3.946108102798462px;
+        height: 26px;
+        left: 86.81px;
+        border-radius: #{$border-radius-large};
+        border-width: 1px;
+        background: var(--background-color-accent, #6f42c1);
+    }
+
+    .process-wrapper {
+        .process-container {
+            position: relative;
+            display: flex;
+            width: 100%;
+
+            .process {
+                height: 5px;
+                border-radius: #{$border-radius-small};
+                color: white;
+                text-align: center;
+                line-height: 30px;
+                transition: width 0.3s ease;
+            }
+        }
     }
-  }
 }
 
 .asset-details-card-wrapper {
-  pointer-events: none;
+    pointer-events: none;
 
-  .asset-details-card-container {
-    position: relative;
-    padding: 8px;
-    background: var(--background-color);
-    backdrop-filter: blur(6px);
-    border-radius: #{$border-radius-large};
-    transform: translate(0, -100%);
-    z-index: 0;
-    box-shadow: inset 0px 10px 50px #80808075;
-    min-width: 124px;
-
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      background: linear-gradient(135deg, var(--accent-color), #ff00f000);
-      background-size: 400% 400%;
-      animation: borderAnimation 5s linear infinite;
-      -webkit-mask: linear-gradient(#ffffff 0 0) content-box,
-        linear-gradient(#ffffff 0 0);
-      mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-      z-index: -1;
-      padding: 1px;
-    }
-
-    .asset-details-header {
-      @include flex-space-between;
-      gap: 12px;
-
-      .content {
-        .name {
-          text-wrap: nowrap;
-          max-width: 140px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          margin-bottom: 4px;
-          text-transform: capitalize;
-        }
-
-        .status-container {
-          .status {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            padding-top: 4px;
-
-            .icon {
-              @include flex-center;
-            }
-          }
-        }
-
-        .active-time {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          .value {
-            color: var(--highlight-text-color);
-          }
-        }
-
-        .storage-container {
-          font-size: var(--font-size-tiny);
-          color: var(--highlight-text-color);
-        }
-        
-      }
-    }
-
-    .process-running-container {
-      width: 100%;
-      height: 8px;
-      background: var(--background-color-solid);
-      margin-top: 12px;
-      border-radius: #{$border-radius-small};
-      overflow: hidden;
-      position: relative;
-
-      .process-running {
-        height: 100%;
-        width: 35%;
-        border-radius: #{$border-radius-small};
-        background: var(--process-color);
-        animation: playing-process 1s ease-in-out infinite;
-      }
-    }
-
-    .indication-arrow {
-      position: absolute;
-      left: 50%;
-      bottom: 0;
-      transform: translate(-50%, 10px);
-      filter: drop-shadow(0px 0px 4px #ffffff);
-    }
-
-    .count-ui-wrapper {
-      position: absolute;
-      right: -16px;
-      top: -2px;
-      padding: 4px;
-      padding-right: 8px;
-
-      .count-ui-container {
-        background: var(--background-color-solid);
+    .asset-details-card-container {
+        position: relative;
         padding: 8px;
-        outline: 1px solid var(--border-color);
+        background: var(--background-color);
+        backdrop-filter: blur(6px);
         border-radius: #{$border-radius-large};
-        box-shadow: inset 0px 10px 50px #8080803a;
-        max-width: 80px;
-        position: absolute;
-        left: 0;
+        transform: translate(0, -100%);
+        z-index: 0;
+        box-shadow: inset 0px 10px 50px #80808075;
+        min-width: 124px;
 
-        .content {
-          @include flex-center;
-          gap: 2px;
-
-          .icon {
-            @include flex-center;
-          }
-
-          .display {
-            font-size: var(--font-size-small);
-          }
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            background: linear-gradient(135deg, var(--accent-color), #ff00f000);
+            background-size: 400% 400%;
+            animation: borderAnimation 5s linear infinite;
+            -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
+            mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            z-index: -1;
+            padding: 1px;
         }
 
-        .value-container {
-          @include flex-center;
-          gap: 4px;
+        .asset-details-header {
+            @include flex-space-between;
+            gap: 12px;
 
-          .progress-bar {
-            display: flex;
-            align-items: center;
-            gap: 1px;
-            height: 10px;
-          }
+            .content {
+                .name {
+                    text-wrap: nowrap;
+                    max-width: 140px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin-bottom: 4px;
+                    text-transform: capitalize;
+                }
 
-          .block {
-            width: 5px;
-            height: 100%;
-            border-radius: 2px;
-            transition: background-color 0.3s;
-            background: var(--background-color);
+                .status-container {
+                    .status {
+                        display: flex;
+                        align-items: center;
+                        gap: 6px;
+                        padding-top: 4px;
+
+                        .icon {
+                            @include flex-center;
+                        }
+                    }
+                }
+
+                .active-time {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    .value {
+                        color: var(--highlight-text-color);
+                    }
+                }
+
+                .storage-container {
+                    font-size: var(--font-size-tiny);
+                    color: var(--highlight-text-color);
+                }
+            }
+        }
+
+        .process-running-container {
+            width: 100%;
+            height: 8px;
+            background: var(--background-color-solid);
+            margin-top: 12px;
+            border-radius: #{$border-radius-small};
             overflow: hidden;
             position: relative;
 
-            .fill {
-              height: 100%;
-              background: linear-gradient(to top,
-                  var(--background-color-accent) var(--process-fill-percentage),
-                  transparent var(--process-fill-percentage));
+            .process-running {
+                height: 100%;
+                width: 35%;
+                border-radius: #{$border-radius-small};
+                background: var(--process-color);
+                animation: playing-process 1s ease-in-out infinite;
+            }
+        }
+
+        .indication-arrow {
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translate(-50%, 10px);
+            filter: drop-shadow(0px 0px 4px #ffffff);
+        }
+
+        .count-ui-wrapper {
+            position: absolute;
+            right: -16px;
+            top: -2px;
+            padding: 4px;
+            padding-right: 8px;
+
+            .count-ui-container {
+                background: var(--background-color-solid);
+                padding: 8px;
+                outline: 1px solid var(--border-color);
+                border-radius: #{$border-radius-large};
+                box-shadow: inset 0px 10px 50px #8080803a;
+                max-width: 80px;
+                position: absolute;
+                left: 0;
+
+                .content {
+                    @include flex-center;
+                    gap: 2px;
+
+                    .icon {
+                        @include flex-center;
+                    }
+
+                    .display {
+                        font-size: var(--font-size-small);
+                    }
+                }
+
+                .value-container {
+                    @include flex-center;
+                    gap: 4px;
+
+                    .progress-bar {
+                        display: flex;
+                        align-items: center;
+                        gap: 1px;
+                        height: 10px;
+                    }
+
+                    .block {
+                        width: 5px;
+                        height: 100%;
+                        border-radius: 2px;
+                        transition: background-color 0.3s;
+                        background: var(--background-color);
+                        overflow: hidden;
+                        position: relative;
+
+                        .fill {
+                            height: 100%;
+                            background: linear-gradient(to top, var(--background-color-accent) var(--process-fill-percentage), transparent var(--process-fill-percentage));
+                        }
+                    }
+
+                    .value {
+                        font-size: var(--font-size-tiny);
+                        color: var(--input-text-color);
+                    }
+                }
             }
-          }
-
-          .value {
-            font-size: var(--font-size-tiny);
-            color: var(--input-text-color);
-          }
         }
-      }
     }
-  }
 }
 
 @keyframes playing-process {
-  from {
-    transform: translateX(-100%);
-  }
+    from {
+        transform: translateX(-100%);
+    }
 
-  to {
-    transform: translateX(300%);
-  }
+    to {
+        transform: translateX(300%);
+    }
 }
 
 @keyframes borderAnimation {
-  0% {
-    background-position: 0% 50%;
-  }
+    0% {
+        background-position: 0% 50%;
+    }
 
-  50% {
-    background-position: 100% 50%;
-  }
+    50% {
+        background-position: 100% 50%;
+    }
 
-  100% {
-    background-position: 0% 50%;
-  }
-}
\ No newline at end of file
+    100% {
+        background-position: 0% 50%;
+    }
+}
diff --git a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
index c43b3e7..5c3cacb 100644
--- a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
+++ b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
@@ -62,7 +62,7 @@
             cursor: pointer;
             border: 1px solid rgba(255, 255, 255, 0.2);
             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-            transition: all 0.3s ease;
+            // transition: all 0.3s ease;
             z-index: 1;
             resize: none;
             overflow: hidden;
diff --git a/app/src/types/exportedTypes.ts b/app/src/types/exportedTypes.ts
index bfa7c5d..bd06446 100644
--- a/app/src/types/exportedTypes.ts
+++ b/app/src/types/exportedTypes.ts
@@ -6,7 +6,7 @@ export interface ExtendedCSSProperties extends CSSProperties {
 }
 
 export type Block = {
-    id: string;
+    blockUuid: string;
     style: CSSProperties;
     elements: UIElement[];
     zIndex?: number;
@@ -16,7 +16,7 @@ export type Block = {
 };
 
 export type UIElement = {
-    id: string;
+    elementUuid: string;
     type: UIType;
     graphType?: GraphTypes;
     graphTitle?: string;