diff --git a/src/main/resources/static/css/custom.css b/src/main/resources/static/css/custom.css
index 7746959..8f17fe6 100644
--- a/src/main/resources/static/css/custom.css
+++ b/src/main/resources/static/css/custom.css
@@ -2037,7 +2037,20 @@ footer div.foot_info span {
 
 
 .layout_table {
-  width: auto;
+  margin: 5px;
+}
+
+.layout_table tr {
+  height: 41px;
+}
+
+.layout-grid-row {
+
+}
+
+.layout-grid-cell {
+  border-collapse: collapse;
+  border: 1px gray solid;
 }
 
 .layout_tree_grid_indent {
@@ -2067,4 +2080,6 @@ footer div.foot_info span {
   display: inline-block;
   position: relative;
   cursor: pointer;
+  padding: 0 !important;
+  margin: 0 !important;
 }
diff --git a/src/main/resources/static/plugins/apitestmanager/app.bundle.js b/src/main/resources/static/plugins/apitestmanager/app.bundle.js
index 4f03cb6..5296276 100644
--- a/src/main/resources/static/plugins/apitestmanager/app.bundle.js
+++ b/src/main/resources/static/plugins/apitestmanager/app.bundle.js
@@ -565,7 +565,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it[\"return\"] != null) it[\"return\"](); } finally { if (didErr) throw err; } } }; }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ApiLayoutItemTreeBuilder = /*#__PURE__*/function () {\n  function ApiLayoutItemTreeBuilder() {\n    _classCallCheck(this, ApiLayoutItemTreeBuilder);\n  }\n  _createClass(ApiLayoutItemTreeBuilder, null, [{\n    key: \"createTree\",\n    value: function createTree(layoutItems) {\n      layoutItems.sort(function (a, b) {\n        return a.loutItemSerno - b.loutItemSerno;\n      });\n      var rootId = layoutItems.length === 0 ? 0 : layoutItems[0].parent;\n      var root = {\n        id: rootId,\n        children: [],\n        loutItemSerno: 0,\n        loutItemName: 'Root',\n        loutItemDesc: 'Root',\n        loutItemType: '',\n        loutItemDepth: 0,\n        parent: null\n      };\n      var nodeMap = new Map();\n      nodeMap.set(rootId, root);\n      var _iterator = _createForOfIteratorHelper(layoutItems),\n        _step;\n      try {\n        var _loop = function _loop() {\n          var item = _step.value;\n          if (['Grid', 'Group'].includes(item.loutItemType)) {\n            if (item.loutItemOccCnt !== null) {\n              if (item.loutItemOccRef === '*') {\n                var refItem = layoutItems.find(function (p) {\n                  return p.loutItemName === item.loutItemOccRef;\n                });\n                if (refItem) {\n                  item.childOccCnt = parseInt(refItem.value, 10);\n                }\n              } else {\n                item.childOccCnt = parseInt(item.loutItemOccCnt, 10);\n              }\n            }\n          }\n          if (nodeMap.has(item.parent)) {\n            nodeMap.get(item.parent).children.push(item);\n          }\n          console.log(item.id + ' to ' + item.parent);\n          nodeMap.set(item.id, item);\n        };\n        for (_iterator.s(); !(_step = _iterator.n()).done;) {\n          _loop();\n        }\n      } catch (err) {\n        _iterator.e(err);\n      } finally {\n        _iterator.f();\n      }\n      return root;\n    }\n  }, {\n    key: \"moveNode\",\n    value: function moveNode(root, node, moveUp) {\n      var parent = this.getParentNode(root, node);\n      if (parent === null) {\n        // Node is the root node, cannot be moved\n        return;\n      }\n      var siblings = parent.children;\n      var currentIndex = siblings.indexOf(node);\n      if (currentIndex === -1) {\n        // Node not found in parent's children list\n        return;\n      }\n      var newIndex = moveUp ? currentIndex - 1 : currentIndex + 1;\n      if (newIndex >= 0 && newIndex < siblings.length) {\n        // Swap the positions of the current node and the node at the new index\n        var _ref = [siblings[newIndex], siblings[currentIndex]];\n        siblings[currentIndex] = _ref[0];\n        siblings[newIndex] = _ref[1];\n      }\n    }\n  }, {\n    key: \"getParentNode\",\n    value: function getParentNode(root, node) {\n      if (node.parent === null) {\n        return null; // Node is the root node\n      }\n      return this.getNodeById(root, node.parent);\n    }\n  }, {\n    key: \"getNodeIndex\",\n    value: function getNodeIndex(parent, node) {\n      return parent.children.indexOf(node);\n    }\n  }, {\n    key: \"getNodeById\",\n    value: function getNodeById(node, id) {\n      if (node.id === id) {\n        return node;\n      }\n      var _iterator2 = _createForOfIteratorHelper(node.children),\n        _step2;\n      try {\n        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n          var child = _step2.value;\n          var found = this.getNodeById(child, id);\n          if (found !== null) {\n            return found;\n          }\n        }\n      } catch (err) {\n        _iterator2.e(err);\n      } finally {\n        _iterator2.f();\n      }\n      return null;\n    }\n  }, {\n    key: \"findParent\",\n    value: function findParent(root, node) {\n      if (root === null || node === null) {\n        return null; // Invalid input\n      }\n      if (root.children.includes(node)) {\n        return root; // The root is the parent of the node\n      }\n      var _iterator3 = _createForOfIteratorHelper(root.children),\n        _step3;\n      try {\n        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n          var child = _step3.value;\n          var parent = this.findParent(child, node);\n          if (parent !== null) {\n            return parent;\n          }\n        }\n      } catch (err) {\n        _iterator3.e(err);\n      } finally {\n        _iterator3.f();\n      }\n      return null; // Node not found in the tree\n    }\n  }, {\n    key: \"printTree\",\n    value: function printTree(root) {\n      console.log('====================================');\n      this.printNode(root, 0);\n      console.log('====================================');\n    }\n  }, {\n    key: \"printNode\",\n    value: function printNode(node, level) {\n      if (node === null) {\n        return;\n      }\n\n      // Print indentation based on the level\n      var indent = '';\n      for (var i = 0; i < level; i++) {\n        indent += '    ';\n      }\n\n      // Print the node information\n      console.log(\"\".concat(indent).concat(node.id, \": \").concat(node.loutName, \"[\").concat(node.loutItemType, \", Level: \").concat(node.loutItemDepth, \", Serno: \").concat(node.loutItemSerno, \"]\"));\n\n      // Recursively print the children\n      if (node.children.length > 0) {\n        var _iterator4 = _createForOfIteratorHelper(node.children),\n          _step4;\n        try {\n          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {\n            var child = _step4.value;\n            this.printNode(child, level + 1);\n          }\n        } catch (err) {\n          _iterator4.e(err);\n        } finally {\n          _iterator4.f();\n        }\n      }\n    }\n  }, {\n    key: \"moveNodeDepth\",\n    value: function moveNodeDepth(root, node, newDepth) {\n      if (node === null || root === null || newDepth < 0) {\n        // Invalid input\n        return;\n      }\n      var parent = this.getParentNode(root, node);\n      if (parent === null) {\n        // Node is the root node, cannot be moved to a different level\n        return;\n      }\n      var currentDepth = node.loutItemDepth;\n      var nodeIndex = this.getNodeIndex(parent, node);\n      var nextSibling = this.findClosestSibling(parent.children, nodeIndex);\n      parent.children.splice(nodeIndex, 1);\n      if (newDepth > currentDepth) {\n        // Moving to a higher depth\n        if (nextSibling !== null) {\n          nextSibling.children.push(node);\n          node.parent = nextSibling.id;\n          node.loutItemDepth = newDepth;\n          this.adjustChildrenDepth(node, newDepth + 1);\n        } else {\n          // No next sibling found, add the node back to the original parent\n          parent.children.push(node);\n        }\n      } else {\n        // Moving to a lower depth\n        var newParent = this.findParent(root, parent);\n        if (newParent !== null) {\n          newParent.children.push(node);\n          node.parent = newParent.id;\n          node.loutItemDepth = newDepth;\n          this.adjustChildrenDepth(node, newDepth + 1);\n        } else {\n          // No parent found at the desired level, add the node back to the original parent\n          parent.children.push(node);\n        }\n      }\n    }\n  }, {\n    key: \"adjustChildrenDepth\",\n    value: function adjustChildrenDepth(node, depth) {\n      var _iterator5 = _createForOfIteratorHelper(node.children),\n        _step5;\n      try {\n        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {\n          var child = _step5.value;\n          child.loutItemDepth = depth;\n          this.adjustChildrenDepth(child, depth + 1);\n        }\n      } catch (err) {\n        _iterator5.e(err);\n      } finally {\n        _iterator5.f();\n      }\n    }\n  }, {\n    key: \"findNextSibling\",\n    value: function findNextSibling(siblings) {\n      if (siblings === null || siblings.length === 0) {\n        return null;\n      }\n      return siblings[0];\n    }\n  }, {\n    key: \"findClosestSibling\",\n    value: function findClosestSibling(siblings, nodeIndex) {\n      if (siblings === null || siblings.length === 0) {\n        return null;\n      }\n      if (nodeIndex < 1 || nodeIndex >= siblings.length) {\n        return this.findNextSibling(siblings);\n      }\n      return siblings[nodeIndex - 1];\n    }\n  }]);\n  return ApiLayoutItemTreeBuilder;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ApiLayoutItemTreeBuilder);\n\n//# sourceURL=webpack://APITestManager/./src/components/ApiLayoutItemTreeBuilder.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it[\"return\"] != null) it[\"return\"](); } finally { if (didErr) throw err; } } }; }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ApiLayoutItemTreeBuilder = /*#__PURE__*/function () {\n  function ApiLayoutItemTreeBuilder() {\n    _classCallCheck(this, ApiLayoutItemTreeBuilder);\n  }\n  _createClass(ApiLayoutItemTreeBuilder, null, [{\n    key: \"createTree\",\n    value: function createTree(layoutItems) {\n      layoutItems.sort(function (a, b) {\n        return a.loutItemSerno - b.loutItemSerno;\n      });\n      var rootId = layoutItems.length === 0 ? 0 : parseInt(layoutItems[0].parent);\n      var root = {\n        id: rootId,\n        children: [],\n        loutItemSerno: 0,\n        loutItemName: 'Root',\n        loutItemDesc: 'Root',\n        loutItemType: '',\n        loutItemDepth: 0,\n        parent: null\n      };\n      var nodeMap = new Map();\n      nodeMap.set(rootId, root);\n      var _iterator = _createForOfIteratorHelper(layoutItems),\n        _step;\n      try {\n        var _loop = function _loop() {\n          var item = _step.value;\n          if (['Grid', 'Group'].includes(item.loutItemType)) {\n            if (item.loutItemOccCnt !== null) {\n              if (item.loutItemOccCnt === '*') {\n                var refItem = layoutItems.find(function (p) {\n                  return p.loutItemName === item.loutItemOccRef;\n                });\n                if (refItem) {\n                  item.childOccCnt = parseInt(refItem.value, 10);\n                }\n              } else {\n                item.childOccCnt = parseInt(item.loutItemOccCnt, 10);\n              }\n            }\n          }\n          if (nodeMap.has(parseInt(item.parent))) {\n            nodeMap.get(parseInt(item.parent)).children.push(item);\n            console.log(item.id + ' to ' + item.parent);\n          } else {\n            console.log('Parent not found: ' + item.parent);\n          }\n          nodeMap.set(item.id, item);\n        };\n        for (_iterator.s(); !(_step = _iterator.n()).done;) {\n          _loop();\n        }\n      } catch (err) {\n        _iterator.e(err);\n      } finally {\n        _iterator.f();\n      }\n      return root;\n    }\n  }, {\n    key: \"moveNode\",\n    value: function moveNode(root, node, moveUp) {\n      var parent = this.getParentNode(root, node);\n      if (parent === null) {\n        // Node is the root node, cannot be moved\n        return;\n      }\n      var siblings = parent.children;\n      var currentIndex = siblings.indexOf(node);\n      if (currentIndex === -1) {\n        // Node not found in parent's children list\n        return;\n      }\n      var newIndex = moveUp ? currentIndex - 1 : currentIndex + 1;\n      if (newIndex >= 0 && newIndex < siblings.length) {\n        // Swap the positions of the current node and the node at the new index\n        var _ref = [siblings[newIndex], siblings[currentIndex]];\n        siblings[currentIndex] = _ref[0];\n        siblings[newIndex] = _ref[1];\n      }\n    }\n  }, {\n    key: \"getParentNode\",\n    value: function getParentNode(root, node) {\n      if (node.parent === null) {\n        return null; // Node is the root node\n      }\n      return this.getNodeById(root, node.parent);\n    }\n  }, {\n    key: \"getNodeIndex\",\n    value: function getNodeIndex(parent, node) {\n      return parent.children.indexOf(node);\n    }\n  }, {\n    key: \"getNodeById\",\n    value: function getNodeById(node, id) {\n      if (node.id == id) {\n        return node;\n      }\n      var _iterator2 = _createForOfIteratorHelper(node.children),\n        _step2;\n      try {\n        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n          var child = _step2.value;\n          var found = this.getNodeById(child, id);\n          if (found !== null) {\n            return found;\n          }\n        }\n      } catch (err) {\n        _iterator2.e(err);\n      } finally {\n        _iterator2.f();\n      }\n      return null;\n    }\n  }, {\n    key: \"findParent\",\n    value: function findParent(root, node) {\n      if (root === null || node === null) {\n        return null; // Invalid input\n      }\n      if (root.children.includes(node)) {\n        return root; // The root is the parent of the node\n      }\n      var _iterator3 = _createForOfIteratorHelper(root.children),\n        _step3;\n      try {\n        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n          var child = _step3.value;\n          var parent = this.findParent(child, node);\n          if (parent !== null) {\n            return parent;\n          }\n        }\n      } catch (err) {\n        _iterator3.e(err);\n      } finally {\n        _iterator3.f();\n      }\n      return null; // Node not found in the tree\n    }\n  }, {\n    key: \"printTree\",\n    value: function printTree(root) {\n      console.log('====================================');\n      this.printNode(root, 0);\n      console.log('====================================');\n    }\n  }, {\n    key: \"printNode\",\n    value: function printNode(node, level) {\n      if (node === null) {\n        return;\n      }\n\n      // Print indentation based on the level\n      var indent = '';\n      for (var i = 0; i < level; i++) {\n        indent += '    ';\n      }\n\n      // Print the node information\n      console.log(\"\".concat(indent).concat(node.id, \": \").concat(node.loutName, \"[\").concat(node.loutItemType, \", Level: \").concat(node.loutItemDepth, \", Serno: \").concat(node.loutItemSerno, \"]\"));\n\n      // Recursively print the children\n      if (node.children.length > 0) {\n        var _iterator4 = _createForOfIteratorHelper(node.children),\n          _step4;\n        try {\n          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {\n            var child = _step4.value;\n            this.printNode(child, level + 1);\n          }\n        } catch (err) {\n          _iterator4.e(err);\n        } finally {\n          _iterator4.f();\n        }\n      }\n    }\n  }, {\n    key: \"moveNodeDepth\",\n    value: function moveNodeDepth(root, node, newDepth) {\n      if (node === null || root === null || newDepth < 0) {\n        // Invalid input\n        return;\n      }\n      var parent = this.getParentNode(root, node);\n      if (parent === null) {\n        // Node is the root node, cannot be moved to a different level\n        return;\n      }\n      var currentDepth = node.loutItemDepth;\n      var nodeIndex = this.getNodeIndex(parent, node);\n      var nextSibling = this.findClosestSibling(parent.children, nodeIndex);\n      parent.children.splice(nodeIndex, 1);\n      if (newDepth > currentDepth) {\n        // Moving to a higher depth\n        if (nextSibling !== null) {\n          nextSibling.children.push(node);\n          node.parent = nextSibling.id;\n          node.loutItemDepth = newDepth;\n          this.adjustChildrenDepth(node, newDepth + 1);\n        } else {\n          // No next sibling found, add the node back to the original parent\n          parent.children.push(node);\n        }\n      } else {\n        // Moving to a lower depth\n        var newParent = this.findParent(root, parent);\n        if (newParent !== null) {\n          newParent.children.push(node);\n          node.parent = newParent.id;\n          node.loutItemDepth = newDepth;\n          this.adjustChildrenDepth(node, newDepth + 1);\n        } else {\n          // No parent found at the desired level, add the node back to the original parent\n          parent.children.push(node);\n        }\n      }\n    }\n  }, {\n    key: \"adjustChildrenDepth\",\n    value: function adjustChildrenDepth(node, depth) {\n      var _iterator5 = _createForOfIteratorHelper(node.children),\n        _step5;\n      try {\n        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {\n          var child = _step5.value;\n          child.loutItemDepth = depth;\n          this.adjustChildrenDepth(child, depth + 1);\n        }\n      } catch (err) {\n        _iterator5.e(err);\n      } finally {\n        _iterator5.f();\n      }\n    }\n  }, {\n    key: \"findNextSibling\",\n    value: function findNextSibling(siblings) {\n      if (siblings === null || siblings.length === 0) {\n        return null;\n      }\n      return siblings[0];\n    }\n  }, {\n    key: \"findClosestSibling\",\n    value: function findClosestSibling(siblings, nodeIndex) {\n      if (siblings === null || siblings.length === 0) {\n        return null;\n      }\n      if (nodeIndex < 1 || nodeIndex >= siblings.length) {\n        return this.findNextSibling(siblings);\n      }\n      return siblings[nodeIndex - 1];\n    }\n  }]);\n  return ApiLayoutItemTreeBuilder;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ApiLayoutItemTreeBuilder);\n\n//# sourceURL=webpack://APITestManager/./src/components/ApiLayoutItemTreeBuilder.js?");
 
 /***/ }),
 
