flow like the river

VISUALIZACION/public/output_popl_up_pruebas.js

@@ -0,0 +1,129 @@
+// output_popl_up_pruebas.js
+
+// Obtener el contenedor del gráfico
+document.addEventListener('DOMContentLoaded', () => {
+  const elem = document.getElementById('poplUpContainer');
+  const form = document.getElementById('paramForm');
+
+  // Inicializar el gráfico 3D
+  const graph = ForceGraph3D()(elem)
+    .backgroundColor('#000000')
+    .nodeLabel('id')
+    .nodeAutoColorBy('group')
+    .nodeVal(1)
+    .linkColor(() => 'orange')
+    .onNodeClick(node => showNodeContent(node.content))
+    .onNodeHover(node => { elem.style.cursor = node ? 'pointer' : null; })
+    .forceEngine('d3')
+    //.d3Force('charge', d3.forceManyBody().strength(-300))
+    //.d3Force('link', d3.forceLink().distance(300).strength(1));
+
+  // Centrado automático del gráfico
+  function centerGraph() {
+    setTimeout(() => {
+      const width = elem.clientWidth;
+      const height = elem.clientHeight;
+      graph.zoomToFit(400, Math.min(width, height) * 0.1);
+    }, 500);
+  }
+  window.addEventListener('resize', () => {
+    graph.width(elem.clientWidth);
+    graph.height(elem.clientHeight);
+    centerGraph();
+  });
+
+  // Mostrar contenido del nodo
+  function showNodeContent(content) {
+    console.log('Contenido del nodo:', content);
+  }
+
+  // Función para obtener datos del servidor
+  async function getData(paramsObj = {}) {
+    try {
+      let url = '/api/data';
+      const params = new URLSearchParams();
+
+      // Establecer el tema fijo
+      params.append('tema', 'demografía y sociedad');
+
+      // Agregar parámetros del formulario, incluyendo complejidad como umbral
+      for (const key in paramsObj) {
+        if (paramsObj[key] !== undefined && paramsObj[key] !== '') {
+          params.append(key, paramsObj[key]);
+        }
+      }
+
+      url += `?${params.toString()}`;
+      console.log('🔎 Fetch URL:', url);
+
+      const response = await fetch(url);
+      if (!response.ok) throw new Error(response.statusText);
+      const data = await response.json();
+      console.log('Datos recibidos del servidor:', data);
+
+      // Filtrar enlaces inválidos
+      const nodeIds = new Set(data.nodes.map(node => node.id));
+      data.links = data.links.filter(link => nodeIds.has(link.source) && nodeIds.has(link.target));
+
+      return data;
+    } catch (error) {
+      console.error('Error al obtener datos del servidor:', error);
+      return null;
+    }
+  }
+
+  // Función principal: fetch, filtrar por complejidad/umbral y renderizar
+  async function fetchAndRender() {
+    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;
+
+    // Usamos 'complejidad' como porcentaje de similitud mínima (umbral)
+    const paramsObj = {
+      subtematica,
+      palabraClave,
+      fechaInicio,
+      fechaFin,
+      nodos,
+      complejidad // enviado al backend y usado de umbral en cliente
+    };
+
+    // Parsear complejidad a número
+    const umbralPct = parseFloat(complejidad) || 0;
+    console.log(`Aplicando umbral de similitud: ${umbralPct}%`);
+
+    const graphData = await getData(paramsObj);
+    if (!graphData) return;
+
+    // Filtrar enlaces por umbral de similitud
+    let filteredLinks = graphData.links;
+    if (umbralPct > 0) {
+      filteredLinks = filteredLinks.filter(link => Number(link.value) >= umbralPct);
+      console.log(`Enlaces tras aplicar umbral: ${filteredLinks.length}`);
+    }
+
+    graph.graphData({ nodes: graphData.nodes, links: filteredLinks });
+    centerGraph();
+  }
+
+  // Escuchar evento submit del formulario
+  form.addEventListener('submit', event => {
+    event.preventDefault();
+    fetchAndRender();
+  });
+
+  // Cargar gráfico inicial
+  fetchAndRender();
+});
+
+
+
+
+
+
+
+
+