From a4f74b70ed49b943b1c8ac769a23e2734f1e9ddc Mon Sep 17 00:00:00 2001
From: Miguel <miguel.vera.csa@gmail.com>
Date: Fri, 15 Aug 2025 22:31:25 +0200
Subject: [PATCH] feat: Add confirmation dialog for deletion operations,
 enhance logging in symbol processor, and update button color schemes

---
 application_events.json                       |  11 +-
 frontend/src/components/PlotManager.jsx       |   4 +-
 frontend/src/components/PlotManagerSimple.jsx | 104 ++++++++++++++++--
 .../src/components/PlotRealtimeSession.jsx    |   8 --
 frontend/src/pages/Dashboard.jsx              | 104 ++++++++++++++++--
 utils/symbol_processor.py                     |  24 ++--
 6 files changed, 215 insertions(+), 40 deletions(-)

diff --git a/application_events.json b/application_events.json
index 7b1d5dc..16e5527 100644
--- a/application_events.json
+++ b/application_events.json
@@ -8138,8 +8138,15 @@
         "active_datasets_count": 3,
         "csv_recording_active": false
       }
+    },
+    {
+      "timestamp": "2025-08-15T21:25:51.900870",
+      "level": "info",
+      "event_type": "application_started",
+      "message": "Application initialization completed successfully",
+      "details": {}
     }
   ],
-  "last_updated": "2025-08-15T21:03:44.900837",
-  "total_entries": 675
+  "last_updated": "2025-08-15T21:25:51.900870",
+  "total_entries": 676
 }
\ No newline at end of file
diff --git a/frontend/src/components/PlotManager.jsx b/frontend/src/components/PlotManager.jsx
index 63231da..cba91c1 100644
--- a/frontend/src/components/PlotManager.jsx
+++ b/frontend/src/components/PlotManager.jsx
@@ -49,7 +49,7 @@ import * as api from '../services/api'
 
 // Collapsible Form Component for Plot Definitions
 function CollapsiblePlotForm({ data, schema, uiSchema, onSave, title, icon, getItemLabel }) {
-    const [isOpen, setIsOpen] = useState(false)
+    const [isOpen, setIsOpen] = useState(true)
     const [formData, setFormData] = useState(data)
 
     useEffect(() => {
@@ -577,7 +577,7 @@ export default function PlotManager() {
                                                         <HStack spacing={2} mt={4}>
                                                             <Button 
                                                                 type="submit" 
-                                                                colorScheme="blue"
+                                                                colorScheme="red"
                                                                 isLoading={actionLoading.savePlotsVariables}
                                                                 loadingText="Saving..."
                                                             >
diff --git a/frontend/src/components/PlotManagerSimple.jsx b/frontend/src/components/PlotManagerSimple.jsx
index a1c18d9..0381ddd 100644
--- a/frontend/src/components/PlotManagerSimple.jsx
+++ b/frontend/src/components/PlotManagerSimple.jsx
@@ -23,7 +23,16 @@ import {
     Collapse,
     useDisclosure,
     Spinner,
-    Select
+    Select,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    Alert,
+    AlertIcon
 } from '@chakra-ui/react'
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
 import Form from '@rjsf/chakra-ui'
@@ -34,10 +43,57 @@ import PlotRealtimeSession from './PlotRealtimeSession'
 import { useVariableContext } from '../contexts/VariableContext'
 import * as api from '../services/api'
 
+// Confirmation Dialog Component for deletion operations
+function ConfirmationDialog({ isOpen, onClose, onConfirm, title, message, itemName, confirmButtonText = "Delete" }) {
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} isCentered>
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader>
+                    <Flex align="center">
+                        <Box mr={3} fontSize="2xl">⚠️</Box>
+                        {title}
+                    </Flex>
+                </ModalHeader>
+                <ModalCloseButton />
+                <ModalBody>
+                    <VStack spacing={3} align="stretch">
+                        <Text>
+                            {message}
+                        </Text>
+                        {itemName && (
+                            <Box p={3} bg="gray.50" borderRadius="md" borderLeft="4px solid" borderColor="red.400">
+                                <Text fontWeight="bold" color="red.600">
+                                    Item to delete: "{itemName}"
+                                </Text>
+                            </Box>
+                        )}
+                        <Alert status="warning" borderRadius="md">
+                            <AlertIcon />
+                            <Text fontSize="sm">
+                                This action cannot be undone. Make sure you want to proceed.
+                            </Text>
+                        </Alert>
+                    </VStack>
+                </ModalBody>
+                <ModalFooter>
+                    <Button variant="outline" mr={3} onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button colorScheme="red" onClick={onConfirm}>
+                        🗑️ {confirmButtonText}
+                    </Button>
+                </ModalFooter>
+            </ModalContent>
+        </Modal>
+    )
+}
+
 // Collapsible Plot Items Form - Each item in the array is individually collapsible
 function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon, getItemLabel, isExpanded, onToggleExpansion }) {
     const [formData, setFormData] = useState(data)
     const [expandedItems, setExpandedItems] = useState(new Set())
+    const [confirmDelete, setConfirmDelete] = useState({ isOpen: false, index: null, itemName: '' })
 
     useEffect(() => {
         // Solo actualizar formData si data realmente cambió en contenido
@@ -98,6 +154,28 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
             else if (i > index) newExpanded.add(i - 1)
         })
         setExpandedItems(newExpanded)
+        // Close confirmation dialog
+        setConfirmDelete({ isOpen: false, index: null, itemName: '' })
+    }
+
+    const handleDeleteClick = (index) => {
+        const item = items[index]
+        const itemName = getItemLabel ? getItemLabel(item) : (item.name || item.id || `Item ${index + 1}`)
+        setConfirmDelete({ 
+            isOpen: true, 
+            index, 
+            itemName 
+        })
+    }
+
+    const handleConfirmDelete = () => {
+        if (confirmDelete.index !== null) {
+            removeItem(confirmDelete.index)
+        }
+    }
+
+    const handleCancelDelete = () => {
+        setConfirmDelete({ isOpen: false, index: null, itemName: '' })
     }
 
     const saveChanges = async () => {
@@ -141,7 +219,7 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
                         <Button size="sm" colorScheme="green" onClick={addItem}>
                             ➕ Add Item
                         </Button>
-                        <Button size="sm" colorScheme="blue" onClick={saveChanges}>
+                        <Button size="sm" colorScheme="red" onClick={saveChanges}>
                             💾 Save All
                         </Button>
                     </HStack>
@@ -186,7 +264,8 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
                                                         size="xs"
                                                         colorScheme="red"
                                                         variant="ghost"
-                                                        onClick={() => removeItem(index)}
+                                                        onClick={() => handleDeleteClick(index)}
+                                                        title="Delete this item"
                                                     >
                                                         🗑️
                                                     </Button>
@@ -251,7 +330,8 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
                                                     size="xs"
                                                     colorScheme="red"
                                                     variant="ghost"
-                                                    onClick={() => removeItem(index)}
+                                                    onClick={() => handleDeleteClick(index)}
+                                                    title="Delete this item"
                                                 >
                                                     🗑️
                                                 </Button>
@@ -280,6 +360,17 @@ function CollapsiblePlotItemsForm({ data, schema, uiSchema, onSave, title, icon,
                     )}
                 </CardBody>
             )}
