fix(Dashboard): represented do task as cluster in the graph

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>

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

@@ -0,0 +1,35 @@
+// Copyright © 2024-Present The Synapse Authors
+//
+// Licensed under the Apache License, Version 2.0 (the "License"),
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+namespace Synapse.Dashboard.Components;
+
+/// <summary>
+/// Represents a composite task node view model
+/// </summary>
+public class ForkTaskNodeViewModel
+    : WorkflowNodeViewModel
+{
+    /// <summary>
+    /// Initializes a new <see cref="ListenTaskNodeViewModel"/>
+    /// </summary>
+    /// <param name="taskReference">The node task reference</param>
+    /// <param name="name">The node name</param>
+    /// <param name="content">The node content</param>
+    public ForkTaskNodeViewModel(string taskReference, string name, string content)
+        : base(taskReference, new() { Label = name, CssClass = "fork-task-node" })
+    {
+        Content = content;
+        Symbol = "fork-symbol";
+        Type = "FORK";
+    }
+}

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

@@ -34,12 +34,11 @@ public class TaskNodeViewModel
     /// <param name="name">The name of the <see cref="TaskDefinition"/> the <see cref="TaskNodeViewModel"/> represents</param>
     /// <param name="definition">The <see cref="TaskDefinition"/> the <see cref="TaskNodeViewModel"/> represents</param>
     /// <param name="isFirst">Indicates whether or not the task to create the <see cref="TaskNodeViewModel"/> for is the first task of the workflow it belongs to</param>
-    public TaskNodeViewModel(string taskReference, string name, TaskDefinition definition, bool isFirst = false)
+    public TaskNodeViewModel(string taskReference, string name, bool isFirst = false)
         : base(null, name)
     {
         this.Id = taskReference;
         this.Name = name;
-        this.Definition = definition;
         this.IsFirst = isFirst;
         this.ComponentType = typeof(TaskNodeTemplate);
     }
