Fix 0xa0 bug for nodes, and update demo 2.

README.md

@@ -81,4 +81,4 @@ For server side rendering, the `"server_side_graphviz"` feature needs to be pass
     - [ ] Link to gist
 
 [demo_1]: https://azriel.im/dot_ix/
-[demo_2]: https://azriel.im/dot_ix/#src=LQhQBMEsCcFMGMAukD2A7AXAAgG62svAIYA2oAFpPkdPOQJ4ahZZEDuAzkyy+xwPoBzEigBGpbj16chI8SX6QiAW37QUJWP1GwiaDolIBrbAG8AvsymsZwsaUUq1GrZH2G08WGctS+a2EFUTCs-GTgg9H4cAAd4SWsbAQjg6Lj+IgTEpIDItDT4DP4OchpYcGKAV1E0WEQfUOz-FKjYwqJ+cFgcKpq6huyeZsDUtqKY9QqOatr6rAtGsOSR1vTRLMThvILtTu7e2YHBnJb8sdF+CZQpmf753ybwlbP0+MXrLdHXvZ7pvrmFscTs8doUrjd-g1QGhrlo0CpYFwrHxsAAiACCyiIAC90FgAOqwURYADK+BwkC8HFRyNscgkWFRAB5RAA+ADi9JIWAASoiUJVaIimQB6NmM2kCOzyRyqdSabS6dzGNEASXRAFleS4adIpVzZc4FW4DHovGrNdrNLrgXk0SzWXy8qRefzBVTReKbZ9VvFGQA1AAKAGFvU9tmNMoyncEsOiw8sI+kOiUyhDDoyABQk0pwcAASlJt0QCdyX3aPwOd1RmYAIgBRf2FknF0unHYdcFVuY1wM8gDytebrclZd92jRMbxACE2yDzpW-hmaw2m0X-nOk4ULl2l9XM33B8ON6P22M-aip2gsKHT-Pvl1fsW0XXG8fZpvy-wwZNuy-D0O64fqA0KwnsHDwEiLAGLAMT8AAjGiABibjgFgoiVIIpbSg4Shyi4ip6KaJAmIyfDALAJBEAYlI6ERhgkcAHDkpSsDAPKsDYQaeFGq4yqeN4ZGcBRVE0fAdHKoxCAAEzsTqd5bmi8EAOzSQAdAAzPBakAAy6SK8EAGyfuOKa5uUf6Mip6labp+nSdJJkvBWj6Wai1madpAAs9kaU5OwXK5e49h5tmGb5-nnouz5WapnlqQAHBFClfp2v7BUpcW2fBek6SK0l+Sl447ulMXuVl2nwepeUFZF3y7mVoWVT5NWFaBXT8LAygoAAVpAUFJNggCAZIA8H+jjhJDYIAPBuAPD743cU4HGEZJpGALwbgAjO-N9gKDxS0mh45pYBtRWYEdgB-uydBTTYACPuXZGxTmemdyrYAHrtjXqY7OUUQUxa9722l+gX7BlR1vXdD7A79YMfWeyaXKVkKg-9PpfSV1yWX94OFD+6Mg5joDlIIiKSCjHYPWm3b8Bk4apdFiMANqk-dqZ5t2AA0AOmXTswALpY0ULMWcFVNM2s3N3IzNNc4LT2IBzovbuLiB8zD94VjLlPU4mX6FD9DMKwLj3s5zX265D-x8-zHR67MItS19aW4zFkva1zNt1PL9tkw1Fv80DT7-Hbruo-DTv617C7u3LJsBaHssqzHUVR0Hn2gnHlku6nSfm7MnvB2nPu8yBH0TYaS0ScRRgp6Xu0EftZqCZnNeLQRFcMUYeeyNtZd1-xXgJ-4zf4cafdaFrWfJtgTcLcPfGmgJnew+0luGIIA2r138jYFIphYPCyiCaiE2olgDwb202+JLv++H20J9n0QgjFKvWiPtv18ImippE1gr5NvfVgN7fy0OCd+e9P6MmAb-AC+YAHtS0KvAag8Z68WWpXbe9MN4TQHnSbutcR7z0OiwTBj9N6kBwfnC+QJsgkKfm0ChE91ZGxBrQgoDCl7fRzncHgrDgE-HYWrXYUdL5YF4S-fh-MzYBwzDwoB4jHwCK3OMBGMjRFyMfiAyYijAbpxBsQ9RRM47aPHDjWWl8xEaKMSBQQ0AiAxHIBSbEGRECIGgANGIRB4BV26l0bANBbH0H4IgaSIFEDkC6t4KwBh6CaAGiwGEHUugADMiCVBIIgOJPBYAAA9XFRgAOTwEFBwFA0BgAxBQG4RA+AsDqEqGgLo4BgAkEEPkxohNX6wBSWkjJGwsA5LydgIpbjSnlMqWgap0BGiUHAF0U6AAyGZcz5j9NybY7ASzYDXgeKrJRZkKbC3Hhw62XC5gACpNloEaAbfZrNDkG39pZC5kBZlbOuRHOGGt7kfOxkrbAzzXlXKWGQnaLcFRt2MNXFBe1R7-Mue8yhcNk5HMEY7MxWAAVzIRYwoRpyU4cLRuizFbzgUcKkZrA2pinnwuBUPVB9cBL4tRXCl5WKpAkEgIIcgcx5kcq5Ygd4STIAkAUKmDqMJoBYkmlgfJOUdJtMSEKkV5MOrkBQHgaA2B8kAFZ5WCuFaK0oHUkkoCKVwGVcqFXWCVYaogHVPHIDwFqy17wDDqCMFoMVcJSlSq1V5HSerEhupQB6lVWg1Uaq1RpANVqpDBtDV6jISBIBOplbqwN1h42esQDEwS4AUAuPKO8Dxsy3CCCjbGwa7wmRMn+Xy7lrrSgxC0PADQpTsD0EoiINg7wBSIA5bUb8bbNVYE7SKlAPapCNDgCU90WgbEChiNgeZM6BRCiEHUmI1ba0YvrQKoNTaW3DuwAYdAsBe2VH7W4I9IgR2ntqNiia-zV1zo3Yu7Fpxn1unXQuyoW7SVqz6TWutnKG1BtcSG7NuaT0aBedO54y7TjbpA-yxtdib3tqwBwKi1SL1XsHa229J6cPnoA3sr9eQP2CPWBipDZGdYUeCMXHgIN5nBWQ7u0D+7M2HqHUR9CJBKikesH2gdGGR2iEE8JuNEGE05s0DBjl4AqN7PJncmKZz2P0bdqc-5Wmhg-OUWHDMmniwqZ0cIjF+ndk6MLncUz-xzMmL+VZsz2nTa6I0+xoAA
+[demo_2]: https://azriel.im/dot_ix/#src=LQhQBMEsCcFMGMAukD2A7AXAAgG62svAIYA2oAFpPkdPOQJ4ahZZEDuAzkyy+xwPoBzEigBGpbj16chI8SX6QiAW37QUJWP1GwiaDolIBrbAG8AvsymsZwsaUUq1GrZH2G08WGctS+a2EFUTCs-GTgg9H4cAAd4SWsbAQjg6Lj+IgTEpIDItDT4DP4OchpYcGKAV1E0WEQfUOz-FKjYwqJ+cFgcKpq6huyeZsDUtqKY9QqOatr6rAtGsOSR1vTRLMThvILtTu7e2YHBnJb8sdF+CZQpmf753ybwlbP0+MXrLdHXvZ7pvrmFscTs8doUrjd-g1QGhrlo0CpYFwrHxsAAiACCyiIAC90FgAOqwURYADK+BwkC8HFRyNscgkWFRAB5RAA+ADi9JIWAASoiUJVaIimQB6NmM2kCOzyRyqdSabS6dzGNEASXRAFleS4adIpVzZc4FW4DHovGrNdrNLrgXk0SzWXy8qRefzBVTReKbZ9VvFGQA1AAKAGFvU9tmNMoyncEsOiw8sI+kOiUyhDDoyABQk0pwcAASlJt0QCdyX3aPwOd1RmYAIgBRf2FknF0unHYdcFVuY1wM8gDytebrclZd92jRMbxACE2yDzpW-hmaw2m0X-nOk4ULl2l9XM33B8ON6P22M-aip2gsKHT-Pvl1fsW0XXG8fZpvy-wwZNuy-D0O64fqA0KwnsHDwEiLAGLAMT8AAjGiABibjgFgoiVIIpbSg4Shyi4ip6KaJAmIyfDALAJBEAYlI6ERhgkcAHDkpSsDAPKsDYQaeFGq4yqeN4ZGcBRVE0fAdHKoxCAAEzsTqd5bmi8EAOzSQAdAAzPBakAAy6SK8EAGyfuOKa5uUf6Mip6labp+nSdJJkvBWj6Wai1madpAAs9kaU5OwXK5e49h5tmGb5-nnouz5WapnlqQAHBFClfp2v7BUpcW2fBek6SK0l+Sl447ulMXuVl2nwepeUFZF3y7mVoWVT5NWFaBXT8LAygoAAVpAUFJNggCAZIA8H+jjhJDYIAPBuAPD743cU4HGEZJpGALwbgAjO-N9gKDxS0mh45pYBtRWYEdgB-uydBTTYACPuXZGxTmemdyrYAHrtjXqY7OUUQUxa9722l+gX7BlR1vXdD7A79YMfWeyaXKVkKg-9PpfSV1yWX94OFD+6Mg5joDlIIiKSCjHYPWm3b8Bk4apdFiMANqk-dqZ5t2AA0AOmXTswALpY0ULMWcFVNM2s3N3IzNNc4LT2IBzovbuLiB8zD94VjLlPU4mX6FD9DMKwLj3s5zX265D-x8-zHR67MItS19aW4zFkva1zNt1PL9tkw1Fv80DT7-Hbruo-DTv617C7u3LJsBaHssqzHUVR0Hn2gnHlku6nSfm7MnvB2nPu8yBH0TYaS0ScRRgp6Xu0EftZqCZnNeLQRFcMUYeeyNtZd1-xXgJ-4zf4cafdaFrWfJtgTcLcPfGmgJnew+0luGIIA2r138hohNNob20aJtLvRCCMUq9aI+aKmkTWCvk2R8n1fWjgpfZ83wB+Y0qAG+QIgXXr8fm8GRSGnt3WuCo27GE7kPXiihR4Jz3nEbA2RM5L0XmrQ2FNgrwIAY-H4SCUHoOtjnD2icxZRzQVub8StsEPzPnHKeBtHaywoYDdOwUWHjhxvHECG8DD0E0AIAAZigeAlR-4nwmtgAAZBvLogiiCVBIIgDgjQYQdTkQopRA0pCphiFoeAGgUDQGwCQSAyhYDvAMOoIwWg2CQHAIgcg2AADk9N4IxAAB482cZYxA1itB8M0C4jgGh7E+MSFYlANjyZdBcQAVh0jpcJ1hBGQBIAoVMsSsDOOkok5JCC-QACpZGwHkYo5RVheF0IvlgYpACNHlJUSwKpx8n6TGwHUk+DStEgUENAIgMRyAUmxBkRAfiBoxCIPAKu3Usk0H6fQfgiBpI8PIF1bwVhAnE1UWBbpyiNhYFgB4vxUZnGiOgCE6AwAYgoDcL-aAWB1CVDQF0cAwASCCGSSwQm59SmaP2e8I5JzsDnMudc25aB7mNEoOALop0pEwrhfMQ5xz+nYERbAa8DxVaULMpg4sKcl7fWIXMQpGK0CNEYeTVmwtx5Ev9pZMl9i4WUojnDDWtKDZmwDhmJlsLMWsv1KAlu4ClSV2rjPGB9cBIdPJYKieLkSWEsIWwmKfKWVLAVbsZOdL0Fo1lrK5lArNVEu5ZrLlqrEbquNUMOkwrZ6wPnl4ZVuLDX8opVIUxghyBzCkV6n17xUnpJiXCIxWJJrZJykkwNaSMmlA6uQFAeBjHZISV8ngQa41EA6sI0RXBI15JjcGzJWgpnIDwC4qN6boJ+KiQE+NoboDhpcV5QtETa3RJLfwRNyaXEaTbdYSJnaG0ZCQJACtqaB06I7QExA-DBLgBQGM8o7xJmwrcIIPt6aUTvCZEyDp-rECWNKHo78hiU30EoiINg7wBSIFMbUM9IgL1XpQDeqQjQ4AhPdFoPpAoYjSK-QKIUQgnkxF3fu2ph7j0DP0ee7ABh0AWMSHeh9cHn0IcQEh+VkjalAZ-aB-98rTgdPwyBv9lRwMmrVgcvdB7IDeqPe2-xp950IdCeAT9zxAPPAg-RxjMHT0GIw1gDgVFf63sqPetw6GjEIfE8h21+dIykd49Ryh6w8NqaU1qoppxi48BBlI4KfGoMMYDREk9smU2iBIJURTUhUMyafXJ9CdmHOGZnaxoJomOPEZVRytVJn1O0yjh04LOmiVMMZRFnFrCwu1Ni6QxWhc7iFKSxahL6Xiz+coVwmLOWgA

