EnlacesPanel v2 — Documentacion del componente

1. Vision y proposito

El EnlacesPanel gestiona los enlaces entre instrumentos de software (swObjs) y dispositivos de hardware (hwObjs). Permite crear, editar y eliminar enlaces N:M con exclusividad atomica por canal, sincronizacion en tiempo real con InstrumentBridge_03, y persistencia de configuraciones via escenarios.

2. Arquitectura post-refactor

src/components/EnlacesPanel/
├── index.ts                     barrel: exports Content + Float + types
├── types.ts                     EnlacesPanelContentProps + re-exports tipos
├── helpers.ts                   buildDefaultChannelMap, findExistingLink, getBridgeForSwObj
├── useBridgeSync.ts             hook: enlazar/desenlazar con sync Bridge DOM
├── EnlacesPanelContent.tsx      orquestador (~195 lin) — compose secciones
├── MatrixCell.tsx               celda interactiva con editor channelMap
├── EscenariosSection.tsx        CRUD escenarios con estado propio
├── ObjectsSection.tsx           lista colapsable swObjs/hwObjs
├── epc.css                      root .epc_root + header
├── EnlacesPanel.css             estilos matriz + celdas + editor + objetos
├── EnlacesPanel_escenarios.css  estilos seccion escenarios
│
├── hw/                          sub-componentes de hardware fisico
│   ├── useEspSensorControl.ts   hook MQTT timer/Auto-Delta ESP32
│   ├── EspTimerSelect.tsx       selector intervalo + boton config
│   ├── EspTimerSelect.css
│   ├── AutoDeltaPanel.tsx       panel histeresis Auto-Delta
│   ├── AutoDeltaPanel.css
│   ├── HwObjPopup.tsx           popup 3 tabs (estado/control/sensores)
│   └── HwObjPopup.css
│
└── float/                       wrapper flotante Col4
    ├── index.tsx                 position:fixed, drag, resize, minimizar
    └── EnlacesPanelFloat.css

2.1 Separacion de responsabilidades

2.2 Flujo de datos

RegistryContext ──→ EnlacesPanelContent (orquestador)
                      ├── MatrixCell × N (lee hwObjs/swObjs/enlaces)
                      │     └── onEnlazar/onDesenlazar → useBridgeSync
                      │           ├── RegistryContext.actions.enlazar()
                      │           └── InstrumentBridge_03.enlazar() (DOM sync)
                      ├── EscenariosSection (lee EscenariosContext directo)
                      │     └── guardar/cargar/importar/exportar
                      └── ObjectsSection (presentacional, solo props)

EscenariosContext ──→ EscenariosSection (acceso directo via useEscenarios)
HwObjsContext ────→ EnlacesPanelContent → handleModoChange → HwObjPopup

3. Inventario de ficheros

3.1 Sub-componentes HW

3.2 Wrapper flotante

4. EnlacesPanelContent (orquestador)

Fichero principal (~195 lineas). No contiene logica de negocio propia — delega a sub-componentes y hooks. Su responsabilidad es:

• Leer contextos (RegistryContext, HwObjsContext)
• Calcular IDs memorizados (hwObjIds, swObjIds, enlaceCount)
• Instanciar useBridgeSync para obtener handlers sincronizados
• Renderizar la tabla matriz con MatrixCell por celda
• Montar EscenariosSection y ObjectsSection como secciones colapsables
• Gestionar HwObjPopup y handleModoChange

4.1 Props

5. MatrixCell

Celda interactiva de la matriz swObj x hwObj. Cada celda muestra el estado del enlace y permite editarlo.

5.1 Estados visuales

5.2 Editor de channelMap

Al hacer click en una celda enlazada, se expande el editor que muestra cada mapping canal → puerto con selects. Incluye:

• Exclusividad atomica: al aplicar, desactiva canales conflictivos en otros hwObjs del mismo swObj
• Indicador de conflicto: icono ⚠ si un canal ya esta activo en otro hwObj
• Boton Auto-Delta: visible solo para hwObjs fisicos, abre AutoDeltaPanel en modo sensor

