Added generated code visualisation with some error handlings

Author: snakex64

src/NodeDev.Blazor.Server/Pages/_Layout.cshtml

@@ -13,6 +13,8 @@
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link href="_content/NodeDev.Blazor/styles.css" rel="stylesheet" />
 
+    <link href="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.css" rel="stylesheet" />
+
     <link href="_content/Z.Blazor.Diagrams/style.min.css" rel="stylesheet" />
     <link href="_content/Z.Blazor.Diagrams/default.styles.min.css" rel="stylesheet" />
 
@@ -28,6 +30,8 @@
     <script src="_framework/blazor.server.js"></script>
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
 
+    <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
+
     <script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
 </body>
 </html>

src/NodeDev.Blazor/Components/ClassExplorer.razor

@@ -204,8 +204,8 @@
 			if (CurrentlyEditingItem.Type == TreeItemType.Method)
 			{
 				var method = new Core.Class.NodeClassMethod(Class, Text, Class.TypeFactory.Get(typeof(void), null), new Core.Graph());
-				method.Graph.AddNode(new Core.Nodes.Flow.EntryNode(method.Graph));
-				method.Graph.AddNode(new Core.Nodes.Flow.ReturnNode(method.Graph));
+				method.Graph.AddNode(new Core.Nodes.Flow.EntryNode(method.Graph), false);
+				method.Graph.AddNode(new Core.Nodes.Flow.ReturnNode(method.Graph), false);
 				Class.Methods.Add(method);
 
 				Items.First(x => x.Type == TreeItemType.MethodsFolder).Children.Remove(CurrentlyEditingItem);

src/NodeDev.Blazor/Components/GraphCanvas.razor.cs

@@ -259,11 +259,11 @@ private void OnConnectionUpdated(BaseLinkModel baseLinkModel, Anchor old, Anchor
             {
                 if (source.Connection.Type.IsAssignableTo(destination.Connection.Type, out var newTypes) && newTypes.Count != 0)
                 {
-                    PropagateNewGeneric(source.Connection.Parent, newTypes);
+                    PropagateNewGeneric(source.Connection.Parent, newTypes, false);
                 }
             }
             else if (destination.Connection.Type is UndefinedGenericType destinationType && source.Connection.Type is not UndefinedGenericType)
-                PropagateNewGeneric(destination.Connection.Parent, new Dictionary<UndefinedGenericType, TypeBase>() { [destinationType] = source.Connection.Type });
+                PropagateNewGeneric(destination.Connection.Parent, new Dictionary<UndefinedGenericType, TypeBase>() { [destinationType] = source.Connection.Type }, false);
 
             // we have to remove the textbox ?
             if (destination.Connection.Connections.Count == 1 && destination.Connection.Type.AllowTextboxEdit)
@@ -277,12 +277,14 @@ private void OnConnectionUpdated(BaseLinkModel baseLinkModel, Anchor old, Anchor
                 if (source.Connection.Type.IsExec && source.Connection.Connections.Count > 1 && link.Target.Model is GraphPortModel target)
                 {
                     Diagram.Links.Remove(Diagram.Links.First(x => (x.Source.Model as GraphPortModel)?.Connection == source.Connection && (x.Target.Model as GraphPortModel)?.Connection != target.Connection));
-                    Graph.Disconnect(source.Connection, source.Connection.Connections.First(x => x != target.Connection), true);
+                    Graph.Disconnect(source.Connection, source.Connection.Connections.First(x => x != target.Connection), false);
                 }
 
             }
 
             UpdateVerticesInConnection(source.Connection, destination.Connection, baseLinkModel);
+
+            Graph.RaiseGraphChanged(true);
         });
     }
 
