Merge pull request #473 from serverlessworkflow/fix-dashboard-graph-improvements

Improved graph rendering in the Dashboard

Author: cdavernas

src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/Templates/NodeShapeTemplate.razor

@@ -42,7 +42,7 @@
                 c 0 -@((Node.RadiusX / 2).ToInvariantString()) @((Node.RadiusX / 2).ToInvariantString()) -@(Node.RadiusX.ToInvariantString()) @(Node.RadiusX.ToInvariantString()) -@(Node.RadiusX.ToInvariantString()) 
                 h @((bounds.Width - (Node.RadiusX * 2)).ToInvariantString()) 
                 c @((Node.RadiusX / 2).ToInvariantString()) 0 @(Node.RadiusX.ToInvariantString()) @((Node.RadiusY / 2).ToInvariantString()) @(Node.RadiusX.ToInvariantString()) @(Node.RadiusY.ToInvariantString())
-                v @(Constants.ClusterHeight + 10)
+                v @(Constants.ClusterHeight - 10)
                 h -@(bounds.Width.ToInvariantString()) 
                 z"
             />

src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/Templates/NodeSymbolTemplate.razor

@@ -31,7 +31,7 @@
         (0 - bounds.Height / 4).ToInvariantString() :
         !WorkflowNode.IsCluster ?
             (0 - _symbolSize / 2).ToInvariantString() :
-            (0 - (bounds.Height + _symbolSize - (Constants.ClusterHeight+10)) / 2).ToInvariantString();
+            (0 - (bounds.Height + _symbolSize - (Constants.ClusterHeight-10)) / 2).ToInvariantString();
 
     [CascadingParameter(Name = "Node")] public INodeViewModel Node { get; set; } = null!;
     [CascadingParameter(Name = "Symbol")] public string? Symbol { get; set; }

src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/Templates/NodeTemplate.razor

@@ -17,7 +17,7 @@
 @namespace Synapse.Dashboard
 @inherits Neuroglia.Blazor.Dagre.Templates.NodeTemplate
 
-<g id="@Node.Id" class="@(WorkflowNode.IsCluster ? "cluster" : "node") @(!string.IsNullOrWhiteSpace(Node.Shape) ? "shape-" + Node.Shape : "shape-rectangle") @Node.CssClass" transform="translate(@((Node.X).ToInvariantString()), @((Node.Y).ToInvariantString()))">
+<g id="@Node.Id" class="@(WorkflowNode.IsCluster ? "cluster" : "node") @(!string.IsNullOrWhiteSpace(Node.Shape) ? "shape-" + Node.Shape : "shape-rectangle") @Node.CssClass" transform="translate(@((Node.X).ToInvariantString()), @((Y).ToInvariantString()))">
     <CascadingValue Name="Node" Value="Node">
         <NodeShapeTemplate />
         <CascadingValue Name="LabelTemplate" Value="LabelTemplate">
@@ -37,10 +37,11 @@
     </CascadingValue>
 </g>
 
