From 15433961754f869c2fc4e9584674984f452a780a Mon Sep 17 00:00:00 2001
From: MWicenec <wicenecmw@gmail.com>
Date: Mon, 4 Nov 2024 15:11:56 +0800
Subject: [PATCH 1/7] fixed selection inspector in the graph config attributes
 table showing unknown

---
 src/GraphConfig.ts             | 6 ++++++
 src/ParameterTable.ts          | 4 ++--
 templates/parameter_table.html | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/GraphConfig.ts b/src/GraphConfig.ts
index 35ecbf0b..b95767dc 100644
--- a/src/GraphConfig.ts
+++ b/src/GraphConfig.ts
@@ -6,6 +6,7 @@ import { EagleConfig } from "./EagleConfig";
 import { Errors } from "./Errors";
 import { Field } from "./Field";
 import { LogicalGraph } from "./LogicalGraph";
+import { Utils } from "./Utils";
 
 export class GraphConfig {
     private id: ko.Observable<GraphConfig.Id>;
@@ -377,6 +378,11 @@ export class GraphConfigField {
         return this.value();
     }
 
+    toggle = () : GraphConfigField => {        
+        this.value((!Utils.asBool(this.value())).toString());
+        return this;
+    }
+
     setComment = (comment: string): GraphConfigField => {
         this.comment(comment);
         return this;
diff --git a/src/ParameterTable.ts b/src/ParameterTable.ts
index e09606ff..03197db6 100644
--- a/src/ParameterTable.ts
+++ b/src/ParameterTable.ts
@@ -61,7 +61,7 @@ export class ParameterTable {
             return "";
         }
 
-        if (Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable){
+        if (Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable){
             return ParameterTable.selectionParent().getDisplayText() + " - " + ParameterTable.selectionName();
         } else {
             return "Unknown";
@@ -73,7 +73,7 @@ export class ParameterTable {
             return "";
         }
 
-        if (Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable){
+        if (Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable){
             return ParameterTable.selection();
         } else {
             return "Unknown";
diff --git a/templates/parameter_table.html b/templates/parameter_table.html
index ca43d923..d6bbdabc 100644
--- a/templates/parameter_table.html
+++ b/templates/parameter_table.html
@@ -224,7 +224,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                             <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                            <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
+                                                            <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data.getGraphConfigField(), $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data.getGraphConfigField(), $index())}}">
                                                         <!-- /ko -->
                                                     </td>
                                                 <!-- /ko -->

From 4a249801d9f09b91aa69a71a97eed46f7ea81bcc Mon Sep 17 00:00:00 2001
From: MWicenec <wicenecmw@gmail.com>
Date: Mon, 4 Nov 2024 15:22:30 +0800
Subject: [PATCH 2/7] fixed several issues with the selector in the graph
 config attributes display and the boolean configured values

---
 templates/parameter_table.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/parameter_table.html b/templates/parameter_table.html
index d6bbdabc..70a906c1 100644
--- a/templates/parameter_table.html
+++ b/templates/parameter_table.html
@@ -214,7 +214,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                             <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                            <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $root.getCurrentParamValueReadonly($data), $data, $index())}}" type="number">
+                                                            <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data.getGraphConfigField(), $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $root.getCurrentParamValueReadonly($data), $data.getGraphConfigField(), $index())}}" type="number">
                                                         <!-- /ko -->
                                                     </td>
                                                 <!-- /ko -->
@@ -235,7 +235,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                         <input class="tableParameter" tabindex='-1' data-bind="checked: valIsTrue($data.value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, event: {change: function(){$data.toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
                                                     <!-- /ko -->
                                                     <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                        <input class="tableParameter" tabindex='-1' data-bind="checked: valIsTrue($data.getGraphConfigField().value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: function(){$data.toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
+                                                        <input class="tableParameter" tabindex='-1' data-bind="checked: valIsTrue($data.getGraphConfigField().value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: function(){$data.getGraphConfigField().toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
                                                     <!-- /ko -->
                                                 </td>
                                             <!-- /ko -->
@@ -316,7 +316,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
 
                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
                                         <td class='columnCell column_Comment' onmouseenter="ParameterTable.showEditComment(this)" onmouseleave="ParameterTable.hideEditComment(this)" data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('comment', $data) }, eagleTooltip: $data.getGraphConfigField().comment">
-                                            <input class="tableParameter tableFieldCommentInput" type="string" data-bind="value: $data.getGraphConfigField().comment, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.description(), 'comment', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.description(), 'comment', $data, $index())}}">
+                                            <input class="tableParameter tableFieldCommentInput" type="string" data-bind="value: $data.getGraphConfigField().comment, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}}">
                                             <button class="parameterTableCommentBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditCommentInModal($data)}"></button>
                                         </td>
                                         <td class='columnCell column_Remove'>

From f8aa1e7a9c25c9f1465df383d372f9d9fcf4961c Mon Sep 17 00:00:00 2001
From: MWicenec <wicenecmw@gmail.com>
Date: Mon, 4 Nov 2024 15:27:10 +0800
Subject: [PATCH 3/7] fixed another bug

---
 templates/parameter_table.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/parameter_table.html b/templates/parameter_table.html
index 70a906c1..5c648dbc 100644
--- a/templates/parameter_table.html
+++ b/templates/parameter_table.html
@@ -214,7 +214,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                             <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                            <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data.getGraphConfigField(), $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $root.getCurrentParamValueReadonly($data), $data.getGraphConfigField(), $index())}}" type="number">
+                                                            <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $root.getCurrentParamValueReadonly($data), $data, $index())}}" type="number">
                                                         <!-- /ko -->
                                                     </td>
                                                 <!-- /ko -->
@@ -224,7 +224,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                             <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                            <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data.getGraphConfigField(), $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data.getGraphConfigField(), $index())}}">
+                                                            <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}}">
                                                         <!-- /ko -->
                                                     </td>
                                                 <!-- /ko -->

From 15ce6db3afc7f738e65a1056de4bebac00c2880f Mon Sep 17 00:00:00 2001
From: james-strauss-uwa <james.strauss@uwa.edu.au>
Date: Mon, 4 Nov 2024 16:30:16 +0800
Subject: [PATCH 4/7] Fixed bug where code would try to set last graph config
 as active, even when no graph configs exist

---
 src/LogicalGraph.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/LogicalGraph.ts b/src/LogicalGraph.ts
index 46afeca4..133d3a0d 100644
--- a/src/LogicalGraph.ts
+++ b/src/LogicalGraph.ts
@@ -221,7 +221,12 @@ export class LogicalGraph {
 
             //if the saved 'activeGraphConfigId' is empty or missing, we use the last one in the array, else we set the saved one as active                
             if(dataObject["activeGraphConfigId"] === '' || dataObject["activeGraphConfigId"] === undefined){
-                result.activeGraphConfigId(result.graphConfigs()[result.graphConfigs().length - 1].getId() as GraphConfig.Id)
+                // if graph has no configs, we can't use the last one in the array, so we'll set the active id to 'undefined'
+                if (result.graphConfigs().length === 0){
+                    result.activeGraphConfigId(undefined);
+                } else {
+                    result.activeGraphConfigId(result.graphConfigs()[result.graphConfigs().length - 1].getId() as GraphConfig.Id)
+                }
             }else{
                 result.activeGraphConfigId(dataObject["activeGraphConfigId"] as GraphConfig.Id)
             }

From 9876dce8b8f1fc46c7201a44f4f2e1214aeae638 Mon Sep 17 00:00:00 2001
From: MWicenec <wicenecmw@gmail.com>
Date: Wed, 6 Nov 2024 10:05:41 +0800
Subject: [PATCH 5/7] fixed visual glitch with browse dockerhub button in
 parameter table

---
 static/base.css                | 2 ++
 static/tables.css              | 9 ---------
 templates/parameter_table.html | 2 +-
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/static/base.css b/static/base.css
index 5441babd..fc0abb8a 100644
--- a/static/base.css
+++ b/static/base.css
@@ -221,6 +221,7 @@ color: #00bb00;}
 }
 
 #bottomWindow{