@@ -422,7 +424,7 @@ public void OnPortDroppedOnCanvas(Connection connection, global::Blazor.Diagrams
 
     private void OnNewNodeTypeSelected(NodeProvider.NodeSearchResult searchResult)
     {
-        var node = Graph.AddNode(searchResult);
+        var node = Graph.AddNode(searchResult, false);
         node.AddDecoration(new NodeDecorationPosition(new(PopupNodePosition.X, PopupNodePosition.Y)));
 
         Diagram.Batch(() =>
@@ -452,7 +454,7 @@ private void OnNewNodeTypeSelected(NodeProvider.NodeSearchResult searchResult)
                 // if we found a connection, connect them together
                 if (destination != null)
                 {
-                    Graph.Connect(PopupNodeConnection, destination, true);
+                    Graph.Connect(PopupNodeConnection, destination, false);
 
                     if (destination.Connections.Count == 1 && destination.Type.AllowTextboxEdit)
                         UpdateConnectionType(destination);
@@ -465,15 +467,15 @@ private void OnNewNodeTypeSelected(NodeProvider.NodeSearchResult searchResult)
                     // check if we need to propagate some generic
                     if (!destination.Type.IsExec && source.Type.IsAssignableTo(target.Type, out var changedGenerics))
                     {
-                        PropagateNewGeneric(node, changedGenerics);
-                        PropagateNewGeneric(destination.Parent, changedGenerics);
+                        PropagateNewGeneric(node, changedGenerics, false);
+                        PropagateNewGeneric(destination.Parent, changedGenerics, false);
                     }
                     else if (source.Type.IsExec && source.Connections.Count > 1) // check if we have to disconnect the previously connected exec
                     {
                         Diagram.Links.Remove(Diagram.Links.First(x => (x.Source.Model as GraphPortModel)?.Connection == source && (x.Target.Model as GraphPortModel)?.Connection != target));
                         var toRemove = source.Connections.FirstOrDefault(x => x != target);
                         if (toRemove != null)
-                            Graph.Disconnect(source, toRemove, true);
+                            Graph.Disconnect(source, toRemove, false);
                     }
                 }
             }
@@ -482,7 +484,10 @@ private void OnNewNodeTypeSelected(NodeProvider.NodeSearchResult searchResult)
 
             CreateGraphNodeModel(node);
             AddNodeLinks(node, false);
+
+            UpdateNodes(Graph.Nodes.Values.ToList());
         });
+
     }
 
     #endregion
@@ -535,14 +540,15 @@ private void OnGenericTypeSelected(TypeBase type)
         if (PopupNode == null || GenericTypeSelectionMenuGeneric == null)
             return;
 
-        PropagateNewGeneric(PopupNode, new Dictionary<UndefinedGenericType, TypeBase>() { [GenericTypeSelectionMenuGeneric] = type });
+        PropagateNewGeneric(PopupNode, new Dictionary<UndefinedGenericType, TypeBase>() { [GenericTypeSelectionMenuGeneric] = type }, false);
 
+        // Prefer updating the nodes directly instead of calling Graph.RaiseGraphChanged(true) to be sure it is called as soon as possible
         UpdateNodes(Graph.Nodes.Values.ToList());
 
         CancelPopup();
     }
 
-    private void PropagateNewGeneric(Node node, IReadOnlyDictionary<UndefinedGenericType, TypeBase> changedGenerics)
+    private void PropagateNewGeneric(Node node, IReadOnlyDictionary<UndefinedGenericType, TypeBase> changedGenerics, bool requireUIRefresh)
     {
         foreach (var port in node.InputsAndOutputs) // check if any of the ports have the generic we just solved
         {
@@ -560,14 +566,14 @@ private void PropagateNewGeneric(Node node, IReadOnlyDictionary<UndefinedGeneric
                     var source = isPortInput ? other : port;
                     var target = isPortInput ? port : other;
                     if (source.Type.IsAssignableTo(target.Type, out var changedGenerics2) && changedGenerics2.Count != 0)
-                        PropagateNewGeneric(other.Parent, changedGenerics2);
+                        PropagateNewGeneric(other.Parent, changedGenerics2, requireUIRefresh);
                     else if ((changedGenerics2?.Count ?? 0) != 0)// damn, looks like changing the generic made it so we can't link to this connection anymore
                         Graph.Disconnect(port, other, false); // no need to refresh UI here as it'll already be refresh at the end of this method
                 }
             }
         }
 
-        Graph.RaiseGraphChanged(true);
+        Graph.RaiseGraphChanged(requireUIRefresh);
     }
 
     #endregion

