gioser-web: revert Cytoscape, back to SVG gioser-graph-web

- Remove cytoscape-graph.js (wasn't working with hidden deck)
- Restore gioser-graph-web Rust SVG widget with gioser-web dep
- Rebuild WASM (514K)
This commit is contained in:
Sergio
2026-05-23 15:28:41 +00:00
parent 24218447e3
commit 7f7ba1fef9
9 changed files with 217 additions and 290 deletions
+31 -18
View File
@@ -21,6 +21,7 @@ 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::*;
@@ -281,34 +282,46 @@ impl AppState {
if let Err(e) = reader.open_url(&url_owned, &element_owned).await {
web_sys::console::warn_1(&e);
}
// Montar contenedor del grafo (Cytoscape.js) debajo del md
// Después de cargar el md, montar el grafo debajo
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("gioser-graph")
.create_element("div")
.ok()
.and_then(|e| e.dyn_into::<HtmlElement>().ok())
.unwrap_or_else(|| {
// fallback: div normal
let d: HtmlElement = document_clone
.create_element("div")
.ok()
.and_then(|e| e.dyn_into().ok())
.unwrap();
d
});
.unwrap();
wrapper.set_id(&graph_container_id);
wrapper.set_attribute("data-api-url", "https://api.gioser.net").ok();
wrapper.style().set_property("margin-top", "1.5rem").ok();
wrapper.style().set_property("margin-top", "1rem").ok();
wrapper.style().set_property("padding-top", "1rem").ok();
wrapper.style().set_property("border-top", "1px solid rgba(255,255,255,0.06)").ok();
wrapper.style().set_property("min-height", "220px").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();
content_clone.append_child(&wrapper).ok();
// El script cytoscape-graph.js usa MutationObserver
// para detectar <gioser-graph> dinámicos. No hace falta
// disparar nada acá.
// 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;
}
});
}