From e35eaa5348359b9cb84150f0bfbc01ad6a27c084 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Mon, 22 Dec 2025 10:49:33 +0530
Subject: [PATCH] feat: Add ElementData component to manage UI element data
 binding and selection for the simulation dashboard.

---
 .../components/element/ElementData.tsx        | 47 ++++++++++++++-----
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/element/ElementData.tsx b/app/src/components/SimulationDashboard/components/element/ElementData.tsx
index 2211e5e..cf4c95b 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementData.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementData.tsx
@@ -65,6 +65,25 @@ const ElementData: React.FC<ElementDataProps> = ({
         }
     };
 
+    const getFilteredOptions = (allOptions: Array<{ id: string; label: string }>, currentValues: string | string[] | undefined, currentIndex: number) => {
+        const valuesArray = Array.isArray(currentValues) ? currentValues : currentValues ? [currentValues] : [];
+
+        return allOptions.filter((option) => {
+            // Include logic:
+            // 1. If this option is the one currently selected for this index, keep it.
+            // 2. If this option is selected in another index, exclude it.
+            const isSelectedHere = valuesArray[currentIndex] === option.id;
+            const isSelectedElsewhere = valuesArray.includes(option.id) && !isSelectedHere;
+
+            return !isSelectedElsewhere;
+        });
+    };
+
+    const assetDropdownItems = getAssetDropdownItems();
+    const labelValueDropdownSections = getLableValueDropdownItems(element?.dataBinding?.dataSource as string | undefined);
+    const totalValueOptions = labelValueDropdownSections.flatMap((s) => s.items).length;
+    const totalAssetOptions = assetDropdownItems.length;
+
     return (
         <div className="data-details">
             {element?.type === "label-value" && (
@@ -177,7 +196,7 @@ const ElementData: React.FC<ElementDataProps> = ({
                                 <DataSourceSelector
                                     key={field.id}
                                     label={field.label}
-                                    options={field.options}
+                                    options={getFilteredOptions(field.options, element.dataBinding?.dataValue, index)}
                                     selected={field.options.find((option) => option.id === element.dataBinding?.dataValue?.[index])?.label ?? ""}
                                     onSelect={(value) => {
                                         const currentDataValue = Array.isArray(element.dataBinding?.dataValue)
@@ -208,12 +227,14 @@ const ElementData: React.FC<ElementDataProps> = ({
                                 />
                             ))}
 
-                            <div className="add-field" onClick={addField}>
-                                <div className="icon">
-                                    <AddIcon />
+                            {singleValueFields.length < totalValueOptions && (
+                                <div className="add-field" onClick={addField}>
+                                    <div className="icon">
+                                        <AddIcon />
+                                    </div>
+                                    <div className="label">Add Field</div>
                                 </div>
-                                <div className="label">Add Field</div>
-                            </div>
+                            )}
                         </div>
                     )}
 
@@ -238,7 +259,7 @@ const ElementData: React.FC<ElementDataProps> = ({
                                 <DataSourceSelector
                                     key={field.id}
                                     label={field.label}
-                                    options={field.options}
+                                    options={getFilteredOptions(field.options, element.dataBinding?.dataSource, index)}
                                     selected={getEventByModelUuid(selectedProduct.productUuid, (element.dataBinding?.dataSource as string[])?.[index] || "")?.modelName ?? ""}
                                     onSelect={(value) => {
                                         const current = Array.isArray(element.dataBinding?.dataSource)
@@ -269,12 +290,14 @@ const ElementData: React.FC<ElementDataProps> = ({
                                 />
                             ))}
 
-                            <div className="add-field" onClick={addField}>
-                                <div className="icon">
-                                    <AddIcon />
+                            {multipleSourceFields.length < totalAssetOptions && (
+                                <div className="add-field" onClick={addField}>
+                                    <div className="icon">
+                                        <AddIcon />
+                                    </div>
+                                    <div className="label">Add Field</div>
                                 </div>
-                                <div className="label">Add Field</div>
-                            </div>
+                            )}
                         </div>
                     )}
                 </div>