Improve package nodes visibility (#14178)

dnenov · web-flow · commit 6252e46e2827 · 2023-08-02T10:17:14.000-04:00
* Zoom states showing custom nodes

- shows a triangle marker in the lower-left corner of the node indicating custom package or python node
- when zoomed-out, a purple border and icon indicates nodes from packages

* Node package name

- added node package name to tooltip section

* Clean up after merge

- remove old code

* Comment null checks

- added null checks when retrieving dictionary colors

* Failing tests fix

- serialization changes to the new `PackageName` property
- hard-coded color values inside the NodeViewModel
diff --git a/src/DynamoCore/Graph/Nodes/NodeModelExtensions.cs b/src/DynamoCore/Graph/Nodes/NodeModelExtensions.cs
@@ -1,4 +1,4 @@
-﻿using System;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Reflection;
@@ -169,6 +169,19 @@ internal static string GetOriginalName(this NodeModel node)
             return nodeType.FullName;
         }
 
+        /// <summary>
+        /// Returns the package name of the node
+        /// </summary>
+        /// <param name="node">target NodeModel</param>
+        /// <returns></returns>
+        internal static string GetPackageName(this NodeModel node, Workspaces.PackageInfo packageInfo)
+        {
+            // Only return package name if the node comes from a package
+            if (node == null || !node.IsCustomFunction || packageInfo == null) return string.Empty;
+
+            return packageInfo?.Name;
+        }
+
         private static void GetGraphicItemsFromMirrorData(MirrorData mirrorData, List<IGraphicItem> graphicItems)
         {
             if (mirrorData == null) return;
diff --git a/src/DynamoCoreWpf/DynamoCoreWpf.csproj b/src/DynamoCoreWpf/DynamoCoreWpf.csproj
@@ -55,6 +55,7 @@
     <None Remove="Packages\SplashScreen\build\index.bundle.js" />
     <None Remove="Packages\SplashScreen\build\index.html" />
     <None Remove="UI\Images\Canvas\canvas-button-geometry-scaling.png" />
+    <None Remove="UI\Images\NodeStates\package-64px.png" />
     <None Remove="UI\Prompts\PortPropertiesEditPrompt.xaml" />
     <None Remove="Views\Core\CustomColorPicker.xaml" />
     <None Remove="Views\Core\GeometryScalingPopup.xaml" />
@@ -913,6 +914,7 @@
     <Resource Include="UI\Images\NodeStates\frozen-64px.png" />
     <Resource Include="UI\Images\NodeStates\hidden-64px.png" />
     <Resource Include="UI\Images\NodeStates\info-64px.png" />
+    <Resource Include="UI\Images\NodeStates\package-64px.png" />
     <Resource Include="UI\Images\question-hover-blue-16px.png" />
     <Resource Include="UI\Images\TitleBarButtons\close-darktheme-default-16px.png" />
     <Resource Include="UI\Images\TitleBarButtons\close-lighttheme-default-16px.png" />
diff --git a/src/DynamoCoreWpf/Properties/Resources.Designer.cs b/src/DynamoCoreWpf/Properties/Resources.Designer.cs
diff --git a/src/DynamoCoreWpf/Properties/Resources.en-US.resx b/src/DynamoCoreWpf/Properties/Resources.en-US.resx
@@ -2219,6 +2219,9 @@ Uninstall the following packages: {0}?</value>
   <data name="NodeTooltipOriginalName" xml:space="preserve">
     <value>Original node name: </value>
   </data>
+  <data name="NodeTooltipPackage" xml:space="preserve">
+    <value>Package: </value>
+  </data>
   <data name="RenderingMemoryOutageDescription" xml:space="preserve">
     <value>Please check if you intended to render this amount of geometry, and consider turning off the preview of other nodes within your graph, lowering the amount of Geometry you wish to render, or turning down the render precision.</value>
   </data>
diff --git a/src/DynamoCoreWpf/Properties/Resources.resx b/src/DynamoCoreWpf/Properties/Resources.resx
@@ -2442,6 +2442,9 @@ Uninstall the following packages: {0}?</value>
   <data name="NodeTooltipOriginalName" xml:space="preserve">
     <value>Original node name: </value>
   </data>
+  <data name="NodeTooltipPackage" xml:space="preserve">
+    <value>Package: </value>
+  </data>
   <data name="RenderingMemoryOutageDescription" xml:space="preserve">
     <value>Please check if you intended to render this amount of geometry, and consider turning off the preview of other nodes within your graph, lowering the amount of Geometry you wish to render, or turning down the render precision.</value>
   </data>
diff --git a/src/DynamoCoreWpf/UI/Images/NodeStates/package-64px.png b/src/DynamoCoreWpf/UI/Images/NodeStates/package-64px.png
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml
@@ -83,6 +83,7 @@
     <SolidColorBrush x:Key="NodeWarningColor" Color="{StaticResource YellowOrange500}" />
     <SolidColorBrush x:Key="NodeErrorColor" Color="{StaticResource Red500}" />
     <SolidColorBrush x:Key="NodePreviewColor" Color="#BBBBBB"/>
+    <SolidColorBrush x:Key="NodeCustomColor" Color="#B385F2"/>
 
     <SolidColorBrush x:Key="NodeOptionsButtonBackground" Color="#282828" />
     <SolidColorBrush x:Key="NodeDismissedWarningsGlyphForeground" Color="#4B4B4B" />
diff --git a/src/DynamoCoreWpf/ViewModels/Core/NodeViewModel.cs b/src/DynamoCoreWpf/ViewModels/Core/NodeViewModel.cs
@@ -241,6 +241,18 @@ public string OriginalName
             get { return nodeLogic.GetOriginalName(); }
         }
 
