Add slots to graph

Cargo.toml

@@ -7,6 +7,7 @@ edition = "2018"
 
 [dependencies]
 bevy = { git = "https://github.com/bevyengine/bevy/", default-features = false, features = ["render"] }
+itertools = "0.10.0"
 
 [dev-dependencies]
 bevy = { git = "https://github.com/bevyengine/bevy/", default-features = false, features = ["render", "bevy_wgpu", "x11"] }

src/dot.rs

@@ -19,8 +19,12 @@ pub fn font_tag(text: &str, color: &str, size: u8) -> String {
     )
 }
 
-fn html_escape(input: &str) -> String {
-    input.replace('<', "&lt;").replace('>', "&gt;")
+pub fn html_escape(input: &str) -> String {
+    input
+        .replace("&", "&amp;")
+        .replace("\"", "&quot;")
+        .replace('<', "&lt;")
+        .replace('>', "&gt;")
 }
 
 impl DotGraph {
@@ -57,7 +61,24 @@ impl DotGraph {
         self.write(format!("\t{} {}", id, format_attributes(attrs)));
     }
 
-    pub fn add_edge(&mut self, from: &str, to: &str, attrs: &[(&str, &str)]) {
+    pub fn add_edge(
+        &mut self,
+        from: &str,
+        from_port: Option<&str>,
+        to: &str,
+        to_port: Option<&str>,
+        attrs: &[(&str, &str)],
+    ) {
+        let from = if let Some(from_port) = from_port {
+            format!("{}:{}", from, from_port)
+        } else {
+            from.to_string()
+        };
+        let to = if let Some(to_port) = to_port {
+            format!("{}:{}", to, to_port)
+        } else {
+            to.to_string()
+        };
         self.write(format!("\t{} -> {} {}", from, to, format_attributes(attrs)));
     }
 

src/render_graph.rs

@@ -1,18 +1,21 @@
 use crate::{
-    dot::{font_tag, DotGraph},
+    dot::{font_tag, html_escape, DotGraph},
     utils,
 };
 use bevy::render::render_graph::{Edge, NodeId, RenderGraph};
+use itertools::{EitherOrBoth, Itertools};
 
 pub fn render_graph_dot(graph: &RenderGraph) -> String {
     let options = [("rankdir", "LR"), ("ranksep", "1.0")];
     let mut dot = DotGraph::new("RenderGraph", &options);
 
-    let node_id = |id: &NodeId| format!("\"{:?}\"", id);
+    // Convert to format fitting GraphViz node id requirements
+    let node_id = |id: &NodeId| format!("{}", id.uuid().as_u128());
     let font = ("fontname", "Roboto");
+    let shape = ("shape", "plaintext");
     let edge_color = ("color", "\"blue\"");
 
-    dot.edge_attributes(&[font]).node_attributes(&[font]);
+    dot.edge_attributes(&[font]).node_attributes(&[shape, font]);
 
     let mut nodes: Vec<_> = graph.iter_nodes().collect();
     nodes.sort_by_key(|node_state| &node_state.type_name);
@@ -21,22 +24,53 @@ pub fn render_graph_dot(graph: &RenderGraph) -> String {
         let name = node.name.as_deref().unwrap_or("<node>");
         let type_name = utils::short_name(node.type_name);
 
+        let inputs = node
+            .input_slots
+            .iter()
+            .enumerate()
+            .map(|(index, slot)| {
+                format!(
+                    "<TD PORT=\"{}\">{}: {}</TD>",
+                    html_escape(&format!("{}", index)),
+                    html_escape(&slot.info.name),
+                    html_escape(&format!("{:?}", slot.info.resource_type))
+                )
+            })
+            .collect::<Vec<_>>();
+
         let outputs = node
             .output_slots
             .iter()
-            .map(|slot| format!("{}:{:?}, ", slot.info.name, slot.info.resource_type))
+            .enumerate()
+            .map(|(index, slot)| {
+                format!(
+                    "<TD PORT=\"{}\">{}: {}</TD>",
+                    html_escape(&format!("{}", index)),
+                    html_escape(&slot.info.name),
+                    html_escape(&format!("{:?}", slot.info.resource_type))
+                )
+            })
+            .collect::<Vec<_>>();
+
+        let slots = inputs
+            .iter()
+            .zip_longest(outputs.iter())
+            .map(|pair| match pair {
+                EitherOrBoth::Both(input, output) => format!("<TR>{}{}</TR>", input, output),
+                EitherOrBoth::Left(input) => {
+                    format!("<TR>{}<TD BORDER=\"0\">&nbsp;</TD></TR>", input)
+                }
+                EitherOrBoth::Right(output) => {
+                    format!("<TR><TD BORDER=\"0\">&nbsp;</TD>{}</TR>", output)
+                }
+            })
             .collect::<String>();
-        let outputs = outputs.trim_end_matches(", ");
-        let outputs = match outputs.is_empty() {
-            false => format!("<BR/> {}", font_tag(&format!("-> {}", outputs), "blue", 10)),
-            true => "".into(),
-        };
 
         let label = format!(
-            "<{}<BR />{} {}>",
-            name,
+            "<<TABLE STYLE=\"rounded\"><TR><TD PORT=\"title\" BORDER=\"0\" COLSPAN=\"2\">{}<BR/>{}</TD></TR>{}</TABLE>>",
+            html_escape(name),
             font_tag(&type_name, "red", 10),
-            outputs,
+            slots,
         );
 
         dot.add_node(&node_id(&node.id), &[("label", &label)]);
@@ -49,23 +83,27 @@ pub fn render_graph_dot(graph: &RenderGraph) -> String {
                     input_node,
                     input_index,
                     output_node,
-                    output_index: _,
+                    output_index,
                 } => {
-                    let input = graph.get_node_state(*input_node).unwrap();
-                    let input_slot = &input.input_slots.iter().nth(*input_index).unwrap().info;
-                    let label = format!("\"{}\"", input_slot.name);
-
                     dot.add_edge(
                         &node_id(output_node),
+                        Some(&format!("{}:e", output_index)),
                         &node_id(input_node),
-                        &[("label", &label), edge_color],
+                        Some(&format!("{}:w", input_index)),
+                        &[edge_color],
                     );
                 }
                 Edge::NodeEdge {
                     input_node,
                     output_node,
                 } => {
-                    dot.add_edge(&node_id(output_node), &node_id(input_node), &[]);
+                    dot.add_edge(
+                        &node_id(output_node),
+                        Some("title:e"),
+                        &node_id(input_node),
+                        Some("title:w"),
+                        &[],
+                    );
                 }
             }
         }