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

@@ -2,7 +2,10 @@
  * gioser-graph.js — Grafo semántico con Cytoscape.js
  *
  * Detecta automáticamente elementos <gioser-graph> 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',
+    logos:  '#d0dbff', aire:   '#d0dbff',
-    aire:   '#d0dbff',
+    nomos:  '#f59056', fuego:  '#f59056',
-    nomos:  '#f59056',
+    kay:    '#d49873', tierra: '#d49873',
-    fuego:  '#f59056',
+    uku:    '#6cd0f3', agua:   '#6cd0f3',
-    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 () {
+      var chk = setInterval(function () {
-        if (typeof cytoscape !== 'undefined') {
+        if (typeof cytoscape !== 'undefined') { clearInterval(chk); initGraph(container); }
-          clearInterval(check);
-          initGraph(container);
-        }
       }, 100);
       return;
     }
 
-    // Esperar un frame antes de fetch — el deck puede estar oculto
+    // Esperar a que el contenedor tenga ancho real (deck oculto → 0)
-    // y Cytoscape necesita tamaño real para el layout cose.
+    var wait = setInterval(function () {
-    requestAnimationFrame(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({
+          elements.push({ group: 'nodes', data: {
-            group: 'nodes',
+            id: d.id, doc_id: d.doc_id,
-            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(),
+            camino: d.camino.toUpperCase(), color: color,
-              color: color,
+          }});
-            },
-          });
         }
 
         var nodeIds = {};
-        for (var i = 0; i < elements.length; i++) {
+        for (var i = 0; i < elements.length; i++) nodeIds[elements[i].data.id] = true;
-          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({
+          elements.push({ group: 'edges', data: {
-            group: 'edges',
+            id: ed.id, source: ed.source, target: ed.target,
-            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: {
-              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',
+              'curve-style': 'haystack', 'haystack-radius': 0,
-                'haystack-radius': 0,
               'opacity': 0.6,
-              },
+            }},
-            },
+            { selector: 'node', style: {
-            {
-              selector: 'node',
-              style: {
               'shape': 'round-rectangle',
-                'width': 130,
+              'width': 130, 'height': 34,
-                'height': 34,
+              'background-color': 'data(color)', 'background-opacity': 0.18,
-                'background-color': 'data(color)',
+              'border-color': 'data(color)', 'border-width': 1.8, 'border-opacity': 0.55,
-                '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-size': 11, 'font-family': 'Inter, system-ui, sans-serif',
-                'font-family': 'Inter, system-ui, sans-serif',
               'font-weight': 500,
-                'text-valign': 'center',
+              'text-valign': 'center', 'text-halign': 'center',
-                'text-halign': 'center',
+              'label': 'data(label)', 'min-zoomed-font-size': 8,
-                'label': 'data(label)',
-                'min-zoomed-font-size': 8,
               'transition-property': 'background-opacity, border-opacity, border-width',
               'transition-duration': 180,
-              },
+            }},
-            },
           ],
-          layout: {
+          layout: { name: 'preset', fit: false },
-            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()];
+          var t = tipMap[n.id()];
-          if (tipData && tipData.preview) {
+          if (t && t.preview) {
-            tooltipEl.textContent = tipData.preview.slice(0, 130);
+            tooltipEl.textContent = t.preview.slice(0, 130);
             tooltipEl.style.opacity = '1';
           }
         });
 
         cy.on('mouseout', 'node', function (ev) {
-          var n = ev.target;
+          ev.target.style({ 'background-opacity': 0.18, 'border-opacity': 0.55, 'border-width': 1.8 });
-          n.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 };
+            var p = ev.renderedPosition || { x: 0, y: 0 };
-            tooltipEl.style.left = (pos.x + 14) + 'px';
+            tooltipEl.style.left = (p.x + 14) + 'px';
-            tooltipEl.style.top = (pos.y - 10) + '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) {
+          cy.edges().forEach(function (e) { e.style({ 'opacity': 0.06 }); });
-            e.style({ 'opacity': 0.06 });
+          node.neighborhood().nodes().forEach(function (n) { n.style({ 'opacity': 1 }); });
-          });
-          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) {
+          node.connectedEdges().forEach(function (e) { e.style({ 'opacity': 0.7 }); });
-            e.style({ 'opacity': 0.7 });
+          cy.animate({ center: { eles: node }, zoom: 2.5, duration: 350 });
-          });
-          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) {
+            cy.edges().forEach(function (e) { e.style({ 'opacity': 0.6 }); });
-              e.style({ 'opacity': 0.6 });
-            });
             cy.animate({ zoom: 1, pan: { x: 0, y: 0 }, duration: 300 });
           }
         });
 
-        var ro = new ResizeObserver(function () {
+        var ro = new ResizeObserver(function () { cy.resize().fit(25); });
-          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 ·</div>';
       });
-
-    }); // requestAnimationFrame
   }
 
-  // MutationObserver: detecta <gioser-graph> 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') {
+        if (el.tagName && el.tagName.toLowerCase() === 'gioser-graph') { initGraph(el); }
-          initGraph(el);
+        var gs = el.querySelectorAll ? el.querySelectorAll('gioser-graph') : [];
-        }
+        for (var j = 0; j < gs.length; j++) { initGraph(gs[j]); }
-        var graphs = el.querySelectorAll ? el.querySelectorAll('gioser-graph') : [];
-        for (var j = 0; j < graphs.length; j++) {
-          initGraph(graphs[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++) {
+  for (var i = 0; i < existing.length; i++) { initGraph(existing[i]); }
-    initGraph(existing[i]);
-  }
 })();