+    border-top: solid 2px black;
     background-color: #002349;
     width: 100%;
     height: 150px;
@@ -1804,6 +1805,7 @@ ul.nav.navbat-nav .btn-outline-secondary:hover{
     color: white;
     visibility: hidden;
     padding-left: 3px;
+    margin-bottom: -0.5px;
     pointer-events: none;
 }
 
diff --git a/static/tables.css b/static/tables.css
index 4743aebd..16ec1379 100644
--- a/static/tables.css
+++ b/static/tables.css
@@ -206,7 +206,6 @@ td:first-child input {
 #parameterTable .bottomWindowHeaderWrap{
     border: none;
     justify-content: unset;
-    border-top: solid 2px black;
     height: 46px;
 }
 
@@ -488,14 +487,6 @@ td:first-child input {
     cursor: col-resize;
 }
 
-
-
-
-#tableOpenDocker{
-    position: absolute;
-    left: 160px;
-}
-
 #graphConfigurationsTableWrapper {
 }
 
diff --git a/templates/parameter_table.html b/templates/parameter_table.html
index 5c648dbc..e0a5903f 100644
--- a/templates/parameter_table.html
+++ b/templates/parameter_table.html
@@ -32,7 +32,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                 <button type="button" class="btn btn-primary" id="parameterTableAddParameterButton" data-bind="click: ParameterTable.addEmptyTableRow, clickBubble:false, disabled: selectedNode().isLocked()" ><span id="parameterTableAddParameter">Add Parameter</span></button>
                 <!-- /ko -->
                 <!-- ko if: selectedNode() != null && selectedNode().getCategory() === Category.Docker -->
-                    <button id="tableOpenDocker" class="btn btn-primary float-left" data-bind="click: ParameterTable.initiateBrowseDocker, clickBubble: false, eagleTooltip: `Browse images on dockerhub`" data-bs-toggle="tooltip" data-html="true" data-bs-placement="right" data-bs-original-title="">
+                    <button class="btn btn-primary float-left" data-bind="click: ParameterTable.initiateBrowseDocker, clickBubble: false, eagleTooltip: `Browse images on dockerhub`" data-bs-toggle="tooltip" data-html="true" data-bs-placement="right" data-bs-original-title="">
                         Browse DockerHub
                     </button>
                 <!-- /ko -->

From ae9f0f22ed1cd007368814bbf324c767165d1caf Mon Sep 17 00:00:00 2001
From: MWicenec <wicenecmw@gmail.com>
Date: Wed, 6 Nov 2024 11:26:54 +0800
Subject: [PATCH 6/7] fixed several css issues in the parameter table

---
 static/base.css                |   5 -
 static/tables.css              |  14 +-
 templates/parameter_table.html | 650 +++++++++++++++++----------------
 3 files changed, 333 insertions(+), 336 deletions(-)

diff --git a/static/base.css b/static/base.css
index fc0abb8a..e3e27365 100644
--- a/static/base.css
+++ b/static/base.css
@@ -843,11 +843,6 @@ color: #00bb00;}
     z-index:10;
 }
 
-#tableOpenDocker{
-    position: absolute;
-    left: 160px;
-}
-
 .settingCategoryActive{
     display: inline-block;
 }
diff --git a/static/tables.css b/static/tables.css
index 16ec1379..bc7ae788 100644
--- a/static/tables.css
+++ b/static/tables.css
@@ -1,7 +1,3 @@
-#paramsTableWrapper {
-    top: 24px;
-}
-
 #parameterTable #tableInspector{
     position: sticky;
     top: 0px;
@@ -34,7 +30,6 @@
 
 #parameterTableAddParameterButton{
     left: 15px;
-    /* position: absolute; */
 }
 
 #tableInspectorSelection{