@@ -576,7 +576,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ApiLayoutItemTreeDataBuilder = /*#__PURE__*/function () {\n  function ApiLayoutItemTreeDataBuilder() {\n    var startId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10000;\n    _classCallCheck(this, ApiLayoutItemTreeDataBuilder);\n    this.idCounter = this.generateId(startId);\n    this.nodeMap = new Map();\n  }\n  _createClass(ApiLayoutItemTreeDataBuilder, [{\n    key: \"generateId\",\n    value: /*#__PURE__*/_regeneratorRuntime().mark(function generateId(start) {\n      var id;\n      return _regeneratorRuntime().wrap(function generateId$(_context) {\n        while (1) switch (_context.prev = _context.next) {\n          case 0:\n            id = start;\n          case 1:\n            if (false) {}\n            _context.next = 4;\n            return id++;\n          case 4:\n            _context.next = 1;\n            break;\n          case 6:\n          case \"end\":\n            return _context.stop();\n        }\n      }, generateId);\n    })\n  }, {\n    key: \"cloneNode\",\n    value: function cloneNode(node, parent) {\n      // If childOccCnt > 1, try to find an existing node in the parent's children.\n      // if (node.childOccCnt > 1 && parent && parent.children) {\n      //   let existingNode = parent.children.find(child => child.loutItemName === node.loutItemName);\n      //   if (existingNode) {\n      //     console.log('Found existing node with the same loutItemName:', existingNode.id);\n      //     return existingNode;  // Return the existing node instead of creating a new one.\n      //   }\n      // }\n\n      // Create a shallow copy of the node, except for the children array\n      var newNode = _objectSpread(_objectSpread({}, node), {}, {\n        id: this.idCounter.next().value,\n        // Update with a new unique ID\n        parent: parent ? parent.id : undefined // Set the new parent's ID if parent exists\n      });\n\n      // Remove children property to handle it separately\n      delete newNode.children;\n      this.nodeMap.set(newNode.id, newNode);\n      return newNode;\n    }\n  }, {\n    key: \"replicateTree\",\n    value: function replicateTree(node) {\n      var _this = this;\n      var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      var newNode = this.cloneNode(node, parent);\n      newNode.children = []; // Initialize children array\n      if (node.children && node.children.length > 0) {\n        node.children.forEach(function (child) {\n          var childCount = node.childOccCnt || 1;\n          for (var i = 0; i < childCount; i++) {\n            var childReplicas = _this.replicateTree(child, newNode);\n            newNode.children = newNode.children.concat(childReplicas);\n          }\n        });\n      }\n      return [newNode]; // Return an array containing only the new singular parent node with replicated children\n    }\n  }, {\n    key: \"createReplicatedTree\",\n    value: function createReplicatedTree(originalTree) {\n      // console.log({originalTree});\n      return this.replicateTree(originalTree)[0]; // Return the first element to maintain the tree structure\n    }\n  }]);\n  return ApiLayoutItemTreeDataBuilder;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ApiLayoutItemTreeDataBuilder);\n\n//# sourceURL=webpack://APITestManager/./src/components/ApiLayoutItemTreeDataBuilder.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ApiLayoutItemTreeDataBuilder = /*#__PURE__*/function () {\n  function ApiLayoutItemTreeDataBuilder() {\n    var startId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10000;\n    _classCallCheck(this, ApiLayoutItemTreeDataBuilder);\n    this.idCounter = this.generateId(startId);\n    this.nodeMap = new Map();\n  }\n  _createClass(ApiLayoutItemTreeDataBuilder, [{\n    key: \"generateId\",\n    value: /*#__PURE__*/_regeneratorRuntime().mark(function generateId(start) {\n      var id;\n      return _regeneratorRuntime().wrap(function generateId$(_context) {\n        while (1) switch (_context.prev = _context.next) {\n          case 0:\n            id = start;\n          case 1:\n            if (false) {}\n            _context.next = 4;\n            return id++;\n          case 4:\n            _context.next = 1;\n            break;\n          case 6:\n          case \"end\":\n            return _context.stop();\n        }\n      }, generateId);\n    })\n  }, {\n    key: \"cloneNode\",\n    value: function cloneNode(node, parent) {\n      // Create a shallow copy of the node, except for the children array\n      var newNode = _objectSpread(_objectSpread({}, node), {}, {\n        id: this.idCounter.next().value,\n        // Update with a new unique ID\n        parent: parent ? parent.id : undefined // Set the new parent's ID if parent exists\n      });\n\n      // Remove children property to handle it separately\n      delete newNode.children;\n      this.nodeMap.set(newNode.id, newNode);\n      return newNode;\n    }\n  }, {\n    key: \"replicateTree\",\n    value: function replicateTree(node) {\n      var _this = this;\n      var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      var newNode = this.cloneNode(node, parent);\n      newNode.children = []; // Initialize children array\n      if (node.children && node.children.length > 0) {\n        node.children.forEach(function (child) {\n          var childCount = node.childOccCnt || 1;\n          for (var i = 0; i < childCount; i++) {\n            var childReplicas = _this.replicateTree(child, newNode);\n            newNode.children = newNode.children.concat(childReplicas);\n          }\n        });\n      }\n      return [newNode]; // Return an array containing only the new singular parent node with replicated children\n    }\n  }, {\n    key: \"createReplicatedTree\",\n    value: function createReplicatedTree(originalTree) {\n      // console.log({originalTree});\n      return this.replicateTree(originalTree)[0]; // Return the first element to maintain the tree structure\n    }\n  }]);\n  return ApiLayoutItemTreeDataBuilder;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ApiLayoutItemTreeDataBuilder);\n\n//# sourceURL=webpack://APITestManager/./src/components/ApiLayoutItemTreeDataBuilder.js?");
 
 /***/ }),
 
@@ -609,7 +609,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _EditableInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EditableInput */ \"./src/components/EditableInput.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar LayoutGridModel = /*#__PURE__*/_createClass(function LayoutGridModel(items) {\n  _classCallCheck(this, LayoutGridModel);\n  this.items = items;\n});\nvar LayoutGridView = /*#__PURE__*/function () {\n  function LayoutGridView(model, controller) {\n    _classCallCheck(this, LayoutGridView);\n    this.model = model;\n    this.controller = controller;\n  }\n  _createClass(LayoutGridView, [{\n    key: \"render\",\n    value: function render() {\n      this.renderApiLayout();\n    }\n  }, {\n    key: \"renderApiLayout\",\n    value: function renderApiLayout() {\n      var _this = this;\n      var requestContainer = this.targetContent.find('.request_layout');\n      requestContainer.empty();\n      var headerHtml = \"\\n        <table class=\\\"table layout_table\\\">\\n            <colgroup>\\n              <col style=\\\"width: 80px;\\\">\\n              <col style=\\\"width: 40px;\\\">\\n              <col style=\\\"width: 40px;\\\">\\n              <col style=\\\"width: 120px;\\\">\\n              <col style=\\\"width: 150px;\\\">\\n              <col style=\\\"width: 60px;\\\">\\n              <col style=\\\"width: 110px;\\\">\\n              <col style=\\\"width: 80px;\\\">\\n              <col style=\\\"width: 100px;\\\">\\n              <col style=\\\"width: 80px;\\\">\\n              <col style=\\\"width: 120px;\\\">\\n              <col style=\\\"width: 120px;\\\">\\n            </colgroup>\\n            <thead>\\n                <tr>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 80px;\\\">#</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 40px;\\\">ID</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 40px;\\\">Parent</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 120px;\\\">\\uD56D\\uBAA9\\uBA85(\\uC601\\uBB38)</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 150px;\\\">\\uD56D\\uBAA9\\uC124\\uBA85</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 60px;\\\">\\uAE4A\\uC774</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 110px;\\\">\\uC544\\uC774\\uD15C \\uC720\\uD615</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 80px;\\\">\\uBC18\\uBCF5 \\uD69F\\uC218 </th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 100px;\\\">\\uBC18\\uBCF5 \\uCC38\\uC870 \\uD544\\uB4DC</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 80px;\\\">\\uB370\\uC774\\uD130 \\uAE38\\uC774</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 120px;\\\">\\uAC12</th>\\n                    <th scope=\\\"col\\\" style=\\\"text-align: center;width: 120px;\\\">\\uBE44\\uACE0 <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary add-layout-item\\\"><i class=\\\"fas fa-plus\\\"></i></button></th>\\n                </tr>\\n            </thead>\\n            <tbody>\\n        \";\n      var footerHtml = \"\\n                    </tbody>\\n                </table>\\n            \";\n      var fieldsHtml = this.model.items ? this.model.items.map(function (item, index) {\n        return _this.renderApiLayoutItem(item, index);\n      }).join('') : '';\n      requestContainer.append(headerHtml + fieldsHtml + footerHtml);\n      requestContainer.find('.editable').each(function (index, editableElement) {\n        var editableInput = new _EditableInput__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n          name: editableElement.dataset.name,\n          value: editableElement.dataset.value,\n          style: {\n            width: '120px'\n          }\n        });\n        editableInput.init(editableElement, /*#__PURE__*/function () {\n          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {\n            return _regeneratorRuntime().wrap(function _callee$(_context) {\n              while (1) switch (_context.prev = _context.next) {\n                case 0:\n                  _.set(_this.model, editableElement.dataset.name, value);\n                  _context.next = 3;\n                  return _this.controller.additionalCallback();\n                case 3:\n                case \"end\":\n                  return _context.stop();\n              }\n            }, _callee);\n          }));\n          return function (_x) {\n            return _ref.apply(this, arguments);\n          };\n        }());\n      });\n      var totalLength = 0;\n      this.model.items.forEach(function (item) {\n        totalLength += parseInt(item.loutItemLength);\n      });\n      this.setupListeners();\n    }\n  }, {\n    key: \"getFieldValue\",\n    value: function getFieldValue(element) {\n      if ($(element).is('select') || $(element).is('input[type=\"text\"]') || $(element).is('input[type=\"number\"]')) {\n        return $(element).val();\n      }\n      if ($(element).is('input[type=\"checkbox\"]')) {\n        return $(element).is(':checked');\n      }\n    }\n  }, {\n    key: \"recalculateSerno\",\n    value: function recalculateSerno() {\n      // Reassign loutItemSerno sequentially based on the current order\n      this.model.items.forEach(function (item, index) {\n        item.loutItemSerno = index + 1; // Assuming you want to start numbering from 1\n      });\n    }\n  }, {\n    key: \"handleUIUpdate\",\n    value: function () {\n      var _handleUIUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {\n        var element, fieldName, newValue, totalLength;\n        return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n          while (1) switch (_context2.prev = _context2.next) {\n            case 0:\n              if (!event) {\n                _context2.next = 10;\n                break;\n              }\n              event.preventDefault();\n              element = event.currentTarget;\n              fieldName = $(element).attr('name');\n              newValue = this.getFieldValue(element);\n              if (!(fieldName !== '')) {\n                _context2.next = 10;\n                break;\n              }\n              _.set(this.model, fieldName, newValue);\n              console.log(this.model);\n              _context2.next = 10;\n              return this.controller.additionalCallback(this.model);\n            case 10:\n              totalLength = 0;\n              this.model.items.forEach(function (item) {\n                totalLength += parseInt(item.loutItemLength);\n              });\n            case 12:\n            case \"end\":\n              return _context2.stop();\n          }\n        }, _callee2, this);\n      }));\n      function handleUIUpdate(_x2) {\n        return _handleUIUpdate.apply(this, arguments);\n      }\n      return handleUIUpdate;\n    }()\n  }, {\n    key: \"getLastId\",\n    value: function getLastId() {\n      var lastId = 0;\n      this.model.items.forEach(function (item) {\n        if (item.id > lastId) {\n          lastId = item.id;\n        }\n      });\n      return lastId + 1;\n    }\n  }, {\n    key: \"setupListeners\",\n    value: function setupListeners() {\n      var _this2 = this;\n      var table = this.targetContent.find('.layout_table');\n      table.on('change', 'select.field, input.field', this.handleUIUpdate.bind(this));\n      table.on('click', '.add-layout-item', function (event) {\n        var item = {\n          'id': _this2.getLastId(),\n          'parent': 0,\n          'level': 1,\n          'loutName': '',\n          'loutItemName': '',\n          'loutItemDesc': '',\n          'loutItemDepth': 1,\n          'loutItemType': 'Field',\n          'loutItemOccCnt': '',\n          'loutItemOccRef': '',\n          'loutItemDataType': 'String',\n          'loutItemLength': 1,\n          'loutItemDecimal': 0,\n          'loutItemDefault': '',\n          'loutItemMaskYn': 'N',\n          'loutItemMaskOffset': 0,\n          'loutItemMaskLength': 0,\n          'parentLoutItemIndex': 0,\n          'expanded': true,\n          'isLeaf': true,\n          'LOUTITEMPATH': '',\n          'value': '',\n          'loutItemSerno': 0\n        };\n        _this2.model.items.push(item);\n        _this2.recalculateSerno();\n        _this2.renderApiLayout();\n      });\n      table.on('click', '.move-up', function (event) {\n        var index = $(event.currentTarget).data('index');\n        if (index > 0) {\n          var temp = _this2.model.items[index];\n          _this2.model.items[index] = _this2.model.items[index - 1];\n          _this2.model.items[index - 1] = temp;\n          _this2.recalculateSerno();\n          _this2.renderApiLayout();\n        }\n      });\n      table.on('click', '.move-down', function (event) {\n        var index = $(event.currentTarget).data('index');\n        if (index < _this2.model.items.length - 1) {\n          var temp = _this2.model.items[index];\n          _this2.model.items[index] = _this2.model.items[index + 1];\n          _this2.model.items[index + 1] = temp;\n          _this2.recalculateSerno();\n          _this2.renderApiLayout();\n        }\n      });\n      table.on('click', '.delete', function (event) {\n        var index = $(event.currentTarget).data('index');\n        _this2.model.items.splice(index, 1);\n        _this2.recalculateSerno();\n        _this2.renderApiLayout();\n      });\n    }\n  }, {\n    key: \"renderApiLayoutItem\",\n    value: function renderApiLayoutItem(item, index) {\n      if (item.value === null) {\n        item.value = '';\n      }\n      return \"\\n        <tr class=\\\"layout-grid-row\\\">\\n            <td style=\\\"width: 80px; text-align: center;\\\"><span style=\\\"width: 80px; text-align: center;\\\">\".concat(item.loutItemSerno, \"</span></td>\\n            <td><input type=\\\"text\\\" class=\\\"field\\\" name=\\\"items[\").concat(index, \"].id\\\" value=\\\"\").concat(item.id, \"\\\"></td>\\n            <td><input type=\\\"text\\\" class=\\\"field\\\" name=\\\"items[\").concat(index, \"].parent\\\" value=\\\"\").concat(item.parent, \"\\\"></td>\\n            <td><input type=\\\"text\\\" class=\\\"field\\\" name=\\\"items[\").concat(index, \"].loutItemName\\\" value=\\\"\").concat(item.loutItemName, \"\\\"></td>\\n            <td><input type=\\\"text\\\" class=\\\"field\\\" name=\\\"items[\").concat(index, \"].loutItemDesc\\\" value=\\\"\").concat(item.loutItemDesc, \"\\\"></td>\\n            <td><input type=\\\"number\\\" class=\\\"field\\\" style=\\\"width: 60px;\\\" name=\\\"items[\").concat(index, \"].loutItemDepth\\\" min=\\\"1\\\" value=\\\"\").concat(item.loutItemDepth, \"\\\"></td>\\n            <td>\\n                <select name=\\\"items[\").concat(index, \"].loutItemType\\\" class=\\\"field\\\" id=\\\"loutItemType\").concat(index, \"\\\">\\n                    <option value=\\\"Field\\\" \").concat(item.loutItemType === 'Field' ? 'selected' : '', \">Field</option>\\n                    <option value=\\\"Grid\\\" \").concat(item.loutItemType === 'Grid' ? 'selected' : '', \">Grid</option>\\n                    <option value=\\\"Group\\\" \").concat(item.loutItemType === 'Group' ? 'selected' : '', \">Group</option>\\n                    <option value=\\\"Attr\\\" \").concat(item.loutItemType === 'Attr' ? 'selected' : '', \">Attr</option>\\n                </select>\\n            </td>\\n            <td><input type=\\\"number\\\" class=\\\"field\\\" style=\\\"width: 80px;\\\" name=\\\"items[\").concat(index, \"].loutItemOccCnt\\\" min=\\\"0\\\" value=\\\"\").concat(item.loutItemOccCnt, \"\\\"></td>\\n            <td><input type=\\\"text\\\" class=\\\"field\\\" name=\\\"items[\").concat(index, \"].loutItemOccRef\\\" value=\\\"\").concat(item.loutItemOccRef, \"\\\"></td>\\n            <td><input type=\\\"number\\\" class=\\\"field\\\" style=\\\"width: 80px;\\\" name=\\\"items[\").concat(index, \"].loutItemLength\\\" min=\\\"1\\\" value=\\\"\").concat(item.loutItemLength, \"\\\"></td>\\n            <td><div class=\\\"editable\\\" data-name=\\\"value\\\" data-value=\\\"\").concat(item.value, \"\\\"></div></td>\\n            <td style=\\\"width: 120px; text-align: center;\\\">\\n              <div style=\\\"width: 120px !important;\\\">\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary move-up\\\" data-index=\\\"\").concat(index, \"\\\"><i class=\\\"fas fa-arrow-up\\\"></i></button>\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary move-down\\\" data-index=\\\"\").concat(index, \"\\\"><i class=\\\"fas fa-arrow-down\\\"></i></button>\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary delete\\\" data-index=\\\"\").concat(index, \"\\\"><i class=\\\"fas fa-trash-alt\\\"></i></button>\\n              </div>\\n            </td>\\n        </tr>\\n    \");\n    }\n  }]);\n  return LayoutGridView;\n}();\nvar LayoutGridController = /*#__PURE__*/function () {\n  function LayoutGridController(model) {\n    _classCallCheck(this, LayoutGridController);\n    this.model = model;\n    this.view = new LayoutGridView(this.model, this);\n  }\n  _createClass(LayoutGridController, [{\n    key: \"init\",\n    value: function init(targetContent, callback) {\n      this.additionalCallback = callback;\n      this.view.targetContent = targetContent;\n      this.view.render();\n    }\n  }]);\n  return LayoutGridController;\n}();\nvar LayoutGrid = /*#__PURE__*/function () {\n  function LayoutGrid(layout) {\n    _classCallCheck(this, LayoutGrid);\n    this.model = new LayoutGridModel(layout.layoutItems);\n    this.controller = new LayoutGridController(this.model);\n  }\n  _createClass(LayoutGrid, [{\n    key: \"init\",\n    value: function init(targetContent, callback) {\n      this.controller.init(targetContent, callback);\n    }\n  }]);\n  return LayoutGrid;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LayoutGrid);\n\n//# sourceURL=webpack://APITestManager/./src/components/LayoutGrid.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _EditableInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EditableInput */ \"./src/components/EditableInput.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar LayoutGridModel = /*#__PURE__*/_createClass(function LayoutGridModel(items) {\n  _classCallCheck(this, LayoutGridModel);\n  this.items = items;\n});\nvar LayoutGridView = /*#__PURE__*/function () {\n  function LayoutGridView(model, controller) {\n    _classCallCheck(this, LayoutGridView);\n    this.model = model;\n    this.controller = controller;\n  }\n  _createClass(LayoutGridView, [{\n    key: \"render\",\n    value: function render() {\n      this.renderApiLayout();\n    }\n  }, {\n    key: \"renderApiLayout\",\n    value: function renderApiLayout() {\n      var _this = this;\n      var requestContainer = this.targetContent.find('.request_layout');\n      requestContainer.empty();\n      var headerHtml = \"\\n        <table class=\\\"layout_table\\\" style=\\\"border-collapse: collapse; border: 1px gray solid;\\\">\\n            <colgroup>\\n              <col style=\\\"width: 50px;\\\">\\n              <col style=\\\"width: 80px;\\\">\\n              <col style=\\\"width: 80px;\\\">\\n              <col style=\\\"width: 120px;\\\">\\n              <col style=\\\"width: 150px;\\\">\\n              <col style=\\\"width: 60px;\\\">\\n              <col style=\\\"width: 110px;\\\">\\n              <col style=\\\"width: 80px;\\\">\\n              <col style=\\\"width: 100px;\\\">\\n              <col style=\\\"width: 80px;\\\">\\n              <col style=\\\"width: 120px;\\\">\\n              <col style=\\\"width: 120px;\\\">\\n            </colgroup>\\n            <thead>\\n                <tr>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 80px;\\\">#</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 40px;\\\">ID</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 40px;\\\">Parent</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 120px;\\\">\\uD56D\\uBAA9\\uBA85(\\uC601\\uBB38)</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 150px;\\\">\\uD56D\\uBAA9\\uC124\\uBA85</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 60px;\\\">\\uAE4A\\uC774</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 110px;\\\">\\uC544\\uC774\\uD15C \\uC720\\uD615</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 80px;\\\">\\uBC18\\uBCF5 \\uD69F\\uC218 </th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 100px;\\\">\\uBC18\\uBCF5 \\uCC38\\uC870 \\uD544\\uB4DC</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 80px;\\\">\\uB370\\uC774\\uD130 \\uAE38\\uC774</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 120px;\\\">\\uAC12</th>\\n                    <th scope=\\\"col\\\" style=\\\"border: 1px gray solid; text-align: center;width: 120px;\\\">\\uBE44\\uACE0 <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary add-layout-item\\\"><i class=\\\"fas fa-plus\\\"></i></button></th>\\n                </tr>\\n            </thead>\\n            <tbody>\\n        \";\n      var footerHtml = \"\\n                    </tbody>\\n                </table>\\n            \";\n      var fieldsHtml = this.model.items ? this.model.items.map(function (item, index) {\n        return _this.renderApiLayoutItem(item, index);\n      }).join('') : '';\n      requestContainer.append(headerHtml + fieldsHtml + footerHtml);\n      requestContainer.find('.editable').each(function (index, editableElement) {\n        var editableInput = new _EditableInput__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n          name: editableElement.dataset.name,\n          value: editableElement.dataset.value,\n          style: {\n            width: '120px'\n          }\n        });\n        editableInput.init(editableElement, /*#__PURE__*/function () {\n          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {\n            return _regeneratorRuntime().wrap(function _callee$(_context) {\n              while (1) switch (_context.prev = _context.next) {\n                case 0:\n                  _.set(_this.model, editableElement.dataset.name, value);\n                  _context.next = 3;\n                  return _this.controller.additionalCallback(_this.model);\n                case 3:\n                case \"end\":\n                  return _context.stop();\n              }\n            }, _callee);\n          }));\n          return function (_x) {\n            return _ref.apply(this, arguments);\n          };\n        }());\n      });\n      var totalLength = 0;\n      this.model.items.forEach(function (item) {\n        totalLength += parseInt(item.loutItemLength);\n      });\n      this.setupListeners();\n    }\n  }, {\n    key: \"getFieldValue\",\n    value: function getFieldValue(element) {\n      if ($(element).is('select') || $(element).is('input[type=\"text\"]') || $(element).is('input[type=\"number\"]')) {\n        return $(element).val();\n      }\n      if ($(element).is('input[type=\"checkbox\"]')) {\n        return $(element).is(':checked');\n      }\n    }\n  }, {\n    key: \"recalculateSerno\",\n    value: function recalculateSerno() {\n      // Reassign loutItemSerno sequentially based on the current order\n      this.model.items.forEach(function (item, index) {\n        item.loutItemSerno = index + 1; // Assuming you want to start numbering from 1\n      });\n    }\n  }, {\n    key: \"handleUIUpdate\",\n    value: function () {\n      var _handleUIUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {\n        var element, fieldName, newValue, totalLength;\n        return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n          while (1) switch (_context2.prev = _context2.next) {\n            case 0:\n              if (!event) {\n                _context2.next = 9;\n                break;\n              }\n              event.preventDefault();\n              element = event.currentTarget;\n              fieldName = $(element).attr('name');\n              newValue = this.getFieldValue(element);\n              if (!(fieldName !== '')) {\n                _context2.next = 9;\n                break;\n              }\n              _.set(this.model, fieldName, newValue);\n              _context2.next = 9;\n              return this.controller.additionalCallback(this.model);\n            case 9:\n              totalLength = 0;\n              this.model.items.forEach(function (item) {\n                totalLength += parseInt(item.loutItemLength);\n              });\n            case 11:\n            case \"end\":\n              return _context2.stop();\n          }\n        }, _callee2, this);\n      }));\n      function handleUIUpdate(_x2) {\n        return _handleUIUpdate.apply(this, arguments);\n      }\n      return handleUIUpdate;\n    }()\n  }, {\n    key: \"getLastId\",\n    value: function getLastId() {\n      var lastId = 0;\n      this.model.items.forEach(function (item) {\n        if (item.id > lastId) {\n          lastId = item.id;\n        }\n      });\n      return lastId + 1;\n    }\n  }, {\n    key: \"setupListeners\",\n    value: function setupListeners() {\n      var _this2 = this;\n      var table = this.targetContent.find('.layout_table');\n      table.on('change', 'select.field, input.field', this.handleUIUpdate.bind(this));\n      table.on('click', '.add-layout-item', /*#__PURE__*/function () {\n        var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(event) {\n          var item;\n          return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n            while (1) switch (_context3.prev = _context3.next) {\n              case 0:\n                item = {\n                  'id': _this2.getLastId(),\n                  'parent': 0,\n                  'level': 1,\n                  'loutName': '',\n                  'loutItemName': '',\n                  'loutItemDesc': '',\n                  'loutItemDepth': 1,\n                  'loutItemType': 'Field',\n                  'loutItemOccCnt': '',\n                  'loutItemOccRef': '',\n                  'loutItemDataType': 'String',\n                  'loutItemLength': 1,\n                  'loutItemDecimal': 0,\n                  'loutItemDefault': '',\n                  'loutItemMaskYn': 'N',\n                  'loutItemMaskOffset': 0,\n                  'loutItemMaskLength': 0,\n                  'parentLoutItemIndex': 0,\n                  'expanded': true,\n                  'isLeaf': true,\n                  'LOUTITEMPATH': '',\n                  'value': '',\n                  'loutItemSerno': 0\n                };\n                _this2.model.items.push(item);\n                _this2.recalculateSerno();\n                _this2.renderApiLayout();\n                _context3.next = 6;\n                return _this2.controller.additionalCallback(_this2.model);\n              case 6:\n              case \"end\":\n                return _context3.stop();\n            }\n          }, _callee3);\n        }));\n        return function (_x3) {\n          return _ref2.apply(this, arguments);\n        };\n      }());\n      table.on('click', '.move-up', /*#__PURE__*/function () {\n        var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(event) {\n          var index, temp;\n          return _regeneratorRuntime().wrap(function _callee4$(_context4) {\n            while (1) switch (_context4.prev = _context4.next) {\n              case 0:\n                index = $(event.currentTarget).data('index');\n                if (!(index > 0)) {\n                  _context4.next = 9;\n                  break;\n                }\n                temp = _this2.model.items[index];\n                _this2.model.items[index] = _this2.model.items[index - 1];\n                _this2.model.items[index - 1] = temp;\n                _this2.recalculateSerno();\n                _this2.renderApiLayout();\n                _context4.next = 9;\n                return _this2.controller.additionalCallback(_this2.model);\n              case 9:\n              case \"end\":\n                return _context4.stop();\n            }\n          }, _callee4);\n        }));\n        return function (_x4) {\n          return _ref3.apply(this, arguments);\n        };\n      }());\n      table.on('click', '.move-down', /*#__PURE__*/function () {\n        var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5(event) {\n          var index, temp;\n          return _regeneratorRuntime().wrap(function _callee5$(_context5) {\n            while (1) switch (_context5.prev = _context5.next) {\n              case 0:\n                index = $(event.currentTarget).data('index');\n                if (!(index < _this2.model.items.length - 1)) {\n                  _context5.next = 9;\n                  break;\n                }\n                temp = _this2.model.items[index];\n                _this2.model.items[index] = _this2.model.items[index + 1];\n                _this2.model.items[index + 1] = temp;\n                _this2.recalculateSerno();\n                _this2.renderApiLayout();\n                _context5.next = 9;\n                return _this2.controller.additionalCallback(_this2.model);\n              case 9:\n              case \"end\":\n                return _context5.stop();\n            }\n          }, _callee5);\n        }));\n        return function (_x5) {\n          return _ref4.apply(this, arguments);\n        };\n      }());\n      table.on('click', '.delete', /*#__PURE__*/function () {\n        var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(event) {\n          var index;\n          return _regeneratorRuntime().wrap(function _callee6$(_context6) {\n            while (1) switch (_context6.prev = _context6.next) {\n              case 0:\n                index = $(event.currentTarget).data('index');\n                _this2.model.items.splice(index, 1);\n                _this2.recalculateSerno();\n                _this2.renderApiLayout();\n                _context6.next = 6;\n                return _this2.controller.additionalCallback(_this2.model);\n              case 6:\n              case \"end\":\n                return _context6.stop();\n            }\n          }, _callee6);\n        }));\n        return function (_x6) {\n          return _ref5.apply(this, arguments);\n        };\n      }());\n    }\n  }, {\n    key: \"renderApiLayoutItem\",\n    value: function renderApiLayoutItem(item, index) {\n      if (item.value === null) {\n        item.value = '';\n      }\n      return \"\\n        <tr class=\\\"layout-grid-row\\\">\\n            <td class=\\\"layout-grid-cell\\\" style=\\\"width: 80px; text-align: center;\\\">\\n              <span style=\\\"width: 80px; text-align: center;\\\">\".concat(item.loutItemSerno, \"</span>\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" name=\\\"items[\").concat(index, \"].id\\\" value=\\\"\").concat(item.id, \"\\\">\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" name=\\\"items[\").concat(index, \"].parent\\\" value=\\\"\").concat(item.parent, \"\\\">\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" name=\\\"items[\").concat(index, \"].loutItemName\\\" value=\\\"\").concat(item.loutItemName, \"\\\">\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" name=\\\"items[\").concat(index, \"].loutItemDesc\\\" value=\\\"\").concat(item.loutItemDesc, \"\\\">\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"number\\\" class=\\\"form-control\\\" style=\\\"width: 60px;\\\" name=\\\"items[\").concat(index, \"].loutItemDepth\\\" min=\\\"1\\\" value=\\\"\").concat(item.loutItemDepth, \"\\\">\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n                <select name=\\\"items[\").concat(index, \"].loutItemType\\\" class=\\\"form-select\\\">\\n                    <option value=\\\"Field\\\" \").concat(item.loutItemType === 'Field' ? 'selected' : '', \">Field</option>\\n                    <option value=\\\"Grid\\\" \").concat(item.loutItemType === 'Grid' ? 'selected' : '', \">Grid</option>\\n                    <option value=\\\"Group\\\" \").concat(item.loutItemType === 'Group' ? 'selected' : '', \">Group</option>\\n                    <option value=\\\"Attr\\\" \").concat(item.loutItemType === 'Attr' ? 'selected' : '', \">Attr</option>\\n                </select>\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" style=\\\"width: 80px;\\\" name=\\\"items[\").concat(index, \"].loutItemOccCnt\\\" min=\\\"0\\\" value=\\\"\").concat(item.loutItemOccCnt, \"\\\">\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"text\\\" class=\\\"form-control\\\" name=\\\"items[\").concat(index, \"].loutItemOccRef\\\" value=\\\"\").concat(item.loutItemOccRef, \"\\\"></td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              <input type=\\\"number\\\" class=\\\"form-control\\\" style=\\\"width: 80px;\\\" name=\\\"items[\").concat(index, \"].loutItemLength\\\" min=\\\"1\\\" value=\\\"\").concat(item.loutItemLength, \"\\\">\\n            </td>\\n            <td class=\\\"layout-grid-cell\\\">\\n              \").concat(item.loutItemType === 'Field' ? \"<div class=\\\"editable\\\" data-name=\\\"items[\".concat(index, \"].value\\\" data-value=\\\"\").concat(item.value, \"\\\"></div>\") : '', \"\\n            </td>\\n            <td  class=\\\"layout-grid-cell\\\" style=\\\"width: 120px; text-align: center;\\\">\\n              <div style=\\\"width: 120px !important;\\\">\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary move-up\\\" data-index=\\\"\").concat(index, \"\\\"><i class=\\\"fas fa-arrow-up\\\"></i></button>\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary move-down\\\" data-index=\\\"\").concat(index, \"\\\"><i class=\\\"fas fa-arrow-down\\\"></i></button>\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-outline-secondary delete\\\" data-index=\\\"\").concat(index, \"\\\"><i class=\\\"fas fa-trash-alt\\\"></i></button>\\n              </div>\\n            </td>\\n        </tr>\\n    \");\n    }\n  }]);\n  return LayoutGridView;\n}();\nvar LayoutGridController = /*#__PURE__*/function () {\n  function LayoutGridController(model) {\n    _classCallCheck(this, LayoutGridController);\n    this.model = model;\n    this.view = new LayoutGridView(this.model, this);\n  }\n  _createClass(LayoutGridController, [{\n    key: \"init\",\n    value: function init(targetContent, callback) {\n      this.additionalCallback = callback;\n      this.view.targetContent = targetContent;\n      this.view.render();\n    }\n  }]);\n  return LayoutGridController;\n}();\nvar LayoutGrid = /*#__PURE__*/function () {\n  function LayoutGrid(layout) {\n    _classCallCheck(this, LayoutGrid);\n    this.model = new LayoutGridModel(layout.layoutItems);\n    this.controller = new LayoutGridController(this.model);\n  }\n  _createClass(LayoutGrid, [{\n    key: \"init\",\n    value: function init(targetContent, callback) {\n      this.controller.init(targetContent, callback);\n    }\n  }]);\n  return LayoutGrid;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LayoutGrid);\n\n//# sourceURL=webpack://APITestManager/./src/components/LayoutGrid.js?");
 
 /***/ }),
 
