fix(Dashboard): improved graph interactions hints

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

Author: JBBianchi

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

@@ -34,7 +34,7 @@
             </svg>
         </defs>
     </svg>
-    <DagreGraph @ref="Store.DagreGraph" OnMouseUp="OnMouseUp" Options="options" Graph="graph">
+    <DagreGraph @ref="Store.DagreGraph" OnMouseDown="HandleOnMouseDown" OnMouseUp="HandleOnMouseUp" Options="options" Graph="graph">
         <ExtraControls>
             <button class="btn" type="button" title="legend" @onclick="Store.ToggleLegendAsync">
                 <svg>
@@ -116,4 +116,26 @@
         return true;
     }
 
+    protected void HandleOnMouseDown(GraphEventArgs<MouseEventArgs> e)
+    {
+        if (e.GraphElement == null && graph != null)
+        {
+            graph.CssClass = "grabbing";
+            isDirty = true;
+        }
+    }
+
+    protected async Task HandleOnMouseUp(GraphEventArgs<MouseEventArgs> e)
+    {
+        if (e.GraphElement == null && graph != null)
+        {
+            graph.CssClass = "";
+            isDirty = true;
+        }
+        if (OnMouseUp.HasDelegate)
+        {
+            await OnMouseUp.InvokeAsync(e);
+        }
+    }
+
 }

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

@@ -20809,6 +20809,13 @@ tr.row-placeholder td::after {
   height: 100px !important;
 }
 
+.graph-canvas {
+  cursor: grab;
+}
+.graph-canvas.grabbing {
+  cursor: grabbing;
+}
+
 .graph-container, .graph-canvas {
   --stroke-color: #6c757d;
   --fill-color: #1a1d20;
@@ -20953,6 +20960,7 @@ tr.row-placeholder td::after {
 }
 
 .node, .cluster {
+  cursor: pointer;
   --gradient-url: url(#default-node-gradient);
 }
 .node.default-task-node, .cluster.default-task-node {

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

@@ -43,6 +43,13 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
     $nodeColors: map-merge($nodeColors, ($name: $color));
 }
 
+.graph-canvas {
+    cursor: grab;
+    &.grabbing {
+        cursor: grabbing;
+    }
+}
+
 .graph-container, .graph-canvas {
     --stroke-color: #{$mute};
     --fill-color: #{$dark-bg-subtle-dark};
@@ -85,6 +92,7 @@ $viridisScale: // generated with 13 steps, using 12 to exclude the last yellow
 }
 
 .node, .cluster {
+    cursor: pointer;
     --gradient-url: url(#default-node-gradient);
 
     @each $name, $color in $nodeColors {