@@ -226,7 +221,7 @@ td:first-child input {
 .eagleTableWrapper thead{
     position: sticky;
     z-index: 111;
-    top: 24px;
+    top: 0px;
 }
 
 #graphConfigurationsTableWrapper thead{
@@ -270,13 +265,18 @@ td:first-child input {
 .eagleTableDisplay .tableBody, .issuesDisplay .issuesBody{
     padding:10px;
     background-color: aliceblue;
-    overflow: auto;
     width: 100%;
     position: absolute;
     top: 53px;
     height: calc(100% - 46px);
 }
 
+.eagleTableDisplay .scrollWrapper {
+    height: 100%;
+    overflow: auto;
+    position: relative;
+}
+
 .eagleTableWrapper tr:nth-child(even) {
     background-color: rgba(214, 219, 239, 0.95);
 }
diff --git a/templates/parameter_table.html b/templates/parameter_table.html
index e0a5903f..93482ac1 100644
--- a/templates/parameter_table.html
+++ b/templates/parameter_table.html
@@ -79,394 +79,396 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                     </div>
                 <!-- /ko -->
                 <!-- ko if: ParameterTable.getTableFields().length !== 0 -->
-                    <table class="eagleTableWrapper" id="paramsTableWrapper">
-                        <div id="tableInspector">
-                            <input id="tableInspectorSelection" type="text" placeholder="Selection" data-bind="value: ParameterTable.formatTableInspectorSelection()" readonly>
-                            <input id="tableInspectorValue" type="text" placeholder="Content" data-bind="value: ParameterTable.formatTableInspectorValue(), readonly: ParameterTable.selectionReadonly(), event: {keyup: ParameterTable.tableInspectorUpdateSelection($element.value)}">
-                        </div>
-                        <thead>
-                            <tr>
-                                <!-- ko if: ParameterTable.getActiveColumnVisibility().keyAttribute() -->
-                                    <th id="parameter_table_isKeyAttribute" data-bind="eagleTooltip:'Add/remove Field from Graph Config'" data-bs-placement="top"></th>
-                                <!-- /ko -->
-                                <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
-                                    <th id="parameter_table_node_name" data-bind="eagleTooltip:`This Parameter's Parent Node Name`" data-bs-placement="top">
-                                        Node Name
-                                        <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_node_name') === true}"></div>
-                                    </th>
-                                <!-- /ko -->
-                                <!-- ko if: ParameterTable.getActiveColumnVisibility().displayText() -->
-                                    <th id="parameter_table_text" data-bind="eagleTooltip:'User-facing name'" data-bs-placement="top">
-                                        Attribute Name
-                                        <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_text') === true}"></div>
-                                    </th>
-                                <!-- /ko -->
-                                <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().fieldId() -->
-                                        <th id="parameter_table_id" data-bind="eagleTooltip:'backend id'" data-bs-placement="top">
-                                            Field ID
-                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_id') === true}"></div>
-                                        </th>
+                    <div id="tableInspector">
+                        <input id="tableInspectorSelection" type="text" placeholder="Selection" data-bind="value: ParameterTable.formatTableInspectorSelection()" readonly>
+                        <input id="tableInspectorValue" type="text" placeholder="Content" data-bind="value: ParameterTable.formatTableInspectorValue(), readonly: ParameterTable.selectionReadonly(), event: {keyup: ParameterTable.tableInspectorUpdateSelection($element.value)}">
+                    </div>
+                    <div class="scrollWrapper">
+                        <table class="eagleTableWrapper" id="paramsTableWrapper">
+                            <thead>
+                                <tr>
+                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().keyAttribute() -->
+                                        <th id="parameter_table_isKeyAttribute" data-bind="eagleTooltip:'Add/remove Field from Graph Config'" data-bs-placement="top"></th>
                                     <!-- /ko -->
-                                <!-- /ko -->
-                                <!-- ko if: ParameterTable.getActiveColumnVisibility().value() -->
-                                    <th id="parameter_table_value" data-bind="eagleTooltip:'The value of this parameter'" data-bs-placement="top">
-                                        <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                            <span>Value</span>
-                                        <!-- /ko -->
-                                        <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
-                                            <span>Configured Value</span>
-                                        <!-- /ko -->
-                                        <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_value') === true}"></div>
-                                    </th>
-                                <!-- /ko -->
-                                <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().defaultValue() -->
-                                        <th id="parameter_table_default_value" data-bind="eagleTooltip:'The default value of this parameter before user modifications'" data-bs-placement="top">
-                                            Default Value
-                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_default_value') === true}"></div>
+                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
+                                        <th id="parameter_table_node_name" data-bind="eagleTooltip:`This Parameter's Parent Node Name`" data-bs-placement="top">
+                                            Node Name
+                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_node_name') === true}"></div>
                                         </th>
                                     <!-- /ko -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().description() -->
-                                        <th id="parameter_table_description" data-bind="eagleTooltip:'A description of the purpose of this parameter'" data-bs-placement="top">
-                                            Description
-                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_description') === true}"></div>
+                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().displayText() -->
+                                        <th id="parameter_table_text" data-bind="eagleTooltip:'User-facing name'" data-bs-placement="top">
+                                            Attribute Name
+                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_text') === true}"></div>
                                         </th>
                                     <!-- /ko -->
-                                <!-- /ko -->
-                                <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
-                                    <th id="parameter_table_comment" data-bind="eagleTooltip:'A user comment outlining the reason for the change to this field'" data-bs-placement="top">
-                                        Comment
-                                        <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_comment') === true}"></div>
-                                    </th>
-                                    <th id="parameter_table_remove" data-bind="eagleTooltip:'Remove this field from the graph configuration'" data-bs-placement="top">
-                                        Remove
-                                        <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_remove') === true}"></div>
-                                    </th>
-                                <!-- /ko -->
-                                <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().type() -->
-                                        <th id="parameter_table_type" data-bind="eagleTooltip:'The type of the data stored in this parameter (e.g. Integer, Float, String etc)'" data-bs-placement="top">Type</th>
-                                    <!-- /ko -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().flags() -->
-                                        <th id="parameter_table_flags" data-bind="eagleTooltip:'Parameter flags'" data-bs-placement="top">Flags</th>
+                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().fieldId() -->
+                                            <th id="parameter_table_id" data-bind="eagleTooltip:'backend id'" data-bs-placement="top">
+                                                Field ID
+                                                <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_id') === true}"></div>
+                                            </th>
                                         <!-- /ko -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().parameterType() -->
-                                        <th id="parameter_table_parameter_type" data-bind="eagleTooltip:'The way this parameter will be used by the component. ComponentParameters are passed to the DALiuGE execution framework. ApplicationArguments are passed to the Application executed by this component.'" data-bs-placement="top">Parameter Type</th>
-                                    <!-- /ko -->                                        
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().usage() -->
-                                    <th id="parameter_table_usage" data-bind="eagleTooltip:'InputPorts and OutputPorts are used to specify named inputs and outputs from this Component.'" data-bs-placement="top">Use As</th>
                                     <!-- /ko -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().encoding() -->
-                                    <th id="parameter_table_encoding" data-bind="eagleTooltip:'The way data is encoded when passing through this port.'" data-bs-placement="top">Encoding</th>
+                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().value() -->
+                                        <th id="parameter_table_value" data-bind="eagleTooltip:'The value of this parameter'" data-bs-placement="top">
+                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                <span>Value</span>
+                                            <!-- /ko -->
+                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
+                                                <span>Configured Value</span>
+                                            <!-- /ko -->
+                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_value') === true}"></div>
+                                        </th>
                                     <!-- /ko -->
-                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().actions() -->
-                                        <th id="parameter_table_actions" data-bind="eagleTooltip:'Additional operations that are possible on this parameter (e.g. Delete, Duplicate etc)'" data-bs-placement="top">Actions</th>
+                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().defaultValue() -->
+                                            <th id="parameter_table_default_value" data-bind="eagleTooltip:'The default value of this parameter before user modifications'" data-bs-placement="top">
+                                                Default Value
+                                                <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_default_value') === true}"></div>
+                                            </th>
+                                        <!-- /ko -->
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().description() -->
+                                            <th id="parameter_table_description" data-bind="eagleTooltip:'A description of the purpose of this parameter'" data-bs-placement="top">
+                                                Description
+                                                <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_description') === true}"></div>
+                                            </th>
+                                        <!-- /ko -->
                                     <!-- /ko -->
-                                <!-- /ko -->
-                            </tr>
-                        </thead>
-                        <tbody data-bind="foreach: ParameterTable.getTableFields()">
-                            <!-- ko if: $data.fitsTableSearchQuery() -->
-                                <!-- ko if: Setting.findValue(Setting.SHOW_NON_KEY_PARAMETERS) || $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
-                                    <tr data-bind="attr: {'id' : 'tableRow_'+$data.getId()}">
-                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().keyAttribute() -->
-                                        <td class='columnCell column_KeyAttr'>
-                                            <!-- kept for now as we will need the space for the row drag handle -->
-                                        </td>
+                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
+                                        <th id="parameter_table_comment" data-bind="eagleTooltip:'A user comment outlining the reason for the change to this field'" data-bs-placement="top">
+                                            Comment
+                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_comment') === true}"></div>
+                                        </th>
+                                        <th id="parameter_table_remove" data-bind="eagleTooltip:'Remove this field from the graph configuration'" data-bs-placement="top">
+                                            Remove
+                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_remove') === true}"></div>
+                                        </th>
+                                    <!-- /ko -->
+                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().type() -->
+                                            <th id="parameter_table_type" data-bind="eagleTooltip:'The type of the data stored in this parameter (e.g. Integer, Float, String etc)'" data-bs-placement="top">Type</th>
                                         <!-- /ko -->
-                                        <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
-                                            <td class='columnCell column_NodeName'>
-                                                <input class="tableParameter" type="string" data-bind="value: $root.logicalGraph().findNodeById(nodeId()).getName(), disabled: true, eagleTooltip: $root.logicalGraph().findNodeById(nodeId()).getDescription()">
-                                            </td>
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().flags() -->
+                                            <th id="parameter_table_flags" data-bind="eagleTooltip:'Parameter flags'" data-bs-placement="top">Flags</th>
+                                            <!-- /ko -->
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().parameterType() -->
+                                            <th id="parameter_table_parameter_type" data-bind="eagleTooltip:'The way this parameter will be used by the component. ComponentParameters are passed to the DALiuGE execution framework. ApplicationArguments are passed to the Application executed by this component.'" data-bs-placement="top">Parameter Type</th>
+                                        <!-- /ko -->                                        
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().usage() -->
+                                        <th id="parameter_table_usage" data-bind="eagleTooltip:'InputPorts and OutputPorts are used to specify named inputs and outputs from this Component.'" data-bs-placement="top">Use As</th>
                                         <!-- /ko -->
-                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().displayText() -->
-                                            <td class='columnCell column_DisplayText' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('displayText', $data) }, eagleTooltip:description">
-                                                <input class="tableParameter selectionTargets tableFieldDisplayName" placeholder="New Parameter" type="string" data-bind="value: displayText, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.displayText(), 'displayText', $data, $index())}, event:{blur: function(){$(event.target).removeClass('newEmpty')} ,keyup: function(event, data){ParameterTable.select($data.displayText(), 'displayText', $data, $index())}}">
-                                                
-                                                <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                                    <!-- ko ifnot: $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
-                                                    <button data-bind="click: function(){ParameterTable.requestAddField($data)}, disabled: !Setting.findValue(Setting.ALLOW_SET_KEY_PARAMETER), eagleTooltip:'Add Field to Graph Config', style:{'visibility':'hidden'}, clickBubble:false">
-                                                        <i class="material-icons">favorite_border</i>
-                                                    </button>
-                                                    <!-- /ko -->
-                                                    <!-- ko if: $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
-                                                    <button data-bind="click: function(){ParameterTable.requestRemoveField($data)}, disabled: !Setting.findValue(Setting.ALLOW_SET_KEY_PARAMETER), eagleTooltip:'Remove Field from Graph Config', style:{'visibility':'visible'}, clickBubble:false">
-                                                        <i class="material-icons">favorite</i>
-                                                    </button>
-                                                    <!-- /ko -->
-                                                <!-- /ko -->
-                                            </td>
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().encoding() -->
+                                        <th id="parameter_table_encoding" data-bind="eagleTooltip:'The way data is encoded when passing through this port.'" data-bs-placement="top">Encoding</th>
                                         <!-- /ko -->
-                                        <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().fieldId() -->
-                                                <td class='columnCell column_DisplayText' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('fieldId', $data) },eagleTooltip:id">
-                                                    <input class="tableParameter selectionTargets tableFieldFieldId" type="string" disabled data-bind="value: id, valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.fieldId(), 'fieldId', $data, $index())}, event:{blur: function(){$(event.target).removeClass('newEmpty')}, keyup: function(event, data){ParameterTable.select($data.fieldId(), 'fieldId', $data, $index())}}">
+                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().actions() -->
+                                            <th id="parameter_table_actions" data-bind="eagleTooltip:'Additional operations that are possible on this parameter (e.g. Delete, Duplicate etc)'" data-bs-placement="top">Actions</th>
+                                        <!-- /ko -->
+                                    <!-- /ko -->
+                                </tr>
+                            </thead>
+                            <tbody data-bind="foreach: ParameterTable.getTableFields()">
+                                <!-- ko if: $data.fitsTableSearchQuery() -->
+                                    <!-- ko if: Setting.findValue(Setting.SHOW_NON_KEY_PARAMETERS) || $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
+                                        <tr data-bind="attr: {'id' : 'tableRow_'+$data.getId()}">
+                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().keyAttribute() -->
+                                            <td class='columnCell column_KeyAttr'>
+                                                <!-- kept for now as we will need the space for the row drag handle -->
+                                            </td>
+                                            <!-- /ko -->
+                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable -->
+                                                <td class='columnCell column_NodeName'>
+                                                    <input class="tableParameter" type="string" data-bind="value: $root.logicalGraph().findNodeById(nodeId()).getName(), disabled: true, eagleTooltip: $root.logicalGraph().findNodeById(nodeId()).getDescription()">
                                                 </td>
                                             <!-- /ko -->