crate/rt/src/into_graphviz_dot_src/info_graph.rs

@@ -455,6 +455,11 @@ fn node_cluster_internal(
         })
         .unwrap_or_default();
 
+    // Note: There's no space between `{node_tailwind_classes}{node_tag_classes}`
+    // because for some reason spaces before `{node_tag_classes}` are translated
+    // into the `0xa0` byte.
+    //
+    // Same thing happens for `{edge_tag_classes}`
     if node_hierarchy.is_empty() {
         match graph_style {
             GraphStyle::Box => writedoc!(
@@ -472,7 +477,7 @@ fn node_cluster_internal(
                             </tr>
                             {node_desc}
                         </table>>
-                        class = "{node_tailwind_classes} {node_tag_classes}"
+                        class = "{node_tailwind_classes}{node_tag_classes}"
                     ]
                 "#
             )?,
@@ -498,7 +503,7 @@ fn node_cluster_internal(
 
                             {node_id} [
                                 label = ""
-                                class = "{node_tailwind_classes} {node_tag_classes}"
+                                class = "{node_tailwind_classes}{node_tag_classes}"
                                 {margin}
                             ]
                             {node_id}_text [
@@ -540,7 +545,7 @@ fn node_cluster_internal(
                         {node_desc}
                     </table>>
                     style = "filled,rounded"
-                    class = "{node_tailwind_classes} {node_tag_classes}"
+                    class = "{node_tailwind_classes}{node_tag_classes}"
             "#
         )?;
 
@@ -705,6 +710,8 @@ fn edge(edge_args: EdgeArgs<'_>) -> String {
     // Note: There's no space between `{edge_tailwind_classes}{edge_tag_classes}`
     // because for some reason spaces before `{edge_tag_classes}` are translated
     // into the `0xa0` byte.
+    //
+    // Same thing happens for `{node_tag_classes}`
     formatdoc!(
         r#"
         {edge_src_node_id} -> {edge_target_node_id} [

playground/src/app/info_graph_example.yaml

@@ -142,6 +142,43 @@ tag_items:
   tag_step_4: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, app_download__s3_object, s3_object, app_extract, app_download__app_extract]
   tag_step_5: [iam_policy, iam_role, instance_profile, github_app_zip, app_download, app_download__s3_object, s3_object, app_extract]
 
+common_styles: # not part of `info_graph`, but it ignores unknown keys
+  selected_outline: &selected_outline
+    outline_color: red
+    outline_style: dashed
+    outline_width: '1'
+    outline_shade: '600'
+
+  node_blue_progress: &node_blue_progress
+    <<: *selected_outline
+    shape_color: blue
+    stroke_shade: '600'
+    stroke_style: "dasharray:0.5,3,0.5,3,0.5,3,0.5,3,6,3,12,30"
+    stroke_width: '[2px]'
+    fill_shade: '200'
+    extra: |-
+      [&>ellipse]:[stroke-linecap:round]
+      [&>ellipse]:animate-[ellipse-spin_1.5s_linear_infinite]
+
+  node_completed: &node_completed
+    shape_color: green
+    stroke_shade: '600'
+    stroke_style: 'solid'
+    stroke_width: '[2px]'
+    fill_shade: '200'
+
+  edge_blue_animated: &edge_blue_animated
+    shape_color: blue
+    stroke_style: dashed  # shorthand for [&>path]:[stroke-dasharray:3]
+    stroke_width: '[2px]'
+    stroke_shade_normal: '600'
+    fill_shade_normal: '500'
+    extra: >-
+      [&>path]:animate-[stroke-dashoffset-move_2s_linear_infinite]
+      [&>path]:visible
+      [&>polygon]:visible
+
+
 # We always use the `focus` pseudo class.
 #
 # There are other pseudo classes, but it doesn't appear useful enough for most of those to be
@@ -225,39 +262,3 @@ css: >-
     0%   { stroke-dashoffset: 0; }
     100% { stroke-dashoffset: -248; }
   }
-
-common_styles: # not part of `info_graph`, but it ignores unknown keys
-  selected_outline: &selected_outline
-    outline_color: red
-    outline_style: dashed
-    outline_width: '1'
-    outline_shade: '600'
-
-  node_blue_progress: &node_blue_progress
-    <<: *selected_outline
-    shape_color: blue
-    stroke_shade: '600'
-    stroke_style: "dasharray:0.5,3,0.5,3,0.5,3,0.5,3,6,3,12,30"
-    stroke_width: '[2px]'
-    fill_shade: '200'
-    extra: |-
-      [&>ellipse]:[stroke-linecap:round]
-      [&>ellipse]:animate-[ellipse-spin_1.5s_linear_infinite]
-
-  node_completed: &node_completed
-    shape_color: green
-    stroke_shade: '600'
-    stroke_style: 'solid'
-    stroke_width: '[2px]'
-    fill_shade: '200'
-
-  edge_blue_animated: &edge_blue_animated
-    shape_color: blue
-    stroke_style: dashed  # shorthand for [&>path]:[stroke-dasharray:3]
-    stroke_width: '[2px]'
-    stroke_shade_normal: '600'
-    fill_shade_normal: '500'
-    extra: >-
-      [&>path]:animate-[stroke-dashoffset-move_2s_linear_infinite]
-      [&>path]:visible
-      [&>polygon]:visible