┌───────────────────┐ │ HTML + CSS UI │ │ │ │ - contenedor div │ │ #globWarContainer│ │ - form #paramForm │ └─────────┬─────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ output_glob_war.js │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ 1. Inicialización del gráfico │ │ │ │ └─ ForceGraph3D()(elem) configuras estilos, forces │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ │ ▼ │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ 2. getData(paramsObj) │ │ │ │ ├─ Construye URL: '/api/data?tema=guerra global…' │ │ │ │ ├─ fetch(url) → JSON { nodes: [...], links: [...] }│ │ │ │ ├─ Filtra enlaces inválidos (fuente/target existe)│ │ │ │ ├─ Calcula grado de cada nodo │ │ │ │ ├─ Filtra nodos con grado < MIN_DEGREE │ │ │ │ └─ Devuelve { nodes, links } │ │ │ └───────────────────────────────────────────────────────┘ │ │ │ │ │ │ │ ▼ │ │ │ ┌────────────────────────────────┐ │ │ │ │ 3. graph.graphData(data) │ │ │ │ │ Renderiza nodos + enlaces │ │ │ │ └────────────────────────────────┘ │ │ │ │ │ │ ▼ ▼ │ │ ┌──────────────────────────────┐ ┌────────────────────────┐ │ │ │ showNodeContent(content) │ │ centerGraph() │ │ │ │ └─ despliega content │ │ └─ zoomToFit + padding │ │ │ └──────────────────────────────┘ └────────────────────────┘ │ │ ▲ ▲ │ │ │ │ │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ 4. Event Listeners │ │ │ │ - form submit → llama getData(paramsObj) │ │ │ │ - window resize → llama centerGraph() │ │ │ └───────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ FLUJOS_APP.js │ │ ┌ getDataHandler(req, res) ┐ │ │ │ - recibe paramsQuery │ │ │ │ - consulta Mongo: │ │ │ │ • filtra por tema │ │ │ │ • aplica límites nodos/complejidad/fechas │ │ │ - construye { nodes, links } JSON │ │ └───────────────────────────┘ │ │ │ │ │ ▼ │ │ HTTP GET /api/data → getDataHandler → responde JSON │ └─────────────────────────────────────────────────────────────┘