-    
+
 @code {
     protected virtual IWorkflowNodeViewModel WorkflowNode => (IWorkflowNodeViewModel)this.Node;
     BoundingBox bounds => Node.Bounds!;
+    double Y => WorkflowNode.IsCluster ? Node.Y : Node.Y + 25; // Slightly offset the nodes (not clusters) to compensate for the clusters' "padding" forced by the Dagre layout. Note, the arrow "refX" has been adjusted accordingly.
 
     RenderFragment? LabelTemplate => !string.IsNullOrWhiteSpace(WorkflowNode.Type) || !string.IsNullOrWhiteSpace(WorkflowNode.Content) ? (__builder) =>
     {
@@ -59,7 +60,7 @@
                     @if (!string.IsNullOrWhiteSpace(WorkflowNode.Type)) {
                         <p class="fw-bold">@WorkflowNode.Type</p>
                     }
-                    @if (!string.IsNullOrWhiteSpace(WorkflowNode.Content))
+                    @if (!string.IsNullOrWhiteSpace(WorkflowNode.Content) && !WorkflowNode.IsCluster)
                     {
                         <pre class="fw-light fst-italic">@WorkflowNode.Content</pre>
                     }

src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowDiagram.razor

@@ -27,6 +27,18 @@
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
         <defs>
+            <!-- Instead of thoses defs, we could use graph.referenceableComponentTypes, but it needs to be set in the constructor which is not handy -->
+            <marker id="large-end-arrow"
+                    class="marker arrow"
+                    viewBox="0 0 10 10"
+                    refX="0"
+                    refY="5"
+                    markerUnits="strokeWidth"
+                    markerWidth="15"
+                    markerHeight="15"
+                    orient="auto">
+                <path d="M 0 0 L 10 5 L 0 10 z" />
+            </marker>
             <svg id="legend" viewBox="0 0 18 18">
                 <!-- from https://www.svgrepo.com/svg/451049/legend -->
                 <path fill-rule="evenodd" d="m2.4 8.1q-0.2-0.1-0.5-0.3-0.2-0.2-0.3-0.5-0.1-0.3-0.1-0.5c0-0.7 0.4-1.2 0.9-1.4 0.6-0.3 1.2-0.1 1.7 0.3 0.4 0.4 0.5 1.1 0.3 1.6-0.2 0.6-0.8 1-1.4 1q-0.3-0.1-0.6-0.2zm0.3-2q-0.1 0-0.2 0.1-0.1 0.1-0.2 0.3 0 0.1 0 0.3c0 0.3 0.1 0.5 0.4 0.6 0.3 0.2 0.6 0.1 0.8-0.1 0.2-0.2 0.3-0.6 0.2-0.8-0.1-0.3-0.4-0.5-0.7-0.5q-0.1 0-0.3 0.1zm13.8-3.8v0.7h-9.8v-0.7zm0 4.5v0.7h-9.7v-0.7zm0 4.5v0.7h-9.8v-0.7zm0 4.5v0.7h-9.7v-0.7zm-13.5-1.4l1.5 2.9h-3zm0.2 2l-0.2-0.5-0.3 0.5zm1.2-15.7v3h-3v-3zm-0.8 0.7h-1.5v1.5h1.5zm0.8 8.3v3h-3v-3zm-0.8 0.7h-1.5v1.5h1.5z" />

src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowDiagramStore.cs

@@ -69,7 +69,8 @@ public class WorkflowDiagramStore(IWorkflowGraphBuilder workflowGraphBuilder)
     public IObservable<DagreGraphOptions> Options => this.Orientation
         .Select(orientation => new DagreGraphOptions()
         {
-            Direction = orientation == WorkflowDiagramOrientation.LeftToRight ? DagreGraphDirection.LeftToRight : DagreGraphDirection.TopToBottom
+            Direction = orientation == WorkflowDiagramOrientation.LeftToRight ? DagreGraphDirection.LeftToRight : DagreGraphDirection.TopToBottom,
+            RankSeparation = 30
         })
         .DistinctUntilChanged();
 

src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowNodeViewModel.cs

@@ -67,7 +67,7 @@ public int FaultedInstancesCount
     public bool IsCluster => false;
 
     /// <summary>
-    /// Initialiazes a new <see cref="WorkflowNodeViewModel"/>
+    /// Initializes a new <see cref="WorkflowNodeViewModel"/>
     /// </summary>
     /// <param name="taskReference">The node task reference</param>
     /// <param name="config">The <see cref="NodeViewModelConfig"/> for the node</param>

src/dashboard/Synapse.Dashboard/Services/WorkflowGraphBuilder.cs

@@ -33,8 +33,8 @@ public class WorkflowGraphBuilder(ILogger<WorkflowGraphBuilder> logger, IYamlSer
 
     const string _clusterEntrySuffix = "-cluster-entry-port";
     const string _clusterExitSuffix = "-cluster-exit-port";
-    const string _trySuffix = "-try";
-    const string _catchSuffix = "-catch";
+    const string _trySuffix = "/try";
+    const string _catchSuffix = "/catch";
     const double characterSize = 8d;
 
     /// <summary>
@@ -530,6 +530,7 @@ protected virtual NodeViewModel BuildTryTaskNode(TaskNodeRenderingContext<TryTas
         this.BuildEdge(context.Graph, containerEntryPort, tryEntryPort);
         var innerContext = new TaskNodeRenderingContext(context.Workflow, context.Graph, context.TaskDefinition.Try, null, null, null, tryCluster, context.TaskReference + "/try", context, tryEntryPort, tryExitPort);
         this.BuildTransitions(tryEntryPort, innerContext);
+        //this.BuildEdge(context.Graph, tryExitPort, containerExitPort);
 
         var catchContent = this.YamlSerializer.SerializeToText(context.TaskDefinition.Catch);
         if (context.TaskDefinition.Catch.Do == null || context.TaskDefinition.Catch.Do.Count == 0)
@@ -607,6 +608,10 @@ protected virtual IEdgeViewModel BuildEdge(IGraphViewModel graph, INodeViewModel
         {
             edge.EndMarkerId = null;
         }
+        else
+        {
+            edge.EndMarkerId = "large-end-arrow"; ;
+        }
         return graph.AddEdge(edge);
     }
 

src/dashboard/Synapse.Dashboard/wwwroot/css/app.css

@@ -135,6 +135,7 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
+            font-weight: bold;
         }
 
         p {
@@ -216,6 +217,10 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
     fill: var(--graph-symbol-color);
 }
 
+.marker {
+    fill: #{$mute};
+}
+
 .start-node circle {
     stroke-width: 2px;
 }