gioser-graph: edges behind nodes, variable thickness by raw weight
- Edges and nodes now in separate SVG <g> groups (edges first = behind)
- Stroke width: 0.6 + w*4.0 instead of normalized range (more visible variation)
- Brightness: uses raw weight directly, not normalized against max
- Edges group has no breathing animation (only nodes breathe)
906e5f639cba7cf2c9351eeadbf05469a5852abd · por Sergio · 2026-05-23T15:53:00Z (hace 5 meses) · padre ef3d698c4 · ver el árbol en este commit
Delta semántico · 1
crates/modules/gioser/gioser-graph-web/src/lib.rs
diff --git a/crates/apps/gioser-web/pkg/gioser_web_bg.wasm b/crates/apps/gioser-web/pkg/gioser_web_bg.wasm
index c45b3e5..9e1c712 100644
Binary files a/crates/apps/gioser-web/pkg/gioser_web_bg.wasm and b/crates/apps/gioser-web/pkg/gioser_web_bg.wasm differ
diff --git a/crates/modules/gioser/gioser-graph-web/src/lib.rs b/crates/modules/gioser/gioser-graph-web/src/lib.rs
index 53f9dad..e64b524 100644
--- a/crates/modules/gioser/gioser-graph-web/src/lib.rs
+++ b/crates/modules/gioser/gioser-graph-web/src/lib.rs
@@ -207,13 +207,22 @@ impl GraphWidget {
));
svg.append_child(&style_el).ok();
- let breathe_group: web_sys::SvgElement = self
+ // Grupo para aristas (sin animación de respiración, están detrás)
+ let edges_group: web_sys::SvgElement = self
.document
.create_element_ns(Some(ns), "g")
.unwrap()
.dyn_into()
.unwrap();
- breathe_group.set_attribute("class", "gb-svg").ok();
+
+ // Grupo para nodos (con respiración, encima)
+ let nodes_group: web_sys::SvgElement = self
+ .document
+ .create_element_ns(Some(ns), "g")
+ .unwrap()
+ .dyn_into()
+ .unwrap();
+ nodes_group.set_attribute("class", "gb-svg").ok();
// Mapas: UUID → posición y color
let pos_map: std::collections::HashMap<&str, (f64, f64)> = positions
@@ -225,11 +234,6 @@ impl GraphWidget {
.map(|n| (n.id.as_str(), camino_color(&n.camino)))
.collect();
- let max_w = self.edges.iter()
- .filter_map(|e| e.weight)
- .fold(0.0_f64, f64::max)
- .max(0.5);
-
// ── Aristas: mezcla de colores de los nodos que conecta ──
let mut drawn = std::collections::HashSet::new();
for edge in &self.edges {
@@ -247,19 +251,19 @@ impl GraphWidget {
let c2 = color_map.get(edge.target.as_str()).copied().unwrap_or("#888");
let w = edge.weight.unwrap_or(0.7);
- let norm_w = (w / max_w).clamp(0.0, 1.0);
+ // Sin normalización por max — usar weight directamente con más rango
+ // weight 0.5→0.8 suele ser el rango real; mapeamos a grosor visible
+ let thick = 0.6 + w * 4.0; // w=0.5→2.6, w=0.9→4.2, w=1.0→4.6
// Mezclar colores: 50/50 + brillo según weight
let blended = blend_colors(c1, c2, 0.5);
-
- // Brillo extra según el peso (acercar a blanco)
let (br, bg, bb) = parse_hex(&blended);
- let r = (br as f64 + (255.0 - br as f64) * norm_w * 0.4) as u32;
- let g = (bg as f64 + (255.0 - bg as f64) * norm_w * 0.4) as u32;
- let b = (bb as f64 + (255.0 - bb as f64) * norm_w * 0.4) as u32;
+ let bright_factor = 0.2 + w * 0.5; // más brillo directo
+ let r = (br as f64 + (255.0 - br as f64) * bright_factor) as u32;
+ let g = (bg as f64 + (255.0 - bg as f64) * bright_factor) as u32;
+ let b = (bb as f64 + (255.0 - bb as f64) * bright_factor) as u32;
- let alpha = 0.20 + norm_w * 0.65;
- let sw = 1.0 + norm_w * 4.5;
+ let alpha = 0.15 + w * 0.75;
let line: SvgLineElement = self
.document
@@ -272,10 +276,10 @@ impl GraphWidget {
line.set_attribute("x2", &format!("{:.1}", x2)).ok();
line.set_attribute("y2", &format!("{:.1}", y2)).ok();
line.set_attribute("stroke", &format!("#{:02x}{:02x}{:02x}", r, g, b)).ok();
- line.set_attribute("stroke-width", &format!("{:.1}", sw)).ok();
+ line.set_attribute("stroke-width", &format!("{:.1}", thick)).ok();
line.set_attribute("stroke-opacity", &format!("{:.2}", alpha)).ok();
line.set_attribute("class", "gb-line").ok();
- breathe_group.append_child(&line).ok();
+ edges_group.append_child(&line).ok();
}
// ── Nodos ──
@@ -407,10 +411,11 @@ impl GraphWidget {
g.add_event_listener_with_callback("click", click.as_ref().unchecked_ref()).ok();
click.forget();
- breathe_group.append_child(&g).ok();
+ nodes_group.append_child(&g).ok();
}
- svg.append_child(&breathe_group).ok();
+ svg.append_child(&edges_group).ok();
+ svg.append_child(&nodes_group).ok();
self.container.append_child(&svg).ok();
}
}