6. EscenariosSection

Seccion colapsable que gestiona escenarios de enlaces. Accede directamente a useEscenarios() — estado propio de UI, sin props de datos.

6.1 Operaciones

6.2 Escenarios vs Scenarios

7. ObjectsSection

Componente presentacional. Recibe datos por props (hwObjs, swObjs, enlaces, ids). Muestra dos listas colapsables con badges de tipo y contadores.

Cada item muestra: badge tipo (physical/virtual/animate/component), nombre, y metadata (puertos, subs, enlaces, emitsAs).

8. useBridgeSync

Hook que envuelve las acciones del RegistryContext con sincronizacion DOM. Cada operacion hace dos cosas:

• 1. Actualiza el estado React via actions.enlazar() / actions.desenlazar()
• 2. Sincroniza con InstrumentBridge_03.registry via bridge.enlazar() / bridge.desenlazar()

8.1 API

9. Helpers

Funciones puras sin dependencia de React. Fichero helpers.ts.

10. Sub-componentes HW

Subdirectorio hw/ — controles especificos de hardware fisico (ESP32). Se ocultan automaticamente para hwObjs virtuales.

10.1 useEspSensorControl

Hook central de comunicacion MQTT con el ESP. Gestiona timer periodico, modo Auto-Delta, histeresis por sensor, y capabilities. Importado por EspTimerSelect y AutoDeltaPanel.

10.2 EspTimerSelect

Selector compacto: dot de estado (coloreado segun modo) + select de intervalo + boton ⚙ que abre AutoDeltaPanel en modo global.

10.3 AutoDeltaPanel

Panel de configuracion de histeresis Auto-Delta. Dos modos: global (desde EspTimerSelect) y sensor (desde MatrixCell editor). Toggle pct/abs, selector umbral, heartbeat.

10.4 HwObjPopup

Panel flotante draggable con 3 tabs. Position:fixed, z-index 1300.

11. Wrapper flotante (Col4)

Subdirectorio float/ — contenedor position:fixed para el panel de enlaces en la vista Col4 (Detalle01).

• Drag: por titlebar, mousedown/mousemove/mouseup
• Resize: grip esquina inferior derecha
• Minimizar: boton ▲/▼ en titlebar
• Responsive: recalcula layout al cambiar dispositivo o resize viewport via ViewportLayoutContext

Monta <EnlacesPanelContent hideHeader /> con su propio titlebar.

Importado por Detalle01.tsx via el barrel: import { EnlacesPanel } from '../../components/EnlacesPanel'

12. Estructura CSS

12.1 Prefijos de clases

12.2 Temas

El componente usa colores hardcoded oscuros (#1a1a2e, #16213e, #3a3a5c) heredados del diseno original. No usa variables --sim1-*. Funciona con temas oscuros pero puede contrastar con el tema Daylight.

13. Contextos React consumidos

14. Como montar el componente

14.1 Ejemplo minimo

import { EnlacesPanelContent } from '@/components/EnlacesPanel';

function MyPanel() {
  return (
    <div style={{ width: 400, height: 600 }}>
      <EnlacesPanelContent />
    </div>
  );
}

Requisitos: RegistryProvider, EscenariosProvider y HwObjsContext.Provider mas arriba en el arbol React (ya estan en App.tsx).

14.2 Con header oculto (contenedor con titlebar propio)

<EnlacesPanelContent hideHeader style={{ flex: '1 1 auto', minHeight: 0 }} />

14.3 Como panel del PanelGrid

// En registry.ts:
const EnlacesPanelW = lazy(() => import('./EnlacesPanelWrapper'));

{ id: 'sim-enlaces', label: 'Enlaces', icon: '⚡',
  component: EnlacesPanelW, minSize: { cols: 1, rows: 2 },
  accepts: ['bridges', 'enlaces', 'sensors'] }

14.4 Como panel flotante en Col4

import { EnlacesPanel } from '../../components/EnlacesPanel';

<EnlacesPanel visible={showEnlacesPanel} onClose={() => setShowEnlacesPanel(false)} />