+        /// <summary>
+        /// Returns the Package name of the node, if it comes from a package
+        /// </summary>
+        [JsonProperty(Order = 9)]
+        public string PackageName
+        {
+            get
+            {
+                var packageInfo = DynamoViewModel.Model.CurrentWorkspace.GetNodePackage(nodeLogic);
+                return nodeLogic.GetPackageName(packageInfo);
+            }
+        }
 
         /// <summary>
         /// If a node has been renamed. Notice this boolean will be disabled
@@ -287,7 +299,7 @@ public bool IsCustomFunction
         {
             get { return nodeLogic.IsCustomFunction ? true : false; }
         }
-        
+
         /// <summary>
         /// Element's left position is two-way bound to this value
         /// </summary>
@@ -580,6 +592,7 @@ public bool NodeHoveringState
         private static readonly string infoGlyph = "/DynamoCoreWpf;component/UI/Images/NodeStates/info-64px.png";
         private static readonly string previewGlyph = "/DynamoCoreWpf;component/UI/Images/NodeStates/hidden-64px.png";
         private static readonly string frozenGlyph = "/DynamoCoreWpf;component/UI/Images/NodeStates/frozen-64px.png";
+        private static readonly string packageGlyph = "/DynamoCoreWpf;component/UI/Images/NodeStates/package-64px.png";
 
         [JsonIgnore]
         public bool IsNodeAddedRecently
@@ -1283,13 +1296,14 @@ private void BuildErrorBubble()
         }
 
         // These colors are duplicated from the DynamoColorsAndBrushesDictionary as it is not assumed that the xaml will be loaded before setting the color
-        // SharedDictionaryManager.DynamoColorsAndBrushesDictionary["NodeErrorColor"];
         private static SolidColorBrush errorColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#EB5555"));
-        // SharedDictionaryManager.DynamoColorsAndBrushesDictionary["NodeWarningColor"];
         private static SolidColorBrush warningColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#FAA21B"));
         private static SolidColorBrush infoColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#6AC0E7"));
