Feature: Integration of Drag-and-Drop Functionality for Dropout Nodes

tensormap-client/src/Variables.css

@@ -5,6 +5,8 @@
     --input_header: rgb(93, 149, 34);
     --flatten_background: rgb(247, 173, 20);
     --flatten_header: rgb(170, 121, 24);
+    --dropout_background: rgb(103, 247, 103);
+    --dropout_header: rgb(20, 87, 42);
     --node_label_font_color:#ffffff;
     --node_header_font_color:#ffffff;
     --node_border_color:#000000;

tensormap-client/src/components/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Button, Confirm } from 'semantic-ui-react';
+
+export const ButtonGroup = () => {
+
+    const handleDelete = (rowIndex) => {
+        setShowConfirmDelete(true);
+        setModifyRow(rowIndex);
+    };
+
+    const handleConfirmDelete = () => {
+        // Implement delete action here
+        console.log(`Deleting row ${modifyRow}`);
+        // Close the confirmation dialog
+        setShowConfirmDelete(false);
+    };
+
+    const handleCancelDelete = () => {
+        // Close the confirmation dialog
+        setShowConfirmDelete(false);
+    };
+
+    const handleModify = (rowIndex, columnIndex) => {
+        setShowModifyInput(true);
+        setModifyRow(rowIndex);
+        setModifyColumn(columnIndex);
+    };
+
+    const handleModifyConfirm = () => {
+        // Implement modify action here
+        console.log(`Modifying row ${modifyRow} column ${modifyColumn} with value ${modifyValue}`);
+        // Clear modify value and hide input
+        setModifyValue("");
+        setShowModifyInput(false);
+    };
+
+    return (
+        <>
+            <Button.Group>
+                <Button icon="trash" onClick={() => handleDelete(modifyRow)}>Delete</Button>
+                <Button icon="edit" onClick={() => handleModify(modifyRow, modifyColumn)}>Modify</Button>
+            </Button.Group>
+            <Confirm
+                open={showConfirmDelete}
+                onCancel={handleCancelDelete}
+                onConfirm={handleConfirmDelete}
+                content={`Are you sure you want to delete row ${modifyRow + 1}?`}
+            />
+        </>
+    )
+}