From 3ac2aa8954a05bb66514a75bd600068c102101c5 Mon Sep 17 00:00:00 2001
From: MWicenec <wicenecmw@gmail.com>
Date: Tue, 17 Dec 2024 15:50:23 +0800
Subject: [PATCH] renamed file and its link

---
 templates/node_parameter_table.html | 452 ++++++++++++++++++++++++++++
 1 file changed, 452 insertions(+)
 create mode 100644 templates/node_parameter_table.html

diff --git a/templates/node_parameter_table.html b/templates/node_parameter_table.html
new file mode 100644
index 00000000..15cfafd7
--- /dev/null
+++ b/templates/node_parameter_table.html
@@ -0,0 +1,452 @@
+<!-- Parameter/arguments table -->
+<div class="eagleTableDisplay parameterTable" tabindex="-1" role="dialog" aria-labelledby="parameterTableTitle">
+    <div class="bottomWindowHeaderWrap" data-bind="click: function(){ParameterTable.resetSelection()}">
+        <!-- ko if: eagle.selectedNode() != null -->
+            <h5 class="bottomWindowHeader">Node Fields Table: <span data-bind="html: selectedNode().getName()"></span></h5>
+            <!-- ko if: selectedNode() != null -->
+                <!-- ko if: selectedNode().isLocked() -->
+                    <button type="button" class="btn btn-secondary btn-sm" data-bind="click: function() { }, clickBubble: false, eagleTooltip: Utils.getReadOnlyText()">
+                        <i class="material-icons md-20">lock</i>
+                    </button>
+                <!-- /ko -->
+                <!-- ko ifnot: selectedNode().isLocked() -->
+                    <button type="button" class="btn btn-secondary btn-sm" data-bind="eagleTooltip: 'readwrite'">
+                        <i class="material-icons md-20">lock_open</i>
+                    </button>
+                <!-- /ko -->
+            <!-- /ko -->
+        <!-- /ko -->
+        <!-- ko if: eagle.selectedNode() === null -->
+            <h5 class="bottomWindowHeader">Fields Table: </h5>
+        <!-- /ko -->
+
+        <div class="header-center">
+            <!-- ko if: selectedNode() != null -->
+            <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 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 -->
+            <button type="button" class="btn btn-primary" data-bind="click: function(){SideWindow.toggleShown('bottom')}, clickBubble:false"><span class="parameterTableCloseButton">Close</span></button>
+        </div> 
+
+        <div class="dropdown parameterTableVisibilityContainer">
+            <a class="dropdown-toggle icon-table_column_visibility componentTableVisibilityBtn" data-bs-toggle="dropdown"></a>
+            <div class="dropdown-menu dropdown-menu-right">
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleKeyAttribute()}"><span>Key Parameter</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().keyAttribute()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleFieldId()}"><span>Field ID</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().fieldId()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleDefaultValue()}"><span>Default Value</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().defaultValue()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleDescription()}"><span>Description</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().description()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleType()}"><span>Type</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().type()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleFlags()}"><span>Flags</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().flags()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleParameterType()}"><span>Parameter Type</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().parameterType()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleUsage()}"><span>Use As</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().usage()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleEncoding()}"><span>Encoding</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().encoding()"></div>
+                <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleActions()}"><span>Actions</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().actions()"></div>
+            </div>
+        </div>
+        <div class="searchBarContainer" data-bind="clickBubble:false, click:function(){}">
+            <i class="material-icons md-18 searchBarIcon">search</i>
+            <a href="#" data-bind="click:function(data, event){$root.emptySearchBar(Eagle.tableSearchString,data,event);}">
+                <i class="material-icons md-18 searchBarIconClose">close</i>
+            </a>
+            <input class="componentSearchBar" type="text" placeholder="Search: eg. app, string" data-bind="valueUpdate: ['afterkeydown', 'input'], value:Eagle.tableSearchString, event:{keyup: function(data,event){$root.setSearchBarClearBtnState(data,event)}},eagleTooltip:`Search for names, types, anything really! You may enter several terms that should match separated by a ','`">
+        </div>
+    </div>
+    <div class="tableBody">
+        <div class="wrapper">
+            <!-- ko if: eagle.selectedNode() != null -->
+                <!-- ko if: ParameterTable.getTableFields().length === 0 -->
+                    <div class="container h-100">
+                        <div class="row align-items-center h-100">
+                            <div class="col-md-12 text-center">
+                                <span class="fs-3">No fields on Node</span>
+                                <br/>
+                                <span class="fs-6">Fields can be added with the 'Add Parameter' button above</span>
+                            </div>
+                        </div>
+                    </div>
+                <!-- /ko -->
+                <!-- ko if: ParameterTable.getTableFields().length !== 0 -->
+                    <div class="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 paramsTableWrapper">
+                            <thead>
+                                <tr>
+                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().keyAttribute() -->
+                                        <th class="parameter_table_isKeyAttribute" data-bind="eagleTooltip:'Add/remove Field from Graph Config'" data-bs-placement="top"></th>
+                                    <!-- /ko -->
+                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().displayText() -->
+                                        <th class="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: ParameterTable.getActiveColumnVisibility().fieldId() -->
+                                        <th class="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().value() -->
+                                        <th class="parameter_table_value" data-bind="eagleTooltip:'The value of this parameter'" data-bs-placement="top">
+                                            <span>Value</span>
+                                            <div data-bind="css: {resizer: ParameterTable.setUpColumnResizer('parameter_table_value') === true}"></div>
+                                        </th>
+                                    <!-- /ko -->
+                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().defaultValue() -->
+                                        <th class="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 class="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 if: ParameterTable.getActiveColumnVisibility().type() -->
+                                        <th class="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 class="parameter_table_flags" data-bind="eagleTooltip:'Parameter flags'" data-bs-placement="top">Flags</th>
+                                        <!-- /ko -->
+                                    <!-- ko if: ParameterTable.getActiveColumnVisibility().parameterType() -->
+                                        <th class="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 class="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() && eagle.selectedNode().isApplication()-->
+                                    <th class="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: ParameterTable.getActiveColumnVisibility().actions() -->
+                                        <th class="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 -->
+                                </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: ParameterTable.getActiveColumnVisibility().displayText() -->
+                                                <td class='columnCell column_DisplayText' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('displayText', $data) }, eagleTooltip:description, click: function(){Utils.showField($root, nodeId(), $data)}">
+                                                    <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: Eagle.selectedLocation() === Eagle.FileType.Graph -->
+                                                        <!-- ko ifnot: $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
+                                                        <button data-bind="click: function(){ParameterTable.requestAddField($data)}, disabled: !Setting.findValue(Setting.ALLOW_SET_KEY_PARAMETER) || $root.getCurrentParamValueReadonly($data), 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) || $root.getCurrentParamValueReadonly($data), eagleTooltip:'Remove Field from Graph Config', style:{'visibility':'visible'}, clickBubble:false">
+                                                            <i class="material-icons">favorite</i>
+                                                        </button>
+                                                        <!-- /ko -->
+                                                    <!-- /ko -->
+                                                </td>
+                                            <!-- /ko -->
+                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().fieldId() -->
+                                                <td class='columnCell column_FieldId' 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 -->
+                                             
+                                            <!-- 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'>
+                                                            <!-- ko if: $data.getGraphConfigField() -->
+                                                                <input class="tableParameter configValueInput" min="0" step="1" onfocus="this.previousValue = this.value" onkeydown="this.previousValue = this.value" oninput="validity.valid || (value = this.previousValue)" data-bind="css: {doubleInputDisplay: $data.getGraphConfigField(), selectedTableParameter: ParameterTable.isSelected('configValue', $data) }, eagleTooltip: 'Configured Value',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(), 'configValue', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'configValue', $data, $index())}}">    
+                                                                <i class="material-icons md-18 parameterTableOverWriteIcon" data-bind="eagleTooltip: 'The Configured Value (left) is overwriting the graph value (right)'">arrow_forward</i>
+                                                            <!-- /ko -->
+                                                            <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="css: {doubleInputDisplay: $data.getGraphConfigField(), selectedTableParameter: ParameterTable.isSelected('value', $data) }, eagleTooltip: 'Graph Value',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())}}">
+                                                        </td>
+                                                    <!-- /ko -->
+                                                    <!-- ko ifnot: $data.getType() === 'Integer' -->
+                                                        <td class='columnCell column_Value'>
+                                                            <!-- ko if: $data.getGraphConfigField() -->
+                                                                <input class="tableParameter inputNoArrows configValueInput tableFieldStringValueInput" data-bind="css: {doubleInputDisplay: $data.getGraphConfigField(), selectedTableParameter: ParameterTable.isSelected('configValue', $data) }, eagleTooltip: 'Configured Value', 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(), 'configValue', $data, $index())}, click: function(event, data){ParameterTable.select($data.getGraphConfigField().value(), 'configValue', $data, $index())}}">
+                                                                <i class="material-icons md-18 parameterTableOverWriteIcon" data-bind="eagleTooltip: 'The Configured Value (left) is overwriting the graph value (right)'">arrow_forward</i>
+                                                            <!-- /ko -->
+                                                            <input class="tableParameter inputNoArrows tableFieldStringValueInput" data-bind="css: {doubleInputDisplay: $data.getGraphConfigField(), selectedTableParameter: ParameterTable.isSelected('value', $data) }, eagleTooltip: 'Graph Value', 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())}}">
+                                                        </td>
+                                                    <!-- /ko -->
+                                                <!-- /ko -->
+                                                <!-- ko if: $data.getHtmlInputType() === 'checkbox' -->
+                                                    <td class='columnCell column_Value' data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }">
+                                                        <!-- ko if: $data.getGraphConfigField() -->
+                                                            <div class="checkboxWrapper configValueInput" data-bind="css: {doubleInputDisplay: $data.getGraphConfigField()}, eagleTooltip: 'Configured Value'">
+                                                                <div>
+                                                                    <input class="tableParameter" tabindex='-1' data-bind="css: {selectedTableParameter: ParameterTable.isSelected('configValue', $data) }, checked: valIsTrue($data.getGraphConfigField().value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, event: {change: function(){$data.getGraphConfigField().toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
+                                                                </div>
+                                                            </div>
+                                                            <i class="material-icons md-18 parameterTableOverWriteIcon" data-bind="eagleTooltip: 'The Configured Value (left) is overwriting the graph value (right)'">arrow_forward</i>
+                                                        <!-- /ko -->
+                                                        <div class="checkboxWrapper" data-bind="css: {doubleInputDisplay: $data.getGraphConfigField()}, eagleTooltip: 'Graph Value'">
+                                                            <div>
+                                                                <input class="tableParameter" tabindex='-1' data-bind="css: { selectedTableParameter: ParameterTable.isSelected('value', $data) }, checked: valIsTrue($data.value()), disabled: $root.getCurrentParamValueReadonly($data), valueUpdate: ['afterkeydown', 'input'], value: value, event: {change: function(){$data.toggle(); ParameterTable.fieldValueChanged();}}" type="checkbox">
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                <!-- /ko -->
+                                                <!-- ko if: $data.getHtmlInputType() === 'select' -->
+                                                    <td class='columnCell column_Value'>
+                                                        <!-- ko if: $data.getGraphConfigField() -->
+                                                            <div class="checkboxWrapper configValueInput" data-bind="css: {doubleInputDisplay: $data.getGraphConfigField()}, eagleTooltip: 'Configured Value'">
+                                                                <div>
+                                                                    <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="css: {selectedTableParameter: ParameterTable.isSelected('configValue', $data) },disabled: $root.getCurrentParamValueReadonly($data.getGraphConfigField()), event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.getGraphConfigField().value">
+                                                                        <!-- options are added dynamically -->
+                                                                    </select>
+                                                                </div>
+                                                            </div>
+                                                            <i class="material-icons md-18 parameterTableOverWriteIcon" data-bind="eagleTooltip: 'The Configured Value (left) is overwriting the graph value (right)'">arrow_forward</i>
+                                                        <!-- /ko -->
+                                                        <div class="checkboxWrapper" data-bind="css: {doubleInputDisplay: $data.getGraphConfigField()}, eagleTooltip: 'Graph Value'">
+                                                            <div>
+                                                                <select aria-label="Label" aria-describedby="group-addon" data-bs-placement="bottom" data-bind="css: {selectedTableParameter: ParameterTable.isSelected('value', $data) },disabled: $root.getCurrentParamValueReadonly($data), event: {change: ParameterTable.fieldValueChanged}, options: $data.options, value: $data.value">
+                                                                    <!-- options are added dynamically -->
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                    </td>
+                                                <!-- /ko -->
+                                            <!-- /ko -->
+
+                                            <!-- default value fields -->
+                                            <!-- 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), 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), 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), valueUpdate: ['afterkeydown', 'input'], value: defaultValue, attr:{type: $data.getHtmlInputType()}, event: {change: ParameterTable.fieldValueChanged}">
+                                                    </td>
+                                                <!-- /ko -->
+
+                                                <!-- 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), 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)" 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 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 ifnot: ParameterTable.getNodeLockedState($data) -->
+                                                        <button class="parameterTableDescriptionBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditDescriptionInModal($data)}"></button>
+                                                    <!-- /ko -->
+                                                </td>
+                                                <!-- /ko -->
+                                            <!-- /ko -->
+                                            
+                                            <!-- 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>
+                                                                </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 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 -->
+                                                </td>
+                                            <!-- /ko -->
+                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().parameterType() -->
+                                                <td class='columnCell column_ParamType'>
+                                                    <div class="checkboxWrapper">
+                                                        <select class="tableFieldParamTypeSelect" data-bind="options: Object.values(Daliuge.FieldType), value: parameterType, disabled: ParameterTable.getNodeLockedState($data)">
+                                                            <!-- options are added dynamically -->
+                                                        </select>
+                                                    </div>
+                                                </td>
+                                            <!-- /ko -->
+                                            
+                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().usage() -->
+                                            <td class='columnCell column_Usage'>
+                                                <div class="checkboxWrapper">
+                                                    <select class="tbaleFieldUseAs" data-bind="options: Object.values(Daliuge.FieldUsage), value: usage, disabled: ParameterTable.getParamsTableEditState() , event: {change: ParameterTable.fieldUsageChanged}">
+                                                        <!-- options are added dynamically -->
+                                                    </select>
+                                                </div>
+                                            </td>
+                                            <!-- /ko -->
+
+                                            <!-- ko if: ParameterTable.getActiveColumnVisibility().encoding() && eagle.selectedNode().isApplication() -->
+                                            <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-->
+                                                <div class="checkboxWrapper">
+                                                    <select class="tbaleFieldEncoding" data-bind="options: Object.values(Daliuge.Encoding), value: encoding, disabled: ParameterTable.getParamsTableEditState() , event: {change: ParameterTable.encodingChanged}">
+                                                        <!-- options are added dynamically -->
+                                                    </select>
+                                                </div>
+                                                <!-- /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.logicalGraph().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 -->
+                                        </tr>
+                                    <!-- /ko -->
+                                <!-- /ko -->
+                            </tbody>
+                        </table>
+                    </div>
+                <!-- /ko -->
+            <!-- /ko -->
+            <div class="container h-100">
+                <div class="row align-items-center h-100">
+                    <div class="col-md-12 text-center">
+                        <!-- ko if: eagle.selectedObjects().length > 1 -->
+                            <span class="fs-3">Too Many Nodes Selected</span>
+                            <br/>
+                            <span class="fs-6">Select one node to change its parameters</span>
+                        <!-- /ko -->
+                        <!-- ko if: eagle.selectedObjects().length === 0 -->
+                            <span class="fs-3">No node selected</span>
+                            <br/>
+                            <span class="fs-6">Select a node to change its parameters</span>
+                        <!-- /ko -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file