@@ -620,7 +620,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _EditableInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EditableInput */ \"./src/components/EditableInput.js\");\n/* harmony import */ var _APIClient__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../APIClient */ \"./src/APIClient.js\");\n/* harmony import */ var _ApiLayoutItemTreeBuilder__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ApiLayoutItemTreeBuilder */ \"./src/components/ApiLayoutItemTreeBuilder.js\");\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it[\"return\"] != null) it[\"return\"](); } finally { if (didErr) throw err; } } }; }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\nvar LayoutTreeDataGridModel = /*#__PURE__*/function () {\n  function LayoutTreeDataGridModel(root, apiRequest) {\n    _classCallCheck(this, LayoutTreeDataGridModel);\n    this.dataRoot = root;\n    this.apiRequest = apiRequest;\n    console.log('LayoutTreeDataGridModel', this.dataRoot);\n  }\n\n  // getNodePath(node) {\n  //   const getPathRecursive = (currentNode, parentPath) => {\n  //     if (!currentNode) {\n  //       return '';\n  //     }\n  //     const parent = ApiLayoutItemTreeBuilder.findParent(this.dataRoot, currentNode);\n  //     const parentChildren = parent ? parent.children : [];\n  //     const childIndex = parentChildren.findIndex(child => child.id === currentNode.id);\n  //     const childPath = childIndex !== -1 ? `children[${childIndex}]` : '';\n  //     return `${parentPath}${parentPath ? '.' : ''}${childPath}`;\n  //   };\n  //\n  //   node.path = getPathRecursive(node, '');\n  //   console.log(node.path);\n  //   return node.path;\n  // }\n  _createClass(LayoutTreeDataGridModel, [{\n    key: \"getNodePath\",\n    value: function getNodePath(node, targetId) {\n      var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : \"\";\n      // Check if the current node is the target node\n      if (node.id === targetId) {\n        return path;\n      }\n\n      // If the current node has children, iterate over them\n      if (node.children) {\n        for (var i = 0; i < node.children.length; i++) {\n          // Construct the path to the current child\n          var currentPath = path ? \"\".concat(path, \".children[\").concat(i, \"]\") : \"children[\".concat(i, \"]\");\n\n          // Recursively call findPath on the child\n          var resultPath = this.getNodePath(node.children[i], targetId, currentPath);\n\n          // If resultPath is not null, the target has been found in the subtree\n          if (resultPath) {\n            return resultPath;\n          }\n        }\n      }\n\n      // Return null if the target is not found in this subtree\n      return null;\n    }\n  }]);\n  return LayoutTreeDataGridModel;\n}();\nvar LayoutTreeDataGridView = /*#__PURE__*/function () {\n  function LayoutTreeDataGridView(selector) {\n    _classCallCheck(this, LayoutTreeDataGridView);\n    this.table = $('<table>').appendTo($(selector));\n    this.table.addClass('table');\n    this.table.css({\n      'width': 'inherit',\n      'border-collapse': 'collapse',\n      'border': '1px gray solid'\n    });\n  }\n  _createClass(LayoutTreeDataGridView, [{\n    key: \"addHeaders\",\n    value: function addHeaders(fields) {\n      var thead = $('<thead>').appendTo(this.table);\n      var tr = $('<tr>').appendTo(thead);\n      tr.addClass('layout-grid-row');\n      fields.forEach(function (field) {\n        var th = $('<th>').html(field.label).appendTo(tr);\n        th.css({\n          'width': field.width + 'px',\n          'border': '1px gray solid',\n          'text-align': 'center'\n        });\n      });\n    }\n  }, {\n    key: \"addRow\",\n    value: function addRow(node, depth) {\n      var tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id); // Storing node ID for easy access later\n\n      if (depth === 0) {\n        tr.css({\n          'display': 'none'\n        });\n      }\n      if (node.parent) {\n        var parentSelector = \".treegrid-\".concat(node.parent);\n        var lastChildSelector = \".treegrid-parent-\".concat(node.parent);\n        if ($(lastChildSelector).length > 0) {\n          var lastChild = $(lastChildSelector).last();\n          tr.insertAfter(lastChild);\n        } else {\n          tr.insertAfter($(parentSelector));\n        }\n        tr.addClass('treegrid-parent-' + node.parent);\n      } else {\n        tr.appendTo(this.table);\n      }\n      return tr;\n    }\n  }, {\n    key: \"toggleChildrenVisibility\",\n    value: function toggleChildrenVisibility(nodeId, isExpanded) {\n      var _this = this;\n      var selector = \".treegrid-parent-\".concat(nodeId);\n      $(selector).each(function (_, el) {\n        $(el).toggle(!isExpanded);\n        if (isExpanded) {\n          // If we are hiding the children\n          var childNodeId = $(el).data('nodeId'); // Assume data-nodeId is set when rows are created\n          _this.toggleChildrenVisibility(childNodeId, true); // Recursively hide all descendants\n          var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n          expander.html(isExpanded ? '+' : '-');\n        }\n      });\n    }\n  }, {\n    key: \"setupExpander\",\n    value: function setupExpander(cell, callback) {\n      var expander = $('<span>').addClass('treegrid-expander').html('-').appendTo(cell);\n      expander.click(callback);\n    }\n  }]);\n  return LayoutTreeDataGridView;\n}();\nvar LayoutTreeGridController = /*#__PURE__*/function () {\n  function LayoutTreeGridController(model, view, options) {\n    _classCallCheck(this, LayoutTreeGridController);\n    this.model = model;\n    this.view = view;\n    this.options = options;\n    this.apiClient = new _APIClient__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n  }\n  _createClass(LayoutTreeGridController, [{\n    key: \"init\",\n    value: function init(targetConent, callback) {\n      this.targetContent = targetConent;\n      this.view.addHeaders(this.options);\n      this.processNode(this.model.dataRoot, 0);\n      this.setupEditableFields();\n      this.callback = callback;\n    }\n  }, {\n    key: \"getIndent\",\n    value: function getIndent(depth) {\n      return new Array(depth + 1).join('<span class=\"treegrid-indent\"></span>');\n    }\n  }, {\n    key: \"fillPadding\",\n    value: function () {\n      var _fillPadding = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value, dataLength) {\n        var paddedValue;\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              _context.next = 2;\n              return this.apiClient.processPreScriptAndVariables(this.model.apiRequest, value.toString());\n            case 2:\n              paddedValue = _context.sent;\n              while (paddedValue.length < dataLength) {\n                paddedValue = ' ' + paddedValue; // Prepend a space character to the string\n              }\n              return _context.abrupt(\"return\", paddedValue);\n            case 5:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, this);\n      }));\n      function fillPadding(_x, _x2) {\n        return _fillPadding.apply(this, arguments);\n      }\n      return fillPadding;\n    }()\n  }, {\n    key: \"concatenateFieldValues\",\n    value: function () {\n      var _concatenateFieldValues = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(root) {\n        var queue, concatenatedValues, node, _iterator, _step, child;\n        return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n          while (1) switch (_context2.prev = _context2.next) {\n            case 0:\n              queue = [root];\n              concatenatedValues = '';\n            case 2:\n              if (!(queue.length > 0)) {\n                _context2.next = 15;\n                break;\n              }\n              node = queue.shift();\n              if (!(node.loutItemType === 'Field')) {\n                _context2.next = 12;\n                break;\n              }\n              _context2.t0 = concatenatedValues;\n              _context2.next = 8;\n              return this.fillPadding(node.value, node.loutItemLength);\n            case 8:\n              _context2.t1 = _context2.sent;\n              if (_context2.t1) {\n                _context2.next = 11;\n                break;\n              }\n              _context2.t1 = '';\n            case 11:\n              concatenatedValues = _context2.t0 += _context2.t1;\n            case 12:\n              if (node.children && node.children.length > 0) {\n                _iterator = _createForOfIteratorHelper(node.children);\n                try {\n                  for (_iterator.s(); !(_step = _iterator.n()).done;) {\n                    child = _step.value;\n                    queue.push(child);\n                  }\n                } catch (err) {\n                  _iterator.e(err);\n                } finally {\n                  _iterator.f();\n                }\n              }\n              _context2.next = 2;\n              break;\n            case 15:\n              return _context2.abrupt(\"return\", concatenatedValues);\n            case 16:\n            case \"end\":\n              return _context2.stop();\n          }\n        }, _callee2, this);\n      }));\n      function concatenateFieldValues(_x3) {\n        return _concatenateFieldValues.apply(this, arguments);\n      }\n      return concatenateFieldValues;\n    }()\n  }, {\n    key: \"sumFieldLoutItemLengths\",\n    value: function sumFieldLoutItemLengths() {\n      var queue = [this.model.dataRoot];\n      var sum = 0;\n      while (queue.length > 0) {\n        var node = queue.shift();\n        if (node.loutItemType === 'Field') {\n          sum += node.loutItemLength || 0; // Add the loutItemLength of the node, or 0 if undefined\n        }\n        if (node.children && node.children.length > 0) {\n          var _iterator2 = _createForOfIteratorHelper(node.children),\n            _step2;\n          try {\n            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n              var child = _step2.value;\n              queue.push(child);\n            }\n          } catch (err) {\n            _iterator2.e(err);\n          } finally {\n            _iterator2.f();\n          }\n        }\n      }\n      return sum;\n    }\n  }, {\n    key: \"setupEditableFields\",\n    value: function setupEditableFields() {\n      var _this2 = this;\n      this.view.table.find('.editable').each(function (index, editableElement) {\n        var editableInput = new _EditableInput__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n          name: editableElement.dataset.name,\n          value: editableElement.dataset.value,\n          path: editableElement.dataset.path\n        });\n        editableInput.init(editableElement, /*#__PURE__*/function () {\n          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(value) {\n            return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n              while (1) switch (_context3.prev = _context3.next) {\n                case 0:\n                  console.log(editableElement.dataset.path);\n                  console.log(value);\n                  _.set(_this2.model.dataRoot, editableElement.dataset.path, value);\n                  console.log(_this2.model.dataRoot);\n                  _context3.t0 = _this2;\n                  _context3.next = 7;\n                  return _this2.concatenateFieldValues(_this2.model.dataRoot);\n                case 7:\n                  _context3.t1 = _context3.sent;\n                  _context3.t0.callback.call(_context3.t0, _context3.t1);\n                case 9:\n                case \"end\":\n                  return _context3.stop();\n              }\n            }, _callee3);\n          }));\n          return function (_x4) {\n            return _ref.apply(this, arguments);\n          };\n        }());\n      });\n      this.targetContent.find('.total_message_length').text(this.sumFieldLoutItemLengths());\n    }\n  }, {\n    key: \"addCell\",\n    value: function addCell(row, node, fieldInfo, depth) {\n      var td = $('<td>').appendTo(row);\n      var padding = fieldInfo.isFirst ? this.getIndent(depth) : '';\n      var nodePath = this.model.getNodePath(this.model.dataRoot, node.id) + \".value\";\n      if (node.loutItemType === 'Field' && fieldInfo.type === 'textfield') {\n        var div = $('<div>');\n        div.addClass('editable');\n        div.appendTo(td);\n        div.attr('data-name', fieldInfo.name);\n        div.attr('data-value', node[fieldInfo.name]);\n        div.attr('data-path', nodePath);\n      } else {\n        td.html(padding); // Default to just displaying the content\n      }\n      if (fieldInfo.width) {\n        td.css({\n          'width': fieldInfo.width + 'px',\n          'border': '1px gray solid'\n        });\n      }\n      if (fieldInfo.align) {\n        td.css({\n          'text-align': fieldInfo.align\n        });\n      }\n      return td;\n    }\n\n    //processNode in bfs\n  }, {\n    key: \"processNode\",\n    value: function processNode(node, depth) {\n      var _this3 = this;\n      var queue = [{\n        node: node,\n        depth: depth\n      }];\n      var _loop = function _loop() {\n        var _queue$shift = queue.shift(),\n          node = _queue$shift.node,\n          depth = _queue$shift.depth;\n        var tr = _this3.view.addRow(node, depth);\n        _this3.options.forEach(function (fieldInfo) {\n          var content = node[fieldInfo.name];\n          var td = _this3.addCell(tr, node, fieldInfo, depth);\n          if (fieldInfo.isFirst) {\n            if (node.children && node.children.length > 0) {\n              _this3.view.setupExpander($(tr.children()[0]), function () {\n                return _this3.handleExpanderClick(node.id);\n              });\n            }\n          }\n          if (fieldInfo.type !== 'textfield') {\n            td.append(content);\n          }\n        });\n        if (node.children && node.children.length > 0) {\n          var _iterator3 = _createForOfIteratorHelper(node.children),\n            _step3;\n          try {\n            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n              var child = _step3.value;\n              queue.push({\n                node: child,\n                depth: depth + 1\n              });\n            }\n          } catch (err) {\n            _iterator3.e(err);\n          } finally {\n            _iterator3.f();\n          }\n        }\n      };\n      while (queue.length > 0) {\n        _loop();\n      }\n    }\n  }, {\n    key: \"handleExpanderClick\",\n    value: function handleExpanderClick(nodeId) {\n      var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n      var isExpanded = expander.html() === '-';\n      expander.html(isExpanded ? '+' : '-');\n      this.view.toggleChildrenVisibility(nodeId, isExpanded);\n    }\n  }]);\n  return LayoutTreeGridController;\n}();\nvar LayoutTreeDataGrid = /*#__PURE__*/function () {\n  function LayoutTreeDataGrid(selector, root, apiRequest, options) {\n    _classCallCheck(this, LayoutTreeDataGrid);\n    this.model = new LayoutTreeDataGridModel(root, apiRequest);\n    this.view = new LayoutTreeDataGridView(selector);\n    this.controller = new LayoutTreeGridController(this.model, this.view, options);\n  }\n  _createClass(LayoutTreeDataGrid, [{\n    key: \"init\",\n    value: function init(targetContent, callback) {\n      this.controller.init(targetContent, callback);\n    }\n  }]);\n  return LayoutTreeDataGrid;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LayoutTreeDataGrid);\n\n//# sourceURL=webpack://APITestManager/./src/components/LayoutTreeDataGrid.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _EditableInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EditableInput */ \"./src/components/EditableInput.js\");\n/* harmony import */ var _APIClient__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../APIClient */ \"./src/APIClient.js\");\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== \"undefined\" && o[Symbol.iterator] || o[\"@@iterator\"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it[\"return\"] != null) it[\"return\"](); } finally { if (didErr) throw err; } } }; }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\nvar LayoutTreeDataGridModel = /*#__PURE__*/function () {\n  function LayoutTreeDataGridModel(root, apiRequest) {\n    _classCallCheck(this, LayoutTreeDataGridModel);\n    this.dataRoot = root;\n    this.apiRequest = apiRequest;\n    console.log('LayoutTreeDataGridModel', this.dataRoot);\n  }\n  _createClass(LayoutTreeDataGridModel, [{\n    key: \"getNodePath\",\n    value: function getNodePath(node, targetId) {\n      var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';\n      // Check if the current node is the target node\n      if (node.id === targetId) {\n        return path;\n      }\n\n      // If the current node has children, iterate over them\n      if (node.children) {\n        for (var i = 0; i < node.children.length; i++) {\n          // Construct the path to the current child\n          var currentPath = path ? \"\".concat(path, \".children[\").concat(i, \"]\") : \"children[\".concat(i, \"]\");\n\n          // Recursively call findPath on the child\n          var resultPath = this.getNodePath(node.children[i], targetId, currentPath);\n\n          // If resultPath is not null, the target has been found in the subtree\n          if (resultPath) {\n            return resultPath;\n          }\n        }\n      }\n\n      // Return null if the target is not found in this subtree\n      return null;\n    }\n  }]);\n  return LayoutTreeDataGridModel;\n}();\nvar LayoutTreeDataGridView = /*#__PURE__*/function () {\n  function LayoutTreeDataGridView(selector) {\n    _classCallCheck(this, LayoutTreeDataGridView);\n    console.log({\n      selector: selector\n    });\n    this.table = $('<table>').appendTo($(selector));\n    this.table.addClass('layout_table');\n    this.table.css({\n      'width': 'inherit',\n      'border-collapse': 'collapse',\n      'border': '1px gray solid'\n    });\n    console.log(this.table);\n  }\n  _createClass(LayoutTreeDataGridView, [{\n    key: \"addHeaders\",\n    value: function addHeaders(fields) {\n      var thead = $('<thead>').appendTo(this.table);\n      var tr = $('<tr>').appendTo(thead);\n      tr.addClass('layout-grid-row');\n      fields.forEach(function (field) {\n        var th = $('<th>').html(field.label).appendTo(tr);\n        th.css({\n          'width': field.width + 'px',\n          'border': '1px gray solid',\n          'text-align': 'center'\n        });\n      });\n    }\n  }, {\n    key: \"toggleChildrenVisibility\",\n    value: function toggleChildrenVisibility(nodeId, isExpanded) {\n      var _this = this;\n      var selector = \".treegrid-parent-\".concat(nodeId);\n      $(selector).each(function (_, el) {\n        $(el).toggle(!isExpanded);\n        if (isExpanded) {\n          // If we are hiding the children\n          var childNodeId = $(el).data('nodeId'); // Assume data-nodeId is set when rows are created\n          _this.toggleChildrenVisibility(childNodeId, true); // Recursively hide all descendants\n          var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n          expander.html(isExpanded ? '+' : '-');\n        }\n      });\n    }\n  }, {\n    key: \"setupExpander\",\n    value: function setupExpander(cell, callback) {\n      var expander = $('<span>').addClass('treegrid-expander').html('-').appendTo(cell);\n      expander.click(callback);\n    }\n  }]);\n  return LayoutTreeDataGridView;\n}();\nvar LayoutTreeGridController = /*#__PURE__*/function () {\n  function LayoutTreeGridController(model, view, options, totalMessageLengthSelector) {\n    _classCallCheck(this, LayoutTreeGridController);\n    this.model = model;\n    this.view = view;\n    this.options = options;\n    this.apiClient = new _APIClient__WEBPACK_IMPORTED_MODULE_1__[\"default\"]();\n    this.totalMessageLengthSelector = totalMessageLengthSelector;\n  }\n  _createClass(LayoutTreeGridController, [{\n    key: \"init\",\n    value: function init(callback) {\n      this.view.addHeaders(this.options);\n      this.processNode(this.model.dataRoot, 0);\n      this.setupEditableFields();\n      this.callback = callback;\n    }\n  }, {\n    key: \"rebuild\",\n    value: function () {\n      var _rebuild = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(dataRoot) {\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              this.model.dataRoot = dataRoot;\n              this.view.table.children().remove();\n              this.view.addHeaders(this.options);\n              this.processNode(this.model.dataRoot, 0);\n              this.setupEditableFields();\n              _context.t0 = this;\n              _context.next = 8;\n              return this.concatenateFieldValues(this.model.dataRoot);\n            case 8:\n              _context.t1 = _context.sent;\n              _context.t0.callback.call(_context.t0, _context.t1);\n            case 10:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, this);\n      }));\n      function rebuild(_x) {\n        return _rebuild.apply(this, arguments);\n      }\n      return rebuild;\n    }()\n  }, {\n    key: \"getIndent\",\n    value: function getIndent(depth) {\n      return new Array(depth + 1).join('<span class=\"treegrid-indent\"></span>');\n    }\n  }, {\n    key: \"fillPadding\",\n    value: function () {\n      var _fillPadding = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(value, dataLength) {\n        var paddedValue;\n        return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n          while (1) switch (_context2.prev = _context2.next) {\n            case 0:\n              _context2.next = 2;\n              return this.apiClient.processPreScriptAndVariables(this.model.apiRequest, value.toString());\n            case 2:\n              paddedValue = _context2.sent;\n              while (paddedValue.length < dataLength) {\n                paddedValue = ' ' + paddedValue; // Prepend a space character to the string\n              }\n              return _context2.abrupt(\"return\", paddedValue);\n            case 5:\n            case \"end\":\n              return _context2.stop();\n          }\n        }, _callee2, this);\n      }));\n      function fillPadding(_x2, _x3) {\n        return _fillPadding.apply(this, arguments);\n      }\n      return fillPadding;\n    }()\n  }, {\n    key: \"concatenateFieldValues\",\n    value: function () {\n      var _concatenateFieldValues = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(node) {\n        var concatenatedValues, _iterator, _step, child;\n        return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n          while (1) switch (_context3.prev = _context3.next) {\n            case 0:\n              concatenatedValues = ''; // Process the current node if it is of type 'Field'\n              if (!(node.loutItemType === 'Field')) {\n                _context3.next = 9;\n                break;\n              }\n              _context3.t0 = concatenatedValues;\n              _context3.next = 5;\n              return this.fillPadding(node.value, node.loutItemLength);\n            case 5:\n              _context3.t1 = _context3.sent;\n              if (_context3.t1) {\n                _context3.next = 8;\n                break;\n              }\n              _context3.t1 = '';\n            case 8:\n              concatenatedValues = _context3.t0 += _context3.t1;\n            case 9:\n              if (!(node.children && node.children.length > 0)) {\n                _context3.next = 29;\n                break;\n              }\n              _iterator = _createForOfIteratorHelper(node.children);\n              _context3.prev = 11;\n              _iterator.s();\n            case 13:\n              if ((_step = _iterator.n()).done) {\n                _context3.next = 21;\n                break;\n              }\n              child = _step.value;\n              _context3.t2 = concatenatedValues;\n              _context3.next = 18;\n              return this.concatenateFieldValues(child);\n            case 18:\n              concatenatedValues = _context3.t2 += _context3.sent;\n            case 19:\n              _context3.next = 13;\n              break;\n            case 21:\n              _context3.next = 26;\n              break;\n            case 23:\n              _context3.prev = 23;\n              _context3.t3 = _context3[\"catch\"](11);\n              _iterator.e(_context3.t3);\n            case 26:\n              _context3.prev = 26;\n              _iterator.f();\n              return _context3.finish(26);\n            case 29:\n              return _context3.abrupt(\"return\", concatenatedValues);\n            case 30:\n            case \"end\":\n              return _context3.stop();\n          }\n        }, _callee3, this, [[11, 23, 26, 29]]);\n      }));\n      function concatenateFieldValues(_x4) {\n        return _concatenateFieldValues.apply(this, arguments);\n      }\n      return concatenateFieldValues;\n    }()\n  }, {\n    key: \"sumFieldLoutItemLengths\",\n    value: function sumFieldLoutItemLengths() {\n      var queue = [this.model.dataRoot];\n      var sum = 0;\n      while (queue.length > 0) {\n        var node = queue.shift();\n        if (node.loutItemType === 'Field') {\n          sum += parseInt(node.loutItemLength) || 0; // Add the loutItemLength of the node, or 0 if undefined\n        }\n        if (node.children && node.children.length > 0) {\n          var _iterator2 = _createForOfIteratorHelper(node.children),\n            _step2;\n          try {\n            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {\n              var child = _step2.value;\n              queue.push(child);\n            }\n          } catch (err) {\n            _iterator2.e(err);\n          } finally {\n            _iterator2.f();\n          }\n        }\n      }\n      return sum;\n    }\n  }, {\n    key: \"setupEditableFields\",\n    value: function setupEditableFields() {\n      var _this2 = this;\n      this.view.table.find('.editable').each(function (index, editableElement) {\n        var editableInput = new _EditableInput__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n          name: editableElement.dataset.name,\n          value: editableElement.dataset.value,\n          path: editableElement.dataset.path\n        });\n        editableInput.init(editableElement, /*#__PURE__*/function () {\n          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4(value) {\n            return _regeneratorRuntime().wrap(function _callee4$(_context4) {\n              while (1) switch (_context4.prev = _context4.next) {\n                case 0:\n                  console.log(editableElement.dataset.path);\n                  console.log(value);\n                  _.set(_this2.model.dataRoot, editableElement.dataset.path, value);\n                  console.log(_this2.model.dataRoot);\n                  _context4.t0 = _this2;\n                  _context4.next = 7;\n                  return _this2.concatenateFieldValues(_this2.model.dataRoot);\n                case 7:\n                  _context4.t1 = _context4.sent;\n                  _context4.t0.callback.call(_context4.t0, _context4.t1);\n                case 9:\n                case \"end\":\n                  return _context4.stop();\n              }\n            }, _callee4);\n          }));\n          return function (_x5) {\n            return _ref.apply(this, arguments);\n          };\n        }());\n      });\n      this.totalMessageLengthSelector.text(this.sumFieldLoutItemLengths());\n    }\n  }, {\n    key: \"addCell\",\n    value: function addCell(row, node, fieldInfo, depth) {\n      var td = $('<td>').appendTo(row);\n      var padding = fieldInfo.isFirst ? this.getIndent(depth) : '';\n      var nodePath = this.model.getNodePath(this.model.dataRoot, node.id) + '.value';\n      if (node.loutItemType === 'Field' && fieldInfo.type === 'textfield') {\n        var div = $('<div>');\n        div.addClass('editable');\n        div.appendTo(td);\n        div.attr('data-name', fieldInfo.name);\n        div.attr('data-value', node[fieldInfo.name]);\n        div.attr('data-path', nodePath);\n      } else {\n        td.html(padding); // Default to just displaying the content\n      }\n      if (fieldInfo.width) {\n        td.css({\n          'width': fieldInfo.width + 'px',\n          'border': '1px gray solid'\n        });\n      }\n      if (fieldInfo.align) {\n        td.css({\n          'text-align': fieldInfo.align\n        });\n      }\n      return td;\n    }\n  }, {\n    key: \"addRow\",\n    value: function addRow(node, depth) {\n      var tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id); // Storing node ID for easy access later\n\n      if (depth === 0) {\n        tr.css({\n          'display': 'none'\n        });\n      }\n      if (node.parent) {\n        var parentSelector = \".treegrid-\".concat(node.parent);\n        var lastChildSelector = \".treegrid-parent-\".concat(node.parent);\n        if ($(this.view.table).find(lastChildSelector).length > 0) {\n          var lastChild = $(this.view.table).find(lastChildSelector).last();\n          tr.insertAfter(lastChild);\n        } else {\n          tr.insertAfter($(this.view.table).find(parentSelector));\n        }\n        tr.addClass('treegrid-parent-' + node.parent);\n      } else {\n        tr.appendTo(this.view.table);\n      }\n      return tr;\n    }\n\n    //processNode in bfs\n  }, {\n    key: \"processNode\",\n    value: function processNode(node, depth) {\n      var _this3 = this;\n      var queue = [{\n        node: node,\n        depth: depth\n      }];\n      var _loop = function _loop() {\n        var _queue$shift = queue.shift(),\n          node = _queue$shift.node,\n          depth = _queue$shift.depth;\n        var tr = _this3.addRow(node, depth);\n        _this3.options.forEach(function (fieldInfo) {\n          var content = node[fieldInfo.name];\n          var td = _this3.addCell(tr, node, fieldInfo, depth);\n          if (fieldInfo.isFirst) {\n            if (node.children && node.children.length > 0) {\n              _this3.view.setupExpander($(tr.children()[0]), function () {\n                return _this3.handleExpanderClick(node.id);\n              });\n            }\n          }\n          if (fieldInfo.type !== 'textfield') {\n            td.append(content);\n          }\n        });\n        if (node.children && node.children.length > 0) {\n          var _iterator3 = _createForOfIteratorHelper(node.children),\n            _step3;\n          try {\n            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {\n              var child = _step3.value;\n              queue.push({\n                node: child,\n                depth: depth + 1\n              });\n            }\n          } catch (err) {\n            _iterator3.e(err);\n          } finally {\n            _iterator3.f();\n          }\n        }\n      };\n      while (queue.length > 0) {\n        _loop();\n      }\n    }\n  }, {\n    key: \"handleExpanderClick\",\n    value: function handleExpanderClick(nodeId) {\n      var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n      var isExpanded = expander.html() === '-';\n      expander.html(isExpanded ? '+' : '-');\n      this.view.toggleChildrenVisibility(nodeId, isExpanded);\n    }\n  }]);\n  return LayoutTreeGridController;\n}();\nvar LayoutTreeDataGrid = /*#__PURE__*/function () {\n  function LayoutTreeDataGrid(selector, root, apiRequest, options, totalMessageLengthSelector) {\n    _classCallCheck(this, LayoutTreeDataGrid);\n    this.model = new LayoutTreeDataGridModel(root, apiRequest);\n    this.view = new LayoutTreeDataGridView(selector);\n    this.controller = new LayoutTreeGridController(this.model, this.view, options, totalMessageLengthSelector);\n  }\n  _createClass(LayoutTreeDataGrid, [{\n    key: \"init\",\n    value: function init(callback) {\n      this.controller.init(callback);\n    }\n  }, {\n    key: \"rebuild\",\n    value: function rebuild(dataRoot) {\n      this.controller.rebuild(dataRoot);\n    }\n  }]);\n  return LayoutTreeDataGrid;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LayoutTreeDataGrid);\n\n//# sourceURL=webpack://APITestManager/./src/components/LayoutTreeDataGrid.js?");
 
 /***/ }),
 
