flow like the river

VISUALIZACION/public/output_popl_up.js

@@ -0,0 +1,122 @@
+// output_popl_up.js
+
+// Obtener el contenedor del gráfico
+const elem = document.getElementById('poplUpContainer');
+
+// Inicializar el gráfico
+const graph = ForceGraph3D()(elem)
+  .backgroundColor('#000000')
+  .nodeLabel('id')
+  .nodeAutoColorBy('group')
+  .nodeVal(5)
+  .linkColor(() => 'green')
+  .onNodeClick(node => showNodeContent(node.content))
+  .onNodeHover(node => {
+    elem.style.cursor = node ? 'pointer' : null;
+  })
+  .forceEngine('d3')
+  .d3Force('charge', d3.forceManyBody().strength(-10))
+  .d3Force('link', d3.forceLink().distance(30).strength(1));
+
+// Función para obtener datos del servidor
+async function getData(paramsObj = {}) {
+  try {
+    let url = '/api/data';
+    const params = new URLSearchParams();
+
+    // Fijar el tema principal
+    params.append('tema', 'movimientos populares y levantamientos');
+
+    // Agregar otros parámetros si se han definido
+    for (const key in paramsObj) {
+      if (paramsObj[key]) {
+        params.append(key, paramsObj[key]);
+      }
+    }
+
+    url += `?${params.toString()}`;
+
+    const response = await fetch(url);
+    const data = await response.json();
+
+    console.log('📦 Datos recibidos:', data);
+
+    // Validar y limpiar links
+    const nodeIds = new Set(data.nodes.map(node => node.id));
+    data.links = data.links.filter(link => {
+      const valid = nodeIds.has(link.source) && nodeIds.has(link.target);
+      if (!valid) {
+        console.log(`❌ Enlace inválido eliminado: ${link.source} -> ${link.target}`);
+      }
+      return valid;
+    });
+
+    return data;
+  } catch (error) {
+    console.error('⚠️ Error al obtener datos:', error);
+    return { nodes: [], links: [] };
+  }
+}
+
+// Mostrar contenido del nodo en consola (puedes ampliar esta función)
+function showNodeContent(content) {
+  console.log('🧠 Contenido del nodo:', content);
+}
+
+// Centrar el gráfico tras dibujarlo
+function centerGraph() {
+  setTimeout(() => {
+    const width = elem.clientWidth;
+    const height = elem.clientHeight;
+    const padding = Math.min(width, height) * 0.1;
+    graph.zoomToFit(400, padding);
+  }, 500);
+}
+
+// Redibujar al cambiar tamaño ventana
+window.addEventListener('resize', () => {
+  graph.width(elem.clientWidth);
+  graph.height(elem.clientHeight);
+  centerGraph();
+});
+
+// Manejar el formulario
+document.getElementById('paramForm').addEventListener('submit', function(event) {
+  event.preventDefault();
+
+  const subtematica = document.getElementById('param2').value;
+  const palabraClave = document.getElementById('param1').value;
+  const fechaInicio = document.getElementById('fecha_inicio').value;
+  const fechaFin = document.getElementById('fecha_fin').value;
+  const nodos = document.getElementById('nodos').value;
+  const complejidad = document.getElementById('complejidad').value;
+
+  const paramsObj = {
+    subtematica,
+    palabraClave,
+    fechaInicio,
+    fechaFin,
+    nodos,
+    complejidad,
+  };
+
+  getData(paramsObj).then(graphData => {
+    if (graphData) {
+      console.log("✅ Redibujando con nuevos datos...");
+      graph.graphData(graphData);
+      centerGraph();
+    }
+  });
+});
+
+// Obtener datos iniciales
+getData().then(graphData => {
+  if (graphData && graphData.nodes && graphData.nodes.length > 0) {
+    console.log(`✅ Se recibieron ${graphData.nodes.length} nodos.`);
+    graph.graphData(graphData);
+    centerGraph();
+  } else {
+    console.warn("⚠️ No se recibieron nodos para mostrar.");
+    console.log("🔍 Respuesta completa:", graphData);
+  }
+});