From 98cfc033c1c1e79da52248733ed7f13e977a6b48 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Wed, 17 Dec 2025 14:21:31 +0530
Subject: [PATCH] feat: Add dropdown item retrieval for asset-specific and
 common values in ElementEditor

---
 .../components/element/ElementEditor.tsx      | 86 +++++++++++++------
 1 file changed, 61 insertions(+), 25 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
index edac1c1..6323976 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
@@ -272,6 +272,40 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
         [product]
     );
 
+    // Get value dropdown items for a specific asset
+    const getValueDropdownItems = useCallback(
+        (assetId: string | undefined) => {
+            if (!product || !assetId || assetId === "global") return [];
+
+            const assetAnalysis = product?.eventDatas.find((e) => e.modelUuid === assetId);
+            if (!assetAnalysis) return [];
+
+            // Return all available metrics for the asset
+            return getLableValueDropdownItems(assetId).flatMap((section) =>
+                section.items.map((item) => ({
+                    id: item.id,
+                    label: item.label,
+                    icon: item.icon,
+                }))
+            );
+        },
+        [product, getLableValueDropdownItems]
+    );
+
+    // Get common value dropdown items (available across all assets)
+    const getCommonValueDropdownItems = useCallback(() => {
+        const commonItems = [
+            { id: "timeMetrics.uptime", label: "Uptime", icon: <ParametersIcon /> },
+            { id: "timeMetrics.utilizationRate", label: "Utilization Rate", icon: <ParametersIcon /> },
+            { id: "efficiency.overallEffectiveness", label: "Overall Effectiveness", icon: <ParametersIcon /> },
+            { id: "quality.successRate", label: "Success Rate", icon: <ParametersIcon /> },
+            { id: "throughput.itemsPerHour", label: "Items Per Hour", icon: <ParametersIcon /> },
+            { id: "costMetrics.operatingCost", label: "Operating Cost", icon: <ParametersIcon /> },
+            { id: "energyMetrics.energyConsumed", label: "Energy Consumed", icon: <ParametersIcon /> },
+        ];
+        return commonItems;
+    }, []);
+
     const addField = () => {
         if (selectDataMapping === "singleMachine") {
             setSingleFields((prev) => [
@@ -321,31 +355,33 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
 
             {selectType === "design" && (
                 <>
-                    <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>
+                    {element?.type === "graph" && (
+                        <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>