@@ -631,7 +631,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _EditableInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EditableInput */ \"./src/components/EditableInput.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar LayoutTreeGridModel = /*#__PURE__*/_createClass(function LayoutTreeGridModel(root) {\n  _classCallCheck(this, LayoutTreeGridModel);\n  this.root = root;\n});\nvar LayoutTreeGridView = /*#__PURE__*/function () {\n  function LayoutTreeGridView(selector) {\n    _classCallCheck(this, LayoutTreeGridView);\n    this.table = $('<table>').appendTo($(selector));\n    this.table.addClass('table');\n    this.table.css({\n      'width': 'inherit',\n      'border-collapse': 'collapse',\n      'border': '1px gray solid'\n    });\n  }\n  _createClass(LayoutTreeGridView, [{\n    key: \"addHeaders\",\n    value: function addHeaders(fields) {\n      var thead = $('<thead>').appendTo(this.table);\n      var tr = $('<tr>').appendTo(thead);\n      tr.addClass('layout-grid-row');\n      fields.forEach(function (field) {\n        var th = $('<th>').html(field.label).appendTo(tr);\n        th.css({\n          'width': field.width + 'px',\n          'border': '1px gray solid',\n          'text-align': 'center'\n        });\n      });\n    }\n  }, {\n    key: \"addRow\",\n    value: function addRow(node, depth) {\n      var tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id); // Storing node ID for easy access later\n\n      if (depth === 0) {\n        tr.css({\n          'display': 'none'\n        });\n      }\n      if (node.parent) {\n        var parentSelector = \".treegrid-\".concat(node.parent);\n        var lastChildSelector = \".treegrid-parent-\".concat(node.parent);\n        if ($(lastChildSelector).length > 0) {\n          var lastChild = $(lastChildSelector).last();\n          tr.insertAfter(lastChild);\n        } else {\n          tr.insertAfter($(parentSelector));\n        }\n        tr.addClass('treegrid-parent-' + node.parent);\n      } else {\n        tr.appendTo(this.table);\n      }\n      return tr;\n    }\n  }, {\n    key: \"getIndent\",\n    value: function getIndent(depth) {\n      return new Array(depth + 1).join('<span class=\"treegrid-indent\"></span>');\n    }\n  }, {\n    key: \"addCell\",\n    value: function addCell(row, node, fieldInfo, depth) {\n      var td = $('<td>').appendTo(row);\n      var padding = fieldInfo.isFirst ? this.getIndent(depth) : '';\n      if (fieldInfo.type === 'textfield') {\n        var div = $('<div>');\n        div.addClass('editable');\n        div.appendTo(td);\n        div.attr('data-name', fieldInfo.name);\n        div.attr('data-value', node[fieldInfo.name]);\n      } else {\n        td.html(padding); // Default to just displaying the content\n      }\n      if (fieldInfo.width) {\n        td.css({\n          'width': fieldInfo.width + 'px',\n          'border': '1px gray solid'\n        });\n      }\n      if (fieldInfo.align) {\n        td.css({\n          'text-align': fieldInfo.align\n        });\n      }\n      return td;\n    }\n  }, {\n    key: \"toggleChildrenVisibility\",\n    value: function toggleChildrenVisibility(nodeId, isExpanded) {\n      var _this = this;\n      var selector = \".treegrid-parent-\".concat(nodeId);\n      $(selector).each(function (_, el) {\n        $(el).toggle(!isExpanded);\n        if (isExpanded) {\n          // If we are hiding the children\n          var childNodeId = $(el).data('nodeId'); // Assume data-nodeId is set when rows are created\n          _this.toggleChildrenVisibility(childNodeId, true); // Recursively hide all descendants\n          var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n          expander.html(isExpanded ? '+' : '-');\n        }\n      });\n    }\n  }, {\n    key: \"setupExpander\",\n    value: function setupExpander(cell, callback) {\n      var expander = $('<span>').addClass('treegrid-expander').html('-').appendTo(cell);\n      expander.click(callback);\n    }\n  }]);\n  return LayoutTreeGridView;\n}();\nvar LayoutTreeGridController = /*#__PURE__*/function () {\n  function LayoutTreeGridController(model, view, options) {\n    _classCallCheck(this, LayoutTreeGridController);\n    this.model = model;\n    this.view = view;\n    this.options = options;\n    this.init();\n  }\n  _createClass(LayoutTreeGridController, [{\n    key: \"init\",\n    value: function init() {\n      this.view.addHeaders(this.options);\n      this.processNode(this.model.root, 0);\n      this.view.table.find('.editable').each(function (index, editableElement) {\n        var editableInput = new _EditableInput__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n          name: editableElement.dataset.name,\n          value: editableElement.dataset.value\n        });\n        editableInput.init(editableElement, function (value) {\n          console.log(value);\n        });\n      });\n    }\n  }, {\n    key: \"processNode\",\n    value: function processNode(node, depth) {\n      var _this2 = this;\n      var tr = this.view.addRow(node, depth);\n      this.options.forEach(function (fieldInfo) {\n        var content = node[fieldInfo.name];\n        var td = _this2.view.addCell(tr, node, fieldInfo, depth);\n        if (fieldInfo.isFirst) {\n          if (node.children && node.children.length > 0) {\n            _this2.view.setupExpander($(tr.children()[0]), function () {\n              return _this2.handleExpanderClick(node.id);\n            });\n          }\n        }\n        if (fieldInfo.type !== 'textfield') {\n          td.append(content);\n        }\n      });\n\n      // Recursively process each child node if any\n      if (node.children && node.children.length > 0) {\n        node.children.forEach(function (child) {\n          _this2.processNode(child, depth + 1); // Increment depth for each child\n        });\n      }\n    }\n  }, {\n    key: \"handleExpanderClick\",\n    value: function handleExpanderClick(nodeId) {\n      var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n      var isExpanded = expander.html() === '-';\n      expander.html(isExpanded ? '+' : '-');\n      this.view.toggleChildrenVisibility(nodeId, isExpanded);\n    }\n  }]);\n  return LayoutTreeGridController;\n}();\nvar LayoutTreeGrid = /*#__PURE__*/function () {\n  function LayoutTreeGrid(selector, root, options) {\n    _classCallCheck(this, LayoutTreeGrid);\n    this.model = new LayoutTreeGridModel(root);\n    this.view = new LayoutTreeGridView(selector);\n    this.controller = new LayoutTreeGridController(this.model, this.view, options);\n  }\n  _createClass(LayoutTreeGrid, [{\n    key: \"init\",\n    value: function init(targetContent, callback) {\n      this.controller.init(targetContent, callback);\n    }\n  }, {\n    key: \"rebuild\",\n    value: function rebuild(model) {\n      console.log('Rebuilding LayoutValueGrid');\n      console.log(model);\n    }\n  }]);\n  return LayoutTreeGrid;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LayoutTreeGrid);\n\n//# sourceURL=webpack://APITestManager/./src/components/LayoutTreeGrid.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _EditableInput__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EditableInput */ \"./src/components/EditableInput.js\");\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\nvar LayoutTreeGridModel = /*#__PURE__*/function () {\n  function LayoutTreeGridModel(root) {\n    _classCallCheck(this, LayoutTreeGridModel);\n    this.root = root;\n    this.rootId = root.id;\n  }\n  _createClass(LayoutTreeGridModel, [{\n    key: \"setRoot\",\n    value: function setRoot(newRoot) {\n      this.root = newRoot;\n    }\n  }, {\n    key: \"getNodePath\",\n    value: function getNodePath(node, targetId) {\n      var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : \"\";\n      // Check if the current node is the target node\n      if (node.id === targetId) {\n        return path;\n      }\n\n      // If the current node has children, iterate over them\n      if (node.children) {\n        for (var i = 0; i < node.children.length; i++) {\n          // Construct the path to the current child\n          var currentPath = path ? \"\".concat(path, \".children[\").concat(i, \"]\") : \"children[\".concat(i, \"]\");\n\n          // Recursively call findPath on the child\n          var resultPath = this.getNodePath(node.children[i], targetId, currentPath);\n\n          // If resultPath is not null, the target has been found in the subtree\n          if (resultPath) {\n            return resultPath;\n          }\n        }\n      }\n\n      // Return null if the target is not found in this subtree\n      return null;\n    }\n  }]);\n  return LayoutTreeGridModel;\n}();\nvar LayoutTreeGridView = /*#__PURE__*/function () {\n  function LayoutTreeGridView(selector) {\n    _classCallCheck(this, LayoutTreeGridView);\n    this.selector = selector;\n    this.table = $('<table>').appendTo($(this.selector));\n    this.table.addClass('layout_table');\n    this.table.css({\n      'width': 'inherit',\n      'border-collapse': 'collapse',\n      'border': '1px gray solid'\n    });\n    this.init();\n  }\n  _createClass(LayoutTreeGridView, [{\n    key: \"init\",\n    value: function init() {\n      this.table.children().remove();\n    }\n  }, {\n    key: \"clear\",\n    value: function clear() {\n      this.init();\n    }\n  }, {\n    key: \"addHeaders\",\n    value: function addHeaders(fields) {\n      var thead = $('<thead>').appendTo(this.table);\n      var tr = $('<tr>').appendTo(thead);\n      tr.addClass('layout-grid-row');\n      fields.forEach(function (field) {\n        var th = $('<th>').html(field.label).appendTo(tr);\n        th.css({\n          'width': field.width + 'px',\n          'border': '1px gray solid',\n          'text-align': 'center'\n        });\n      });\n    }\n  }, {\n    key: \"toggleChildrenVisibility\",\n    value: function toggleChildrenVisibility(nodeId, isExpanded) {\n      var _this = this;\n      var selector = \".treegrid-parent-\".concat(nodeId);\n      $(selector).each(function (_, el) {\n        $(el).toggle(!isExpanded);\n        if (isExpanded) {\n          // If we are hiding the children\n          var childNodeId = $(el).data('nodeId'); // Assume data-nodeId is set when rows are created\n          _this.toggleChildrenVisibility(childNodeId, true); // Recursively hide all descendants\n          var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n          expander.html(isExpanded ? '+' : '-');\n        }\n      });\n    }\n  }, {\n    key: \"setupExpander\",\n    value: function setupExpander(cell, callback) {\n      var expander = $('<span>').addClass('treegrid-expander').html('-').appendTo(cell);\n      expander.click(callback);\n    }\n  }]);\n  return LayoutTreeGridView;\n}();\nvar LayoutTreeGridController = /*#__PURE__*/function () {\n  function LayoutTreeGridController(model, view, options, callback) {\n    _classCallCheck(this, LayoutTreeGridController);\n    this.model = model;\n    this.view = view;\n    this.options = options;\n    this.callback = callback;\n    this.init();\n  }\n  _createClass(LayoutTreeGridController, [{\n    key: \"init\",\n    value: function init() {\n      var _this2 = this;\n      this.view.addHeaders(this.options);\n      this.processNode(this.model.root, 0);\n      this.view.table.find('.editable').each(function (index, editableElement) {\n        var editableInput = new _EditableInput__WEBPACK_IMPORTED_MODULE_0__[\"default\"]({\n          name: editableElement.dataset.name,\n          value: editableElement.dataset.value,\n          path: editableElement.dataset.path\n        });\n        editableInput.init(editableElement, /*#__PURE__*/function () {\n          var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(value) {\n            return _regeneratorRuntime().wrap(function _callee$(_context) {\n              while (1) switch (_context.prev = _context.next) {\n                case 0:\n                  _.set(_this2.model.root, editableElement.dataset.path, value);\n                  _this2.callback(_this2.model.root);\n                case 2:\n                case \"end\":\n                  return _context.stop();\n              }\n            }, _callee);\n          }));\n          return function (_x) {\n            return _ref.apply(this, arguments);\n          };\n        }());\n      });\n    }\n  }, {\n    key: \"getIndent\",\n    value: function getIndent(depth) {\n      return new Array(depth + 1).join('<span class=\"treegrid-indent\"></span>');\n    }\n  }, {\n    key: \"addRow\",\n    value: function addRow(node, depth) {\n      var tr = $('<tr>').addClass('treegrid-' + node.id).data('nodeId', node.id); // Storing node ID for easy access later\n\n      if (depth === 0) {\n        tr.css({\n          'display': 'none'\n        });\n      }\n      if (node.parent || node.parent !== null && parseInt(node.parent) !== this.model.rootId) {\n        var parentSelector = \".treegrid-\".concat(node.parent);\n        var lastChildSelector = \".treegrid-parent-\".concat(node.parent);\n        if ($(this.view.table).find(lastChildSelector).length > 0) {\n          var lastChild = $(this.view.table).find(lastChildSelector).last();\n          console.log('lastChild: ', lastChild);\n          tr.insertAfter(lastChild);\n        } else {\n          console.log('parentSelector: ', parentSelector);\n          tr.insertAfter($(this.view.table).find(parentSelector));\n        }\n        tr.addClass('treegrid-parent-' + node.parent);\n      } else {\n        console.log('no parent');\n        tr.appendTo(this.view.table);\n      }\n      console.log('addRow, node: ', node.id, ' parent: ', node.parent);\n      console.log('addRow tr: ', tr);\n      return tr;\n    }\n  }, {\n    key: \"addCell\",\n    value: function addCell(row, node, fieldInfo, depth) {\n      var td = $('<td>').appendTo(row);\n      var padding = fieldInfo.isFirst ? this.getIndent(depth) : '';\n      var nodePath = this.model.getNodePath(this.model.root, node.id) + \".value\";\n      if (node.loutItemType === 'Field' && fieldInfo.type === 'textfield') {\n        var div = $('<div>');\n        div.addClass('editable');\n        div.appendTo(td);\n        div.attr('data-name', fieldInfo.name);\n        div.attr('data-value', node[fieldInfo.name]);\n        div.attr('data-path', nodePath);\n      } else {\n        td.html(padding); // Default to just displaying the content\n      }\n      if (fieldInfo.width) {\n        td.css({\n          'width': fieldInfo.width + 'px',\n          'border': '1px gray solid'\n        });\n      }\n      if (fieldInfo.align) {\n        td.css({\n          'text-align': fieldInfo.align\n        });\n      }\n      return td;\n    }\n  }, {\n    key: \"processNode\",\n    value: function processNode(node, depth) {\n      var _this3 = this;\n      console.log('node: ', node.id);\n      var tr = this.addRow(node, depth);\n      this.options.forEach(function (fieldInfo) {\n        var content = node[fieldInfo.name];\n        var td = _this3.addCell(tr, node, fieldInfo, depth);\n        if (fieldInfo.isFirst) {\n          if (node.children && node.children.length > 0) {\n            _this3.view.setupExpander($(tr.children()[0]), function () {\n              return _this3.handleExpanderClick(node.id);\n            });\n          }\n        }\n        if (fieldInfo.type !== 'textfield') {\n          td.append(content);\n        }\n      });\n\n      // Recursively process each child node if any\n      if (node.children && node.children.length > 0) {\n        node.children.forEach(function (child) {\n          _this3.processNode(child, depth + 1); // Increment depth for each child\n        });\n      }\n    }\n  }, {\n    key: \"handleExpanderClick\",\n    value: function handleExpanderClick(nodeId) {\n      var expander = $(\".treegrid-\".concat(nodeId, \" .treegrid-expander\"));\n      var isExpanded = expander.html() === '-';\n      expander.html(isExpanded ? '+' : '-');\n      this.view.toggleChildrenVisibility(nodeId, isExpanded);\n    }\n  }, {\n    key: \"rebuild\",\n    value: function rebuild(newRoot) {\n      this.model.setRoot(newRoot);\n      this.view.clear();\n      this.init();\n    }\n  }]);\n  return LayoutTreeGridController;\n}();\nvar LayoutTreeGrid = /*#__PURE__*/function () {\n  function LayoutTreeGrid(selector, root, options, callback) {\n    _classCallCheck(this, LayoutTreeGrid);\n    this.model = new LayoutTreeGridModel(root);\n    this.view = new LayoutTreeGridView(selector);\n    this.controller = new LayoutTreeGridController(this.model, this.view, options, callback);\n  }\n  _createClass(LayoutTreeGrid, [{\n    key: \"rebuild\",\n    value: function rebuild(root, callback) {\n      this.controller.rebuild(root);\n      callback(root);\n    }\n  }]);\n  return LayoutTreeGrid;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LayoutTreeGrid);\n\n//# sourceURL=webpack://APITestManager/./src/components/LayoutTreeGrid.js?");
 
 /***/ }),
 