src/NodeDev.Blazor/Components/SourceViewer.razor

@@ -6,24 +6,24 @@
 @using BlazorMonaco.Editor
 @using BlazorMonaco.Languages
 
-<div class="h100 ma-2" style="width: 500px">
 
-    @if (Method == null || Code == null)
-    {
-        <MudText Typo="Typo.caption">Open a method to view its generated source code</MudText>
-    }
-    else
-    {
-        var id = Code.GetHashCode().ToString();
-        <StandaloneCodeEditor @key="id" Id="@id" ConstructionOptions="EditorConstructionOptions" CssClass="h100" />
-    }
-
-</div>
+@if (Method == null || Code == null)
+{
+    <MudText Typo="Typo.caption">Open a method to view its generated source code</MudText>
+}
+else
+{
+    var id = Code.GetHashCode().ToString();
+    <StandaloneCodeEditor @key="id" Id="@id" ConstructionOptions="EditorConstructionOptions" CssClass="wh100" />
+}
 
 @code {
     [Parameter]
     public NodeClassMethod? Method { get; set; }
 
+    [Parameter]
+    public bool IsVisible { get; set; }
+
     private NodeClassMethod? PreviousMethod { get; set; }
 
     private IDisposable? GraphChangedSubscription { get; set; }
@@ -39,7 +39,6 @@
                 ReadOnly = true,
                 Value = Code,
                 Language = "csharp",
-
                 AutomaticLayout = true
             };
     }
