feat(Dashboard): select code snippet when a graph node is clicked

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

Author: JBBianchi

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

@@ -16,7 +16,6 @@
 using ServerlessWorkflow.Sdk.Models;
 using Synapse.Resources;
 using System.Text.RegularExpressions;
-using System.Threading.Tasks;
 
 namespace Synapse.Dashboard.Components.WorkflowDiagramStateManagement;
 

src/dashboard/Synapse.Dashboard/Pages/Workflows/Details/Store.cs

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+using Neuroglia.Blazor.Dagre.Models;
 using ServerlessWorkflow.Sdk.Models;
 using Synapse.Api.Client.Services;
 using Synapse.Resources;
@@ -26,13 +27,15 @@ namespace Synapse.Dashboard.Pages.Workflows.Details;
 /// <param name="monacoEditorHelper">The service used ease Monaco Editor interactions</param>
 /// <param name="jsonSerializer">The service used to serialize and deserialize JSON</param>
 /// <param name="yamlSerializer">The service used to serialize and deserialize YAML</param>
+/// <param name="monacoInterop">The service used to build a bridge with the monaco interop extension</param>
 public class WorkflowDetailsStore(
     ISynapseApiClient apiClient,
     ResourceWatchEventHubClient resourceEventHub,
     IJSRuntime jsRuntime,
     IMonacoEditorHelper monacoEditorHelper,
     IJsonSerializer jsonSerializer,
-    IYamlSerializer yamlSerializer
+    IYamlSerializer yamlSerializer,
+    MonacoInterop monacoInterop
 )
     : NamespacedResourceManagementComponentStore<WorkflowDetailsState, WorkflowInstance>(apiClient, resourceEventHub)
 {
@@ -60,6 +63,11 @@ IYamlSerializer yamlSerializer
     /// </summary>
     protected IYamlSerializer YamlSerializer { get; } = yamlSerializer;
 
+    /// <summary>
+    /// Gets the service used to build a bridge with the monaco interop extension
+    /// </summary>
+    protected MonacoInterop MonacoInterop { get; } = monacoInterop;
+
     /// <summary>
     ///  Gets/sets the <see cref="BlazorMonaco.Editor.StandaloneEditorConstructionOptions"/> provider function
     /// </summary>
@@ -355,6 +363,22 @@ public async Task DeleteWorkflowInstanceAsync(WorkflowInstance workflowInstance)
     {
         await this.ApiClient.ManageNamespaced<WorkflowInstance>().DeleteAsync(workflowInstance.GetName(), workflowInstance.GetNamespace()!).ConfigureAwait(false);
     }
+
+    /// <summary>
+    /// Selects the target node in the code editor
+    /// </summary>
+    /// <param name="e">The source of the event</param>
+    public async Task SelectNodeInEditor(GraphEventArgs<MouseEventArgs> e)
+    {
+        if (e.GraphElement == null) return;
+        if (this.TextEditor == null) return;
+        var source = await this.TextEditor.GetValue();
+        var pointer = e.GraphElement.Id;
+        var language = this.MonacoEditorHelper.PreferredLanguage;
+        var range = await this.MonacoInterop.GetJsonPointerRange(source, pointer, language);
+        await this.TextEditor.SetSelection(range, string.Empty);
+        await this.TextEditor.RevealRangeInCenter(range);
+    }
     #endregion
 
     /// <inheritdoc/>

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

@@ -51,7 +51,11 @@
             }
             else
             {
-                <WorkflowDiagram WorkflowDefinition="@workflowDefinition" WorkflowInstances="@(workflowInstance != null ? [workflowInstance] : (Resources ?? []))" />
+                <WorkflowDiagram 
+                    WorkflowDefinition="@workflowDefinition" 
+                    WorkflowInstances="@(workflowInstance != null ? [workflowInstance] : (Resources ?? []))"
+                    OnMouseUp="async (e) => await Store.SelectNodeInEditor(e)"
+                />
             }
         </Content>
     </HorizontalCollapsible>

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

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+using System.Data;
 using System.Runtime.CompilerServices;
 
 namespace Synapse.Dashboard.Services;
@@ -29,7 +30,7 @@ public class MonacoInterop(IJSRuntime jsRuntime)
     /// <summary>
     /// A reference to the js interop module
     /// </summary>