-                                        <!-- /ko -->
-                                        <!-- value fields -->
-                                        <!-- ko if: ParameterTable.getActiveColumnVisibility().value()  -->
-                                            <!-- ko if: $data.getHtmlInputType() === 'number' || $data.getHtmlInputType() === 'text' || $data.getHtmlInputType() === 'password' -->
-                                                <!-- ko if: $data.getType() === 'Integer' -->    
+                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().displayText() -->
+                                                <td class='columnCell column_DisplayText' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('displayText', $data) }, eagleTooltip:description">
+                                                    <input class="tableParameter selectionTargets tableFieldDisplayName" placeholder="New Parameter" type="string" data-bind="value: displayText, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.displayText(), 'displayText', $data, $index())}, event:{blur: function(){$(event.target).removeClass('newEmpty')} ,keyup: function(event, data){ParameterTable.select($data.displayText(), 'displayText', $data, $index())}}">
+                                                    
+                                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                        <!-- ko ifnot: $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
+                                                        <button data-bind="click: function(){ParameterTable.requestAddField($data)}, disabled: !Setting.findValue(Setting.ALLOW_SET_KEY_PARAMETER), eagleTooltip:'Add Field to Graph Config', style:{'visibility':'hidden'}, clickBubble:false">
+                                                            <i class="material-icons">favorite_border</i>
+                                                        </button>
+                                                        <!-- /ko -->
+                                                        <!-- ko if: $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
+                                                        <button data-bind="click: function(){ParameterTable.requestRemoveField($data)}, disabled: !Setting.findValue(Setting.ALLOW_SET_KEY_PARAMETER), eagleTooltip:'Remove Field from Graph Config', style:{'visibility':'visible'}, clickBubble:false">
+                                                            <i class="material-icons">favorite</i>
+                                                        </button>
+                                                        <!-- /ko -->
+                                                    <!-- /ko -->
+                                                </td>
+                                            <!-- /ko -->
+                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().fieldId() -->
+                                                    <td class='columnCell column_DisplayText' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('fieldId', $data) },eagleTooltip:id">
+                                                        <input class="tableParameter selectionTargets tableFieldFieldId" type="string" disabled data-bind="value: id, valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.fieldId(), 'fieldId', $data, $index())}, event:{blur: function(){$(event.target).removeClass('newEmpty')}, keyup: function(event, data){ParameterTable.select($data.fieldId(), 'fieldId', $data, $index())}}">
+                                                    </td>
+                                                <!-- /ko -->
+                                            <!-- /ko -->
+                                            <!-- value fields -->
+                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().value()  -->
+                                                <!-- ko if: $data.getHtmlInputType() === 'number' || $data.getHtmlInputType() === 'text' || $data.getHtmlInputType() === 'password' -->
+                                                    <!-- ko if: $data.getType() === 'Integer' -->    
+                                                        <td class='columnCell column_Value' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }">
+                                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                                <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
+                                                            <!-- /ko -->
+                                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
+                                                                <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $root.getCurrentParamValueReadonly($data), $data, $index())}}" type="number">
+                                                            <!-- /ko -->
+                                                        </td>
+                                                    <!-- /ko -->
+                                                    <!-- ko ifnot: $data.getType() === 'Integer' -->
+                                                        <td class='columnCell column_Value' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }">
+                                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                                <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
+                                                            <!-- /ko -->
+                                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
+                                                                <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}}">
+                                                            <!-- /ko -->
+                                                        </td>
+                                                    <!-- /ko -->
+                                                <!-- /ko -->
+                                                <!-- ko if: $data.getHtmlInputType() === 'checkbox' -->
                                                     <td class='columnCell column_Value' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }">
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                                            <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
+                                                            <input class="tableParameter" tabindex='-1' data-bind="checked: valIsTrue($data.value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, event: {change: function(){$data.toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                            <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $root.getCurrentParamValueReadonly($data), $data, $index())}}" type="number">
+                                                            <input class="tableParameter" tabindex='-1' data-bind="checked: valIsTrue($data.getGraphConfigField().value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: function(){$data.getGraphConfigField().toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
                                                         <!-- /ko -->
                                                     </td>
                                                 <!-- /ko -->
