61 lines
5.7 KiB
Text
61 lines
5.7 KiB
Text
┌───────────────────┐
|
|
│ 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 │
|
|
└─────────────────────────────────────────────────────────────┘
|