@@ -48,7 +47,11 @@
     {
         base.OnParametersSet();
 
-        if (Method != PreviousMethod)
+        if (!IsVisible)
+            return;
+
+        // Either the target method changed or it previously failed to compile
+        if (Method != PreviousMethod || Creator == null)
         {
             if (Method?.Graph.Project != PreviousMethod?.Graph.Project)
             {
@@ -81,8 +84,14 @@
             Code = Creator.GetBodyAsCsCode(Method);
             StateHasChanged();
         }
-        catch (Exception)
+        catch (BuildError buildError)
         {
+            Code = $"/* Error during code generation of node {buildError.Node.Name}: {System.Environment.NewLine}{buildError.Message}{System.Environment.NewLine}";
+
+            if(buildError.InnerException != null)
+                Code += $"{System.Environment.NewLine}Inner exception:{System.Environment.NewLine}{buildError.InnerException}";
+
+            Code += $"{System.Environment.NewLine}*/";
         }
     }
 

src/NodeDev.Blazor/Index.razor

@@ -15,48 +15,64 @@
     </MudAppBar>
     <MudMainContent Style="width: 100%; height: 100%">
 
-        <MudStack Row="true" Class="h100 pa-1">
+        <MudExtensions.MudSplitter EnableSlide="true" Sensitivity="0.01" @bind-Dimension="GraphPercentage" OnDoubleClicked="@(_ => GraphPercentage = 100)" Class="h100 overflow-hidden" Style="overflow-y: hidden">
+            <StartContent>
+                <MudStack Row="true" Class="wh100 pa-1 relative">
 
 
-            <MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-2 h100" KeepPanelsAlive="true" Style="width: 25%; height: 100%">
-                <MudTabPanel Text="Project">
-                    <ProjectExplorer Project="Project" @bind-SelectedClass="SelectedClass"></ProjectExplorer>
-                </MudTabPanel>
-                <MudTabPanel Text="Class">
-                    @if (SelectedClass != null)
-                    {
-                        <ClassExplorer @key="SelectedClass" Class="SelectedClass" SelectedMethodChanged="OpenMethod"></ClassExplorer>
-                    }
-                </MudTabPanel>
-            </MudTabs>
+                    <MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-2 h100" KeepPanelsAlive="true" Style="width: 25%; height: 100%">
+                        <MudTabPanel Text="Project">
+                            <ProjectExplorer Project="Project" @bind-SelectedClass="SelectedClass"></ProjectExplorer>
+                        </MudTabPanel>
+                        <MudTabPanel Text="Class">
+                            @if (SelectedClass != null)
+                            {
+                                <ClassExplorer @key="SelectedClass" Class="SelectedClass" SelectedMethodChanged="OpenMethod"></ClassExplorer>
+                            }
+                        </MudTabPanel>
+                    </MudTabs>
 
-            @* The 'relative' div is used to control the "Open/Close" icon for the debugger console panel *@
-            <div class="w100 relative flex-1">
+                    @* The 'relative' div is used to control the "Open/Close" icon for the debugger console panel as well as the source viewer open icon *@
+                    <div class="w100 relative flex-1">
 
-                <MudStack Row="false" Class="wh100">
+                        <MudStack Row="false" Class="wh100">
 
-                    <DebuggedPathView OpenMethod="OpenMethodFromDebuggedPath" />
+                            <DebuggedPathView OpenMethod="OpenMethodFromDebuggedPath" />
 
-                    <CascadingValue Value="this" IsFixed="true">
-                        <MudTabs @ref="Tabs" Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-2 wh100" KeepPanelsAlive="true" Class="wh100" @bind-ActivePanelIndex="ActivePanelIndex">
-                            @foreach (var method in OpenedMethods)
-                            {
-                                <MudTabPanel ID="method" @key="method" Text="@method.Name">
-                                    <GraphCanvas @key="method.Graph" Graph="method.Graph"></GraphCanvas>
-                                </MudTabPanel>
-                            }
-                        </MudTabs>
-                    </CascadingValue>
+                            <CascadingValue Value="this" IsFixed="true">
+                                <MudTabs @ref="Tabs" Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-2 wh100" KeepPanelsAlive="true" Class="wh100" @bind-ActivePanelIndex="ActivePanelIndex">
+                                    @foreach (var method in OpenedMethods)
+                                    {
+                                        <MudTabPanel ID="method" @key="method" Text="@method.Name">
+                                            <GraphCanvas @key="method.Graph" Graph="method.Graph"></GraphCanvas>
+                                        </MudTabPanel>
+                                    }
+                                </MudTabs>
+                            </CascadingValue>
 
-                    <DebuggerConsolePanel Project="Project" />
+                            <DebuggerConsolePanel Project="Project" />
+
+                        </MudStack>
+
+                    </div>
+
+                    <div class="h100 absolute d-flex" style="right: 0px">
+                        @{
+                            var close = GraphPercentage <= 75;
+                            var icon = close ? Icons.Material.Filled.ArrowRight : Icons.Material.Filled.ArrowLeft;
+                        }
+                        <MudIconButton Icon="@icon" OnClick="@(() => GraphPercentage = close ? 100 : 75)" Style="margin-top: auto; margin-bottom: auto" />
+                    </div>
 
                 </MudStack>
 
-            </div>
+            </StartContent>
 
-            <SourceViewer Method="@(OpenedMethods.Count > 0 ? OpenedMethods[ActivePanelIndex] : null)" />
+            <EndContent>
+                <SourceViewer Method="@(OpenedMethods.Count > 0 ? OpenedMethods[ActivePanelIndex] : null)" IsVisible="@(GraphPercentage != 100)" />
+            </EndContent>
 
-        </MudStack>
+        </MudExtensions.MudSplitter>
     </MudMainContent>
 </MudLayout>
 
@@ -72,6 +88,8 @@
 
     private int ActivePanelIndex = 0;
 
+    private double GraphPercentage = 100;
+
     protected override void OnInitialized()
     {
         if (File.Exists("project.json"))

src/NodeDev.Blazor/NodeDev.Blazor.csproj

@@ -12,6 +12,7 @@
 
   <ItemGroup>
     <PackageReference Include="BlazorMonaco" Version="3.2.0" />
+    <PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="6.9.2" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.6" />
     <PackageReference Include="MudBlazor" Version="6.21.0" />
   </ItemGroup>

src/NodeDev.Core/BuildError.cs

@@ -0,0 +1,13 @@
+using NodeDev.Core.Nodes;
+
+namespace NodeDev.Core;
+
+public class BuildError : Exception
+{
+    public readonly Node Node;
+
+    public BuildError(string message, Node node, Exception? inner) : base(message, inner)
+    {
+        Node = node;
+    }
+}