feat(Dashboard): added graph legend

Signed-off-by: Jean-Baptiste Bianchi <[email protected]>
serverlessworkflow · Aug 16, 2024 · 54da237 · 54da237
1 parent 872abb1
commit 54da237
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 11 deletions.
diff --git a/src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowClusterViewModel.cs b/src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowClusterViewModel.cs
@@ -74,7 +74,6 @@ public int FaultedInstancesCount
     /// <param name="config">The <see cref="NodeViewModelConfig"/> for the node</param>
     public WorkflowClusterViewModel(string taskReference, NodeViewModelConfig? config = null)
         : base(null, config?.Label, config?.CssClass, config?.Shape, config?.Width ?? 0, config?.Height ?? 0, config?.RadiusX ?? 0, config?.RadiusY ?? 0, config?.X ?? 0, config?.Y ?? 0, config?.ComponentType, config?.ParentId)
-    //: base(null, config?.Label, config?.CssClass, (config?.Shape == null || config?.Shape == SynapseNodeShape.Cartouche) ? NodeShape.Rectangle : config!.Shape, config?.Width ?? 0, config?.Height ?? 0, config?.RadiusX ?? 0, config?.RadiusY ?? 0, config?.X ?? 0, config?.Y ?? 0, config?.ComponentType, config?.ParentId)
     {
         this.Id = taskReference;
     }

diff --git a/src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowDiagram.razor b/src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowDiagram.razor
@@ -5,16 +5,40 @@
 
 @if (graph != null)
 {
-    <DagreGraph @ref="dagre" Graph="graph" OnMouseUp="OnMouseUp" Options="options" />
+    <svg class="svg-definitions"
+         version="1.2"
+         baseProfile="tiny"
+         xmlns="http://www.w3.org/2000/svg"
+         xmlns:xlink="http://www.w3.org/1999/xlink">
+        <defs>
+            <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" />
+                <path fill="none" fill-rule="evenodd" d="m18 0v18h-18v-18z" />
+            </svg>
+        </defs>
+    </svg>
+    <DagreGraph @ref="dagre" Graph="graph" OnMouseUp="OnMouseUp" Options="options">
+        <ExtraControls>
+            <button class="btn" type="button" title="legend" @onclick="ShowLegendAsync">
+                <svg>
+                    <use href="#legend" />
+                </svg>
+            </button>
+        </ExtraControls>
+    </DagreGraph>
 }
 
+<Modal @ref="modal" />
+
 @code{
 
     WorkflowDefinition workflowDefinition = null!;
     DagreGraph? dagre;
     IGraphViewModel? graph;
     IDagreGraphOptions? options = null;
     bool isDirty = true;
+    private Modal modal = default!;
 
     [Parameter] public WorkflowDefinition WorkflowDefinition { get; set; } = null!;
 
@@ -44,4 +68,9 @@
         return true;
     }
 
+    private async Task ShowLegendAsync()
+    {
+        await modal.ShowAsync<WorkflowDiagramLegend>(title: "Legend");
+    }
+
 }
diff --git a/src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowDiagramLegend.razor b/src/dashboard/Synapse.Dashboard/Components/WorkflowDiagram/WorkflowDiagramLegend.razor
@@ -0,0 +1,123 @@
+@namespace Synapse.Dashboard
+
+<div class="d-flex align-items-center justify-content-center">
+    <svg style="height: @(height * 14)">
+        <g class="node call-task-node legend" transform="translate(0, @(height * 0))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    CALL
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node do-task-node legend" transform="translate(0, @(height * 1))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    DO
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node fork-task-node legend" transform="translate(0, @(height * 2))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    FORK
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node for-task-node legend" transform="translate(0, @(height * 3))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    FOR
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node listen-task-node legend" transform="translate(0, @(height * 4))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    LISTEN
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node run-task-node legend" transform="translate(0, @(height * 5))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    RUN
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node set-task-node legend" transform="translate(0, @(height * 6))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    SET
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node switch-task-node legend" transform="translate(0, @(height * 7))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    SWITCH
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node try-catch-task-node legend" transform="translate(0, @(height * 8))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    TRY..CATCH
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node try-task-node legend" transform="translate(0, @(height * 9))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    TRY
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node emit-task-node legend" transform="translate(0, @(height * 10))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    EMIT
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node wait-task-node legend" transform="translate(0, @(height * 11))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    WAIT
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node catch-task-node legend" transform="translate(0, @(height * 12))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    CATCH
+                </div>
+            </foreignObject>
+        </g>
+        <g class="node raise-task-node legend" transform="translate(0, @(height * 13))">
+            <rect class="node-rectangle" x="0" y="0" width="@width" height="@height"></rect>
+            <foreignObject x="0" y="0" width="@width" height="50">
+                <div>
+                    RAISE
+                </div>
+            </foreignObject>
+        </g>
+    </svg>
+</div>
+
+@code {
+    int width = 300;
+    int height = 50;
+}
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.css
@@ -20909,17 +20909,17 @@ tr.row-placeholder td::after {
   stop-color: #1c5763;
 }
 
-#switch-node-gradient stop[offset="0"] {
+#set-node-gradient stop[offset="0"] {
   stop-color: #21918c;
 }
-#switch-node-gradient stop[offset="1"] {
+#set-node-gradient stop[offset="1"] {
   stop-color: #176662;
 }
 
-#set-node-gradient stop[offset="0"] {
+#switch-node-gradient stop[offset="0"] {
   stop-color: #20a486;
 }
-#set-node-gradient stop[offset="1"] {
+#switch-node-gradient stop[offset="1"] {
   stop-color: #16735e;
 }
 
@@ -20981,12 +20981,12 @@ tr.row-placeholder td::after {
 .node.run-task-node, .cluster.run-task-node {
   --gradient-url: url(#run-node-gradient);
 }
-.node.switch-task-node, .cluster.switch-task-node {
-  --gradient-url: url(#switch-node-gradient);
-}
 .node.set-task-node, .cluster.set-task-node {
   --gradient-url: url(#set-node-gradient);
 }
+.node.switch-task-node, .cluster.switch-task-node {
+  --gradient-url: url(#switch-node-gradient);
+}
 .node.try-catch-task-node, .cluster.try-catch-task-node {
   --gradient-url: url(#try-catch-node-gradient);
 }
@@ -21036,6 +21036,17 @@ tr.row-placeholder td::after {
   text-align: left;
   padding: 5px 5px 5px 65px;
 }
+.node.legend .node-rectangle, .cluster.legend .node-rectangle {
+  fill: var(--gradient-url);
+}
+.node.legend div, .cluster.legend div {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
 
 .symbol {
   fill: var(--bs-body-color);

diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css b/src/dashboard/Synapse.Dashboard/wwwroot/css/app.min.css
diff --git a/src/dashboard/Synapse.Dashboard/wwwroot/css/graph.scss b/src/dashboard/Synapse.Dashboard/wwwroot/css/graph.scss
@@ -16,8 +16,8 @@ $nodeTypes:
     "for",
     "listen",
     "run",
-    "switch",
     "set",
+    "switch",
     "try-catch",
     "try",
     "emit",
@@ -138,6 +138,20 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
             padding: 5px 5px 5px 65px;
         }
     }
+
+    &.legend {
+        .node-rectangle {
+            fill: var(--gradient-url);
+        }
+        div {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+    }
 }
 
 .symbol {