tawasuyu/brahman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gioser-web: replace Rust SVG graph with Cytoscape.js

Browse Source 
- 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
This commit is contained in:
Sergio
2026-05-23 15:17:28 +00:00
parent 529287f01d
commit d4c31d70b7
10 changed files with 853 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/apps/gioser-web/Cargo.toml
-1
View File
@@ -14,7 +14,6 @@ gioser-canvas-web = { path = "../../modules/gioser/gioser-canvas-web" }
fana-md-reader-web = { path = "../../modules/fana/fana-md-reader-web" }
revista-web = { path = "../../modules/revista/revista-web" }
barra-web = { path = "../../modules/barra/barra-web" }
gioser-graph-web = { path = "../../modules/gioser/gioser-graph-web" }
wasm-bindgen.workspace = true
wasm-bindgen-futures.workspace = true
js-sys.workspace = true
crates/apps/gioser-web/cytoscape-graph.js
+258
View File
@@ -0,0 +1,258 @@
/**
* 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();
}
})();
crates/apps/gioser-web/index.html
+6
View File
@@ -99,6 +99,9 @@
</a>
</nav>
<!-- Cytoscape.js para el grafo semántico -->
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.30.4/dist/cytoscape.min.js"></script>
<script type="module">
import init from "./pkg/gioser_web.js";
init().catch(err => {
@@ -108,5 +111,8 @@
String(err) + '</pre>');
});
</script>
<!-- Grafo semántico (Cytoscape) — se auto-inicializa en <gioser-graph> -->
<script src="./cytoscape-graph.js" defer></script>
</body>
</html>
crates/apps/gioser-web/pkg/gioser_web.d.ts
Vendored
+7 -8
View File
@@ -8,14 +8,13 @@ export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembl
export interface InitOutput {
readonly memory: WebAssembly.Memory;
readonly boot: () => void;
readonly __wasm_bindgen_func_elem_218: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_1398: (a: number, b: number, c: number, d: number) => void;
readonly __wasm_bindgen_func_elem_217: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_217_3: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_494: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_593: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_289: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_288: (a: number, b: number) => void;
readonly __wasm_bindgen_func_elem_178: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_1209: (a: number, b: number, c: number, d: number) => void;
readonly __wasm_bindgen_func_elem_177: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_177_3: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_446: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_223: (a: number, b: number, c: number) => void;
readonly __wasm_bindgen_func_elem_224: (a: number, b: number) => void;
readonly __wbindgen_export: (a: number, b: number) => number;
readonly __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
readonly __wbindgen_export3: (a: number) => void;
crates/apps/gioser-web/pkg/gioser_web.js
+34 -96
View File
@@ -125,10 +125,6 @@ function __wbg_get_imports() {
const ret = getObject(arg0).createBuffer();
return isLikeNone(ret) ? 0 : addHeapObject(ret);
},
__wbg_createElementNS_10d5e4db26ea11c7: function() { return handleError(function (arg0, arg1, arg2, arg3, arg4) {
const ret = getObject(arg0).createElementNS(arg1 === 0 ? undefined : getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
return addHeapObject(ret);
}, arguments); },
__wbg_createElement_d10771800cfb6e7e: function() { return handleError(function (arg0, arg1, arg2) {
const ret = getObject(arg0).createElement(getStringFromWasm0(arg1, arg2));
return addHeapObject(ret);
@@ -152,6 +148,10 @@ function __wbg_get_imports() {
__wbg_disable_df908054ffee7971: function(arg0, arg1) {
getObject(arg0).disable(arg1 >>> 0);
},
__wbg_dispatchEvent_29c919cea8d37995: function() { return handleError(function (arg0, arg1) {
const ret = getObject(arg0).dispatchEvent(getObject(arg1));
return ret;
}, arguments); },
__wbg_document_3540635616a18455: function(arg0) {
const ret = getObject(arg0).document;
return isLikeNone(ret) ? 0 : addHeapObject(ret);
@@ -297,56 +297,6 @@ function __wbg_get_imports() {
const ret = result;
return ret;
},
__wbg_instanceof_SvgElement_46537942d3e1376d: function(arg0) {
let result;
try {
result = getObject(arg0) instanceof SVGElement;
} catch (_) {
result = false;
}
const ret = result;
return ret;
},
__wbg_instanceof_SvgLineElement_d8200164030c234d: function(arg0) {
let result;
try {
result = getObject(arg0) instanceof SVGLineElement;
} catch (_) {
result = false;
}
const ret = result;
return ret;
},
__wbg_instanceof_SvgRectElement_f5a06e74af743100: function(arg0) {
let result;
try {
result = getObject(arg0) instanceof SVGRectElement;
} catch (_) {
result = false;
}
const ret = result;
return ret;
},
__wbg_instanceof_SvgTextElement_06345cd3cc71c951: function(arg0) {
let result;
try {
result = getObject(arg0) instanceof SVGTextElement;
} catch (_) {
result = false;
}
const ret = result;
return ret;
},
__wbg_instanceof_SvgsvgElement_767ee4029321b850: function(arg0) {
let result;
try {
result = getObject(arg0) instanceof SVGSVGElement;
} catch (_) {
result = false;
}
const ret = result;
return ret;
},
__wbg_instanceof_WebGl2RenderingContext_419098f7bf88e87e: function(arg0) {
let result;
try {
@@ -393,6 +343,10 @@ function __wbg_get_imports() {
const ret = new Object();
return addHeapObject(ret);
},
__wbg_new_de9891da0bd35168: function() { return handleError(function (arg0, arg1) {
const ret = new Event(getStringFromWasm0(arg0, arg1));
return addHeapObject(ret);
}, arguments); },
__wbg_ok_556a55299dd238ba: function(arg0) {
const ret = getObject(arg0).ok;
return ret;
@@ -461,9 +415,6 @@ function __wbg_get_imports() {
__wbg_set_passive_2233318ae781e44d: function(arg0, arg1) {
getObject(arg0).passive = arg1 !== 0;
},
__wbg_set_textContent_9c5d65d703443b6d: function(arg0, arg1, arg2) {
getObject(arg0).textContent = arg1 === 0 ? undefined : getStringFromWasm0(arg1, arg2);
},
__wbg_set_width_25112eb6bf1148df: function(arg0, arg1) {
getObject(arg0).width = arg1 >>> 0;
},
@@ -497,10 +448,6 @@ function __wbg_get_imports() {
const ret = getObject(arg0).style;
return addHeapObject(ret);
},
__wbg_style_e34c1197b6088769: function(arg0) {
const ret = getObject(arg0).style;
return addHeapObject(ret);
},
__wbg_target_84e05e84ffc12989: function(arg0) {
const ret = getObject(arg0).target;
return isLikeNone(ret) ? 0 : addHeapObject(ret);
@@ -560,51 +507,46 @@ function __wbg_get_imports() {
return ret;
},
__wbindgen_cast_0000000000000001: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 176, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_1398);
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [Externref], shim_idx: 130, ret: Result(Unit), inner_ret: Some(Result(Unit)) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_1209);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000002: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [F64], shim_idx: 2, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_218);
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_178);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000003: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("Event")], shim_idx: 6, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_217);
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_177);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000004: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("KeyboardEvent")], shim_idx: 6, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_217_3);
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_177_3);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000005: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("MouseEvent")], shim_idx: 137, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_494);
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("MouseEvent")], shim_idx: 124, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_446);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000006: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("MouseEvent")], shim_idx: 170, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_593);
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("PointerEvent")], shim_idx: 53, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_223);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000007: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [NamedExternref("PointerEvent")], shim_idx: 67, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_289);
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 55, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_224);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000008: function(arg0, arg1) {
// Cast intrinsic for `Closure(Closure { owned: true, function: Function { arguments: [], shim_idx: 69, ret: Unit, inner_ret: Some(Unit) }, mutable: true }) -> Externref`.
const ret = makeMutClosure(arg0, arg1, __wasm_bindgen_func_elem_288);
return addHeapObject(ret);
},
__wbindgen_cast_0000000000000009: function(arg0, arg1) {
// Cast intrinsic for `Ref(Slice(F32)) -> NamedExternref("Float32Array")`.
const ret = getArrayF32FromWasm0(arg0, arg1);
return addHeapObject(ret);
},
__wbindgen_cast_000000000000000a: function(arg0, arg1) {
__wbindgen_cast_0000000000000009: function(arg0, arg1) {
// Cast intrinsic for `Ref(String) -> Externref`.
const ret = getStringFromWasm0(arg0, arg1);
return addHeapObject(ret);
@@ -623,34 +565,30 @@ function __wbg_get_imports() {
};
}
function __wasm_bindgen_func_elem_288(arg0, arg1) {
wasm.__wasm_bindgen_func_elem_288(arg0, arg1);
function __wasm_bindgen_func_elem_224(arg0, arg1) {
wasm.__wasm_bindgen_func_elem_224(arg0, arg1);
}
function __wasm_bindgen_func_elem_217(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_217(arg0, arg1, addHeapObject(arg2));
function __wasm_bindgen_func_elem_177(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_177(arg0, arg1, addHeapObject(arg2));
}
function __wasm_bindgen_func_elem_217_3(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_217_3(arg0, arg1, addHeapObject(arg2));
function __wasm_bindgen_func_elem_177_3(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_177_3(arg0, arg1, addHeapObject(arg2));
}
function __wasm_bindgen_func_elem_494(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_494(arg0, arg1, addHeapObject(arg2));
function __wasm_bindgen_func_elem_446(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_446(arg0, arg1, addHeapObject(arg2));
}
function __wasm_bindgen_func_elem_593(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_593(arg0, arg1, addHeapObject(arg2));
function __wasm_bindgen_func_elem_223(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_223(arg0, arg1, addHeapObject(arg2));
}
function __wasm_bindgen_func_elem_289(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_289(arg0, arg1, addHeapObject(arg2));
}
function __wasm_bindgen_func_elem_1398(arg0, arg1, arg2) {
function __wasm_bindgen_func_elem_1209(arg0, arg1, arg2) {
try {
const retptr = wasm.__wbindgen_add_to_stack_pointer(-16);
wasm.__wasm_bindgen_func_elem_1398(retptr, arg0, arg1, addHeapObject(arg2));
wasm.__wasm_bindgen_func_elem_1209(retptr, arg0, arg1, addHeapObject(arg2));
var r0 = getDataViewMemory0().getInt32(retptr + 4 * 0, true);
var r1 = getDataViewMemory0().getInt32(retptr + 4 * 1, true);
if (r1) {
@@ -661,8 +599,8 @@ function __wasm_bindgen_func_elem_1398(arg0, arg1, arg2) {
}
}
function __wasm_bindgen_func_elem_218(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_218(arg0, arg1, arg2);
function __wasm_bindgen_func_elem_178(arg0, arg1, arg2) {
wasm.__wasm_bindgen_func_elem_178(arg0, arg1, arg2);
}
function addHeapObject(obj) {
crates/apps/gioser-web/pkg/gioser_web_bg.wasm
BIN
View File
Binary file not shown.
crates/apps/gioser-web/pkg/gioser_web_bg.wasm.d.ts
Vendored
+7 -8
View File
@@ -2,14 +2,13 @@
/* eslint-disable */
export const memory: WebAssembly.Memory;
export const boot: () => void;
export const __wasm_bindgen_func_elem_218: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_1398: (a: number, b: number, c: number, d: number) => void;
export const __wasm_bindgen_func_elem_217: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_217_3: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_494: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_593: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_289: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_288: (a: number, b: number) => void;
export const __wasm_bindgen_func_elem_178: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_1209: (a: number, b: number, c: number, d: number) => void;
export const __wasm_bindgen_func_elem_177: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_177_3: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_446: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_223: (a: number, b: number, c: number) => void;
export const __wasm_bindgen_func_elem_224: (a: number, b: number) => void;
export const __wbindgen_export: (a: number, b: number) => number;
export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
export const __wbindgen_export3: (a: number) => void;
crates/apps/gioser-web/src/lib.rs
+20 -30
View File
@@ -21,7 +21,6 @@ use std::rc::Rc;
use barra_web::{Task, TaskList};
use gioser_canvas_web::{tips, Renderer};
use gioser_graph_web::GraphWidget;
use fana_md_reader_web::Reader;
use revista_web::Deck;
use wasm_bindgen::prelude::*;
@@ -282,45 +281,36 @@ impl AppState {
if let Err(e) = reader.open_url(&url_owned, &element_owned).await {
web_sys::console::warn_1(&e);
}
// Después de cargar el md, montar el grafo debajo
// Montar contenedor del grafo (Cytoscape.js) debajo del md
let graph_container_id = format!("graph-{}-container", element_owned);
// Si ya existe, no lo duplicamos
if document_clone.get_element_by_id(&graph_container_id).is_some() {
return;
}
// Crear contenedor debajo del content
let wrapper: HtmlElement = document_clone
.create_element("div")
.create_element("gioser-graph")
.ok()
.and_then(|e| e.dyn_into::<HtmlElement>().ok())
.unwrap();
.unwrap_or_else(|| {
// fallback: div normal
let d: HtmlElement = document_clone
.create_element("div")
.ok()
.and_then(|e| e.dyn_into().ok())
.unwrap();
d
});
wrapper.set_id(&graph_container_id);
wrapper.style().set_property("margin-top", "1rem").ok();
wrapper.set_attribute("data-api-url", "https://api.gioser.net").ok();
wrapper.style().set_property("margin-top", "1.5rem").ok();
wrapper.style().set_property("padding-top", "1rem").ok();
wrapper.style().set_property("border-top", "1px solid rgba(255,255,255,0.08)").ok();
// Label
let label: HtmlElement = document_clone
.create_element("div")
.ok()
.and_then(|e| e.dyn_into::<HtmlElement>().ok())
.unwrap();
label.set_inner_html(
"<span style=\"font-family: Inter, sans-serif; font-size: 0.75rem; \
letter-spacing: 0.3em; text-transform: uppercase; color: rgba(232,234,245,0.45);\">
· grafo semántico ·
</span>"
);
wrapper.append_child(&label).ok();
wrapper.style().set_property("border-top", "1px solid rgba(255,255,255,0.06)").ok();
wrapper.style().set_property("min-height", "220px").ok();
content_clone.append_child(&wrapper).ok();
// Cargar el grafo
let mut graph = GraphWidget::new(
wrapper,
"https://api.gioser.net",
None, // callback simplificado por ahora
);
if let Err(e) = graph.load().await {
web_sys::console::warn_1(&format!("grafo: error al cargar: {:?}", e).into());
return;
// Disparar el script de Cytoscape si ya está en la página
if let Some(win) = web_sys::window() {
let _ = win.dispatch_event(
&web_sys::Event::new("gioser-graph-ready").unwrap()
);
}
});
}