diff --git a/.doc/MemoriaDeEvolucion.md b/.doc/MemoriaDeEvolucion.md index 7fd9a34..7ecb28f 100644 --- a/.doc/MemoriaDeEvolucion.md +++ b/.doc/MemoriaDeEvolucion.md @@ -1,414 +1,17 @@ -# Memoria de Evolución - PLC S7 Streamer & Logger +Solicitud (resumen): "En el Dashboard, quiero que la configuración del PLC esté arriba de los datasets (mencionado en @App.jsx)." -## Refactorización de Esquemas - Separación de Definiciones y Variables +Cambio aplicado: +- Se ajustó el orden de renderizado de secciones en `frontend/src/pages/Dashboard.jsx` para priorizar `plc` por encima de `dataset-definitions` y `dataset-variables`. +- Implementado con `useMemo` que ordena los IDs usando `preferredOrder = ['plc', 'dataset-definitions', 'dataset-variables']`. -**Solicitud del Usuario:** Modificar los esquemas de datasets y plots para separar la definición de los grupos de datos de las variables asignadas a cada uno. +Motivación/decisión: +- Priorizar la configuración del PLC en la vista Dashboard para que quede por encima de los datasets. +- Comentarios y variables del código en inglés. -### Cambios Realizados +Impacto: +- La sección de configuración del PLC se muestra primero en el Dashboard. -#### 1. Nuevos Esquemas Separados - -Se crearon 4 nuevos esquemas para reemplazar los 2 originales: - -**Datasets:** -- `dataset-definitions.schema.json`: Solo metadatos del dataset (name, prefix, sampling_interval, enabled, created) -- `dataset-variables.schema.json`: Variables y streaming_variables asignadas a cada dataset - -**Plots:** -- `plot-definitions.schema.json`: Solo metadatos del plot (name, time_window, y_min, y_max, trigger_config, session_id) -- `plot-variables.schema.json`: Variables asignadas a cada plot - -#### 2. Nuevos Archivos de Datos - -Se crearon archivos de datos separados: -- `config/data/dataset_definitions.json` -- `config/data/dataset_variables.json` -- `config/data/plot_definitions.json` -- `config/data/plot_variables.json` - -Los datos se migraron desde los archivos originales: -- `plc_datasets.json` -> dataset_definitions.json + dataset_variables.json -- `plot_sessions.json` -> plot_definitions.json + plot_variables.json - -#### 3. UI Schemas Correspondientes - -Se crearon UI schemas para cada nuevo esquema: -- `config/schema/ui/dataset-definitions.uischema.json` -- `config/schema/ui/dataset-variables.uischema.json` -- `config/schema/ui/plot-definitions.uischema.json` -- `config/schema/ui/plot-variables.uischema.json` - -#### 4. Refactorización del Backend - -**ConfigSchemaManager actualizado:** -- Agregado mapeo de nuevos config_ids en `config_files` -- Implementada lógica de lectura para los nuevos esquemas en `read_config()` -- Implementada lógica de escritura para los nuevos esquemas en `write_config()` -- Agregado soporte de exportación en `export_config()` - -**Compatibilidad:** -- Se mantiene compatibilidad con esquemas legacy (datasets, plots) -- Los nuevos esquemas se cargan automáticamente del directorio config/schema/ - -#### 5. Beneficios de la Separación - -**Mejor Organización:** -- Separación clara entre metadatos y datos -- Schemas más enfocados y específicos -- Facilita la validación independiente - -**Flexibilidad:** -- Permite editar definiciones sin afectar variables -- Facilita la gestión por separado de cada aspecto -- Mejor escalabilidad para futuras funcionalidades - -**Mantenimiento:** -- Schemas más pequeños y manejables -- Validación más granular -- Menos acoplamiento entre componentes - -### Archivos Afectados - -**Nuevos Archivos:** -- `config/schema/dataset-definitions.schema.json` -- `config/schema/dataset-variables.schema.json` -- `config/schema/plot-definitions.schema.json` -- `config/schema/plot-variables.schema.json` -- `config/data/dataset_definitions.json` -- `config/data/dataset_variables.json` -- `config/data/plot_definitions.json` -- `config/data/plot_variables.json` -- `config/schema/ui/dataset-definitions.uischema.json` -- `config/schema/ui/dataset-variables.uischema.json` -- `config/schema/ui/plot-definitions.uischema.json` -- `config/schema/ui/plot-variables.uischema.json` - -**Modificados:** -- `core/schema_manager.py`: Agregado soporte completo para nuevos esquemas - -### Migración de Datos - -Los datos existentes fueron migrados exitosamente: - -**Datasets DAR y Fast:** -- Metadatos movidos a dataset_definitions.json -- Variables movidas a dataset_variables.json -- streaming_variables preservadas - -**Plot UR29:** -- Metadatos movidos a plot_definitions.json -- Variables movidas a plot_variables.json - -### API Backend - -La API mantiene compatibilidad total: -- `/api/config/schemas` - Lista todos los esquemas (incluidos los nuevos) -- `/api/config/schema/` - Funciona con todos los nuevos IDs -- `/api/config/` - Soporta lectura/escritura de nuevos configs - -**Nuevos Config IDs disponibles:** -- `dataset-definitions` -- `dataset-variables` -- `plot-definitions` -- `plot-variables` - -## Migración Completa del Backend - Uso Exclusivo de Esquemas Separados - -**Solicitud del Usuario:** Completar la migración para usar únicamente los esquemas nuevos separados, tanto para datasets (CSV recording y UDP streaming) como para plots (realtime plotting). - -### Migración del Backend Completada - -#### 1. ConfigManager Migrado Completamente - -**Cambios en `core/config_manager.py`:** -- ✅ Agregados paths para archivos separados: `dataset_definitions_file`, `dataset_variables_file` -- ✅ Nuevo método `_load_datasets_separated()` para cargar desde archivos separados -- ✅ Nuevo método `_migrate_datasets_from_legacy()` para migrar automáticamente desde legacy -- ✅ Método `save_datasets()` refactorizado para guardar en archivos separados -- ✅ Lógica de carga inteligente: prioriza archivos separados, migra desde legacy si es necesario - -#### 2. PlotManager Migrado Completamente - -**Cambios en `core/plot_manager.py`:** -- ✅ Agregados paths para archivos separados: `plot_definitions_file`, `plot_variables_file` -- ✅ Nuevo método `_load_plots_separated()` para cargar desde archivos separados -- ✅ Nuevo método `_migrate_plots_from_legacy()` para migrar automáticamente desde legacy -- ✅ Método `save_plots()` refactorizado para guardar en archivos separados -- ✅ Lógica de carga inteligente: prioriza archivos separados, migra desde legacy si es necesario - -#### 3. SchemaManager Actualizado - -**Cambios en `core/schema_manager.py`:** -- ✅ Métodos `read_config()` y `write_config()` actualizados para datasets y plots -- ✅ Mapeo correcto entre legacy APIs y nuevos archivos separados -- ✅ Compatibilidad total mantenida para frontend y APIs existentes - -#### 4. Funcionalidades Migradas - -**CSV Recording y UDP Streaming:** -- ✅ ConfigManager usa `dataset_definitions.json` y `dataset_variables.json` -- ✅ Toda la lógica de streaming y recording funciona con archivos separados -- ✅ Variables de streaming gestionadas correctamente en archivo separado - -**Realtime Plotting:** -- ✅ PlotManager usa `plot_definitions.json` y `plot_variables.json` -- ✅ Sesiones de plotting funcionan con archivos separados -- ✅ Configuración y variables de plots separadas correctamente - -#### 5. Migración Automática - -**Proceso de Migración:** -1. Sistema detecta archivos separados y los usa prioritariamente -2. Si no existen, busca archivos legacy y los migra automáticamente -3. Guarda en formato separado tras migración -4. Legacy files eliminados tras migración exitosa - -#### 6. Archivos Eliminados - -**Legacy Files Removidos:** -- ❌ `config/data/plc_datasets.json` (migrado a archivos separados) -- ❌ `config/data/plot_sessions.json` (migrado a archivos separados) -- ❌ `config/schema/datasets.schema.json` (reemplazado por esquemas separados) -- ❌ `config/schema/plots.schema.json` (reemplazado por esquemas separados) -- ❌ `config/schema/ui/datasets.uischema.json` (reemplazado por UI schemas separados) -- ❌ `config/schema/ui/plots.uischema.json` (reemplazado por UI schemas separados) - -#### 7. Sistema Completamente Migrado - -**Estado Final:** -- ✅ **Datasets**: Solo usa `dataset_definitions.json` + `dataset_variables.json` -- ✅ **Plots**: Solo usa `plot_definitions.json` + `plot_variables.json` -- ✅ **CSV Recording**: Funciona con datasets separados -- ✅ **UDP Streaming**: Funciona con datasets separados -- ✅ **Realtime Plots**: Funciona con plots separados -- ✅ **APIs Legacy**: Mantienen compatibilidad total -- ✅ **Frontend**: Actualizado para usar nuevos esquemas separados -- ✅ **Migración**: Automática y transparente - -### Beneficios de la Migración Completa - -**Arquitectura Mejorada:** -- Separación clara de responsabilidades (definiciones vs variables) -- Esquemas más enfocados y específicos -- Validación granular independiente -- Menor acoplamiento entre componentes - -**Flexibilidad Operacional:** -- Edición independiente de metadatos y variables -- Gestión separada de configuraciones -- Facilita backup/restore selectivo -- Mejor escalabilidad para futuras funcionalidades - -**Mantenimiento Simplificado:** -- Schemas más pequeños y manejables -- Debugging más fácil por separación -- Menos conflictos en edición concurrente -- Estructura más comprensible - -### Notas Técnicas - -- Carga automática de esquemas desde directorio config/schema/ -- Validación JSON Schema para todos los nuevos tipos -- Timestamps automáticos en operaciones de escritura -- Logging detallado de operaciones -- Manejo de errores robusto -- Migración automática desde legacy files -- Detección inteligente de formato de archivos -- Compatibilidad total con APIs existentes - -#### 8. Corrección Frontend Post-Migración - -**Problema Detectado:** -El frontend estaba intentando acceder a esquemas legacy eliminados: -- ❌ `GET /api/config/schema/datasets 404 (NOT FOUND)` -- ❌ `GET /api/config/schema/plots 404 (NOT FOUND)` - -**Solución Implementada:** -- ✅ Actualizado `frontend/src/pages/Dashboard.jsx` para usar detección automática de esquemas -- ✅ Actualizado `frontend/src/pages/Config.jsx` para usar detección automática de esquemas -- ✅ Removidos hardcodes legacy: `['plc', 'datasets', 'plots']` -- ✅ Sistema ahora detecta automáticamente: `['plc', 'dataset-definitions', 'dataset-variables', 'plot-definitions', 'plot-variables']` - -**Cambios en Frontend:** -```javascript -// ANTES (hardcoded legacy) -{['plc', 'datasets', 'plots'].map((sectionId) => ...)} - -// DESPUÉS (detección automática) -{available.map((sectionId) => ...)} -``` - -**Resultado:** -- ✅ Frontend compila exitosamente -- ✅ Dashboard muestra automáticamente todos los esquemas disponibles -- ✅ Config editor funciona con nuevos esquemas separados -- ✅ No más errores 404 en consola del navegador - -## Mejoras en Formularios RJSF para Dataset Management - -**Solicitud del Usuario:** Mejorar la presentación de los formularios RJSF de dataset definitions y variables, aprovechando RJSF y Chakra UI para mostrar mejor estos datos y permitir edición más intuitiva. - -### Mejoras Implementadas - -#### 1. Nuevo Componente DatasetManager Integrado - -**Archivo:** `frontend/src/components/DatasetManager.jsx` - -**Características principales:** -- ✅ Vista unificada para gestión de datasets definitions y variables -- ✅ Overview visual de todos los datasets con métricas (variables, streaming, status) -- ✅ Interface con tabs para organizar diferentes aspectos de configuración -- ✅ Cards interactivas para selección de datasets -- ✅ Integración completa con APIs existentes -- ✅ Toast notifications para feedback de operaciones - -**Tabs implementados:** -- 📋 **Dataset Definitions**: Formulario RJSF mejorado para metadatos -- ⚙️ **Dataset Variables**: Formulario RJSF para configuración técnica -- 🔧 **Variable Manager**: Interface visual especializada para gestionar variables - -#### 2. Componente Especializado DatasetVariableManager - -**Archivo:** `frontend/src/components/DatasetVariableManager.jsx` - -**Funcionalidades:** -- ✅ Gestión visual de variables por dataset con cards individuales -- ✅ Modal mejorado para agregar/editar variables con validación -- ✅ Toggle fácil para activar/desactivar streaming por variable -- ✅ Información contextual de áreas PLC y tipos de datos -- ✅ Eliminación de variables con confirmación -- ✅ Vista organizada por grid responsive - -**Features del editor de variables:** -- Select con iconos para áreas PLC (🗃️ DB, 📊 MW, 💾 M, etc.) -- Select con descripciones para tipos de datos (REAL 32-bit, INT 16-bit, etc.) -- NumberInput con steppers para offsets y direcciones -- Checkbox mejorado para streaming con estado visual -- Validación en tiempo real de nombres de variables - -#### 3. Widgets Personalizados de Chakra UI - -**Archivo:** `frontend/src/components/rjsf/PlcWidgets.jsx` - -**Widgets especializados creados:** -- ✅ **PlcAreaWidget**: Select con iconos y descripciones para áreas PLC -- ✅ **PlcDataTypeWidget**: Select con badges de tamaño y descripción de tipos -- ✅ **PlcNumberWidget**: NumberInput con validación de rangos PLC -- ✅ **PlcStreamingWidget**: Checkbox con estado visual y explicaciones -- ✅ **PlcVariableNameWidget**: Input con validación y sugerencias de nombres - -**Características de widgets:** -- Iconos contextuales para mejor UX (🗃️📊💾📥📤🔌) -- Tooltips y help text explicativo -- Validación visual en tiempo real -- Color coding por estado (streaming/no streaming, válido/inválido) -- Diseño responsivo con Chakra UI - -#### 4. Widgets RJSF Mejorados - -**Archivo:** `frontend/src/components/rjsf/widgets.jsx` - -**Actualización completa:** -- ❌ Removidos widgets Bootstrap obsoletos -- ✅ Implementados widgets Chakra UI nativos -- ✅ Consistencia visual con tema de la aplicación -- ✅ Manejo mejorado de errores y validación -- ✅ Integración con color modes (light/dark) - -#### 5. UI Schemas Mejorados - -**Archivos actualizados:** -- `config/schema/ui/dataset-definitions.uischema.json` -- `config/schema/ui/dataset-variables.uischema.json` - -**Mejoras implementadas:** -- ✅ Descripciones con emojis y contexto (📊 Configure dataset metadata) -- ✅ Help text específico para cada campo -- ✅ Layouts responsivos con ui:layout -- ✅ Widgets especializados para casos PLC -- ✅ Opciones de enum con labels descriptivos -- ✅ Placeholders informativos -- ✅ Order específico de campos para flujo lógico - -**Ejemplos de mejoras:** -```json -"area": { - "ui:options": { - "enumOptions": [ - {"value": "db", "label": "🗃️ DB (Data Block)"}, - {"value": "mw", "label": "📊 MW (Memory Word)"} - ] - } -} -``` - -#### 6. Nueva Ruta y Navegación - -**Archivo:** `frontend/src/App.jsx` - -**Integración completa:** -- ✅ Nueva ruta `/datasets` para DatasetManager -- ✅ Botón de navegación "📊 Datasets" en navbar -- ✅ Integración seamless con routing existente - -#### 7. Actualización de Formularios Existentes - -**Archivos actualizados:** -- `frontend/src/pages/Config.jsx` +Archivos afectados: - `frontend/src/pages/Dashboard.jsx` -**Cambios:** -- ✅ Integración de widgets personalizados en todos los formularios RJSF -- ✅ Consistencia visual mejorada -- ✅ Mejor UX en configuración PLC y datasets - -### Beneficios de las Mejoras - -#### Experiencia de Usuario Mejorada -- **Interfaz Visual**: Cards interactivas vs formularios planos -- **Feedback Inmediato**: Toast notifications y validación en tiempo real -- **Contexto Claro**: Iconos, colores y descripciones específicas para PLC -- **Flujo Intuitivo**: Navegación organizada en tabs y overview - -#### Productividad Aumentada -- **Gestión Centralizada**: Todo el dataset management en una vista -- **Operaciones Rápidas**: Toggle streaming, edición modal, eliminación directa -- **Información Contextual**: Métricas de variables, estado de streaming visible -- **Validación Proactiva**: Errores detectados antes de envío - -#### Mantenibilidad Mejorada -- **Widgets Reutilizables**: Componentes PLC específicos para consistencia -- **Código Limpio**: Separación clara entre lógica y presentación -- **Tema Unificado**: Chakra UI consistente en toda la aplicación -- **Extensibilidad**: Fácil agregar nuevos widgets PLC o mejoras - -#### Características Técnicas Específicas PLC -- **Validación PLC**: Rangos correctos para offsets, DBs, bits -- **Tipos de Datos**: Información visual de tamaños y características -- **Áreas de Memoria**: Iconografía clara para diferentes áreas S7 -- **Streaming Control**: Gestión visual del estado UDP streaming - -### Archivos Creados - -**Nuevos Componentes:** -- `frontend/src/components/DatasetManager.jsx` -- `frontend/src/components/DatasetVariableManager.jsx` -- `frontend/src/components/rjsf/PlcWidgets.jsx` - -**Archivos Actualizados:** -- `frontend/src/components/rjsf/widgets.jsx` (refactorización completa) -- `config/schema/ui/dataset-definitions.uischema.json` (mejoras UX) -- `config/schema/ui/dataset-variables.uischema.json` (mejoras UX) -- `frontend/src/App.jsx` (nueva ruta y navegación) -- `frontend/src/pages/Config.jsx` (integración widgets) -- `frontend/src/pages/Dashboard.jsx` (integración widgets) - -### Resultado Final - -- ✅ **DatasetManager disponible en `/datasets`** con interface visual completa -- ✅ **Formularios RJSF mejorados** con widgets PLC específicos -- ✅ **UX significativamente mejorada** para configuración de datasets y variables -- ✅ **Consistencia visual** con Chakra UI en toda la aplicación -- ✅ **Widgets reutilizables** para futuras expansiones PLC -- ✅ **Compatibilidad total** con APIs y funcionalidad existente -- ✅ **Cero errores de linting** en todos los nuevos componentes \ No newline at end of file +Fecha: 2025-08-12 \ No newline at end of file diff --git a/frontend/src/pages/Dashboard.jsx b/frontend/src/pages/Dashboard.jsx index 46a1171..727dcda 100644 --- a/frontend/src/pages/Dashboard.jsx +++ b/frontend/src/pages/Dashboard.jsx @@ -99,10 +99,24 @@ export default function DashboardPage() { const available = useMemo(() => { if (!schemas) return [] // Accept multiple shapes from API - if (Array.isArray(schemas.schemas)) return schemas.schemas.map(s => s.id || s) - if (schemas.schemas && typeof schemas.schemas === 'object') return Object.keys(schemas.schemas) - // Fallback: return empty array if no schemas detected - return [] + const ids = Array.isArray(schemas.schemas) + ? schemas.schemas.map(s => s.id || s) + : (schemas.schemas && typeof schemas.schemas === 'object') + ? Object.keys(schemas.schemas) + : [] + // Ensure PLC config appears before dataset sections on Dashboard + const preferredOrder = ['plc', 'dataset-definitions', 'dataset-variables'] + const orderIndex = (id) => { + const idx = preferredOrder.indexOf(id) + return idx === -1 ? Number.MAX_SAFE_INTEGER : idx + } + return [...ids].sort((a, b) => { + const ai = orderIndex(a) + const bi = orderIndex(b) + if (ai !== bi) return ai - bi + // Keep stable order among non-preferred ids + return 0 + }) }, [schemas]) const [currentSchemaId, setCurrentSchemaId] = useState('plc') @@ -217,7 +231,7 @@ export default function DashboardPage() { 🧩 {sectionId} - +