@@ -708,7 +708,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _LayoutGrid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LayoutGrid */ \"./src/components/LayoutGrid.js\");\n/* harmony import */ var _LayoutTreeGrid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./LayoutTreeGrid */ \"./src/components/LayoutTreeGrid.js\");\n/* harmony import */ var _LayoutTreeDataGrid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./LayoutTreeDataGrid */ \"./src/components/LayoutTreeDataGrid.js\");\n/* harmony import */ var monaco_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! monaco-editor */ \"include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js\");\n/* harmony import */ var _ApiLayoutItemTreeBuilder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ApiLayoutItemTreeBuilder */ \"./src/components/ApiLayoutItemTreeBuilder.js\");\n/* harmony import */ var _ApiLayoutItemTreeDataBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ApiLayoutItemTreeDataBuilder */ \"./src/components/ApiLayoutItemTreeDataBuilder.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n\n\nvar TCPClientView = /*#__PURE__*/function () {\n  function TCPClientView(parent, serverManager, apiRequestTabContent, model, index) {\n    _classCallCheck(this, TCPClientView);\n    this.parent = parent;\n    this.serverManager = serverManager;\n    this.apiRequestTabContent = apiRequestTabContent;\n    this.model = model;\n    this.index = index;\n    this.server = this.serverManager.getServer(this.model.server);\n  }\n  _createClass(TCPClientView, [{\n    key: \"init\",\n    value: function init() {\n      var _this = this;\n      console.log('TCPClientView init');\n      this.apiRequestTabContent.append(this.tcpApiRequestTemplate(this.model, this.index));\n      if (this.server && this.server.headers === undefined) {\n        this.server.headers = [];\n      }\n      if (this.server) {\n        this.serverManager.renderTcpServerOptions('.server_options', this.server.serverOptions, this.model.headers, this.parent);\n      }\n      var layoutJson = JSON.stringify(this.model.layout, null, 2);\n      this.layoutJsonEditor = monaco_editor__WEBPACK_IMPORTED_MODULE_3__.editor.create(this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.layout-json')[0], {\n        value: layoutJson,\n        language: 'json',\n        automaticLayout: true,\n        quickSuggestions: false\n      });\n      var layoutTreeOptions = [{\n        name: 'loutItemSerno',\n        width: 100,\n        isFirst: true,\n        label: '#'\n      }, {\n        name: 'loutItemName',\n        width: 100,\n        align: 'center',\n        label: '항목명(영문)'\n      }, {\n        name: 'loutItemDesc',\n        width: 100,\n        align: 'center',\n        label: '항목설명'\n      }, {\n        name: 'loutItemDepth',\n        width: 60,\n        align: 'center',\n        label: '깊이'\n      }, {\n        name: 'loutItemType',\n        width: 100,\n        align: 'center',\n        label: '아이템 유형'\n      }, {\n        name: 'loutItemOccCnt',\n        width: 100,\n        align: 'center',\n        label: '반복 횟수'\n      }, {\n        name: 'loutItemOccRef',\n        width: 120,\n        align: 'center',\n        label: '반복 참조 필드'\n      }, {\n        name: 'loutItemLength',\n        width: 100,\n        align: 'center',\n        label: '데이터 길이'\n      }];\n      var layoutDataTreeOptions = [{\n        name: 'loutItemSerno',\n        width: 100,\n        isFirst: true,\n        label: '#'\n      }, {\n        name: 'loutItemName',\n        width: 100,\n        align: 'center',\n        label: '항목명(영문)'\n      }, {\n        name: 'loutItemDesc',\n        width: 100,\n        align: 'center',\n        label: '항목설명'\n      }, {\n        name: 'loutItemDepth',\n        width: 60,\n        align: 'center',\n        label: '깊이'\n      }, {\n        name: 'loutItemType',\n        width: 100,\n        align: 'center',\n        label: '아이템 유형'\n      }, {\n        name: 'loutItemOccCnt',\n        width: 100,\n        align: 'center',\n        label: '반복 횟수'\n      }, {\n        name: 'loutItemOccRef',\n        width: 120,\n        align: 'center',\n        label: '반복 참조 필드'\n      }, {\n        name: 'loutItemLength',\n        width: 100,\n        align: 'center',\n        label: '데이터 길이'\n      }, {\n        name: 'value',\n        width: 200,\n        align: 'left',\n        label: '값',\n        type: 'textfield'\n      }];\n      var layoutRoot = _ApiLayoutItemTreeBuilder__WEBPACK_IMPORTED_MODULE_4__[\"default\"].createTree(this.model.layout.layoutItems);\n      var replicator = new _ApiLayoutItemTreeDataBuilder__WEBPACK_IMPORTED_MODULE_5__[\"default\"](10000);\n      var layoutDataRoot = replicator.createReplicatedTree(layoutRoot);\n      var layoutTreeDataGrid = new _LayoutTreeDataGrid__WEBPACK_IMPORTED_MODULE_2__[\"default\"]('.request_layout_data_tree', layoutDataRoot, this.model, layoutDataTreeOptions);\n      layoutTreeDataGrid.init(this.apiRequestTabContent, /*#__PURE__*/function () {\n        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(finalMessage) {\n          return _regeneratorRuntime().wrap(function _callee$(_context) {\n            while (1) switch (_context.prev = _context.next) {\n              case 0:\n                _this.requestBodyEditor.setValue(finalMessage);\n              case 1:\n              case \"end\":\n                return _context.stop();\n            }\n          }, _callee);\n        }));\n        return function (_x) {\n          return _ref.apply(this, arguments);\n        };\n      }());\n      var layoutTreeGrid = new _LayoutTreeGrid__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('.request_layout_tree', layoutRoot, layoutDataTreeOptions);\n      var layoutGrid = new _LayoutGrid__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this.model.layout);\n      layoutGrid.init(this.apiRequestTabContent, function (model) {\n        // layoutValueGrid.rebuild(model);\n        $('span.variable').off('mouseover');\n        $('span.variable').off('mouseout');\n        document.querySelectorAll('span.variable').forEach(function (element) {\n          var text = element.innerText;\n          element.addEventListener('mouseover', function () {\n            return _this.parent.showPopper(element, text);\n          });\n          element.addEventListener('mouseout', function () {\n            return _this.parent.hidePopper(element);\n          });\n        });\n      });\n      window.addEventListener('resize', this.resizeEditor.bind(this));\n    }\n  }, {\n    key: \"resizeEditor\",\n    value: function resizeEditor() {\n      this.requestBodyEditor.layout({\n        width: 0\n      });\n      this.requestBodyEditor.layout({});\n      this.layoutJsonEditor.layout({\n        width: 0\n      });\n      this.layoutJsonEditor.layout({});\n    }\n  }, {\n    key: \"tcpApiRequestTemplate\",\n    value: function tcpApiRequestTemplate(apiRequest, index) {\n      console.log('tcpApiRequestTemplate');\n      return \"\\n        <div class=\\\"tab-pane fade mt-1 api_request\\\" id=\\\"api_request_\".concat(apiRequest.id, \"\\\" style=\\\"height: 100%;\\\">\\n            <div><span class=\\\"collection_name\\\">\").concat(apiRequest.collectionName, \"</span> &gt; <span class=\\\"api_name\\\">\").concat(apiRequest.name, \"</span></div>\\n            <div class=\\\"d-flex api_request_info\\\">\\n                <div class=\\\"form-floating me-1\\\">\\n                    \").concat(this.serverManager.renderTcpServers(apiRequest.server), \"\\n                    <label class=\\\"form-label must\\\">Server</label>\\n                </div>\\n                <button class=\\\"btn btn-primary send me-1\\\">Send</button>\\n                <button class=\\\"btn btn-primary save\\\" data-index=\\\"\").concat(index, \"\\\" style=\\\"height: 58px;\\\">\\uC800\\uC7A5</button>\\n            </div>\\n            <div class=\\\"d-flex mt-2 server_options\\\">\\n            </div>\\n            <div class=\\\"api_request d-flex flex-column\\\" style=\\\"height:100%;\\\">\\n              <div class=\\\"api_request_body\\\">\\n                <ul class=\\\"nav nav-tabs mt-1\\\" role=\\\"tablist\\\">\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_request_body_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"requestBody\\\" data-bs-target=\\\"#requestBodyTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_layout_json_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"layoutJson\\\" data-bs-target=\\\"#requestLayoutJson_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout JSON\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_layout_tree_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"layoutTree\\\" data-bs-target=\\\"#requestLayoutTreeTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout Tree\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_request_body_data_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"requestBodyData\\\" data-bs-target=\\\"#requestBodyDataTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout Data\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_prerequest_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"preScript\\\" data-bs-target=\\\"#preRequestTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Pre-Request\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_postrequest_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"postScript\\\" data-bs-target=\\\"#postRequestTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Post-Request\\n                        </button>\\n                    </li>\\n                </ul>\\n                <div class=\\\"tab-content\\\" style=\\\"height: 100%;\\\">\\n                    <div class=\\\"tab-pane fade request_layout_json_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestLayoutJson_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestLayoutJson-tab\\\">\\n                        <div class=\\\"d-flex flex-row\\\">\\n                            <div style=\\\"width:calc(100%);\\\">\\n                                <div class=\\\"layout-json mt-1\\\" style=\\\"height:300px;border:1px solid grey;\\\"></div>\\n                            </div>\\n                        </div>\\n                    </div>\\n                    <div class=\\\"tab-pane show fade request_body_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestBodyTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestBody-tab\\\">\\n                      <div class=\\\"d-flex flex-column\\\">\\n                        <div class=\\\"request_layout\\\" style=\\\"border:1px solid grey; overflow: scroll\\\"></div>\\n                      </div>\\n                    </div>\\n                    <div class=\\\"tab-pane show fade request_layout_tree_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestLayoutTreeTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestLayoutTree-tab\\\">\\n                      <div class=\\\"d-flex flex-column\\\">\\n                        <div class=\\\"request_layout_tree\\\" style=\\\"border:1px solid grey; overflow: scroll\\\"></div>\\n                      </div>\\n                    </div>\\n                    <div class=\\\"tab-pane show fade request_body_data_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestBodyDataTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestBodyData-tab\\\">\\n                      <div class=\\\"d-flex flex-column\\\">\\n                        <div class=\\\"request_layout_data_tree\\\" style=\\\"border:1px solid grey; overflow: scroll\\\"></div>\\n                        <div class=\\\"request_body mt-1\\\" style=\\\"height: 150px; border:1px solid grey;\\\"></div>\\n                      </div>\\n                    </div>\\n                    <div class=\\\"tab-pane fade pre_script_tab\\\" role=\\\"tabpanel\\\" id=\\\"preRequestTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"preScript-tab\\\">\\n                        <div class=\\\"d-flex flex-row\\\">\\n                            <div style=\\\"width:calc(100% - 200px);\\\">\\n                                <div class=\\\"pre-request mt-1\\\" style=\\\"height:300px;border:1px solid grey;\\\"></div>\\n                            </div>\\n                            <div style=\\\"width: 200px;\\\">\\n                                <div class=\\\"pre-request-variable\\\">\\n                                </div>\\n                            </div> \\n                        </div>\\n                    </div>\\n                    <div class=\\\"tab-pane fade post_script_tab\\\" role=\\\"tabpanel\\\" id=\\\"postRequestTab_\").concat(apiRequest.id, \"\\\"\\n                         aria-labelledby=\\\"postScrit-tab\\\">\\n                         <div class=\\\"d-flex flex-row\\\">\\n                           <div style=\\\"width:calc(100% - 200px);\\\">\\n                             <div class=\\\"post-request mt-1\\\" style=\\\"height:300px;border:1px solid grey;\\\"></div>\\n                           </div>\\n                           <div style=\\\"width: 200px;\\\">\\n                             <div class=\\\"post-request-variable\\\">\\n                             </div>\\n                           </div> \\n                        </div>\\n                    </div>\\n                </div>\\n              </div>\\n              <div class=\\\"api_request_info\\\" >\\n                  <span>\\uC804\\uCCB4 \\uBA54\\uC2DC\\uC9C0 \\uAE38\\uC774: </span>\\n                  <span class=\\\"total_message_length\\\"></span>\\n              </div>\\n              <div class=\\\"api_request_info\\\">\\n              </div>\\n              <div class=\\\"api_response\\\" style=\\\"flex: 1\\\">\\n                <div class=\\\"mt-1\\\">\\n                  <span>Response</span>\\n                  <span class=\\\"response_time\\\"></span>\\n                  <span class=\\\"response_size\\\"></span>\\n                </div>\\n                <ul class=\\\"nav nav-tabs mt-1\\\" role=\\\"tablist\\\">\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link active\\\" data-bs-toggle=\\\"tab\\\" data-bs-target=\\\"#responseBodyTab_\").concat(apiRequest.id, \"\\\" type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"responseBody\\\" aria-selected=\\\"false\\\">Body</button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link\\\" data-bs-toggle=\\\"tab\\\" data-bs-target=\\\"#consoleTab_\").concat(apiRequest.id, \"\\\" type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"consoleTab\\\" aria-selected=\\\"false\\\">Console</button>\\n                    </li>\\n                </ul>\\n                <div class=\\\"tab-content border-bottom\\\" style=\\\"min-height: 250px;\\\">\\n                  <div class=\\\"tab-pane fade show active\\\" id=\\\"responseBodyTab_\").concat(apiRequest.id, \"\\\" role=\\\"tabpanel\\\"\\n                       aria-labelledby=\\\"responseParams-tab\\\">\\n                      <div class=\\\"response_body mt-1\\\" style=\\\"width:100%;height:250px;border:1px solid grey;\\\"></div>\\n                  </div>\\n                  <div class=\\\"tab-pane fade\\\" id=\\\"consoleTab_\").concat(apiRequest.id, \"\\\" role=\\\"tabpanel\\\"\\n                       aria-labelledby=\\\"console-tab\\\">\\n                      <div class=\\\"console mt-1\\\" style=\\\"width:100%;height:250px;border:1px solid grey;\\\"></div>\\n                  </div>\\n                </div>\\n            </div>\\n            </div>\\n        </div>\\n       \\n        \");\n    }\n  }]);\n  return TCPClientView;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TCPClientView);\n\n//# sourceURL=webpack://APITestManager/./src/components/TCPClientView.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _LayoutGrid__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./LayoutGrid */ \"./src/components/LayoutGrid.js\");\n/* harmony import */ var _LayoutTreeGrid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./LayoutTreeGrid */ \"./src/components/LayoutTreeGrid.js\");\n/* harmony import */ var _LayoutTreeDataGrid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./LayoutTreeDataGrid */ \"./src/components/LayoutTreeDataGrid.js\");\n/* harmony import */ var monaco_editor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! monaco-editor */ \"include-loader!./node_modules/monaco-editor/esm/vs/editor/editor.main.js\");\n/* harmony import */ var _ApiLayoutItemTreeBuilder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ApiLayoutItemTreeBuilder */ \"./src/components/ApiLayoutItemTreeBuilder.js\");\n/* harmony import */ var _ApiLayoutItemTreeDataBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ApiLayoutItemTreeDataBuilder */ \"./src/components/ApiLayoutItemTreeDataBuilder.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _regeneratorRuntime() { \"use strict\"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = \"function\" == typeof Symbol ? Symbol : {}, a = i.iterator || \"@@iterator\", c = i.asyncIterator || \"@@asyncIterator\", u = i.toStringTag || \"@@toStringTag\"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, \"\"); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, \"_invoke\", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: \"normal\", arg: t.call(e, r) }; } catch (t) { return { type: \"throw\", arg: t }; } } e.wrap = wrap; var h = \"suspendedStart\", l = \"suspendedYield\", f = \"executing\", s = \"completed\", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { [\"next\", \"throw\", \"return\"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if (\"throw\" !== c.type) { var u = c.arg, h = u.value; return h && \"object\" == _typeof(h) && n.call(h, \"__await\") ? e.resolve(h.__await).then(function (t) { invoke(\"next\", t, i, a); }, function (t) { invoke(\"throw\", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke(\"throw\", t, i, a); }); } a(c.arg); } var r; o(this, \"_invoke\", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error(\"Generator is already running\"); if (o === s) { if (\"throw\" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if (\"next\" === n.method) n.sent = n._sent = n.arg;else if (\"throw\" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else \"return\" === n.method && n.abrupt(\"return\", n.arg); o = f; var p = tryCatch(e, r, n); if (\"normal\" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } \"throw\" === p.type && (o = s, n.method = \"throw\", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, \"throw\" === n && e.iterator[\"return\"] && (r.method = \"return\", r.arg = t, maybeInvokeDelegate(e, r), \"throw\" === r.method) || \"return\" !== n && (r.method = \"throw\", r.arg = new TypeError(\"The iterator does not provide a '\" + n + \"' method\")), y; var i = tryCatch(o, e.iterator, r.arg); if (\"throw\" === i.type) return r.method = \"throw\", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, \"return\" !== r.method && (r.method = \"next\", r.arg = t), r.delegate = null, y) : a : (r.method = \"throw\", r.arg = new TypeError(\"iterator result is not an object\"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = \"normal\", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: \"root\" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || \"\" === e) { var r = e[a]; if (r) return r.call(e); if (\"function\" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + \" is not iterable\"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, \"constructor\", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, \"constructor\", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, \"GeneratorFunction\"), e.isGeneratorFunction = function (t) { var e = \"function\" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || \"GeneratorFunction\" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, \"GeneratorFunction\")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, \"Generator\"), define(g, a, function () { return this; }), define(g, \"toString\", function () { return \"[object Generator]\"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = \"next\", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) \"t\" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if (\"throw\" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = \"throw\", a.arg = e, r.next = n, o && (r.method = \"next\", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if (\"root\" === i.tryLoc) return handle(\"end\"); if (i.tryLoc <= this.prev) { var c = n.call(i, \"catchLoc\"), u = n.call(i, \"finallyLoc\"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error(\"try statement without catch or finally\"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, \"finallyLoc\") && this.prev < o.finallyLoc) { var i = o; break; } } i && (\"break\" === t || \"continue\" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = \"next\", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if (\"throw\" === t.type) throw t.arg; return \"break\" === t.type || \"continue\" === t.type ? this.next = t.arg : \"return\" === t.type ? (this.rval = this.arg = t.arg, this.method = \"return\", this.next = \"end\") : \"normal\" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, \"catch\": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if (\"throw\" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error(\"illegal catch attempt\"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, \"next\" === this.method && (this.arg = t), y; } }, e; }\nfunction asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }\nfunction _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err); } _next(undefined); }); }; }\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, \"prototype\", { writable: false }); return Constructor; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : String(i); }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n\n\nvar TCPClientView = /*#__PURE__*/function () {\n  function TCPClientView(parent, serverManager, apiRequestTabContent, model, index) {\n    _classCallCheck(this, TCPClientView);\n    this.parent = parent;\n    this.serverManager = serverManager;\n    this.apiRequestTabContent = apiRequestTabContent;\n    this.model = model;\n    this.index = index;\n    this.server = this.serverManager.getServer(this.model.server);\n  }\n  _createClass(TCPClientView, [{\n    key: \"init\",\n    value: function init() {\n      var _this = this;\n      console.log('TCPClientView init');\n      this.apiRequestTabContent.append(this.tcpApiRequestTemplate(this.model, this.index));\n      if (this.server && this.server.headers === undefined) {\n        this.server.headers = [];\n      }\n      if (this.server) {\n        this.serverManager.renderTcpServerOptions('.server_options', this.server.serverOptions, this.model.headers, this.parent);\n      }\n      var layoutJson = JSON.stringify(this.model.layout, null, 2);\n      this.layoutJsonEditor = monaco_editor__WEBPACK_IMPORTED_MODULE_3__.editor.create(this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.layout-json')[0], {\n        value: layoutJson,\n        language: 'json',\n        automaticLayout: true,\n        quickSuggestions: false\n      });\n      var layoutDataTreeOptions = [{\n        name: 'loutItemSerno',\n        width: 100,\n        isFirst: true,\n        label: '#'\n      }, {\n        name: 'loutItemName',\n        width: 100,\n        align: 'center',\n        label: '항목명(영문)'\n      }, {\n        name: 'loutItemDesc',\n        width: 100,\n        align: 'center',\n        label: '항목설명'\n      }, {\n        name: 'loutItemDepth',\n        width: 60,\n        align: 'center',\n        label: '깊이'\n      }, {\n        name: 'loutItemType',\n        width: 100,\n        align: 'center',\n        label: '아이템 유형'\n      }, {\n        name: 'loutItemOccCnt',\n        width: 100,\n        align: 'center',\n        label: '반복 횟수'\n      }, {\n        name: 'loutItemOccRef',\n        width: 120,\n        align: 'center',\n        label: '반복 참조 필드'\n      }, {\n        name: 'loutItemLength',\n        width: 100,\n        align: 'center',\n        label: '데이터 길이'\n      }, {\n        name: 'value',\n        width: 200,\n        align: 'left',\n        label: '값',\n        type: 'textfield'\n      }];\n      var layoutRoot = _ApiLayoutItemTreeBuilder__WEBPACK_IMPORTED_MODULE_4__[\"default\"].createTree(this.model.layout.layoutItems);\n      var replicator = new _ApiLayoutItemTreeDataBuilder__WEBPACK_IMPORTED_MODULE_5__[\"default\"](10000);\n      var layoutDataRoot = replicator.createReplicatedTree(layoutRoot);\n      console.log(this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.request_layout_data_tree'));\n      console.log(this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.request_layout_tree'));\n      console.log(this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.total_message_length'));\n      var layoutTreeDataGrid = new _LayoutTreeDataGrid__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.request_layout_data_tree'), layoutDataRoot, this.model, layoutDataTreeOptions, this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.total_message_length'));\n      layoutTreeDataGrid.init( /*#__PURE__*/function () {\n        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(finalMessage) {\n          return _regeneratorRuntime().wrap(function _callee$(_context) {\n            while (1) switch (_context.prev = _context.next) {\n              case 0:\n                _this.requestBodyEditor.setValue(finalMessage);\n              case 1:\n              case \"end\":\n                return _context.stop();\n            }\n          }, _callee);\n        }));\n        return function (_x) {\n          return _ref.apply(this, arguments);\n        };\n      }());\n      var layoutTreeGrid = new _LayoutTreeGrid__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)).find('.request_layout_tree'), layoutRoot, layoutDataTreeOptions, function (root) {\n        var replicator = new _ApiLayoutItemTreeDataBuilder__WEBPACK_IMPORTED_MODULE_5__[\"default\"](10000);\n        var layoutDataRoot = replicator.createReplicatedTree(root);\n        layoutTreeDataGrid.rebuild(layoutDataRoot);\n      });\n      var layoutGrid = new _LayoutGrid__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this.model.layout);\n      layoutGrid.init(this.apiRequestTabContent.find(\"#api_request_\".concat(this.model.id)), function (model) {\n        model.items.forEach(function (item) {\n          item.children = [];\n        });\n        var updatedRoot = _ApiLayoutItemTreeBuilder__WEBPACK_IMPORTED_MODULE_4__[\"default\"].createTree(model.items);\n        layoutTreeGrid.rebuild(updatedRoot, function (root) {\n          var replicator = new _ApiLayoutItemTreeDataBuilder__WEBPACK_IMPORTED_MODULE_5__[\"default\"](10000);\n          var layoutDataRoot = replicator.createReplicatedTree(root);\n          layoutTreeDataGrid.rebuild(layoutDataRoot);\n        });\n        $('span.variable').off('mouseover');\n        $('span.variable').off('mouseout');\n        document.querySelectorAll('span.variable').forEach(function (element) {\n          var text = element.innerText;\n          element.addEventListener('mouseover', function () {\n            return _this.parent.showPopper(element, text);\n          });\n          element.addEventListener('mouseout', function () {\n            return _this.parent.hidePopper(element);\n          });\n        });\n      });\n      window.addEventListener('resize', this.resizeEditor.bind(this));\n    }\n  }, {\n    key: \"resizeEditor\",\n    value: function resizeEditor() {\n      this.requestBodyEditor.layout({\n        width: 0\n      });\n      this.requestBodyEditor.layout({});\n      this.layoutJsonEditor.layout({\n        width: 0\n      });\n      this.layoutJsonEditor.layout({});\n    }\n  }, {\n    key: \"tcpApiRequestTemplate\",\n    value: function tcpApiRequestTemplate(apiRequest, index) {\n      console.log('tcpApiRequestTemplate');\n      return \"\\n        <div class=\\\"tab-pane fade mt-1 api_request\\\" id=\\\"api_request_\".concat(apiRequest.id, \"\\\" style=\\\"height: 100%;\\\">\\n            <div><span class=\\\"collection_name\\\">\").concat(apiRequest.collectionName, \"</span> &gt; <span class=\\\"api_name\\\">\").concat(apiRequest.name, \"</span></div>\\n            <div class=\\\"d-flex api_request_info\\\">\\n                <div class=\\\"form-floating me-1\\\">\\n                    \").concat(this.serverManager.renderTcpServers(apiRequest.server), \"\\n                    <label class=\\\"form-label must\\\">Server</label>\\n                </div>\\n                <button class=\\\"btn btn-primary send me-1\\\">Send</button>\\n                <button class=\\\"btn btn-primary save\\\" data-index=\\\"\").concat(index, \"\\\" style=\\\"height: 58px;\\\">\\uC800\\uC7A5</button>\\n            </div>\\n            <div class=\\\"d-flex mt-2 server_options\\\">\\n            </div>\\n            <div class=\\\"api_request d-flex flex-column\\\" style=\\\"height:100%;\\\">\\n              <div class=\\\"api_request_body\\\">\\n                <ul class=\\\"nav nav-tabs mt-1\\\" role=\\\"tablist\\\">\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_request_body_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"requestBody\\\" data-bs-target=\\\"#requestBodyTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_layout_json_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"layoutJson\\\" data-bs-target=\\\"#requestLayoutJson_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout JSON\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_layout_tree_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"layoutTree\\\" data-bs-target=\\\"#requestLayoutTreeTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout Tree\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_request_body_data_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"requestBodyData\\\" data-bs-target=\\\"#requestBodyDataTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Layout Data\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_prerequest_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"preScript\\\" data-bs-target=\\\"#preRequestTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Pre-Request\\n                        </button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link btn_postrequest_tab\\\" data-bs-toggle=\\\"tab\\\"\\n                                type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"postScript\\\" data-bs-target=\\\"#postRequestTab_\").concat(apiRequest.id, \"\\\"\\n                                aria-selected=\\\"false\\\">Post-Request\\n                        </button>\\n                    </li>\\n                </ul>\\n                <div class=\\\"tab-content\\\" style=\\\"height: 100%;\\\">\\n                    <div class=\\\"tab-pane fade request_layout_json_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestLayoutJson_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestLayoutJson-tab\\\">\\n                        <div class=\\\"d-flex flex-row\\\">\\n                            <div style=\\\"width:calc(100%);\\\">\\n                                <div class=\\\"layout-json mt-1\\\" style=\\\"height:300px;border:1px solid grey;\\\"></div>\\n                            </div>\\n                        </div>\\n                    </div>\\n                    <div class=\\\"tab-pane show fade request_body_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestBodyTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestBody-tab\\\">\\n                      <div class=\\\"d-flex flex-column\\\">\\n                        <div class=\\\"request_layout\\\" style=\\\"border:1px solid grey; overflow: scroll\\\"></div>\\n                      </div>\\n                    </div>\\n                    <div class=\\\"tab-pane show fade request_layout_tree_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestLayoutTreeTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestLayoutTree-tab\\\">\\n                      <div class=\\\"d-flex flex-column\\\">\\n                        <div class=\\\"request_layout_tree\\\" style=\\\"border:1px solid grey; overflow: scroll\\\"></div>\\n                      </div>\\n                    </div>\\n                    <div class=\\\"tab-pane show fade request_body_data_tab\\\" role=\\\"tabpanel\\\" id=\\\"requestBodyDataTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"requestBodyData-tab\\\">\\n                      <div class=\\\"d-flex flex-column\\\">\\n                        <div class=\\\"request_layout_data_tree\\\" style=\\\"border:1px solid grey; overflow: scroll\\\"></div>\\n                        \\n                      </div>\\n                    </div>\\n                    <div class=\\\"tab-pane fade pre_script_tab\\\" role=\\\"tabpanel\\\" id=\\\"preRequestTab_\").concat(apiRequest.id, \"\\\" aria-labelledby=\\\"preScript-tab\\\">\\n                        <div class=\\\"d-flex flex-row\\\">\\n                            <div style=\\\"width:calc(100% - 200px);\\\">\\n                                <div class=\\\"pre-request mt-1\\\" style=\\\"height:300px;border:1px solid grey;\\\"></div>\\n                            </div>\\n                            <div style=\\\"width: 200px;\\\">\\n                                <div class=\\\"pre-request-variable\\\">\\n                                </div>\\n                            </div> \\n                        </div>\\n                    </div>\\n                    <div class=\\\"tab-pane fade post_script_tab\\\" role=\\\"tabpanel\\\" id=\\\"postRequestTab_\").concat(apiRequest.id, \"\\\"\\n                         aria-labelledby=\\\"postScrit-tab\\\">\\n                         <div class=\\\"d-flex flex-row\\\">\\n                           <div style=\\\"width:calc(100% - 200px);\\\">\\n                             <div class=\\\"post-request mt-1\\\" style=\\\"height:300px;border:1px solid grey;\\\"></div>\\n                           </div>\\n                           <div style=\\\"width: 200px;\\\">\\n                             <div class=\\\"post-request-variable\\\">\\n                             </div>\\n                           </div> \\n                        </div>\\n                    </div>\\n                </div>\\n              </div>\\n              <div class=\\\"request_body mt-1\\\" style=\\\"height: 150px; border:1px solid grey;\\\"></div>\\n              <div class=\\\"api_request_info\\\" >\\n                  <span>\\uC804\\uCCB4 \\uBA54\\uC2DC\\uC9C0 \\uAE38\\uC774: </span>\\n                  <span class=\\\"total_message_length\\\"></span>\\n              </div>\\n              <div class=\\\"api_request_info\\\">\\n              </div>\\n              <div class=\\\"api_response\\\" style=\\\"flex: 1\\\">\\n                <div class=\\\"mt-1\\\">\\n                  <span>Response</span>\\n                  <span class=\\\"response_time\\\"></span>\\n                  <span class=\\\"response_size\\\"></span>\\n                </div>\\n                <ul class=\\\"nav nav-tabs mt-1\\\" role=\\\"tablist\\\">\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link active\\\" data-bs-toggle=\\\"tab\\\" data-bs-target=\\\"#responseBodyTab_\").concat(apiRequest.id, \"\\\" type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"responseBody\\\" aria-selected=\\\"false\\\">Body</button>\\n                    </li>\\n                    <li class=\\\"nav-item\\\" role=\\\"presentation\\\">\\n                        <button class=\\\"nav-link\\\" data-bs-toggle=\\\"tab\\\" data-bs-target=\\\"#consoleTab_\").concat(apiRequest.id, \"\\\" type=\\\"button\\\" role=\\\"tab\\\" aria-controls=\\\"consoleTab\\\" aria-selected=\\\"false\\\">Console</button>\\n                    </li>\\n                </ul>\\n                <div class=\\\"tab-content border-bottom\\\" style=\\\"min-height: 250px;\\\">\\n                  <div class=\\\"tab-pane fade show active\\\" id=\\\"responseBodyTab_\").concat(apiRequest.id, \"\\\" role=\\\"tabpanel\\\"\\n                       aria-labelledby=\\\"responseParams-tab\\\">\\n                      <div class=\\\"response_body mt-1\\\" style=\\\"width:100%;height:250px;border:1px solid grey;\\\"></div>\\n                  </div>\\n                  <div class=\\\"tab-pane fade\\\" id=\\\"consoleTab_\").concat(apiRequest.id, \"\\\" role=\\\"tabpanel\\\"\\n                       aria-labelledby=\\\"console-tab\\\">\\n                      <div class=\\\"console mt-1\\\" style=\\\"width:100%;height:250px;border:1px solid grey;\\\"></div>\\n                  </div>\\n                </div>\\n            </div>\\n            </div>\\n        </div>\\n       \\n        \");\n    }\n  }]);\n  return TCPClientView;\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TCPClientView);\n\n//# sourceURL=webpack://APITestManager/./src/components/TCPClientView.js?");
 
 /***/ }),