-    readonly Lazy<Task<IJSObjectReference>> moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/monaco-editor-interop-extension.js").AsTask());
+    readonly Lazy<Task<IJSObjectReference>> moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>("import", "./js/monaco-editor-interop-extension.js?v=2").AsTask());
 
     /// <summary>
     /// Adds the provided schema to monaco editor's diagnostics options
@@ -44,6 +45,19 @@ public async ValueTask AddValidationSchemaAsync(string schema, string schemaUri,
         await module.InvokeVoidAsync("addValidationSchema", schema, schemaUri, schemaType);
     }
 
+    /// <summary>
+    /// Finds the range in a JSON/YAML text corresponding to a provided JSON Pointer
+    /// </summary>
+    /// <param name="source">The source JSON/YAML text</param>
+    /// <param name="jsonPointer">The JSON pointer to find the range for</param>
+    /// <param name="language">The language of the source, JSON or YAML</param>
+    /// <returns>The corresponding <see cref="BlazorMonaco.Range"/></returns>
+    public async ValueTask<BlazorMonaco.Range> GetJsonPointerRange(string source, string jsonPointer, string language)
+    {
+        var module = await moduleTask.Value;
+        return  await module.InvokeAsync<BlazorMonaco.Range>("getJsonPointerRange", source, jsonPointer, language);
+    }
+
     /// <inheritdoc />
     public async ValueTask DisposeAsync()
     {

src/dashboard/Synapse.Dashboard/wwwroot/js/monaco-editor-interop-extension.js

@@ -1,4 +1,7 @@
-/**
+import { parse } from "https://esm.sh/json-source-map";
+import { LineCounter, parseDocument } from "https://esm.sh/yaml";
+
+/**
  * Adds a validation schema to monaco editor's diagnostics options
  * @param {any} schema The validation schema to add
  * @param {any} schemaUri The schema identifier
@@ -40,4 +43,57 @@ export function addValidationSchema(schema, schemaUri, schemaType) {
             ]
         });
     }
+}
+
+function getJsonPointeRangeForJson(source, jsonPointer) {
+    const { pointers } = parse(source);
+    const node = pointers[jsonPointer];
+    if (!node) {
+        throw new Error(`Unable to find JSON pointer '${jsonPointer}'`);
+    }
+    return {
+        startLineNumber: node.key.line + 1,
+        startColumn: node.key.column + 1,
+        endLineNumber: node.valueEnd.line + 1,
+        endColumn: node.valueEnd.column + 1
+    };
+}
+function getJsonPointeRangeForYaml(source, jsonPointer) {
+    const lineCounter = new LineCounter(source);
+    const document = parseDocument(source, { keepSourceTokens: true, lineCounter });
+    const node = jsonPointer.split('/').slice(1).reduce((n, key) => {
+        const idx = parseInt(key, 10);
+        const nextNode = n.get(!isNaN(idx) ? idx : key, true);
+        if (!nextNode) {
+            throw new Error(`Unable to find JSON pointer '${jsonPointer}'`);
+        }
+        return nextNode;
+    }, document);
+    const start = lineCounter.linePos(node.range[0]);
+    const end = lineCounter.linePos(node.range[1]);
+    return {
+        startLineNumber: start.line,
+        startColumn: start.col,
+        endLineNumber: end.line,
+        endColumn: end.col
+    }
+}
+
+/**
+ * Finds the range in a JSON/YAML text corresponding to a provided JSON Pointer
+ * @param {string} source The source JSON/YAML text
+ * @param {string} jsonPointer The JSON pointer to find the range for
+ * @param {'json'|'yaml'} language The language of the source, JSON or YAML
+ * @returns {Monaco.Range} The corresponding range
+ */
+export function getJsonPointerRange(source, jsonPointer, language) {
+    if (language.toLowerCase() === 'json') {
+        return getJsonPointeRangeForJson(source, jsonPointer);
+    }
+    else if (language.toLowerCase() === 'yaml') {
+        return getJsonPointeRangeForYaml(source, jsonPointer);
+    }
+    else {
+        throw new Error(`Invalid language '${language}'`);
+    }
 }