feat: Implement simulation dashboard editor for managing blocks and elements.

app/src/components/SimulationDashboard/DashboardEditor.tsx

@@ -5,6 +5,7 @@ import { Block } from "../../types/exportedTypes";
 import AnalyzerManager from "./AnalyzerManager";
 
 import { useSceneContext } from "../../modules/scene/sceneContext";
+import { useVisualizationStore } from "../../store/visualization/useVisualizationStore";
 import useModuleStore from "../../store/ui/useModuleStore";
 import { usePlayButtonStore } from "../../store/ui/usePlayButtonStore";
 import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize";
@@ -22,6 +23,7 @@ import { deleteDashBoardElementsApi } from "../../services/visulization/dashBoar
 
 const DashboardEditor: React.FC = () => {
     const { simulationDashBoardStore, versionStore } = useSceneContext();
+    const { eyeDropperTarget, setEyeDropperTarget } = useVisualizationStore();
     const { selectedVersion } = versionStore();
     const { projectId } = useParams();
     const { activeModule } = useModuleStore();
@@ -91,6 +93,7 @@ const DashboardEditor: React.FC = () => {
         if (!editMode) {
             setSelectedBlock(null);
             setSelectedElement(null);
+            setEyeDropperTarget(null);
         }
     }, [editMode]);
 
@@ -450,6 +453,7 @@ const DashboardEditor: React.FC = () => {
             {/* BlockGrid */}
 
             <div className={`${editMode ? "editable" : ""} block-grid-container`}>
+                {!eyeDropperTarget && (
                     <BlockGrid
                         blocks={blocks}
                         handleAddElement={async (blockId, type, graphType) => {
@@ -475,6 +479,7 @@ const DashboardEditor: React.FC = () => {
                         showElementDropdown={showElementDropdown}
                         blockRef={blockRef}
                     />
+                )}
 
                 {/* BlockEditor */}
 

app/src/components/SimulationDashboard/components/element/ElementContent.tsx

@@ -145,9 +145,22 @@ const ElementContent: React.FC<ElementContentProps> = ({ element, resolvedData }
                                     <XAxis dataKey="name" stroke="rgba(255,255,255,0.6)" fontSize={12} />
                                     <YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} />
                                     <Tooltip {...tooltipStyle} />
-                                    {element.dataBinding?.dataType === "single-machine" && element.dataBinding.dataValue ? (
+                                    {element.dataBinding?.dataType === "single-machine" &&
+                                    element.dataBinding.dataValue &&
+                                    (!Array.isArray(element.dataBinding.dataValue) || element.dataBinding.dataValue.length > 0) ? (
                                         (Array.isArray(element.dataBinding.dataValue) ? element.dataBinding.dataValue : [element.dataBinding.dataValue as string]).map((key, index) => (
-                                            <Line key={key} type="monotone" dataKey={key} stroke={COLORS[index % COLORS.length]} strokeWidth={2} dot={false} isAnimationActive={false} />
+                                            <Line
+                                                key={key}
+                                                type="monotone"
+                                                dataKey={key}
+                                                stroke={COLORS[index % COLORS.length]}
+                                                strokeWidth={2}
+                                                dot={{
+                                                    fill: "#c4abf1",
+                                                    strokeWidth: 2,
+                                                }}
+                                                isAnimationActive={false}
+                                            />
                                         ))
                                     ) : (
                                         <Line