gioser

tawasuyu/brahman

Rust 321TOML 122JSON 14Markdown 114306 Definiciones

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 · (hace 5 meses) · padre ef3d698c4 · ver el árbol en este commit

Delta semántico · 1

crates/modules/gioser/gioser-graph-web/src/lib.rs

  • cambió por dentro fn render

2 archivos · +24 −19

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();
     }
 }