Sergio
d4c31d70b7
- Add cytoscape-graph.js: fetches /graph, renders with Cytoscape.js - Style: round-rect nodes, cose layout, edge width proportional to weight - Click: center node + fade rest (wineandcheesemap effect) - Double-click: trigger navigation callback - Hover: tooltip with preview text - Click background: restore all - Remove gioser-graph-web crate dependency (no longer needed) - Add CDN cytoscape@3.30.4 + defer script to index.html - gioser-graph custom element auto-initialized on mount
259 lines
8.4 KiB
JavaScript
259 lines
8.4 KiB
JavaScript
/**
|
|
* gioser-graph.js — Grafo semántico con Cytoscape.js
|
|
*
|
|
* Se monta automáticamente cuando hay un contenedor <gioser-graph>
|
|
* en el DOM con atributo data-api-url.
|
|
*
|
|
* Efecto "wineandcheesemap": clic en nodo → centra + desvanece resto.
|
|
* Doble clic → callback de navegación.
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
const COLORS = {
|
|
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) {
|
|
const apiUrl = container.getAttribute('data-api-url') || 'https://api.gioser.net';
|
|
const onNavigate = window.__gioserGraphNavigate || null;
|
|
|
|
fetch(`${apiUrl}/graph?limit=500`)
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (!data.nodes || data.nodes.length === 0) return;
|
|
|
|
// Construir elementos Cytoscape
|
|
const elements = [];
|
|
|
|
for (const n of data.nodes) {
|
|
const d = n.data;
|
|
if (!d.doc_id) continue;
|
|
const color = caminoColor(d.camino);
|
|
elements.push({
|
|
data: {
|
|
id: d.id,
|
|
doc_id: d.doc_id,
|
|
label: d.name.length > 22 ? d.name.slice(0, 20) + '…' : d.name,
|
|
camino: d.camino.toUpperCase(),
|
|
color,
|
|
},
|
|
});
|
|
}
|
|
|
|
const nodeIds = new Set(elements.map(e => e.data.id));
|
|
|
|
for (const e of data.edges) {
|
|
const ed = e.data;
|
|
if (!nodeIds.has(ed.source) || !nodeIds.has(ed.target)) continue;
|
|
const weight = ed.weight || 0.7;
|
|
elements.push({
|
|
data: {
|
|
id: ed.id,
|
|
source: ed.source,
|
|
target: ed.target,
|
|
weight,
|
|
},
|
|
});
|
|
}
|
|
|
|
const cy = cytoscape({
|
|
container,
|
|
elements,
|
|
style: [
|
|
// Aristas: grosor según peso
|
|
{
|
|
selector: 'edge',
|
|
style: {
|
|
'width': 'mapData(weight, 0.5, 1.0, 0.5, 4)',
|
|
'line-color': 'rgba(255,255,255,0.18)',
|
|
'target-arrow-color': 'rgba(255,255,255,0.12)',
|
|
'curve-style': 'haystack',
|
|
'haystack-radius': 0,
|
|
'opacity': 0.6,
|
|
},
|
|
},
|
|
// Nodo: rectángulo redondeado
|
|
{
|
|
selector: 'node',
|
|
style: {
|
|
'shape': 'round-rectangle',
|
|
'width': 130,
|
|
'height': 32,
|
|
'background-color': 'data(color)',
|
|
'background-opacity': 0.20,
|
|
'border-color': 'data(color)',
|
|
'border-width': 1.5,
|
|
'border-opacity': 0.7,
|
|
'color': 'rgba(232,234,245,0.90)',
|
|
'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,
|
|
'shadow-blur': 6,
|
|
'shadow-color': 'rgba(0,0,0,0.4)',
|
|
'shadow-offset-x': 0,
|
|
'shadow-offset-y': 2,
|
|
'shadow-opacity': 0.5,
|
|
'transition-property': 'background-opacity, border-opacity, shadow-blur',
|
|
'transition-duration': 200,
|
|
},
|
|
},
|
|
// Sublabel del camino — lo ponemos como label secundario
|
|
// Cytoscape no soporta dos labels nativamente; usamos un
|
|
// badge de esquina con la data (camino) en el tooltip.
|
|
],
|
|
layout: {
|
|
name: 'cose',
|
|
animate: false,
|
|
idealEdgeLength: 160,
|
|
nodeRepulsion: 8000,
|
|
gravity: 0.25,
|
|
numIter: 1000,
|
|
fit: true,
|
|
padding: 30,
|
|
},
|
|
});
|
|
|
|
// Tooltip con preview al hover
|
|
const tips = {};
|
|
for (const n of data.nodes) {
|
|
const d = n.data;
|
|
if (d.doc_id) tips[d.id] = d;
|
|
}
|
|
|
|
let tooltipEl = container.querySelector('.cy-tooltip');
|
|
if (!tooltipEl) {
|
|
tooltipEl = document.createElement('div');
|
|
tooltipEl.className = 'cy-tooltip';
|
|
tooltipEl.style.cssText =
|
|
'position:absolute;z-index:10;pointer-events:none;' +
|
|
'background:rgba(6,5,13,0.88);color:#e8eaf5;' +
|
|
'padding:6px 10px;border-radius:8px;font-size:11px;' +
|
|
'font-family:Inter,sans-serif;line-height:1.4;' +
|
|
'border:1px solid rgba(255,255,255,0.10);' +
|
|
'backdrop-filter:blur(8px);max-width:240px;' +
|
|
'opacity:0;transition:opacity 180ms ease;';
|
|
container.style.position = 'relative';
|
|
container.appendChild(tooltipEl);
|
|
}
|
|
|
|
cy.on('mouseover', 'node', (ev) => {
|
|
const node = ev.target;
|
|
node.style({ 'background-opacity': 0.45, 'border-opacity': 1, 'shadow-blur': 12 });
|
|
const tipData = tips[node.id()];
|
|
if (tipData && tipData.preview) {
|
|
tooltipEl.textContent = tipData.preview.slice(0, 120);
|
|
tooltipEl.style.opacity = '1';
|
|
}
|
|
});
|
|
|
|
cy.on('mouseout', 'node', (ev) => {
|
|
const node = ev.target;
|
|
node.style({ 'background-opacity': 0.20, 'border-opacity': 0.7, 'shadow-blur': 6 });
|
|
tooltipEl.style.opacity = '0';
|
|
});
|
|
|
|
cy.on('mousemove', 'node', (ev) => {
|
|
const pos = ev.renderedPosition || { x: 0, y: 0 };
|
|
tooltipEl.style.left = (pos.x + 14) + 'px';
|
|
tooltipEl.style.top = (pos.y - 10) + 'px';
|
|
});
|
|
|
|
// Click: centrar nodo + desvanecer resto (wineandcheesemap effect)
|
|
cy.on('click', 'node', (ev) => {
|
|
const node = ev.target;
|
|
// Animar vecindario: opacidad plena en nodo + vecinos
|
|
cy.nodes().not(node).not(node.neighborhood()).forEach(n => {
|
|
n.style({ 'opacity': 0.15 });
|
|
});
|
|
cy.edges().forEach(e => {
|
|
e.style({ 'opacity': 0.08 });
|
|
});
|
|
// Vecinos directos opacidad normal
|
|
node.neighborhood().nodes().forEach(n => {
|
|
n.style({ 'opacity': 1 });
|
|
});
|
|
node.style({ 'opacity': 1 });
|
|
// Aristas del vecindario visibles
|
|
node.connectedEdges().forEach(e => {
|
|
e.style({ 'opacity': 0.7 });
|
|
});
|
|
// Centrar
|
|
cy.animate({
|
|
center: { eles: node },
|
|
zoom: 2.2,
|
|
duration: 400,
|
|
});
|
|
});
|
|
|
|
// Doble clic: navegar a la página
|
|
cy.on('dblclick', 'node', (ev) => {
|
|
const docId = ev.target.data('doc_id');
|
|
if (onNavigate && docId) onNavigate(docId);
|
|
});
|
|
|
|
// Clic en fondo: restaurar todo
|
|
cy.on('click', (ev) => {
|
|
if (ev.target === cy) {
|
|
cy.nodes().forEach(n => n.style({ 'opacity': 1 }));
|
|
cy.edges().forEach(e => e.style({ 'opacity': 0.6 }));
|
|
cy.animate({ zoom: 1, pan: { x: 0, y: 0 }, duration: 300 });
|
|
}
|
|
});
|
|
|
|
// Resize al cambiar tamaño del contenedor
|
|
const ro = new ResizeObserver(() => cy.resize().fit(30));
|
|
ro.observe(container);
|
|
|
|
// Scroll del contenedor padre: pausar interacción si no visible
|
|
container.__cy = cy;
|
|
})
|
|
.catch(err => {
|
|
console.warn('gioser-graph: error fetching graph:', err);
|
|
container.innerHTML =
|
|
'<div style="padding:1rem;text-align:center;color:rgba(232,234,245,0.35);' +
|
|
'font-size:0.8rem;font-family:Inter,sans-serif;">' +
|
|
'· grafo no disponible ·</div>';
|
|
});
|
|
}
|
|
|
|
// Auto-inicializar todos los <gioser-graph> en la página
|
|
function boot() {
|
|
const els = document.querySelectorAll('gioser-graph');
|
|
for (const el of els) {
|
|
// Esperar a que Cytoscape esté cargado
|
|
if (typeof cytoscape !== 'undefined') {
|
|
initGraph(el);
|
|
} else {
|
|
// Si el CDN no ha cargado, esperar
|
|
const check = setInterval(() => {
|
|
if (typeof cytoscape !== 'undefined') {
|
|
clearInterval(check);
|
|
initGraph(el);
|
|
}
|
|
}, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', boot);
|
|
} else {
|
|
boot();
|
|
}
|
|
})();
|