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)
24218447e3876e291f8067aa93cdcb22c3c7f3d5 · by Sergio · 2026-05-23T15:25:45Z (5 months ago) · parent 9db79617ebrowse the tree at this commit
Semantic delta · 2
crates/apps/gioser-web/cytoscape-graph.js
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 <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',
- 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 ·</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') {
- 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]); }
})();