From 24218447e3876e291f8067aa93cdcb22c3c7f3d5 Mon Sep 17 00:00:00 2001 From: Sergio Date: Sat, 23 May 2026 15:25:45 +0000 Subject: [PATCH] gioser-graph: poll container width before Cytoscape init - Uses setInterval(50ms) waiting for offsetWidth > 0 - Falls back to minWidth/minHeight after 10s timeout - Solves 'cannot access property w' when deck is hidden (scale 0) --- crates/apps/gioser-web/cytoscape-graph.js | 211 +++++++++------------- 1 file changed, 82 insertions(+), 129 deletions(-) diff --git a/crates/apps/gioser-web/cytoscape-graph.js b/crates/apps/gioser-web/cytoscape-graph.js index 5e245c0..9df419e 100644 --- a/crates/apps/gioser-web/cytoscape-graph.js +++ b/crates/apps/gioser-web/cytoscape-graph.js @@ -2,7 +2,10 @@ * gioser-graph.js — Grafo semántico con Cytoscape.js * * Detecta automáticamente elementos agregados al DOM - * (incluso los creados dinámicamente por el WASM) y monta el grafo. + * incluso los creados dinámicamente por el WASM. + * + * Espera a que el contenedor tenga tamaño real (>0) antes de montar + * Cytoscape, porque el deck arranca oculto (transform:scale(0)). * * Efecto "wineandcheesemap": clic en nodo → centra + desvanece resto. * Doble clic → callback de navegación (window.__gioserGraphNavigate). @@ -12,16 +15,11 @@ 'use strict'; var COLORS = { - logos: '#d0dbff', - aire: '#d0dbff', - nomos: '#f59056', - fuego: '#f59056', - kay: '#d49873', - tierra: '#d49873', - uku: '#6cd0f3', - agua: '#6cd0f3', + logos: '#d0dbff', aire: '#d0dbff', + nomos: '#f59056', fuego: '#f59056', + kay: '#d49873', tierra: '#d49873', + uku: '#6cd0f3', agua: '#6cd0f3', }; - function caminoColor(c) { return COLORS[c] || '#888'; } function initGraph(container) { @@ -29,59 +27,62 @@ var onNavigate = window.__gioserGraphNavigate || null; if (typeof cytoscape === 'undefined') { - var check = setInterval(function () { - if (typeof cytoscape !== 'undefined') { - clearInterval(check); - initGraph(container); - } + var chk = setInterval(function () { + if (typeof cytoscape !== 'undefined') { clearInterval(chk); initGraph(container); } }, 100); return; } - // Esperar un frame antes de fetch — el deck puede estar oculto - // y Cytoscape necesita tamaño real para el layout cose. - requestAnimationFrame(function () { + // Esperar a que el contenedor tenga ancho real (deck oculto → 0) + var wait = setInterval(function () { + if (container.offsetWidth > 0 || container.offsetHeight > 0) { + clearInterval(wait); + doInit(container, apiUrl, onNavigate); + } + }, 50); + // Timeout: si después de 10s sigue en 0, forzar con tamaño mínimo + setTimeout(function () { + if (container.offsetWidth === 0 || container.offsetHeight === 0) { + clearInterval(wait); + container.style.minWidth = '200px'; + container.style.minHeight = '180px'; + doInit(container, apiUrl, onNavigate); + } + }, 10000); + } + + function doInit(container, apiUrl, onNavigate) { fetch(apiUrl + '/graph?limit=500') .then(function (r) { return r.json(); }) .then(function (data) { - if (!data.nodes || data.nodes.length === 0) return; + if (!data.nodes || data.nodes.length === 0) { + container.innerHTML = ''; + return; + } var elements = []; - for (var i = 0; i < data.nodes.length; i++) { var d = data.nodes[i].data; if (!d.doc_id) continue; var color = caminoColor(d.camino); - elements.push({ - group: 'nodes', - data: { - id: d.id, - doc_id: d.doc_id, - label: d.name.length > 24 ? d.name.slice(0, 22) + '\u2026' : d.name, - camino: d.camino.toUpperCase(), - color: color, - }, - }); + elements.push({ group: 'nodes', data: { + id: d.id, doc_id: d.doc_id, + label: d.name.length > 24 ? d.name.slice(0, 22) + '\u2026' : d.name, + camino: d.camino.toUpperCase(), color: color, + }}); } var nodeIds = {}; - for (var i = 0; i < elements.length; i++) { - nodeIds[elements[i].data.id] = true; - } + for (var i = 0; i < elements.length; i++) nodeIds[elements[i].data.id] = true; for (var i = 0; i < data.edges.length; i++) { var ed = data.edges[i].data; if (!nodeIds[ed.source] || !nodeIds[ed.target]) continue; - elements.push({ - group: 'edges', - data: { - id: ed.id, - source: ed.source, - target: ed.target, - weight: ed.weight || 0.7, - }, - }); + elements.push({ group: 'edges', data: { + id: ed.id, source: ed.source, target: ed.target, + weight: ed.weight || 0.7, + }}); } var tipMap = {}; @@ -90,53 +91,33 @@ if (d.doc_id) tipMap[d.id] = d; } - // Layout: 'preset' primero con posiciones aleatorias para - // que el contenedor tome tamaño, luego cose cuando visible. var cy = cytoscape({ container: container, elements: elements, style: [ - { - selector: 'edge', - style: { - 'width': 'mapData(weight, 0.5, 1.0, 0.5, 4.5)', - 'line-color': 'rgba(255,255,255,0.16)', - 'curve-style': 'haystack', - 'haystack-radius': 0, - 'opacity': 0.6, - }, - }, - { - selector: 'node', - style: { - 'shape': 'round-rectangle', - 'width': 130, - 'height': 34, - 'background-color': 'data(color)', - 'background-opacity': 0.18, - 'border-color': 'data(color)', - 'border-width': 1.8, - 'border-opacity': 0.55, - 'color': 'rgba(232,234,245,0.88)', - 'font-size': 11, - 'font-family': 'Inter, system-ui, sans-serif', - 'font-weight': 500, - 'text-valign': 'center', - 'text-halign': 'center', - 'label': 'data(label)', - 'min-zoomed-font-size': 8, - 'transition-property': 'background-opacity, border-opacity, border-width', - 'transition-duration': 180, - }, - }, + { selector: 'edge', style: { + 'width': 'mapData(weight, 0.5, 1.0, 0.5, 4.5)', + 'line-color': 'rgba(255,255,255,0.16)', + 'curve-style': 'haystack', 'haystack-radius': 0, + 'opacity': 0.6, + }}, + { selector: 'node', style: { + 'shape': 'round-rectangle', + 'width': 130, 'height': 34, + 'background-color': 'data(color)', 'background-opacity': 0.18, + 'border-color': 'data(color)', 'border-width': 1.8, 'border-opacity': 0.55, + 'color': 'rgba(232,234,245,0.88)', + 'font-size': 11, 'font-family': 'Inter, system-ui, sans-serif', + 'font-weight': 500, + 'text-valign': 'center', 'text-halign': 'center', + 'label': 'data(label)', 'min-zoomed-font-size': 8, + 'transition-property': 'background-opacity, border-opacity, border-width', + 'transition-duration': 180, + }}, ], - layout: { - name: 'preset', - fit: false, - }, + layout: { name: 'preset', fit: false }, }); - // Ahora aplicar layout cose con animación (se adaptará al tamaño real) cy.layout({ name: 'cose', animate: 'end', @@ -167,24 +148,23 @@ cy.on('mouseover', 'node', function (ev) { var n = ev.target; n.style({ 'background-opacity': 0.45, 'border-opacity': 0.9, 'border-width': 2.2 }); - var tipData = tipMap[n.id()]; - if (tipData && tipData.preview) { - tooltipEl.textContent = tipData.preview.slice(0, 130); + var t = tipMap[n.id()]; + if (t && t.preview) { + tooltipEl.textContent = t.preview.slice(0, 130); tooltipEl.style.opacity = '1'; } }); cy.on('mouseout', 'node', function (ev) { - var n = ev.target; - n.style({ 'background-opacity': 0.18, 'border-opacity': 0.55, 'border-width': 1.8 }); + ev.target.style({ 'background-opacity': 0.18, 'border-opacity': 0.55, 'border-width': 1.8 }); tooltipEl.style.opacity = '0'; }); cy.on('mousemove', function (ev) { if (tooltipEl.style.opacity === '1') { - var pos = ev.renderedPosition || { x: 0, y: 0 }; - tooltipEl.style.left = (pos.x + 14) + 'px'; - tooltipEl.style.top = (pos.y - 10) + 'px'; + var p = ev.renderedPosition || { x: 0, y: 0 }; + tooltipEl.style.left = (p.x + 14) + 'px'; + tooltipEl.style.top = (p.y - 10) + 'px'; } }); @@ -193,21 +173,11 @@ cy.nodes().not(node).not(node.neighborhood()).forEach(function (n) { n.style({ 'opacity': 0.12 }); }); - cy.edges().forEach(function (e) { - e.style({ 'opacity': 0.06 }); - }); - node.neighborhood().nodes().forEach(function (n) { - n.style({ 'opacity': 1 }); - }); + cy.edges().forEach(function (e) { e.style({ 'opacity': 0.06 }); }); + node.neighborhood().nodes().forEach(function (n) { n.style({ 'opacity': 1 }); }); node.style({ 'opacity': 1, 'background-opacity': 0.40, 'border-opacity': 1 }); - node.connectedEdges().forEach(function (e) { - e.style({ 'opacity': 0.7 }); - }); - cy.animate({ - center: { eles: node }, - zoom: 2.5, - duration: 350, - }); + node.connectedEdges().forEach(function (e) { e.style({ 'opacity': 0.7 }); }); + cy.animate({ center: { eles: node }, zoom: 2.5, duration: 350 }); }); cy.on('dblclick', 'node', function (ev) { @@ -220,16 +190,12 @@ cy.nodes().forEach(function (n) { n.style({ 'opacity': 1, 'background-opacity': 0.18, 'border-opacity': 0.55, 'border-width': 1.8 }); }); - cy.edges().forEach(function (e) { - e.style({ 'opacity': 0.6 }); - }); + cy.edges().forEach(function (e) { e.style({ 'opacity': 0.6 }); }); cy.animate({ zoom: 1, pan: { x: 0, y: 0 }, duration: 300 }); } }); - var ro = new ResizeObserver(function () { - cy.resize().fit(25); - }); + var ro = new ResizeObserver(function () { cy.resize().fit(25); }); ro.observe(container); }) .catch(function (err) { @@ -239,35 +205,22 @@ 'font-size:0.8rem;font-family:Inter,sans-serif;">' + '· grafo no disponible ·'; }); - - }); // requestAnimationFrame } - // MutationObserver: detecta agregados dinámicamente + // MutationObserver var observer = new MutationObserver(function (mutations) { for (var m = 0; m < mutations.length; m++) { var added = mutations[m].addedNodes; for (var i = 0; i < added.length; i++) { var el = added[i]; - if (el.tagName && el.tagName.toLowerCase() === 'gioser-graph') { - initGraph(el); - } - var graphs = el.querySelectorAll ? el.querySelectorAll('gioser-graph') : []; - for (var j = 0; j < graphs.length; j++) { - initGraph(graphs[j]); - } + if (el.tagName && el.tagName.toLowerCase() === 'gioser-graph') { initGraph(el); } + var gs = el.querySelectorAll ? el.querySelectorAll('gioser-graph') : []; + for (var j = 0; j < gs.length; j++) { initGraph(gs[j]); } } } }); + observer.observe(document.documentElement, { childList: true, subtree: true }); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - }); - - // Inicializar los que ya existen var existing = document.querySelectorAll('gioser-graph'); - for (var i = 0; i < existing.length; i++) { - initGraph(existing[i]); - } + for (var i = 0; i < existing.length; i++) { initGraph(existing[i]); } })();