+            
+            {/* Confirmation Dialog for Deletion */}
+            <ConfirmationDialog
+                isOpen={confirmDelete.isOpen}
+                onClose={handleCancelDelete}
+                onConfirm={handleConfirmDelete}
+                title={`Delete ${title.replace(/📊|📋|⚙️|📈|🗂️/g, '').trim()} Item`}
+                message={`Are you sure you want to delete this ${title.toLowerCase().replace(/📊|📋|⚙️|📈|🗂️/g, '').trim()} item?`}
+                itemName={confirmDelete.itemName}
+                confirmButtonText="Delete Item"
+            />
         </Card>
     )
 }
@@ -306,9 +397,6 @@ function CollapsiblePlotChart({ plotDefinition, plotVariables, onConfigUpdate, o
                         >
                             {isExpanded ? 'Hide' : 'Show'} Chart
                         </Button>
-                        <Button size="xs" colorScheme="red" variant="outline" onClick={() => onRemove(plotDefinition.id)}>
-                            ❌
-                        </Button>
                     </HStack>
                 </Flex>
             </CardHeader>
@@ -768,7 +856,7 @@ export default function PlotManager() {
                                             onChange={({ formData }) => updateSelectedPlotVariables(formData)}
                                         >
                                             <HStack spacing={2} mt={4}>
-                                                <Button type="submit" colorScheme="blue">
+                                                <Button type="submit" colorScheme="red">
                                                     💾 Save Variables for {selectedPlotId}
                                                 </Button>
                                                 <Button variant="outline" onClick={loadPlotData}>
diff --git a/frontend/src/components/PlotRealtimeSession.jsx b/frontend/src/components/PlotRealtimeSession.jsx
index 6eb0bf0..c468335 100644
--- a/frontend/src/components/PlotRealtimeSession.jsx
+++ b/frontend/src/components/PlotRealtimeSession.jsx
@@ -550,14 +550,6 @@ export default function PlotRealtimeSession({
                             aria-label="Settings"
                             onClick={() => setShowSettings(!showSettings)}
                         />
-                        <Button
-                            size="sm"
-                            colorScheme="red"
-                            variant="ghost"
-                            onClick={() => onRemove?.(plotDefinition.id)}
-                        >
-                            ❌
-                        </Button>
                     </HStack>
                 </HStack>
             </CardHeader>
diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx
index 8b220d0..4f17a0a 100644
--- a/frontend/src/pages/Dashboard.jsx
+++ b/frontend/src/pages/Dashboard.jsx
@@ -43,7 +43,14 @@ import {
     AccordionButton,
     AccordionPanel,
     Collapse,
-    useDisclosure
+    useDisclosure,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton
 } from '@chakra-ui/react'
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
 import Form from '@rjsf/chakra-ui'
@@ -56,10 +63,57 @@ import { VariableProvider, useVariableContext } from '../contexts/VariableContex
 import * as api from '../services/api'
 import { useCoordinatedPolling } from '../hooks/useCoordinatedConnection'
 
+// Confirmation Dialog Component for deletion operations
+function ConfirmationDialog({ isOpen, onClose, onConfirm, title, message, itemName, confirmButtonText = "Delete" }) {
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} isCentered>
+            <ModalOverlay />
+            <ModalContent>
+                <ModalHeader>
+                    <Flex align="center">
+                        <Box mr={3} fontSize="2xl">⚠️</Box>
+                        {title}
+                    </Flex>
+                </ModalHeader>
+                <ModalCloseButton />
+                <ModalBody>
+                    <VStack spacing={3} align="stretch">
+                        <Text>
+                            {message}
+                        </Text>
+                        {itemName && (
+                            <Box p={3} bg="gray.50" borderRadius="md" borderLeft="4px solid" borderColor="red.400">
+                                <Text fontWeight="bold" color="red.600">
+                                    Item to delete: "{itemName}"
+                                </Text>
+                            </Box>
+                        )}
+                        <Alert status="warning" borderRadius="md">
+                            <AlertIcon />
+                            <Text fontSize="sm">
+                                This action cannot be undone. Make sure you want to proceed.
+                            </Text>
+                        </Alert>
+                    </VStack>
+                </ModalBody>
+                <ModalFooter>
+                    <Button variant="outline" mr={3} onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button colorScheme="red" onClick={onConfirm}>
+                        🗑️ {confirmButtonText}
+                    </Button>
+                </ModalFooter>
+            </ModalContent>
+        </Modal>
+    )
+}
+
 // Collapsible Array Items Form - Each item in the array is individually collapsible
 function CollapsibleArrayItemsForm({ data, schema, uiSchema, onSave, title, icon, getItemLabel }) {
     const [formData, setFormData] = useState(data)
     const [expandedItems, setExpandedItems] = useState(new Set())
+    const [confirmDelete, setConfirmDelete] = useState({ isOpen: false, index: null, itemName: '' })
 
     useEffect(() => {
         setFormData(data)
@@ -117,6 +171,28 @@ function CollapsibleArrayItemsForm({ data, schema, uiSchema, onSave, title, icon
             else if (i > index) newExpanded.add(i - 1)
         })
         setExpandedItems(newExpanded)
+        // Close confirmation dialog
+        setConfirmDelete({ isOpen: false, index: null, itemName: '' })
+    }
+
+    const handleDeleteClick = (index) => {
+        const item = items[index]
+        const itemName = getItemLabel ? getItemLabel(item) : (item.name || item.id || `Item ${index + 1}`)
+        setConfirmDelete({ 
+            isOpen: true, 
+            index, 
+            itemName 
+        })
+    }
+
+    const handleConfirmDelete = () => {
+        if (confirmDelete.index !== null) {
+            removeItem(confirmDelete.index)
+        }
+    }
+
+    const handleCancelDelete = () => {
+        setConfirmDelete({ isOpen: false, index: null, itemName: '' })
     }
 
     const saveChanges = () => {
@@ -144,7 +220,7 @@ function CollapsibleArrayItemsForm({ data, schema, uiSchema, onSave, title, icon
                         <Button size="sm" colorScheme="green" onClick={addItem}>
                             ➕ Add Item
                         </Button>
-                        <Button size="sm" colorScheme="blue" onClick={saveChanges}>
+                        <Button size="sm" colorScheme="red" onClick={saveChanges}>
                             💾 Save All
                         </Button>
                     </HStack>
@@ -186,7 +262,8 @@ function CollapsibleArrayItemsForm({ data, schema, uiSchema, onSave, title, icon
                                                 size="xs"
                                                 colorScheme="red"
                                                 variant="ghost"
-                                                onClick={() => removeItem(index)}
+                                                onClick={() => handleDeleteClick(index)}
+                                                title="Delete this item"
                                             >
                                                 🗑️
                                             </Button>
@@ -214,6 +291,17 @@ function CollapsibleArrayItemsForm({ data, schema, uiSchema, onSave, title, icon
                     </VStack>
                 )}
             </CardBody>
+            
+            {/* Confirmation Dialog for Deletion */}
+            <ConfirmationDialog
+                isOpen={confirmDelete.isOpen}
+                onClose={handleCancelDelete}
+                onConfirm={handleConfirmDelete}
+                title={`Delete ${title.replace(/📊|📋|⚙️|📈|🗂️/g, '').trim()} Item`}
+                message={`Are you sure you want to delete this ${title.toLowerCase().replace(/📊|📋|⚙️|📈|🗂️/g, '').trim()} item?`}
+                itemName={confirmDelete.itemName}
+                confirmButtonText="Delete Item"
+            />
         </Card>
     )
 }
@@ -615,7 +703,7 @@ function ConfigurationPanel({ schemaData, formData, onFormChange, onSave, saving
                 )}
             </CardHeader>
             <CardBody>
-                <Form
+                <Form                    
                     schema={schemaData.schema}
                     uiSchema={schemaData.uiSchema}
                     formData={formData}
@@ -627,8 +715,8 @@ function ConfigurationPanel({ schemaData, formData, onFormChange, onSave, saving
                 >
                     <HStack spacing={2} mt={4}>
                         <Button 
-                            type="submit" 
-                            colorScheme="blue"
+                            type="submit"                             
+                            colorScheme="red"
                             isLoading={saving}
                             loadingText="Saving..."
                         >
@@ -1145,7 +1233,7 @@ function DatasetManager() {
                                             }}
                                         >
                                             <HStack spacing={2} mt={4}>
-                                                <Button type="submit" colorScheme="blue">
+                                                <Button type="submit" colorScheme="red">
                                                     💾 Save Variables for {selectedDatasetId}
                                                 </Button>
                                                 <Button variant="outline" onClick={loadDatasetData}>
@@ -1351,7 +1439,7 @@ function DashboardContent() {
 
                 <StatusBar status={status} isConnected={isConnected} isLeader={isLeader} />
 
-                <Tabs variant="enclosed" colorScheme="blue">
+                <Tabs variant="enclosed" colorScheme="orange" defaultIndex={2}>
                     <TabList>
                         <Tab>🔧 Configuration</Tab>
                         <Tab>📊 Datasets</Tab>
diff --git a/utils/symbol_processor.py b/utils/symbol_processor.py
index 2ed52f3..5fe3d66 100644
--- a/utils/symbol_processor.py
+++ b/utils/symbol_processor.py
@@ -34,11 +34,11 @@ class SymbolProcessor:
 
                 if self.logger:
                     # Check if logger is EventLogger (has log_event method) or standard logger
-                    if hasattr(self.logger, 'log_event'):
+                    if hasattr(self.logger, "log_event"):
                         self.logger.log_event(
-                            'info',
-                            'symbols_loaded',
-                            f"Loaded {len(self._symbols_cache.get('symbols', []))} symbols"
+                            "info",
+                            "symbols_loaded",
+                            f"Loaded {len(self._symbols_cache.get('symbols', []))} symbols",
                         )
                     else:
                         self.logger.info(
@@ -48,11 +48,11 @@ class SymbolProcessor:
             except Exception as e:
                 if self.logger:
                     # Check if logger is EventLogger (has log_event method) or standard logger
-                    if hasattr(self.logger, 'log_event'):
+                    if hasattr(self.logger, "log_event"):
                         self.logger.log_event(
-                            'error',
-                            'symbols_load_error',
-                            f"Error loading symbols: {str(e)}"
+                            "error",
+                            "symbols_load_error",
+                            f"Error loading symbols: {str(e)}",
                         )
                     else:
                         self.logger.error(f"Error loading symbols: {str(e)}")
@@ -98,11 +98,11 @@ class SymbolProcessor:
         if not symbol:
             if self.logger:
                 # Check if logger is EventLogger (has log_event method) or standard logger
-                if hasattr(self.logger, 'log_event'):
+                if hasattr(self.logger, "log_event"):
                     self.logger.log_event(
-                        'warning',
-                        'symbol_not_found',
-                        f"Symbol '{symbol_name}' not found"
+                        "warning",
+                        "symbol_not_found",
+                        f"Symbol '{symbol_name}' not found",
                     )
                 else:
                     self.logger.warning(f"Symbol '{symbol_name}' not found")