-                                                <!-- ko ifnot: $data.getType() === 'Integer' -->
+                                                <!-- ko if: $data.getHtmlInputType() === 'select' -->
                                                     <td class='columnCell column_Value' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }">
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                                            <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, attr:{type: $data.getHtmlInputType()},  event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.value(), 'value', $data, $index())}}">
+                                                            <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="disabled: $root.getCurrentParamValueReadonly($data), event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.value">
+                                                                <!-- options are added dynamically -->
+                                                            </select>
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                            <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'value', $data, $index())}}">
+                                                            <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="disabled: $root.getCurrentParamValueReadonly($data), event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.getGraphConfigField().value">
+                                                            <!-- options are added dynamically -->
+                                                            </select>
                                                         <!-- /ko -->
                                                     </td>
                                                 <!-- /ko -->
                                             <!-- /ko -->
-                                            <!-- ko if: $data.getHtmlInputType() === 'checkbox' -->
-                                                <td class='columnCell column_Value' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }">
-                                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                                        <input class="tableParameter" tabindex='-1' data-bind="checked: valIsTrue($data.value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, event: {change: function(){$data.toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
-                                                    <!-- /ko -->
-                                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                        <input class="tableParameter" tabindex='-1' data-bind="checked: valIsTrue($data.getGraphConfigField().value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: $data.getGraphConfigField().value, event: {change: function(){$data.getGraphConfigField().toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
-                                                    <!-- /ko -->
-                                                </td>
-                                            <!-- /ko -->
-                                            <!-- ko if: $data.getHtmlInputType() === 'select' -->
-                                                <td class='columnCell column_Value' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }">
-                                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                                        <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="disabled: $root.getCurrentParamValueReadonly($data), event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.value">
-                                                            <!-- options are added dynamically -->
-                                                        </select>
-                                                    <!-- /ko -->
-                                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                                        <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="disabled: $root.getCurrentParamValueReadonly($data), event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.getGraphConfigField().value">
-                                                        <!-- options are added dynamically -->
-                                                        </select>
-                                                    <!-- /ko -->
-                                                </td>
-                                            <!-- /ko -->
-                                        <!-- /ko -->
 
-                                        <!-- default value fields -->
-                                        <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().defaultValue() -->
-                                                <!-- ko if: $data.getHtmlInputType() === 'number' || $data.getHtmlInputType() === 'text' || $data.getHtmlInputType() === 'password' -->
-                                                    <!-- ko if: $data.getType() === 'Integer' -->    
-                                                        <td class='columnCell column_DefaultValue' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('defaultValue', $data) }">
-                                                            <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, valueUpdate: ['afterkeydown', 'input'], value: defaultValue, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}, click: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}}">
+                                            <!-- default value fields -->
+                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().defaultValue() -->
+                                                    <!-- ko if: $data.getHtmlInputType() === 'number' || $data.getHtmlInputType() === 'text' || $data.getHtmlInputType() === 'password' -->
+                                                        <!-- ko if: $data.getType() === 'Integer' -->    
+                                                            <td class='columnCell column_DefaultValue' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('defaultValue', $data) }">
+                                                                <input class="tableParameter" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, valueUpdate: ['afterkeydown', 'input'], value: defaultValue, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}, click: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}}">
+                                                            </td>
+                                                        <!-- /ko -->
+                                                        <!-- ko ifnot: $data.getType() === 'Integer' -->    
+                                                            <td class='columnCell column_DefaultValue' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('defaultValue', $data) }">
+                                                                <input class="tableParameter inputNoArrows" data-bind="disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, valueUpdate: ['afterkeydown', 'input'], value: defaultValue, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}, click: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}}">
+                                                            </td>
+                                                        <!-- /ko -->
+                                                    <!-- /ko -->
+                                                    <!-- ko if: $data.getHtmlInputType() === 'checkbox' -->
+                                                        <td class='columnCell column_DefaultValue'>
+                                                            <input class="tableParameter" tabindex='-1' onclick="$(this).val(this.checked ? true : false)" data-bind="checked: valIsTrue($data.defaultValue()), disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, valueUpdate: ['afterkeydown', 'input'], value: defaultValue, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged}">
                                                         </td>
                                                     <!-- /ko -->
-                                                    <!-- ko ifnot: $data.getType() === 'Integer' -->    
-                                                        <td class='columnCell column_DefaultValue' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('defaultValue', $data) }">
-                                                            <input class="tableParameter inputNoArrows" data-bind="disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, valueUpdate: ['afterkeydown', 'input'], value: defaultValue, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged, keyup: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}, click: function(event, data){ParameterTable.select($data.defaultValue(), 'defaultValue', $data, $index())}}">
+
+                                                    <!-- selection input -->
+                                                    <!-- ko if: $data.getHtmlInputType() === 'select' -->
+                                                        <td class='columnCell column_DefaultValue'>
+                                                            <!-- ko ifnot: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING) -->
+                                                                <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.defaultValue">
+                                                                    <!-- options are added dynamically -->
+                                                                </select> 
+                                                            <!-- /ko -->
+                                                            <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING) -->
+                                                                <div class="dropdown parameterTableTypeCustomSelect">
+                                                                    <a class="dropdown-toggle" data-bind="text:$data.defaultValue, disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
+                                                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="parameterTableTpeCustomSelect">
+                                                                        <!-- ko foreach:$data.options()-->
+                                                                            <div class="dropdown-item" data-bind="click:function(data, event){$parent.setDefaultValue($data);}">
+                                                                                <input data-bind="value:$data, event: {change:function(data,event){$parent.editOption($index(),$(event.target).val())}}" type="text">
+                                                                                <button class="typeSelectDelete" data-bind="clickBubble:false, click: function(){$parent.removeOption($index())}"><i class="material-icons md-24">delete</i></button>
+                                                                            </div>
+                                                                        <!-- /ko --> 
+                                                                        <div class="dropdown-item add" data-bind="click:function(data,event){event.stopPropagation();addOption('')}">
+                                                                            <i class="material-icons">add</i>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            <!-- /ko -->
                                                         </td>
                                                     <!-- /ko -->
                                                 <!-- /ko -->
