group io in mermaid

Author: caroott

src/WorkflowGraph/Visualization.Siren.fs

@@ -106,6 +106,13 @@ module WorkflowGraphSiren =
         let elements = ResizeArray<FlowchartElement>()
         let edgeKeys = ResizeArray<string>()
 
+        let addGroupedNodes (groupId: string) (groupLabel: string) (nodes: WorkflowGraphNode []) =
+            if nodes.Length > 0 then
+                let grouped = ResizeArray<FlowchartElement>()
+                nodes
+                |> Array.iter (fun node -> grouped.Add(nodeToElement node))
+                elements.Add(flowchart.subgraphNamed(groupId, quoteMermaidLabel groupLabel, grouped))
+
         let addRenderedEdge (sourceNodeId: WorkflowGraphNodeId) (targetNodeId: WorkflowGraphNodeId) (label: string option) =
             let labelKey = defaultArg label ""
             let key = $"{sourceNodeId}::{targetNodeId}::{labelKey}"
@@ -184,9 +191,9 @@ module WorkflowGraphSiren =
             |> Map.tryFind stepNodeId
             |> Option.filter processingUnitNodeIds.Contains
 
-        rootInputNodes |> Array.iter (nodeToElement >> elements.Add)
+        addGroupedNodes "wg_initial_inputs" "Initial Inputs" rootInputNodes
         processingUnitNodes |> Array.iter (nodeToElement >> elements.Add)
-        rootOutputNodes |> Array.iter (nodeToElement >> elements.Add)
+        addGroupedNodes "wg_final_outputs" "Workflow Outputs" rootOutputNodes
 
         if hasCalls |> not && processingUnitNodeIds.Contains graph.RootProcessingUnitNodeId then
             for inputNode in rootInputNodes do

tests/WorkflowGraph/Visualization.Siren.Tests.fs

@@ -122,6 +122,24 @@ let tests_visualization =
             Expect.stringContains mermaid "port_unit_parent__in__child[child-port]" ""
             Expect.stringContains mermaid "port_unit_parent__in__child-->|child-port|unit_parent" ""
 
+        testCase "initial inputs and final outputs are rendered as groups" <| fun () ->
+            let graph = buildSimpleWorkflowGraph ()
+            let mermaid = WorkflowGraphSiren.toMermaid graph
+            Expect.stringContains mermaid "subgraph wg_initial_inputs[Initial Inputs]" ""
+            Expect.stringContains mermaid "subgraph wg_final_outputs[Workflow Outputs]" ""
+
+        testCase "group ordering keeps inputs above processing and outputs below" <| fun () ->
+            let graph = buildSimpleWorkflowGraph ()
+            let mermaid = WorkflowGraphSiren.toMermaid graph
+            let inputGroupIndex = mermaid.IndexOf("subgraph wg_initial_inputs", System.StringComparison.Ordinal)
+            let processingIndex = mermaid.IndexOf("unit_root__step1__run", System.StringComparison.Ordinal)
+            let outputGroupIndex = mermaid.IndexOf("subgraph wg_final_outputs", System.StringComparison.Ordinal)
+            Expect.isTrue (inputGroupIndex >= 0) "Input group missing"
+            Expect.isTrue (processingIndex >= 0) "Processing node missing"
+            Expect.isTrue (outputGroupIndex >= 0) "Output group missing"
+            Expect.isTrue (inputGroupIndex < processingIndex) "Input group should be emitted before processing nodes"
+            Expect.isTrue (processingIndex < outputGroupIndex) "Output group should be emitted after processing nodes"
+
         testCaseCrossAsync "fromGraph workflow fixture contains processing units and labeled dependency edges" (crossAsync {
             let! content = FileSystemHelper.readFileTextAsync workflowFixturePath
             let graph = content |> Decode.decodeCWLProcessingUnit |> Builder.build