-        // SharedDictionaryManager.DynamoColorsAndBrushesDictionary["NodePreviewColor"];
         private static SolidColorBrush noPreviewColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#BBBBBB"));
+        private static SolidColorBrush nodeCustomColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#B385F2"));
+        private static SolidColorBrush nodePreviewColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#BBBBBB"));
+        private static SolidColorBrush nodeFrozenOverlayColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#BCD3EE"));
+        private static SolidColorBrush nodeInfoColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#6AC0E7"));        
 
         /// <summary>
         /// Sets the color of the warning bar, which informs the user that the node is in
@@ -1342,34 +1356,53 @@ Pass through all possible states in reverse order
 
             ResetColorGlyphs();
 
+            if (this.NodeModel == null) return result;
+
+            if (this.NodeModel.IsCustomFunction)
+            {
+                result = nodeCustomColor;
+                if(result != null)
+                {
+                    ImgGlyphOneSource = packageGlyph;
+                }
+            }
             if (!this.IsVisible)
             {
-                result = (SolidColorBrush)SharedDictionaryManager.DynamoColorsAndBrushesDictionary["NodePreviewColor"];
-                ImgGlyphOneSource = previewGlyph; 
+                result = nodePreviewColor;
+                if (result != null)
+                {
+                    ImgGlyphOneSource = previewGlyph;
+                } 
             }
             if (this.IsFrozen)
             {
-                result = (SolidColorBrush)SharedDictionaryManager.DynamoColorsAndBrushesDictionary["NodeFrozenOverlayColor"]; 
-                if (ImgGlyphOneSource == null)
+                result = nodeFrozenOverlayColor;
+                if (result != null)
                 {
-                    ImgGlyphOneSource = frozenGlyph;
-                }
-                else
-                {
-                    ImgGlyphOneSource = frozenGlyph;
-                    ImgGlyphTwoSource = previewGlyph;
+                    if (ImgGlyphOneSource == null)
+                    {
+                        ImgGlyphOneSource = frozenGlyph;
+                    }
+                    else
+                    {
+                        ImgGlyphOneSource = frozenGlyph;
+                        ImgGlyphTwoSource = previewGlyph;
+                    }
                 }
             }
             if (NodeModel.State == ElementState.Info)
             {
-                result = (SolidColorBrush)SharedDictionaryManager.DynamoColorsAndBrushesDictionary["NodeInfoColor"];
-                if (ImgGlyphTwoSource == null)
+                result = nodeInfoColor;
+                if (result != null)
                 {
-                    ImgGlyphTwoSource = infoGlyph;
-                }
-                else
-                {
-                    ImgGlyphThreeSource = infoGlyph;
+                    if (ImgGlyphTwoSource == null)
+                    {
+                        ImgGlyphTwoSource = infoGlyph;
+                    }
+                    else
+                    {
+                        ImgGlyphThreeSource = infoGlyph;
+                    }
                 }
             }
 
diff --git a/src/DynamoCoreWpf/Views/Core/NodeView.xaml b/src/DynamoCoreWpf/Views/Core/NodeView.xaml
@@ -276,6 +276,13 @@
                                         <Run Text="{x:Static p:Resources.NodeTooltipOriginalName}" />
                                         <Run Text="{Binding Path=OriginalName, Mode=OneWay}" />
                                     </TextBlock>
+                                    <TextBlock FontFamily="{StaticResource ArtifaktElementRegular}"
+                                               FontWeight="Light"
+                                               TextWrapping="Wrap"
+                                               Visibility="{Binding IsCustomFunction, Converter={StaticResource BooleanToVisibilityCollapsedConverter}}">
+                                        <Run Text="{x:Static p:Resources.NodeTooltipPackage}" />
+                                        <Run Text="{Binding Path=PackageName, Mode=OneWay}" />
+                                    </TextBlock>
                                     <TextBlock Text="&#x0a;" />
                                     <TextBlock FontFamily="{StaticResource ArtifaktElementRegular}"
                                                FontWeight="Medium"