-                                                <!-- ko if: $data.getHtmlInputType() === 'checkbox' -->
-                                                    <td class='columnCell column_DefaultValue'>
-                                                        <input class="tableParameter" tabindex='-1' onclick="$(this).val(this.checked ? true : false)" data-bind="checked: valIsTrue($data.defaultValue()), disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, valueUpdate: ['afterkeydown', 'input'], value: defaultValue, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged}">
-                                                    </td>
+                                                
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().description() -->
+                                                <td class='columnCell column_Description' onmouseenter="ParameterTable.showEditDescription(this)" onmouseleave="ParameterTable.hideEditDescription(this)" data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('description', $data) }, eagleTooltip:description">
+                                                    <input class="tableParameter" type="string" data-bind="value: description, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.description(), 'description', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.description(), 'description', $data, $index())}}">
+                                                    <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                        <button class="parameterTableDescriptionBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditDescriptionInModal($data)}"></button>
+                                                    <!-- /ko -->
+                                                </td>
                                                 <!-- /ko -->
+                                            <!-- /ko -->
 
-                                                <!-- selection input -->
-                                                <!-- ko if: $data.getHtmlInputType() === 'select' -->
-                                                    <td class='columnCell column_DefaultValue'>
+                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
+                                            <td class='columnCell column_Comment' onmouseenter="ParameterTable.showEditComment(this)" onmouseleave="ParameterTable.hideEditComment(this)" data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('comment', $data) }, eagleTooltip: $data.getGraphConfigField().comment">
+                                                <input class="tableParameter tableFieldCommentInput" type="string" data-bind="value: $data.getGraphConfigField().comment, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}}">
+                                                <button class="parameterTableCommentBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditCommentInModal($data)}"></button>
+                                            </td>
+                                            <td class='columnCell column_Remove'>
+                                                <button data-bind="click: function(){ParameterTable.requestRemoveField($data)}, disabled: !Setting.findValue(Setting.ALLOW_SET_KEY_PARAMETER), eagleTooltip:'Remove Field from Graph Config', clickBubble:false">
+                                                    <i class="material-icons">remove</i>
+                                                </button>
+                                            </td>
+                                            <!-- /ko -->
+                                            
+                                            <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().type() -->
+                                                    <td class='columnCell column_Type'>
                                                         <!-- ko ifnot: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING) -->
-                                                            <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable, event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.defaultValue">
+                                                            <select data-bind="options: $root.types(), value: type, disabled: ParameterTable.getNodeLockedState($data)">
                                                                 <!-- options are added dynamically -->
-                                                            </select> 
-                                                        <!-- /ko -->
+                                                            </select>
+                                                        <!-- /ko --> 
                                                         <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING) -->
-                                                            <div class="dropdown parameterTableTypeCustomSelect">
-                                                                <a class="dropdown-toggle" data-bind="text:$data.defaultValue, disabled: ParameterTable.getNodeLockedState($data) || Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
-                                                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="parameterTableTpeCustomSelect">
-                                                                    <!-- ko foreach:$data.options()-->
-                                                                        <div class="dropdown-item" data-bind="click:function(data, event){$parent.setDefaultValue($data);}">
-                                                                            <input data-bind="value:$data, event: {change:function(data,event){$parent.editOption($index(),$(event.target).val())}}" type="text">
-                                                                            <button class="typeSelectDelete" data-bind="clickBubble:false, click: function(){$parent.removeOption($index())}"><i class="material-icons md-24">delete</i></button>
-                                                                        </div>
+                                                            <div class="input-group">
+                                                                <input  class="typesInput form-control" type="text" autocomplete="off" data-bind="value:type, attr:{id:'typeInputFor_'+$data.getId()}">
+                                                                <button class="btn btn-outline-secondary" data-bs-toggle="dropdown" aria-expanded="false" data-bind="attr:{id:'typeButtonFor_'+$data.getId()}" type="button">
+                                                                    <span class="material-icons-outlined">
+                                                                        arrow_drop_down
+                                                                    </span>
+                                                                </button>
+                                                                <ul class="dropdown-menu dropdown-menu-end" data-bind="attr:{id:'typeFor_'+$data.getId()}">
+                                                                    <!-- ko foreach:$root.types()-->
+                                                                        <a class="dropdown-item" data-bind="text:$data, click:function(){$root.tableDropdownClick($data, $parent);}"></a>
                                                                     <!-- /ko --> 
-                                                                    <div class="dropdown-item add" data-bind="click:function(data,event){event.stopPropagation();addOption('')}">
-                                                                        <i class="material-icons">add</i>
-                                                                    </div>
-                                                                </div>
+                                                                </ul>
                                                             </div>
-                                                        <!-- /ko -->
+                                                        <!-- /ko --> 
                                                     </td>
