feat: Enhance ElementEditor with product and analysis store integration, conditional rendering for element types, and improved data mapping UI

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

@@ -51,7 +51,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     setShowSwapUI,
     dataModelManager,
 }) => {
-    const { simulationDashBoardStore } = useSceneContext();
+    const { simulationDashBoardStore, productStore, analysisStore } = useSceneContext();
+    const { products, selectedProduct, getProductById } = productStore();
+    const { analysis } = analysisStore();
+    const product = getProductById(selectedProduct.productName);
     const { getElementById } = simulationDashBoardStore();
     const element = getElementById(selectedBlock, selectedElement);
     const [selectType, setSelectType] = useState("design");
@@ -105,6 +108,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                 </div>
             </div>
 
+            {(element?.type === "graph" || element?.type === "label-value") && (
                 <div className="type-switch">
                     <div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
                         Design
@@ -113,9 +117,11 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                         Data
                     </div>
                 </div>
+            )}
 
             {selectType === "design" && (
                 <>
+                    <div className="design-section">
                         <DataSourceSelector
                             label={"Chart Type"}
                             options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
@@ -139,6 +145,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                             }}
                             showEyeDropper={false}
                         />
+                    </div>
 
                     <div className="design-section">
                         <div className="section-header">Position</div>
@@ -323,6 +330,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
             )}
             {selectType === "data" && (
                 <div className="data-details">
+                    {element?.type === "label-value" && (
                         <div className="data-wrapper">
                             <InputWithDropDown label="Title" value={`title`} placeholder={"Label 1"} min={0.1} step={0.1} max={2} onChange={() => {}} />
                             <div className="data">
@@ -374,8 +382,10 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                 />
                             </div>
                         </div>
-
+                    )}
+                    <>{console.log(element)}</>
                     {/* Data Mapping */}
+                    {element?.type === "graph" && (
                         <div className="data-mapping">
                             <div className="heading">Data Mapping</div>
 
@@ -422,6 +432,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                 </div>
                             )}
                         </div>
+                    )}
                 </div>
             )}
         </div>