@@ -756,6 +763,13 @@
                 ClipToBounds="False"
                 Visibility="{Binding ShowDebugASTs, Converter={StaticResource BooleanToVisibilityCollapsedConverter}}">
             <Label HorizontalContentAlignment="Center" Content="{Binding ASTText}" />
+
+        </Canvas>
+        <Canvas Grid.Row="3" Canvas.ZIndex="51" 
+                HorizontalAlignment="Left"
+                VerticalAlignment="Bottom"
+                Visibility="{Binding IsCustomFunction, Converter={StaticResource BooleanToVisibilityCollapsedConverter}}">
+            <Polygon Points="0,-15 15,0 0,0" Fill="#E3E3E3"/>
         </Canvas>
     </Grid>
 </UserControl>
diff --git a/test/DynamoCoreWpfTests/SerializationTests.cs b/test/DynamoCoreWpfTests/SerializationTests.cs
@@ -444,7 +444,7 @@ public void NodeViewSerializationPropertiesTest()
             var workSpaceJobject = JObject.Parse(ViewModel.CurrentSpaceViewModel.ToJson());
             JObject nodeViewModelJobject = JObject.Parse(workSpaceJobject["NodeViews"][0].ToString());
 
-            Assert.AreEqual(8, nodeViewModelJobject.Properties().Count(), "The number of Serialized properties is not the expected");
+            Assert.AreEqual(9, nodeViewModelJobject.Properties().Count(), "The number of Serialized properties is not the expected");
 
             bool explicitOrder =
                 nodeViewModelJobject.Properties().ElementAt(0).Name == GetJsonPropertydName<NodeViewModel>(nameof(NodeViewModel.Id)) &&
@@ -454,7 +454,8 @@ public void NodeViewSerializationPropertiesTest()
                 nodeViewModelJobject.Properties().ElementAt(4).Name == GetJsonPropertydName<NodeViewModel>(nameof(NodeViewModel.IsFrozenExplicitly)) &&
                 nodeViewModelJobject.Properties().ElementAt(5).Name == GetJsonPropertydName<NodeViewModel>(nameof(NodeViewModel.IsVisible)) &&
                 nodeViewModelJobject.Properties().ElementAt(6).Name == GetJsonPropertydName<NodeViewModel>(nameof(NodeViewModel.X)) &&
-                nodeViewModelJobject.Properties().ElementAt(7).Name == GetJsonPropertydName<NodeViewModel>(nameof(NodeViewModel.Y));
+                nodeViewModelJobject.Properties().ElementAt(7).Name == GetJsonPropertydName<NodeViewModel>(nameof(NodeViewModel.Y)) &&
+                nodeViewModelJobject.Properties().ElementAt(8).Name == GetJsonPropertydName<NodeViewModel>(nameof(NodeViewModel.PackageName));
 
             Assert.IsTrue(explicitOrder, "The order of the properties is not the expected");
         }
diff --git a/test/core/dummy_node/2080_JSONTESTCRASH undo_redo.dyn b/test/core/dummy_node/2080_JSONTESTCRASH undo_redo.dyn
@@ -31,9 +31,8 @@
     },
     {
       "ConcreteType": "Dynamo.Graph.Nodes.CodeBlockNodeModel, DynamoCore",
-      "NodeType": "CodeBlockNode",
-      "Code": "5;",
       "Id": "6cbd0760736f4235a03b38fb359e9957",
+      "NodeType": "CodeBlockNode",
       "Inputs": [],
       "Outputs": [
         {
@@ -47,7 +46,8 @@
         }
       ],
       "Replication": "Disabled",
-      "Description": "Allows for DesignScript code to be authored directly"
+      "Description": "Allows for DesignScript code to be authored directly",
+      "Code": "5;"
     }
   ],
   "Connectors": [],