-                                                <!-- /ko -->
-                                            <!-- /ko -->
-                                            
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().description() -->
-                                            <td class='columnCell column_Description' onmouseenter="ParameterTable.showEditDescription(this)" onmouseleave="ParameterTable.hideEditDescription(this)" data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('description', $data) }, eagleTooltip:description">
-                                                <input class="tableParameter" type="string" data-bind="value: description, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.description(), 'description', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.description(), 'description', $data, $index())}}">
-                                                <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                                    <button class="parameterTableDescriptionBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditDescriptionInModal($data)}"></button>
-                                                <!-- /ko -->
-                                            </td>
-                                            <!-- /ko -->
-                                        <!-- /ko -->
-
-                                        <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigAttributesTable && $data.getGraphConfigField() -->
-                                        <td class='columnCell column_Comment' onmouseenter="ParameterTable.showEditComment(this)" onmouseleave="ParameterTable.hideEditComment(this)" data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('comment', $data) }, eagleTooltip: $data.getGraphConfigField().comment">
-                                            <input class="tableParameter tableFieldCommentInput" type="string" data-bind="value: $data.getGraphConfigField().comment, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}}">
-                                            <button class="parameterTableCommentBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditCommentInModal($data)}"></button>
-                                        </td>
-                                        <td class='columnCell column_Remove'>
-                                            <button data-bind="click: function(){ParameterTable.requestRemoveField($data)}, disabled: !Setting.findValue(Setting.ALLOW_SET_KEY_PARAMETER), eagleTooltip:'Remove Field from Graph Config', clickBubble:false">
-                                                <i class="material-icons">remove</i>
-                                            </button>
-                                        </td>
-                                        <!-- /ko -->
-                                        
-                                        <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().type() -->
-                                                <td class='columnCell column_Type'>
-                                                    <!-- ko ifnot: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING) -->
-                                                        <select data-bind="options: $root.types(), value: type, disabled: ParameterTable.getNodeLockedState($data)">
-                                                            <!-- options are added dynamically -->
-                                                        </select>
-                                                    <!-- /ko --> 
-                                                    <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING) -->
-                                                        <div class="input-group">
-                                                            <input  class="typesInput form-control" type="text" autocomplete="off" data-bind="value:type, attr:{id:'typeInputFor_'+$data.getId()}">
-                                                            <button class="btn btn-outline-secondary" data-bs-toggle="dropdown" aria-expanded="false" data-bind="attr:{id:'typeButtonFor_'+$data.getId()}" type="button">
-                                                                <span class="material-icons-outlined">
-                                                                    arrow_drop_down
-                                                                </span>
-                                                            </button>
-                                                            <ul class="dropdown-menu dropdown-menu-end" data-bind="attr:{id:'typeFor_'+$data.getId()}">
-                                                                <!-- ko foreach:$root.types()-->
-                                                                    <a class="dropdown-item" data-bind="text:$data, click:function(){$root.tableDropdownClick($data, $parent);}"></a>
-                                                                <!-- /ko --> 
-                                                            </ul>
-                                                        </div>
-                                                    <!-- /ko --> 
-                                                </td>
-                                            <!-- /ko --> 
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().flags() -->
-                                                <td class='columnCell column_Flags'>    
-                                                    <!-- ko if: ParameterTable.getNodeLockedState($data) -->
-                                                            <!-- ko if: $data.isReadonly() -->
-                                                            <button type="button" disabled data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip:Utils.getReadOnlyText()" data-bs-placement="left">
-                                                                <i class="material-icons">lock</i>
-                                                            </button>
-                                                        <!-- /ko -->
-                                                        <!-- ko ifnot: $data.isReadonly() -->
-                                                            <button type="button" disabled data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip:Utils.getReadOnlyText()" data-bs-placement="left">
-                                                                <i class="material-icons-outlined">lock_open</i>
-                                                            </button>
-                                                        <!-- /ko -->
-                                                    <!-- /ko -->
-                                                    <!-- ko ifnot: ParameterTable.getNodeLockedState($data) -->
-                                                        <!-- ko if: $data.isReadonly() -->
-                                                            <button type="button" data-bind="click: function(){$data.toggleReadOnly();}, eagleTooltip: 'Parameter Value is read only<br/>Click to toggle'" data-bs-placement="left">
-                                                                <i class="material-icons">lock</i>
-                                                            </button>
-                                                        <!-- /ko -->
-                                                        <!-- ko ifnot: $data.isReadonly() -->
-                                                            <button  type="button" data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip: 'Parameter Value is not read only<br/>Click to toggle'" data-bs-placement="left">
-                                                                <i class="material-icons-outlined">lock_open</i>
-                                                            </button>
-                                                        <!-- /ko -->
-                                                        <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING)-->
-                                                            <!-- ko if: $data.isPrecious() -->
-                                                                <button type="button" data-bind="click: $data.togglePrecious, eagleTooltip: 'Parameter is precious<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">diamond</i>
+                                                <!-- /ko --> 
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().flags() -->
+                                                    <td class='columnCell column_Flags'>    
+                                                        <!-- ko if: ParameterTable.getNodeLockedState($data) -->
+                                                                <!-- ko if: $data.isReadonly() -->
+                                                                <button type="button" disabled data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip:Utils.getReadOnlyText()" data-bs-placement="left">
+                                                                    <i class="material-icons">lock</i>
                                                                 </button>
                                                             <!-- /ko -->
-                                                            <!-- ko ifnot: $data.isPrecious() -->
-                                                                <button type="button" data-bind="click: $data.togglePrecious, eagleTooltip: 'Parameter is not precious<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons-outlined">diamond</i>
+                                                            <!-- ko ifnot: $data.isReadonly() -->
+                                                                <button type="button" disabled data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip:Utils.getReadOnlyText()" data-bs-placement="left">
+                                                                    <i class="material-icons-outlined">lock_open</i>
                                                                 </button>
                                                             <!-- /ko -->
                                                         <!-- /ko -->
-                                                        <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING)-->
-                                                                <!-- ko if: $data.isPositionalArgument() -->
-                                                                <button type="button" data-bind="click: $data.togglePositionalArgument, eagleTooltip: 'Parameter is positional<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">location_on</i>
+                                                        <!-- ko ifnot: ParameterTable.getNodeLockedState($data) -->
+                                                            <!-- ko if: $data.isReadonly() -->
+                                                                <button type="button" data-bind="click: function(){$data.toggleReadOnly();}, eagleTooltip: 'Parameter Value is read only<br/>Click to toggle'" data-bs-placement="left">
+                                                                    <i class="material-icons">lock</i>
                                                                 </button>
                                                             <!-- /ko -->
-                                                            <!-- ko ifnot: $data.isPositionalArgument() -->
-                                                                <button type="button" data-bind="click: $data.togglePositionalArgument, eagleTooltip: 'Parameter is not positional<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons-outlined">location_on</i>
+                                                            <!-- ko ifnot: $data.isReadonly() -->
+                                                                <button  type="button" data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip: 'Parameter Value is not read only<br/>Click to toggle'" data-bs-placement="left">
+                                                                    <i class="material-icons-outlined">lock_open</i>
                                                                 </button>
                                                             <!-- /ko -->
-                                                        <!-- /ko -->
-                                                        <!-- ko ifnot: $data.usage() === Daliuge.FieldUsage.NoPort-->
-                                                            <!-- ko if: $data.isEvent() -->
-                                                                <button type="button" data-bind="click: function(){$data.toggleEvent();}, eagleTooltip: 'Port is event port<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">alarm_on</i>
-                                                                </button>
+                                                            <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING)-->
+                                                                <!-- ko if: $data.isPrecious() -->
+                                                                    <button type="button" data-bind="click: $data.togglePrecious, eagleTooltip: 'Parameter is precious<br/>Click to toggle'" data-bs-placement="left">
+                                                                        <i class="material-icons">diamond</i>
+                                                                    </button>
+                                                                <!-- /ko -->
+                                                                <!-- ko ifnot: $data.isPrecious() -->
+                                                                    <button type="button" data-bind="click: $data.togglePrecious, eagleTooltip: 'Parameter is not precious<br/>Click to toggle'" data-bs-placement="left">
+                                                                        <i class="material-icons-outlined">diamond</i>
+                                                                    </button>
+                                                                <!-- /ko -->
                                                             <!-- /ko -->
-                                                            <!-- ko ifnot: $data.isEvent() -->
-                                                                <button type="button" data-bind="click: function(){$data.toggleEvent();}, eagleTooltip: 'Port is not event port<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">alarm_off</i>
-                                                                </button>
+                                                            <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING)-->
+                                                                    <!-- ko if: $data.isPositionalArgument() -->
+                                                                    <button type="button" data-bind="click: $data.togglePositionalArgument, eagleTooltip: 'Parameter is positional<br/>Click to toggle'" data-bs-placement="left">
+                                                                        <i class="material-icons">location_on</i>
+                                                                    </button>
+                                                                <!-- /ko -->
+                                                                <!-- ko ifnot: $data.isPositionalArgument() -->
+                                                                    <button type="button" data-bind="click: $data.togglePositionalArgument, eagleTooltip: 'Parameter is not positional<br/>Click to toggle'" data-bs-placement="left">
+                                                                        <i class="material-icons-outlined">location_on</i>
+                                                                    </button>
+                                                                <!-- /ko -->
+                                                            <!-- /ko -->
+                                                            <!-- ko ifnot: $data.usage() === Daliuge.FieldUsage.NoPort-->
+                                                                <!-- ko if: $data.isEvent() -->
+                                                                    <button type="button" data-bind="click: function(){$data.toggleEvent();}, eagleTooltip: 'Port is event port<br/>Click to toggle'" data-bs-placement="left">
+                                                                        <i class="material-icons">alarm_on</i>
+                                                                    </button>
+                                                                <!-- /ko -->
+                                                                <!-- ko ifnot: $data.isEvent() -->
+                                                                    <button type="button" data-bind="click: function(){$data.toggleEvent();}, eagleTooltip: 'Port is not event port<br/>Click to toggle'" data-bs-placement="left">
+                                                                        <i class="material-icons">alarm_off</i>
+                                                                    </button>
+                                                                <!-- /ko -->
                                                             <!-- /ko -->
                                                         <!-- /ko -->
