feat: Add delete functionality to DataSourceSelector and ElementEditor components

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

@@ -620,7 +620,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                             showEyeDropper={field.showEyeDropper}
                                         />
                                     ))}
-
+                                    {/* add delete */}
                                     {singleValueFields.map((field, index) => (
                                         <DataSourceSelector
                                             key={field.id}
@@ -636,6 +636,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                                 updateDataValue(selectedBlock, selectedElement, newDataValue);
                                             }}
                                             showEyeDropper={field.showEyeDropper}
+                                            showDeleteBtn={true}
+                                            onDelete={() => {
+                                                const current = Array.isArray(element.dataBinding?.dataValue) ? element.dataBinding!.dataValue : [];
+                                                const next = [...current];
+                                                next.splice(index, 1);
+                                                updateDataValue(selectedBlock, selectedElement, next);
+                                            }}
                                         />
                                     ))}
 
@@ -662,7 +669,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                             showEyeDropper={field.showEyeDropper}
                                         />
                                     ))}
-
+                                    {/* add delete */}
                                     {multipleSourceFields.map((field, index) => (
                                         <DataSourceSelector
                                             key={field.id}
@@ -678,6 +685,13 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
                                                 updateDataSource(selectedBlock, selectedElement, next);
                                             }}
                                             showEyeDropper={field.showEyeDropper}
+                                            showDeleteBtn={true}
+                                            onDelete={() => {
+                                                const current = Array.isArray(element.dataBinding?.dataSource) ? element.dataBinding!.dataSource : [];
+                                                const next = [...current];
+                                                next.splice(index, 1);
+                                                updateDataSource(selectedBlock, selectedElement, next);
+                                            }}
                                         />
                                     ))}
 

app/src/components/ui/inputs/DataSourceSelector.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
 import RegularDropDownID from "./RegularDropDownID";
+import { DeleteIcon } from "../../icons/ContextMenuIcons";
 
 type DataSourceSelectorProps = {
     label?: string;
@@ -12,9 +13,11 @@ type DataSourceSelectorProps = {
     onSelect: (value: { id: string; label: string }) => void;
     eyeDropperActive?: boolean; // initial state
     showEyeDropper?: boolean;
+    showDeleteBtn?: boolean;
+    onDelete?: () => void;
 };
 
-const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data Source", options, selected, onSelect, showEyeDropper = true }) => {
+const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data Source", options, selected, onSelect, showEyeDropper = true, showDeleteBtn, onDelete }) => {
     // Local state to toggle EyeDropper
     const [isEyeActive, setIsEyeActive] = useState(false);
 
@@ -31,6 +34,12 @@ const DataSourceSelector: React.FC<DataSourceSelectorProps> = ({ label = "Data S
                         <EyeDroperIcon isActive={isEyeActive} />
                     </div>
                 )}
+
+                {showDeleteBtn && (
+                    <div className="delete" onClick={() => onDelete?.()} style={{ cursor: onDelete ? "pointer" : "default" }}>
+                        <DeleteIcon />
+                    </div>
+                )}
             </div>
         </div>
     );

app/src/styles/components/simulationDashboard/_simulationDashBoard.scss

@@ -287,6 +287,7 @@
             justify-content: center;
             align-items: center;
             z-index: 100;
+
             svg {
                 cursor: grab;
             }
@@ -651,6 +652,7 @@
                                 display: flex;
                                 padding: 3px;
                                 border-radius: 2px;
+                                cursor: pointer;
 
                                 &.active {
 
@@ -658,6 +660,10 @@
                                 }
                             }
 
+                            .delete {
+                                cursor: pointer;
+                            }
+
                             .regularDropdown-container {
                                 .icon {
                                     padding: 0;
@@ -696,6 +702,7 @@
             position: fixed;
             top: 80px;
             right: 40px;
+
             .appearance {
                 .design-datas-wrapper {