From a06768e0f281a7ec4ca97119fde6d895e19fd50d Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Tue, 16 Dec 2025 13:02:15 +0530
Subject: [PATCH] feat: Add data mapping options and improve layout in
 BlockEditor

---
 .../components/block/BlockEditor.tsx          | 140 ++++++++++++------
 .../_simulationDashBoard.scss                 |  17 ++-
 2 files changed, 112 insertions(+), 45 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
index 93b72f7..40269a0 100644
--- a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
@@ -35,6 +35,7 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
 }) => {
 
     const [selectType, setSelectType] = useState("data")
+    const [selectDataMapping, setSelectDataMapping] = useState("singleMachine")
 
     return (
         <div ref={blockEditorRef} className="panel block-editor-panel">
@@ -349,66 +350,121 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
 
                     </div>
 
-                    {/* <div className="data-mapping">
+                    {/* Data Mapping */}
+                    <div className="data-mapping">
                         <div className="heading">Data Mapping</div>
 
                         <div className="type-switch">
                             <div
-                                className={`type active`}
-                                onClick={() => setSelectType("design")}
+                                className={`type ${selectDataMapping === "singleMachine" ? "active" : ""}`}
+                                onClick={() => setSelectDataMapping("singleMachine")}
                             >
                                 Single Machine
                             </div>
                             <div
-                                className={`type`}
-                                onClick={() => setSelectType("data")}
+                                className={`type ${selectDataMapping === "multipleeMachine" ? "active" : ""}`}
+                                onClick={() => setSelectDataMapping("multipleeMachine")}
                             >
                                 Multiple Machine
                             </div>
                         </div>
 
-                        <div className="fields-wrapper">
-                            <div className="datas">
-                                <div className="datas__label">Data Source</div>
-                                <div className="datas__class">
-                                    <RegularDropDown
-                                        header={"Select value"}
-                                        options={["1h", "2h", "12h"]}
-                                        onSelect={() => { }}
-                                        search={false}
-                                    />
+                        {selectDataMapping === "singleMachine" && (
+                            <div className="fields-wrapper">
+                                <div className="datas">
+                                    <div className="datas__label">Data Source</div>
+                                    <div className="datas__class">
+                                        <RegularDropDown
+                                            header={"Select value"}
+                                            options={["1h", "2h", "12h"]}
+                                            onSelect={() => { }}
+                                            search={false}
+                                        />
+                                        <div className="icon"><EyeDroperIcon isActive={false} /></div>
+                                    </div>
                                 </div>
-                            </div>
-                            <div className="datas">
-                                <div className="datas__label">Input 1</div>
-                                <div className="datas__class">
-                                    <RegularDropDown
-                                        header={"Select value"}
-                                        options={["1h", "2h", "12h"]}
-                                        onSelect={() => { }}
-                                        search={false}
-                                    />
+                                <div className="datas">
+                                    <div className="datas__label">Input 1</div>
+                                    <div className="datas__class">
+                                        <RegularDropDown
+                                            header={"Select value"}
+                                            options={["1h", "2h", "12h"]}
+                                            onSelect={() => { }}
+                                            search={false}
+                                        />
+                                    </div>
                                 </div>
-                            </div>
-                            <div className="datas">
-                                <div className="datas__label">Input 2</div>
-                                <div className="datas__class">
-                                    <RegularDropDown
-                                        header={"Select value"}
-                                        options={["1h", "2h", "12h"]}
-                                        onSelect={() => { }}
-                                        search={false}
-                                    />
+                                <div className="datas">
+                                    <div className="datas__label">Input 2</div>
+                                    <div className="datas__class">
+                                        <RegularDropDown
+                                            header={"Select value"}
+                                            options={["1h", "2h", "12h"]}
+                                            onSelect={() => { }}
+                                            search={false}
+                                        />
+                                    </div>
                                 </div>
-                            </div>
 
-                            <div className="add-field">
-                                <div className="icon"><AddIcon /></div>
-                                <div className="label">Add Field</div>
-                            </div>
+                                <div className="add-field">
+                                    <div className="icon"><AddIcon /></div>
+                                    <div className="label">Add Field</div>
+                                </div>
 
-                        </div>
-                    </div> */}
+                            </div>
+                        )}
+
+                        {selectDataMapping === "multipleeMachine" && (
+                            <div className="fields-wrapper">
+                                <div className="datas">
+                                    <div className="datas__label">Common Value</div>
+                                    <div className="datas__class">
+                                        <RegularDropDown
+                                            header={"Select value"}
+                                            options={["1h", "2h", "12h"]}
+                                            onSelect={() => { }}
+                                            search={false}
+                                        />
+                                    </div>
+                                </div>
+                                <div className="datas">
+                                    <div className="datas__label">Data Source</div>
+                                    <div className="datas__class">
+                                        <RegularDropDown
+                                            header={"Select assets"}
+                                            options={["1h", "2h", "12h"]}
+                                            onSelect={() => { }}
+                                            search={false}
+                                        />
+                                        <div className="icon"><EyeDroperIcon isActive={false} /></div>
+
+                                    </div>
+                                </div>
+                                <div className="datas">
+                                    <div className="datas__label">Data Source</div>
+                                    <div className="datas__class">
+                                        <RegularDropDown
+                                            header={"Select assets"}
+                                            options={["1h", "2h", "12h"]}
+                                            onSelect={() => { }}
+                                            search={false}
+                                        />
+                                        <div className="icon"><EyeDroperIcon isActive={false} /></div>
+
+                                    </div>
+                                </div>
+
+
+                                <div className="add-field">
+                                    <div className="icon"><AddIcon /></div>
+                                    <div className="label">Add Field</div>
+                                </div>
+
+                            </div>
+                        )}
+
+
+                    </div>
                 </div>
             )}
         </div>
diff --git a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
index fcf21c5..bd0dd7c 100644
--- a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
+++ b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
@@ -318,8 +318,8 @@
             min-width: 280px;
             height: fit-content;
             min-width: 320px;
-            min-height: 70vh;
-            padding: 20px 8px;
+            min-height: 60vh;
+            padding: 12px;
             // h4 {
             //     color: #4caf50;
             // }
@@ -402,12 +402,23 @@
                         .datas {
                             width: 100%;
                             display: flex;
+                            align-items: center;
                             padding: 6px 12px;
 
                             .datas__label,
                             .datas__class {
                                 flex: 1;
                             }
+
+                            .datas__label {
+                                flex: 0.8;
+                            }
+
+                            .datas__class {
+                                display: flex;
+                                align-items: center;
+                                gap: 4px;
+                            }
                         }
 
                         .add-field {
@@ -746,7 +757,7 @@
                     justify-content: space-between;
                     align-items: center;
 
-                    .data-section-count{
+                    .data-section-count {
                         font-size: 10px;
                     }
                 }