-                                                    <!-- /ko -->
-                                                </td>
-                                            <!-- /ko -->
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().parameterType() -->
-                                                <td class='columnCell column_ParamType'>
-                                                    <select class="tableFieldParamTypeSelect" data-bind="options: Object.values(Daliuge.FieldType), value: parameterType, disabled: ParameterTable.getNodeLockedState($data)">
+                                                    </td>
+                                                <!-- /ko -->
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().parameterType() -->
+                                                    <td class='columnCell column_ParamType'>
+                                                        <select class="tableFieldParamTypeSelect" data-bind="options: Object.values(Daliuge.FieldType), value: parameterType, disabled: ParameterTable.getNodeLockedState($data)">
+                                                            <!-- options are added dynamically -->
+                                                        </select>
+                                                    </td>
+                                                <!-- /ko -->
+                                                
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().usage() -->
+                                                <td class='columnCell column_Usage'>
+                                                    <select class="tbaleFieldUseAs" data-bind="options: Object.values(Daliuge.FieldUsage), value: usage, disabled: ParameterTable.getParamsTableEditState() , event: {change: ParameterTable.fieldUsageChanged}">
                                                         <!-- options are added dynamically -->
                                                     </select>
                                                 </td>
-                                            <!-- /ko -->
-                                            
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().usage() -->
-                                            <td class='columnCell column_Usage'>
-                                                <select class="tbaleFieldUseAs" data-bind="options: Object.values(Daliuge.FieldUsage), value: usage, disabled: ParameterTable.getParamsTableEditState() , event: {change: ParameterTable.fieldUsageChanged}">
-                                                    <!-- options are added dynamically -->
-                                                </select>
-                                            </td>
-                                            <!-- /ko -->
-
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().encoding() -->
-                                            <td class='columnCell column_Encoding'>
-                                                <!-- ko if: $data.usage() === Daliuge.FieldUsage.NoPort-->
-                                                <span class="faded">N/A</span>
                                                 <!-- /ko -->
-                                                <!-- ko ifnot: $data.usage() === Daliuge.FieldUsage.NoPort-->
-                                                <select class="tbaleFieldEncoding" data-bind="options: Object.values(Daliuge.Encoding), value: encoding, disabled: ParameterTable.getParamsTableEditState() , event: {change: ParameterTable.encodingChanged}">
-                                                    <!-- options are added dynamically -->
-                                                </select>
-                                                <!-- /ko -->
-                                            </td>
-                                            <!-- /ko -->
-                                            
-                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().actions() -->
-                                                <td class="columnCell column_Actions">
-                                                    <button class="resetDefaults" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$data.resetToDefault();$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Reset To Default'"><i class="material-icons">upload_file</i></button>
-                                                    <!-- ko ifnot: ParameterTable.getNodeLockedState($data) -->
-                                                        <button class="edit" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.editField(null, 'Field', $data.parameterType(), $data.usage(), $data.getId());}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Edit'"><i class="material-icons">edit</i></button>
-                                                        <button class="duplicate" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.duplicateParameter($index());$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Duplicate'"><i class="material-icons">content_copy</i></button>
-                                                        <button class="delete" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.removeFieldFromNodeById($root.selectedNode(),$data.getId());}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Remove parameter'"><i class="material-icons md-24">delete</i></button>
-                                                    <!-- /ko -->
-                                                    <!-- ko if: $data.getHasErrors()-->
-                                                        <button class="text-danger" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">error</i></button>
+
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().encoding() -->
+                                                <td class='columnCell column_Encoding'>
+                                                    <!-- ko if: $data.usage() === Daliuge.FieldUsage.NoPort-->
+                                                    <span class="faded">N/A</span>
                                                     <!-- /ko -->
-                                                    
-                                                    <!-- ko if: $data.getHasOnlyWarnings()-->
-                                                        <button class="text-warning" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">warning</i></button>
+                                                    <!-- ko ifnot: $data.usage() === Daliuge.FieldUsage.NoPort-->
+                                                    <select class="tbaleFieldEncoding" data-bind="options: Object.values(Daliuge.Encoding), value: encoding, disabled: ParameterTable.getParamsTableEditState() , event: {change: ParameterTable.encodingChanged}">
+                                                        <!-- options are added dynamically -->
+                                                    </select>
                                                     <!-- /ko -->
                                                 </td>
+                                                <!-- /ko -->
+                                                
+                                                <!-- ko if: ParameterTable.getActiveColumnVisibility().actions() -->
+                                                    <td class="columnCell column_Actions">
+                                                        <button class="resetDefaults" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$data.resetToDefault();$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Reset To Default'"><i class="material-icons">upload_file</i></button>
+                                                        <!-- ko ifnot: ParameterTable.getNodeLockedState($data) -->
+                                                            <button class="edit" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.editField(null, 'Field', $data.parameterType(), $data.usage(), $data.getId());}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Edit'"><i class="material-icons">edit</i></button>
+                                                            <button class="duplicate" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.duplicateParameter($index());$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Duplicate'"><i class="material-icons">content_copy</i></button>
+                                                            <button class="delete" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.removeFieldFromNodeById($root.selectedNode(),$data.getId());}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Remove parameter'"><i class="material-icons md-24">delete</i></button>
+                                                        <!-- /ko -->
+                                                        <!-- ko if: $data.getHasErrors()-->
+                                                            <button class="text-danger" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">error</i></button>
+                                                        <!-- /ko -->
+                                                        
+                                                        <!-- ko if: $data.getHasOnlyWarnings()-->
+                                                            <button class="text-warning" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">warning</i></button>
+                                                        <!-- /ko -->
+                                                    </td>
+                                                <!-- /ko -->
                                             <!-- /ko -->
-                                        <!-- /ko -->
-                                    </tr>
+                                        </tr>
+                                    <!-- /ko -->
                                 <!-- /ko -->
-                            <!-- /ko -->
-                        </tbody>
-                    </table>
+                            </tbody>
+                        </table>
+                    </div>
                 <!-- /ko -->
             <!-- /ko -->
             <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ParameterTable -->

From 52b680386ed48dcc6f58f9270a57376318add55f Mon Sep 17 00:00:00 2001
From: MWicenec <wicenecmw@gmail.com>
Date: Wed, 6 Nov 2024 11:45:32 +0800
Subject: [PATCH 7/7] fixed another css issue with scrolling in the parameter
 table

---
 static/tables.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/static/tables.css b/static/tables.css
index bc7ae788..1f6116af 100644
--- a/static/tables.css
+++ b/static/tables.css
@@ -272,7 +272,7 @@ td:first-child input {
 }
 
 .eagleTableDisplay .scrollWrapper {
-    height: 100%;
+    height: calc(100% - 24px);
     overflow: auto;
     position: relative;
 }