From e64ed917842515dd861c1617b6cb4e87a86c0399 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Wed, 17 Dec 2025 11:40:27 +0530
Subject: [PATCH] feat: Enhance ElementEditor with product and analysis store
 integration, conditional rendering for element types, and improved data
 mapping UI

---
 .../components/element/ElementEditor.tsx      | 251 +++++++++---------
 1 file changed, 131 insertions(+), 120 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
index 3424281..946d5f1 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
+++ b/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,40 +108,44 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                 </div>
             </div>
 
-            <div className="type-switch">
-                <div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
-                    Design
+            {(element?.type === "graph" || element?.type === "label-value") && (
+                <div className="type-switch">
+                    <div className={`type ${selectType === "design" ? "active" : ""}`} onClick={() => setSelectType("design")}>
+                        Design
+                    </div>
+                    <div className={`type ${selectType === "data" ? "active" : ""}`} onClick={() => setSelectType("data")}>
+                        Data
+                    </div>
                 </div>
-                <div className={`type ${selectType === "data" ? "active" : ""}`} onClick={() => setSelectType("data")}>
-                    Data
-                </div>
-            </div>
+            )}
 
             {selectType === "design" && (
                 <>
-                    <DataSourceSelector
-                        label={"Chart Type"}
-                        options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
-                        onSelect={(newValue) => {
-                            if (newValue === "Line Chart") {
-                                updateGraphType(selectedBlock, selectedElement, "line");
-                                return;
-                            } else if (newValue === "Bar Chart") {
-                                updateGraphType(selectedBlock, selectedElement, "bar");
-                                return;
-                            } else if (newValue === "Pie Chart") {
-                                updateGraphType(selectedBlock, selectedElement, "pie");
-                                return;
-                            } else if (newValue === "Area Chart") {
-                                updateGraphType(selectedBlock, selectedElement, "area");
-                                return;
-                            } else if (newValue === "Radar Chart") {
-                                updateGraphType(selectedBlock, selectedElement, "radar");
-                                return;
-                            }
-                        }}
-                        showEyeDropper={false}
-                    />
+                    <div className="design-section">
+                        <DataSourceSelector
+                            label={"Chart Type"}
+                            options={["Line Chart", "Bar Chart", "Pie Chart", "Area Chart", "Radar Chart"]}
+                            onSelect={(newValue) => {
+                                if (newValue === "Line Chart") {
+                                    updateGraphType(selectedBlock, selectedElement, "line");
+                                    return;
+                                } else if (newValue === "Bar Chart") {
+                                    updateGraphType(selectedBlock, selectedElement, "bar");
+                                    return;
+                                } else if (newValue === "Pie Chart") {
+                                    updateGraphType(selectedBlock, selectedElement, "pie");
+                                    return;
+                                } else if (newValue === "Area Chart") {
+                                    updateGraphType(selectedBlock, selectedElement, "area");
+                                    return;
+                                } else if (newValue === "Radar Chart") {
+                                    updateGraphType(selectedBlock, selectedElement, "radar");
+                                    return;
+                                }
+                            }}
+                            showEyeDropper={false}
+                        />
+                    </div>
 
                     <div className="design-section">
                         <div className="section-header">Position</div>
@@ -323,105 +330,109 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
             )}
             {selectType === "data" && (
                 <div className="data-details">
-                    <div className="data-wrapper">
-                        <InputWithDropDown label="Title" value={`title`} placeholder={"Label 1"} min={0.1} step={0.1} max={2} onChange={() => {}} />
-                        <div className="data">
-                            <DataDetailedDropdown
-                                title="Data Source"
-                                placeholder="Select assets"
-                                sections={[
-                                    {
-                                        title: "Global",
-                                        items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
-                                    },
-                                    {
-                                        title: "Assets",
-                                        items: [
-                                            { id: "cmm-001", label: "CMM-001", icon: <DeviceIcon /> },
-                                            { id: "cnc-1", label: "CNC-Lathe-0001", icon: <DeviceIcon /> },
-                                            { id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: <DeviceIcon /> },
-                                            { id: "cnc-3", label: "CNC_0001", icon: <DeviceIcon /> },
-                                        ],
-                                    },
-                                ]}
-                                value={null}
-                                onChange={() => {}}
-                                dropDownHeader={"RT-Data"}
-                                eyedroper={true}
-                            />
-                        </div>
+                    {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">
+                                <DataDetailedDropdown
+                                    title="Data Source"
+                                    placeholder="Select assets"
+                                    sections={[
+                                        {
+                                            title: "Global",
+                                            items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
+                                        },
+                                        {
+                                            title: "Assets",
+                                            items: [
+                                                { id: "cmm-001", label: "CMM-001", icon: <DeviceIcon /> },
+                                                { id: "cnc-1", label: "CNC-Lathe-0001", icon: <DeviceIcon /> },
+                                                { id: "cnc-2", label: "CNC-drilling-tapping-3Axis", icon: <DeviceIcon /> },
+                                                { id: "cnc-3", label: "CNC_0001", icon: <DeviceIcon /> },
+                                            ],
+                                        },
+                                    ]}
+                                    value={null}
+                                    onChange={() => {}}
+                                    dropDownHeader={"RT-Data"}
+                                    eyedroper={true}
+                                />
+                            </div>
 
-                        <div className="data">
-                            <DataDetailedDropdown
-                                title="Value"
-                                placeholder="Select Value"
-                                sections={[
-                                    {
-                                        title: "Selected Assets name",
-                                        items: [
-                                            { id: "ambientTemp", label: "ambientTemp", icon: <ParametersIcon /> },
-                                            { id: "measurementDeviation", label: "measurementDeviation", icon: <ParametersIcon /> },
-                                            { id: "powerConsumption", label: "powerConsumption", icon: <ParametersIcon /> },
-                                            { id: "probeX", label: "probePositionX", icon: <ParametersIcon /> },
-                                            { id: "probeY", label: "probePositionY", icon: <ParametersIcon /> },
-                                            { id: "probeZ", label: "probePositionZ", icon: <ParametersIcon /> },
-                                        ],
-                                    },
-                                ]}
-                                value={null}
-                                onChange={() => {}}
-                                dropDownHeader={"RT-Data-Value"}
-                            />
+                            <div className="data">
+                                <DataDetailedDropdown
+                                    title="Value"
+                                    placeholder="Select Value"
+                                    sections={[
+                                        {
+                                            title: "Selected Assets name",
+                                            items: [
+                                                { id: "ambientTemp", label: "ambientTemp", icon: <ParametersIcon /> },
+                                                { id: "measurementDeviation", label: "measurementDeviation", icon: <ParametersIcon /> },
+                                                { id: "powerConsumption", label: "powerConsumption", icon: <ParametersIcon /> },
+                                                { id: "probeX", label: "probePositionX", icon: <ParametersIcon /> },
+                                                { id: "probeY", label: "probePositionY", icon: <ParametersIcon /> },
+                                                { id: "probeZ", label: "probePositionZ", icon: <ParametersIcon /> },
+                                            ],
+                                        },
+                                    ]}
+                                    value={null}
+                                    onChange={() => {}}
+                                    dropDownHeader={"RT-Data-Value"}
+                                />
+                            </div>
                         </div>
-                    </div>
-
+                    )}
+                    <>{console.log(element)}</>
                     {/* Data Mapping */}
-                    <div className="data-mapping">
-                        <div className="heading">Data Mapping</div>
+                    {element?.type === "graph" && (
+                        <div className="data-mapping">
+                            <div className="heading">Data Mapping</div>
 
-                        <div className="type-switch">
-                            <div className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("singleMachine")}>
-                                Single Machine
-                            </div>
-                            <div className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("multipleeMachine")}>
-                                Multiple Machine
-                            </div>
-                        </div>
-
-                        {selectDataMapping === "singleMachine" && (
-                            <div className="fields-wrapper">
-                                {singleFields.map((field) => (
-                                    <DataSourceSelector key={field.id} label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={!!field.showEyeDropper} />
-                                ))}
-
-                                <div className="add-field" onClick={addField}>
-                                    <div className="icon">
-                                        <AddIcon />
-                                    </div>
-                                    <div className="label">Add Field</div>
+                            <div className="type-switch">
+                                <div className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("singleMachine")}>
+                                    Single Machine
+                                </div>
+                                <div className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`} onClick={() => setSelectDataMapping("multipleeMachine")}>
+                                    Multiple Machine
                                 </div>
                             </div>
-                        )}
 
-                        {selectDataMapping === "multipleeMachine" && (
-                            <div className="fields-wrapper">
-                                {multipleFields.map((field) => (
-                                    <div className="datas" key={field.id}>
-                                        <div className="datas__class">
-                                            <DataSourceSelector label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={field.label !== "Common Value"} />
+                            {selectDataMapping === "singleMachine" && (
+                                <div className="fields-wrapper">
+                                    {singleFields.map((field) => (
+                                        <DataSourceSelector key={field.id} label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={!!field.showEyeDropper} />
+                                    ))}
+
+                                    <div className="add-field" onClick={addField}>
+                                        <div className="icon">
+                                            <AddIcon />
                                         </div>
+                                        <div className="label">Add Field</div>
                                     </div>
-                                ))}
-
-                                <div className="add-field" onClick={addField}>
-                                    <div className="icon">
-                                        <AddIcon />
-                                    </div>
-                                    <div className="label">Add Field</div>
                                 </div>
-                            </div>
-                        )}
-                    </div>
+                            )}
+
+                            {selectDataMapping === "multipleeMachine" && (
+                                <div className="fields-wrapper">
+                                    {multipleFields.map((field) => (
+                                        <div className="datas" key={field.id}>
+                                            <div className="datas__class">
+                                                <DataSourceSelector label={field.label} options={["1h", "2h", "12h"]} onSelect={() => {}} showEyeDropper={field.label !== "Common Value"} />
+                                            </div>
+                                        </div>
+                                    ))}
+
+                                    <div className="add-field" onClick={addField}>
+                                        <div className="icon">
+                                            <AddIcon />
+                                        </div>
+                                        <div className="label">Add Field</div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
                 </div>
             )}
         </div>