@@ -62,12 +62,12 @@
       "ScaleFactor": 1.0,
       "HasRunWithoutCrash": true,
       "IsVisibleInDynamoLibrary": true,
-      "Version": "2.11.0.4415",
+      "Version": "2.19.0.4737",
       "RunType": "Automatic",
       "RunPeriod": "1000"
     },
     "Camera": {
-      "Name": "Background Preview",
+      "Name": "_Background Preview",
       "EyeX": -17.0,
       "EyeY": 24.0,
       "EyeZ": 50.0,
@@ -82,23 +82,25 @@
     "NodeViews": [
       {
         "Id": "158f8f25ddb746c88323ae262e87611e",
+        "Name": "Code Block",
         "IsSetAsInput": false,
         "IsSetAsOutput": false,
-        "Name": "Code Block",
-        "ShowGeometry": true,
         "Excluded": false,
+        "ShowGeometry": true,
         "X": 179.8,
-        "Y": 160.39999999999992
+        "Y": 160.39999999999992,
+        "PackageName": ""
       },
       {
         "Id": "6cbd0760736f4235a03b38fb359e9957",
+        "Name": "Code Block",
         "IsSetAsInput": false,
         "IsSetAsOutput": false,
-        "Name": "Code Block",
-        "ShowGeometry": true,
         "Excluded": false,
+        "ShowGeometry": true,
         "X": 76.8,
-        "Y": 162.4
+        "Y": 162.4,
+        "PackageName": ""
       }
     ],
     "Annotations": [],
diff --git a/test/core/serialization/serializationNodeViewModel.dyn b/test/core/serialization/serializationNodeViewModel.dyn
@@ -10,8 +10,8 @@
   "Outputs": [],
   "Nodes": [
     {
-      "Id": "62536c5a788843c285bd2ffdce10290f",
       "ConcreteType": "Dynamo.Graph.Nodes.CodeBlockNodeModel, DynamoCore",
+      "Id": "62536c5a788843c285bd2ffdce10290f",
       "NodeType": "CodeBlockNode",
       "Inputs": [],
       "Outputs": [
@@ -25,19 +25,19 @@
           "KeepListStructure": false
         }
       ],
-      "Code": "1+1;",
       "Replication": "Disabled",
-      "Description": "Allows for DesignScript code to be authored directly"
+      "Description": "Allows for DesignScript code to be authored directly",
+      "Code": "1+1;"
     },
     {
-      "Id": "993ed0e4eeb3492f8e301c3a9edf64f9",
       "ConcreteType": "Dynamo.Graph.Nodes.CodeBlockNodeModel, DynamoCore",
+      "Id": "993ed0e4eeb3492f8e301c3a9edf64f9",
       "NodeType": "CodeBlockNode",
       "Inputs": [],
       "Outputs": [],
-      "Code": "",
       "Replication": "Disabled",
-      "Description": "Allows for DesignScript code to be authored directly"
+      "Description": "Allows for DesignScript code to be authored directly",
+      "Code": ""
     }
   ],
   "Connectors": [],
@@ -66,7 +66,7 @@
       "ScaleFactor": 1.0,
       "HasRunWithoutCrash": true,
       "IsVisibleInDynamoLibrary": true,
-      "Version": "2.18.0.2986",
+      "Version": "2.19.0.4737",
       "RunType": "Automatic",
       "RunPeriod": "1000"
     },
@@ -85,6 +85,7 @@
     "ConnectorPins": [],
     "NodeViews": [
       {
+        "PackageName": "",
         "Id": "62536c5a788843c285bd2ffdce10290f",
         "Name": "Code Block",
         "IsSetAsInput": false,
@@ -95,6 +96,7 @@
         "Y": 358.0
       },
       {
+        "PackageName": "",
         "Id": "993ed0e4eeb3492f8e301c3a9edf64f9",
         "Name": "Code Block",
         "IsSetAsInput": false,