@@ -50,12 +49,6 @@ public TaskNodeViewModel(string taskReference, string name, TaskDefinition defin
     [JsonIgnore(Condition = JsonIgnoreCondition.Always)]
     public string Name { get; }
 
-    /// <summary>
-    /// Gets the <see cref="TaskDefinition"/> the <see cref="TaskNodeViewModel"/> represents
-    /// </summary>
-    [JsonIgnore(Condition = JsonIgnoreCondition.Always)]
-    public TaskDefinition Definition { get; }
-
     /// <summary>
     /// Gets if the state is the first of the workflow
     /// </summary>

src/dashboard/Synapse.Dashboard/Pages/Workflows/Details/View.razor

@@ -41,7 +41,7 @@
             </Button>
         </Content>
     </HorizontalCollapsible>
-    <HorizontalCollapsible>
+    <HorizontalCollapsible class="user-select-none">
         <Label>Graph</Label>
         <Content>
             @if (workflowDefinition == null)

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

@@ -11,15 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-using Microsoft.VisualBasic;
 using Neuroglia.Blazor.Dagre.Models;
-using Neuroglia.Eventing.CloudEvents;
 using ServerlessWorkflow.Sdk;
 using ServerlessWorkflow.Sdk.Models;
 using ServerlessWorkflow.Sdk.Models.Calls;
 using ServerlessWorkflow.Sdk.Models.Tasks;
 using System.Diagnostics;
-using System.Xml.Linq;
 
 namespace Synapse.Dashboard.Services;
 
@@ -99,7 +96,11 @@ protected NodeViewModel GetNextNode(TaskNodeRenderingContext context, NodeViewMo
         {
             this.BuildTaskNode(new(context.Workflow, context.Graph, nextTaskIndex, nextTaskName, nextTask, context.TaskGroup, context.ParentReference, context.EndNode, currentNode));
         }
-        return (NodeViewModel)context.Graph.AllNodes[nextTaskReference];
+        if (context.Graph.AllClusters.ContainsKey(nextTaskReference))
+        {
+            return (NodeViewModel)context.Graph.AllClusters[nextTaskReference].AllNodes.First().Value;
+        }
+        return (NodeViewModel)context.Graph.AllNodes[nextTaskReference]; //((IReadOnlyDictionary<string, IGraphElement>)context.Graph.AllNodes).Concat((IReadOnlyDictionary<string, IGraphElement>)context.Graph.AllClusters).ToDictionary()[nextTaskReference];
     }
 
     /// <summary>
@@ -117,6 +118,7 @@ protected NodeViewModel BuildTaskNode(TaskNodeRenderingContext context)
             EmitTaskDefinition => this.BuildEmitTaskNode(context.OfType<EmitTaskDefinition>()),
             ExtensionTaskDefinition => this.BuildExtensionTaskNode(context.OfType<ExtensionTaskDefinition>()),
             ForTaskDefinition => this.BuildForTaskNode(context.OfType<ForTaskDefinition>()),
+            ForkTaskDefinition => this.BuildForkTaskNode(context.OfType<ForkTaskDefinition>()),
             ListenTaskDefinition => this.BuildListenTaskNode(context.OfType<ListenTaskDefinition>()),
             RaiseTaskDefinition => this.BuildRaiseTaskNode(context.OfType<RaiseTaskDefinition>()),
             RunTaskDefinition => this.BuildRunTaskNode(context.OfType<RunTaskDefinition>()),
@@ -188,12 +190,11 @@ protected virtual NodeViewModel BuildCallTaskNode(TaskNodeRenderingContext<CallT
     protected virtual NodeViewModel BuildDoTaskNode(TaskNodeRenderingContext<DoTaskDefinition> context)
     {
         ArgumentNullException.ThrowIfNull(context);
-        var taskCount = context.TaskDefinition.Do.Count;
-        var node = new DoTaskNodeViewModel(context.TaskReference, context.TaskName, $"{taskCount} task{(taskCount > 1 ? "s": "")}");
-        if (context.TaskGroup == null) context.Graph.AddNode(node);
-        else context.TaskGroup.AddChild(node);
-        this.BuildEdge(context.Graph, node, this.GetNextNode(context, node));
-        return node;
+        var cluster = new TaskNodeViewModel(context.TaskReference, context.TaskName, false);
+        if (context.TaskGroup == null) context.Graph.AddCluster(cluster);
+        else context.TaskGroup.AddChild(cluster);
+        this.BuildTaskNode(new(context.Workflow, context.Graph, 0, context.TaskDefinition.Do.First().Key, context.TaskDefinition.Do.First().Value, cluster, context.TaskReference + "/do", context.EndNode, context.PreviousNode));
+        return cluster;
     }
 
     /// <summary>
@@ -241,6 +242,21 @@ protected virtual NodeViewModel BuildForTaskNode(TaskNodeRenderingContext<ForTas
         return node;
     }
 
+    /// <summary>
+    /// Builds a new <see cref="NodeViewModel"/> for the specified fork task
+    /// </summary>
+    /// <param name="context">The rendering context for the fork task node</param>
+    /// <returns>A new <see cref="NodeViewModel"/></returns>
+    protected virtual NodeViewModel BuildForkTaskNode(TaskNodeRenderingContext<ForkTaskDefinition> context)
+    {
+        ArgumentNullException.ThrowIfNull(context);
+        var node = new ForkTaskNodeViewModel(context.TaskReference, context.TaskName, this.YamlSerializer.SerializeToText(context.TaskDefinition.Fork));
+        if (context.TaskGroup == null) context.Graph.AddNode(node);
+        else context.TaskGroup.AddChild(node);
+        this.BuildEdge(context.Graph, node, this.GetNextNode(context, node));
+        return node;
+    }
+
     /// <summary>
     /// Builds a new <see cref="NodeViewModel"/> for the specified listen task
     /// </summary>

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

@@ -21037,6 +21037,14 @@ tr.row-placeholder td::after {
   stroke-width: 5px;
 }
 
+.edge-label {
+  transform: translateY(30px);
+}
+.edge-label .label-content {
+  text-align: center;
+  background-color: #1a1d20;
+}
+
 .horizontal-collapse {
   border-right: 1px solid var(--bs-dark-bg-subtle);
   overflow: scroll;

src/dashboard/Synapse.Dashboard/wwwroot/css/graph.scss

@@ -307,4 +307,13 @@ $wait-color: #5465d6;
 
 .end-node circle {
     stroke-width: 5px;
+}
+
+.edge-label {
+    transform: translateY(30px);
+
+    .label-content {
+        text-align: center;
+        background-color: #{$dark-bg-subtle-dark};
+    }
 }