diff --git a/src/GraphRenderer.ts b/src/GraphRenderer.ts
index 78403e7fa..4f4843c41 100644
--- a/src/GraphRenderer.ts
+++ b/src/GraphRenderer.ts
@@ -122,7 +122,7 @@ ko.bindingHandlers.graphRendererPortPosition = {
                 field = f
                 break;
             case 'comment':
-                node = f
+                node = n
                 field = null
                 break;
         }
@@ -1168,7 +1168,7 @@ export class GraphRenderer {
         }
     }
 
-    static showPort(field:Field,node:Node) :boolean {
+    static showPort(node: Node, field: Field) :boolean {
         const eagle = Eagle.getInstance();
         if(node.isPeek()){
             return true
diff --git a/templates/base.html b/templates/base.html
index daff48cb9..29579e170 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -85,14 +85,14 @@
                             <!-- ko foreach: $root.logicalGraph().getAllNodes() -->
                                 <div data-bind="class:$data.getId()">
                                     <!-- ko foreach: $data.getInputPorts() -->
-                                        <div class="inputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($data,$parent)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeInputPort')},graphRendererPortPosition:{n:$parent,f:$data,type:'inputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'input')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
+                                        <div class="inputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($parent, $data)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeInputPort')},graphRendererPortPosition:{n:$parent,f:$data,type:'inputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'input')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
                                             <div>
                                                 <div class="portTitle" data-bind="text:$data.displayText()"></div>
                                             </div>
                                         </div>
                                         <!-- /ko -->
                                     <!-- ko foreach: $data.getOutputPorts() -->
-                                        <div class="outputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($data,$parent)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeOutputPort')},graphRendererPortPosition:{n:$parent,f:$data,type:'outputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'output')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
+                                        <div class="outputPort port" data-bind="css: {selected: function(){return GraphRenderer.showPort($parent, $data)}(), match:$data.isPeek()},eagleTooltip:$data.getHelpHtml(), style:{'background-color':GraphConfig.getColor('nodeOutputPort')},graphRendererPortPosition:{n:$parent,f:$data,type:'outputPort'},event:{mousedown:function(){GraphRenderer.portDragStart($data,'output')}, mouseenter:function(){GraphRenderer.mouseEnterPort($data)}, mouseleave:function(){GraphRenderer.mouseLeavePort($data)}}">
                                             <div>
                                                 <div class="portTitle" data-bind="text:$data.displayText()"></div>
                                             </div>