pixel-react 1.10.10-2 → 1.10.10-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/lib/ComponentProps/TreeNodeProps.d.ts +3 -0
  2. package/lib/components/AppHeader/types.d.ts +1 -0
  3. package/lib/components/ConnectingBranch/types.d.ts +2 -0
  4. package/lib/components/TableTree/Components/AddModule/AddModule.d.ts +2 -1
  5. package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
  6. package/lib/components/TableTree/Components/TableCell.d.ts +2 -2
  7. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  8. package/lib/components/TableTree/TableTree.d.ts +2 -2
  9. package/lib/components/TableTree/Utils/addNewRow.d.ts +1 -0
  10. package/lib/components/TableTree/data.d.ts +34 -0
  11. package/lib/components/TableTree/types.d.ts +12 -12
  12. package/lib/index.d.ts +15 -8
  13. package/lib/index.esm.js +237 -134
  14. package/lib/index.esm.js.map +1 -1
  15. package/lib/index.js +237 -134
  16. package/lib/index.js.map +1 -1
  17. package/package.json +1 -1
  18. package/src/ComponentProps/TreeNodeProps.ts +3 -0
  19. package/src/assets/icons/spinner.svg +42 -0
  20. package/src/components/AppHeader/AppHeader.scss +7 -1
  21. package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
  22. package/src/components/AppHeader/AppHeader.tsx +8 -1
  23. package/src/components/AppHeader/types.ts +1 -0
  24. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
  25. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
  26. package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
  27. package/src/components/ConnectingBranch/types.ts +2 -0
  28. package/src/components/Select/Select.stories.tsx +34 -10
  29. package/src/components/Select/Select.tsx +1 -0
  30. package/src/components/Select/components/Dropdown.tsx +24 -21
  31. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
  32. package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
  33. package/src/components/TableTree/Components/AddModule/AddModule.tsx +50 -14
  34. package/src/components/TableTree/Components/TableBody.tsx +2 -0
  35. package/src/components/TableTree/Components/TableCell.tsx +125 -75
  36. package/src/components/TableTree/Components/TableRow.tsx +2 -0
  37. package/src/components/TableTree/TableTree.scss +14 -2
  38. package/src/components/TableTree/TableTree.stories.tsx +26 -7
  39. package/src/components/TableTree/TableTree.tsx +31 -5
  40. package/src/components/TableTree/Utils/addNewRow.ts +3 -1
  41. package/src/components/TableTree/data.ts +5 -1
  42. package/src/components/TableTree/types.ts +13 -12
package/lib/index.js CHANGED
@@ -2957,7 +2957,7 @@ const Dropdown$1 = ({
2957
2957
  }),
2958
2958
  children: !checkEmpty(options) ? options.map(option => jsxRuntime.jsx("div", {
2959
2959
  className: classNames('ff-select-dropdown-option', {
2960
- 'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
2960
+ 'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
2961
2961
  }, currentTheme),
2962
2962
  onClick: () => {
2963
2963
  if ('disable' in option && option['disable']) return;
@@ -3285,7 +3285,8 @@ const Select$1 = ({
3285
3285
  onSaveModal: onSaveModal,
3286
3286
  onCancelModal: onCancelModal,
3287
3287
  modalJSXProps: modalJSXProps,
3288
- recurrence: recurrence
3288
+ recurrence: recurrence,
3289
+ valueAccessor: valueAccessor
3289
3290
  }), document.body)
3290
3291
  })]
3291
3292
  });
@@ -14586,7 +14587,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
14586
14587
  }), document.body);
14587
14588
  });
14588
14589
 
14589
- var css_248z$R = ":root {\n --table-height: auto;\n}\n\n.tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 22px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 400px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
14590
+ var css_248z$R = ":root {\n --table-height: auto;\n}\n\n.tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 22px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n height: 14px;\n width: 14px;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 600px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n transition: transform 0.3s ease;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
14590
14591
  styleInject(css_248z$R);
14591
14592
 
14592
14593
  const TableHead = /*#__PURE__*/React.memo(({
@@ -14628,33 +14629,58 @@ const TableHead = /*#__PURE__*/React.memo(({
14628
14629
  });
14629
14630
  });
14630
14631
 
14631
- var css_248z$Q = ".add-module-container {\n display: flex;\n}\n.add-module-container .icons {\n cursor: pointer;\n}";
14632
+ var css_248z$Q = ".fontXs, .add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container, .add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.add-module-container {\n display: flex;\n}\n.add-module-container .icons {\n cursor: pointer;\n}\n.add-module-container .ff-add-module-input-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container {\n display: flex;\n gap: 2px;\n position: absolute;\n border: none;\n outline: none;\n line-height: 18px;\n margin-top: 1px;\n padding: 4px 6px;\n transition: all 0.3s ease-in-out;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container .ff-add-module-label {\n color: var(--input-default-label-color);\n}\n.add-module-container .ff-add-module-input-container .add-module-input {\n height: 24px;\n padding: 0px 6px;\n width: 430px;\n border: 0.5px solid var(--nlp-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container .ff-add-module-label {\n color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container .ff-add-module-label {\n color: var(--nlp-color);\n}\n.add-module-container .ff-module-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}";
14632
14633
  styleInject(css_248z$Q);
14633
14634
 
14634
14635
  const AddModule = ({
14635
14636
  onConfirm,
14636
14637
  onCancel,
14637
14638
  error,
14638
- value = ''
14639
+ value = '',
14640
+ label = 'Add Script'
14639
14641
  }) => {
14640
- console.log('🚀 ~ value:', value);
14641
14642
  const [text, setText] = React.useState(value);
14643
+ const isValueFilled = !checkEmpty(text);
14642
14644
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
14643
14645
  children: [jsxRuntime.jsxs("div", {
14644
- className: "add-module-container",
14645
- children: [jsxRuntime.jsx("input", {
14646
- type: "text",
14647
- className: "add-module-input",
14648
- onChange: e => setText(e.target.value),
14649
- value: text
14650
- }), jsxRuntime.jsx(Icon, {
14651
- className: "icons",
14652
- name: "update_icon",
14653
- onClick: () => onConfirm && onConfirm(text)
14654
- }), jsxRuntime.jsx(Icon, {
14655
- className: "icons",
14656
- name: "close",
14657
- onClick: onCancel
14646
+ className: classNames('add-module-container'),
14647
+ children: [jsxRuntime.jsxs("div", {
14648
+ className: classNames('ff-add-module-input-container', {
14649
+ 'ff-add-module-input-container--float': isValueFilled
14650
+ }),
14651
+ children: [jsxRuntime.jsx("label", {
14652
+ className: "ff-add-module-label-container",
14653
+ htmlFor: "add-module-input",
14654
+ children: jsxRuntime.jsx("span", {
14655
+ className: classNames('ff-add-module-label', {
14656
+ 'ff-input-label--no-hover': !!text
14657
+ }),
14658
+ children: label
14659
+ })
14660
+ }), jsxRuntime.jsx("input", {
14661
+ name: "add-module-input",
14662
+ type: "text",
14663
+ className: "add-module-input",
14664
+ onChange: e => setText(e.target.value),
14665
+ value: text
14666
+ })]
14667
+ }), jsxRuntime.jsxs("div", {
14668
+ className: "ff-module-icon-container",
14669
+ children: [jsxRuntime.jsx(Icon, {
14670
+ className: "icons",
14671
+ name: "update_icon",
14672
+ onClick: () => onConfirm && onConfirm(text),
14673
+ color: "var(--label-edit-confirm-icon)",
14674
+ height: 18,
14675
+ width: 18
14676
+ }), jsxRuntime.jsx(Icon, {
14677
+ className: "icons",
14678
+ name: "close",
14679
+ onClick: onCancel,
14680
+ color: "var(--label-edit-cancel-icon)",
14681
+ height: 14,
14682
+ width: 14
14683
+ })]
14658
14684
  })]
14659
14685
  }), jsxRuntime.jsx("small", {
14660
14686
  children: error
@@ -14662,6 +14688,8 @@ const AddModule = ({
14662
14688
  });
14663
14689
  };
14664
14690
 
14691
+ const SvgSpinner = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("style", null, "\r\n .spinner_DupU {\r\n animation: spinner_sM3D 1.2s infinite;\r\n fill: #71347b;\r\n }\r\n .spinner_GWtZ { animation-delay: .1s; }\r\n .spinner_dwN6 { animation-delay: .2s; }\r\n .spinner_46QP { animation-delay: .3s; }\r\n .spinner_PD82 { animation-delay: .4s; }\r\n .spinner_eUgh { animation-delay: .5s; }\r\n .spinner_eUaP { animation-delay: .6s; }\r\n .spinner_j38H { animation-delay: .7s; }\r\n .spinner_tVmX { animation-delay: .8s; }\r\n .spinner_DQhX { animation-delay: .9s; }\r\n .spinner_GIL4 { animation-delay: 1s; }\r\n .spinner_n0Yb { animation-delay: 1.1s; }\r\n\r\n @keyframes spinner_sM3D {\r\n 0%, 50% {\r\n animation-timing-function: cubic-bezier(0, 1, 0, 1);\r\n r: 0;\r\n }\r\n 10% {\r\n animation-timing-function: cubic-bezier(.53, 0, .61, .73);\r\n r: 2px;\r\n }\r\n }\r\n "), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU", cx: 12, cy: 3, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_GWtZ", cx: 16.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_n0Yb", cx: 7.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_dwN6", cx: 19.79, cy: 7.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_GIL4", cx: 4.21, cy: 7.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_46QP", cx: 21, cy: 12, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_DQhX", cx: 3, cy: 12, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_PD82", cx: 19.79, cy: 16.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_tVmX", cx: 4.21, cy: 16.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_eUgh", cx: 16.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_j38H", cx: 7.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_eUaP", cx: 12, cy: 21, r: 0 }));
14692
+
14665
14693
  const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
14666
14694
  let siblingsArray = parentSiblings;
14667
14695
  let isLastNode = isLast;
@@ -14687,48 +14715,82 @@ const TableCell = /*#__PURE__*/React.memo(({
14687
14715
  onCheckBoxChange,
14688
14716
  onToggleExpand,
14689
14717
  onAddConfirm,
14690
- onAddCancel
14691
- }) => jsxRuntime.jsxs("td", {
14692
- className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
14693
- children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxRuntime.jsxs("div", {
14694
- className: "tree-title-container",
14695
- children: [col.isTree && jsxRuntime.jsx("span", {
14696
- className: `tree-table-space-block last-block ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
14697
- onClick: () => onToggleExpand(node),
14698
- children: node.container && node?.resourceCount + node?.subContainerCount > 0 && jsxRuntime.jsxs("span", {
14699
- onClick: () => onToggleExpand(node),
14700
- children: [' ', jsxRuntime.jsx(SvgArrowsDownIcon, {})]
14701
- })
14702
- }), jsxRuntime.jsxs("span", {
14703
- className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
14704
- children: [!node?.isNewNode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
14705
- children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
14706
- checked: node?.checked || false,
14707
- partial: node?.checked === 'partial',
14708
- onChange: e => onCheckBoxChange(e, node)
14709
- }), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
14710
- name: node.title,
14711
- checked: selected.includes(node.key),
14712
- value: node.key,
14713
- onChange: e => onCheckBoxChange(e, node)
14718
+ onAddCancel,
14719
+ isExpanding
14720
+ }) => {
14721
+ React.useEffect(() => {
14722
+ const handleHover = (event, isHovering) => {
14723
+ const target = event.target;
14724
+ const levelClass = Array.from(target.classList).find(cls => cls.startsWith('tree-table-space-block-'));
14725
+ if (levelClass) {
14726
+ const level = levelClass.split('-').pop();
14727
+ // Check if level is valid before selecting elements
14728
+ if (level) {
14729
+ const sameLevelBlocks = document.querySelectorAll(`.tree-table-space-block-${level}`);
14730
+ sameLevelBlocks.forEach(block => {
14731
+ if (isHovering) {
14732
+ block.classList.add('tree-table-hovered');
14733
+ } else {
14734
+ block.classList.remove('tree-table-hovered');
14735
+ }
14736
+ });
14737
+ }
14738
+ }
14739
+ };
14740
+ const spaceBlocks = document.querySelectorAll('.tree-table-space-block');
14741
+ spaceBlocks.forEach(block => {
14742
+ block.addEventListener('mouseenter', e => handleHover(e, true));
14743
+ block.addEventListener('mouseleave', e => handleHover(e, false));
14744
+ });
14745
+ return () => {
14746
+ spaceBlocks.forEach(block => {
14747
+ block.removeEventListener('mouseenter', e => handleHover(e, true));
14748
+ block.removeEventListener('mouseleave', e => handleHover(e, false));
14749
+ });
14750
+ };
14751
+ }, []);
14752
+ return jsxRuntime.jsxs("td", {
14753
+ className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
14754
+ children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxRuntime.jsxs("div", {
14755
+ className: "tree-title-container",
14756
+ children: [col.isTree && jsxRuntime.jsx("span", {
14757
+ className: `tree-table-space-block tree-table-space-block-${node.hierarchy} last-block ${node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
14758
+ children: node.container && (node?.resourceCount + node?.subContainerCount > 0 || node.expandable) && jsxRuntime.jsxs("span", {
14759
+ onClick: () => onToggleExpand(node),
14760
+ children: [' ', isExpanding ? jsxRuntime.jsx(SvgSpinner, {}) : jsxRuntime.jsx(SvgArrowsDownIcon, {})]
14761
+ })
14762
+ }), jsxRuntime.jsxs("span", {
14763
+ className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
14764
+ children: [!node?.isNewNode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
14765
+ children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
14766
+ checked: node?.checked || false,
14767
+ partial: node?.checked === 'partial',
14768
+ onChange: e => onCheckBoxChange(e, node)
14769
+ }), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
14770
+ name: node.key,
14771
+ checked: selected.includes(node.key),
14772
+ value: node.key,
14773
+ onChange: e => onCheckBoxChange(e, node)
14774
+ })]
14775
+ }), node.isNewNode && col.isTree ? jsxRuntime.jsx(AddModule, {
14776
+ onCancel: onAddCancel,
14777
+ onConfirm: onAddConfirm,
14778
+ error: node?.error || '',
14779
+ value: node.value,
14780
+ label: node?.label || ''
14781
+ }) : jsxRuntime.jsx("span", {
14782
+ className: "tree-table-td-content-text",
14783
+ children: prepareData(node, col)
14714
14784
  })]
14715
- }), node.isNewNode && col.isTree ? jsxRuntime.jsx(AddModule, {
14716
- onCancel: onAddCancel,
14717
- onConfirm: onAddConfirm,
14718
- error: node?.error || '',
14719
- value: node.value
14720
- }) : jsxRuntime.jsx("span", {
14721
- className: "tree-table-td-content-text",
14722
- children: prepareData(node, col)
14723
14785
  })]
14786
+ }), col.actions && !node?.isNewNode && jsxRuntime.jsx("div", {
14787
+ className: `table-tree-row-action`,
14788
+ children: (() => {
14789
+ return col.actions(node, treeRowRef);
14790
+ })()
14724
14791
  })]
14725
- }), col.actions && jsxRuntime.jsx("div", {
14726
- className: `table-tree-row-action`,
14727
- children: (() => {
14728
- return col.actions(node, treeRowRef);
14729
- })()
14730
- })]
14731
- }));
14792
+ });
14793
+ });
14732
14794
 
14733
14795
  const TableRow = /*#__PURE__*/React.memo(({
14734
14796
  node,
@@ -14739,7 +14801,8 @@ const TableRow = /*#__PURE__*/React.memo(({
14739
14801
  onToggleExpand,
14740
14802
  onCheckBoxChange,
14741
14803
  onAddConfirm,
14742
- onAddCancel
14804
+ onAddCancel,
14805
+ isExpanding
14743
14806
  }) => {
14744
14807
  const treeRowRef = React.useRef(null);
14745
14808
  return jsxRuntime.jsx("tr", {
@@ -14756,7 +14819,8 @@ const TableRow = /*#__PURE__*/React.memo(({
14756
14819
  onCheckBoxChange: onCheckBoxChange,
14757
14820
  onToggleExpand: onToggleExpand,
14758
14821
  onAddConfirm: onAddConfirm,
14759
- onAddCancel: onAddCancel
14822
+ onAddCancel: onAddCancel,
14823
+ isExpanding: isExpanding
14760
14824
  }, col.name))
14761
14825
  });
14762
14826
  });
@@ -14766,7 +14830,8 @@ const addNewRow = (treeData, newNode) => {
14766
14830
  sourceId,
14767
14831
  action,
14768
14832
  value = '',
14769
- error = ''
14833
+ error = '',
14834
+ label
14770
14835
  } = newNode;
14771
14836
  if (!sourceId || !action) return treeData;
14772
14837
  const nodeMap = new Map(treeData.map(node => [node.key, node]));
@@ -14780,7 +14845,8 @@ const addNewRow = (treeData, newNode) => {
14780
14845
  isNewNode: true,
14781
14846
  key: 'new-node',
14782
14847
  value,
14783
- error
14848
+ error,
14849
+ label
14784
14850
  };
14785
14851
  switch (action) {
14786
14852
  case 'addAbove':
@@ -14809,7 +14875,8 @@ const TableBody = ({
14809
14875
  onCheckBoxChange,
14810
14876
  newNode = {},
14811
14877
  onAddConfirm,
14812
- onAddCancel
14878
+ onAddCancel,
14879
+ expanding
14813
14880
  }) => {
14814
14881
  if (checkEmpty(flattenedTreeData)) {
14815
14882
  return null;
@@ -14827,7 +14894,8 @@ const TableBody = ({
14827
14894
  onToggleExpand: node => onToggleExpand(node, index),
14828
14895
  onCheckBoxChange: onCheckBoxChange,
14829
14896
  onAddConfirm: onAddConfirm,
14830
- onAddCancel: onAddCancel
14897
+ onAddCancel: onAddCancel,
14898
+ isExpanding: node.key === expanding
14831
14899
  }, node.key)), jsxRuntime.jsx("tr", {
14832
14900
  id: "ff-table-tree-last-node"
14833
14901
  })]
@@ -14870,14 +14938,11 @@ const TreeTable = ({
14870
14938
  loadMore = () => {},
14871
14939
  tableBorder,
14872
14940
  height = 'auto',
14873
- newNode = {
14874
- action: 'addInside',
14875
- sourceId: 'PAG1013',
14876
- value: 'newNode'
14877
- },
14941
+ newNode = {},
14878
14942
  onAddConfirm = _name => {},
14879
14943
  onAddCancel = () => {}
14880
14944
  }) => {
14945
+ const [expanding, setExpanding] = React.useState(null);
14881
14946
  const observerRef = React.useRef(null);
14882
14947
  const isTriggeredAbove = React.useRef(false); // Track if pagination for "above" direction has been triggered
14883
14948
  const isTriggeredBelow = React.useRef(false); // Track if pagination for "below" direction has been triggered
@@ -14949,11 +15014,33 @@ const TreeTable = ({
14949
15014
  throttledLoadMore.cancel();
14950
15015
  };
14951
15016
  }, [treeData, throttledLoadMore]);
14952
- const handleToggleExpand = React.useCallback((node, index) => onExpand?.(node, index), [onExpand]);
15017
+ React.useEffect(() => {
15018
+ if (expanding) {
15019
+ setExpanding(null);
15020
+ }
15021
+ }, [treeData]);
15022
+ React.useEffect(() => {
15023
+ if (expanding) {
15024
+ setTimeout(() => {
15025
+ if (expanding) {
15026
+ setExpanding(null);
15027
+ }
15028
+ }, 3000);
15029
+ }
15030
+ }, [expanding]);
15031
+ const handleToggleExpand = React.useCallback((node, index) => {
15032
+ if (expanding) return;
15033
+ setExpanding(node.key);
15034
+ onExpand?.(node, index);
15035
+ }, [onExpand]);
14953
15036
  const handleCheckBoxChange = React.useCallback((e, node) => {
15037
+ if (expanding) return;
14954
15038
  onChange?.(e, node);
14955
15039
  }, [onChange]);
14956
- const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
15040
+ const handleRowClick = React.useCallback((e, node) => {
15041
+ if (expanding) return;
15042
+ onClick?.(e, node);
15043
+ }, [onClick]);
14957
15044
  return jsxRuntime.jsx("div", {
14958
15045
  className: "tree-table-wrap",
14959
15046
  children: jsxRuntime.jsx("div", {
@@ -14977,13 +15064,13 @@ const TreeTable = ({
14977
15064
  onCheckBoxChange: handleCheckBoxChange,
14978
15065
  newNode: newNode,
14979
15066
  onAddConfirm: onAddConfirm,
14980
- onAddCancel: onAddCancel
15067
+ onAddCancel: onAddCancel,
15068
+ expanding: expanding
14981
15069
  })]
14982
15070
  })
14983
15071
  })
14984
15072
  });
14985
15073
  };
14986
- var TableTree = /*#__PURE__*/React.memo(TreeTable);
14987
15074
 
14988
15075
  var css_248z$P = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n --dataset-tooltip-title: #($dataset-tooltip-title),\n --dataset-tooltip-value: #($dataset-tooltip-value), ;\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row {\n flex: 0 1 auto;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n position: relative;\n border: none;\n background: none;\n padding: 0 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-row--no-padding {\n border-radius: 8px;\n background: white;\n padding: 0px;\n justify-content: flex-start;\n margin-right: 8px;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 7px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule.active {\n background-color: var(--slider-table-color);\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}\n.ff-tabs-container .ff-defaultStatus {\n position: absolute;\n top: 2px;\n right: 0px;\n width: 6px;\n height: 6px;\n background-color: transparent;\n border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n background-color: var(--confirm-tick-icon-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n background-color: var(--delete-text-color);\n box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
14989
15076
  styleInject(css_248z$P);
@@ -27301,12 +27388,13 @@ const PieChart = ({
27301
27388
  });
27302
27389
  };
27303
27390
 
27304
- var css_248z$F = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n z-index: 1000;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 4px;\n padding-bottom: 16px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
27391
+ var css_248z$F = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n z-index: 1000;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 4px;\n padding-bottom: 16px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 700px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n margin-left: 8px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-menuicon-container {\n width: 40px !important;\n height: 32px !important;\n border-radius: 16px !important;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
27305
27392
  styleInject(css_248z$F);
27306
27393
 
27307
27394
  const AppHeader = ({
27308
27395
  logoIconName = 'fireflink_icon',
27309
27396
  width,
27397
+ borderRadius,
27310
27398
  leftContent,
27311
27399
  rightContent,
27312
27400
  projectsList,
@@ -27332,6 +27420,10 @@ const AppHeader = ({
27332
27420
  className: "ff-app-header-main",
27333
27421
  children: jsxRuntime.jsxs("div", {
27334
27422
  className: "ff-app-header",
27423
+ style: {
27424
+ borderStartStartRadius: borderRadius,
27425
+ borderStartEndRadius: borderRadius
27426
+ },
27335
27427
  children: [jsxRuntime.jsxs("div", {
27336
27428
  className: "ff-app-header-left-container",
27337
27429
  children: [jsxRuntime.jsx("div", {
@@ -30411,7 +30503,8 @@ const Branches = ({
30411
30503
  readOnly
30412
30504
  }) => {
30413
30505
  const evenRow = rowIndex % 2 === 0;
30414
- const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - 1]);
30506
+ const getLastIndex = readOnly ? 0 : 1;
30507
+ const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - getLastIndex]);
30415
30508
  const getBorderStyle = (currentBranch, nextBranch) => {
30416
30509
  if (currentBranch && nextBranch && 'machineInstanceId' in currentBranch && 'machineInstanceId' in nextBranch) {
30417
30510
  return currentBranch.machineInstanceId === nextBranch.machineInstanceId ? 'dashed' : 'solid';
@@ -30568,16 +30661,18 @@ const Branches = ({
30568
30661
  color: "var(--ff-connecting-branch-color)",
30569
30662
  children: "Dataset List"
30570
30663
  })]
30571
- }), jsxRuntime.jsx(Icon, {
30572
- name: "plus_icon",
30573
- className: "ff-connecting-icon",
30574
- onClick: () => onAddRunBrowser(machineInstanceId),
30575
- color: "var(--ff-connecting-branch-color)",
30576
- hoverEffect: true
30577
- }), jsxRuntime.jsx(Typography, {
30578
- className: "ff-connecting-text",
30579
- color: "var(--ff-connecting-branch-color)",
30580
- children: "Run"
30664
+ }), !readOnly && jsxRuntime.jsxs(jsxRuntime.Fragment, {
30665
+ children: [jsxRuntime.jsx(Icon, {
30666
+ name: "plus_icon",
30667
+ className: "ff-connecting-icon",
30668
+ onClick: () => onAddRunBrowser(machineInstanceId),
30669
+ color: "var(--ff-connecting-branch-color)",
30670
+ hoverEffect: true
30671
+ }), jsxRuntime.jsx(Typography, {
30672
+ className: "ff-connecting-text",
30673
+ color: "var(--ff-connecting-branch-color)",
30674
+ children: "Run"
30675
+ })]
30581
30676
  })]
30582
30677
  }), !readOnly && jsxRuntime.jsx(Icon, {
30583
30678
  name: "delete",
@@ -51619,28 +51714,31 @@ const MachineInstances = ({
51619
51714
  datasetHeight,
51620
51715
  curveHeights,
51621
51716
  itemRefs,
51622
- datasetRef
51717
+ datasetRef,
51718
+ isReadOnlyMode
51623
51719
  }) => {
51624
51720
  return jsxRuntime.jsx(jsxRuntime.Fragment, {
51625
- children: parentNodeData?.machineInstances?.length === 0 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
51626
- children: [jsxRuntime.jsx("div", {
51627
- className: "ff-selectedMachines-connecting-line",
51628
- children: jsxRuntime.jsxs("div", {
51629
- className: "ff-line",
51630
- children: [jsxRuntime.jsx("div", {
51631
- className: "ff-left-icon"
51632
- }), jsxRuntime.jsx("div", {
51633
- className: "ff-right-icon"
51634
- })]
51635
- })
51636
- }), jsxRuntime.jsx("div", {
51637
- className: "ff-machine-instance ff-machine-env-button",
51638
- children: getChildNodeComponent({
51639
- isButton: true,
51640
- parentNodeData,
51641
- parentNodeIndex
51642
- })
51643
- })]
51721
+ children: parentNodeData?.machineInstances?.length === 0 ? jsxRuntime.jsx(jsxRuntime.Fragment, {
51722
+ children: !isReadOnlyMode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
51723
+ children: [jsxRuntime.jsx("div", {
51724
+ className: "ff-selectedMachines-connecting-line",
51725
+ children: jsxRuntime.jsxs("div", {
51726
+ className: "ff-line",
51727
+ children: [jsxRuntime.jsx("div", {
51728
+ className: "ff-left-icon"
51729
+ }), jsxRuntime.jsx("div", {
51730
+ className: "ff-right-icon"
51731
+ })]
51732
+ })
51733
+ }), jsxRuntime.jsx("div", {
51734
+ className: "ff-machine-instance ff-machine-env-button",
51735
+ children: getChildNodeComponent({
51736
+ isButton: true,
51737
+ parentNodeData,
51738
+ parentNodeIndex
51739
+ })
51740
+ })]
51741
+ })
51644
51742
  }) : parentNodeData?.machineInstances?.map((childNodeData, childNodeIndex) => {
51645
51743
  const isFirstLine = childNodeIndex === 0;
51646
51744
  return jsxRuntime.jsxs("div", {
@@ -51703,26 +51801,28 @@ const MachineInstances = ({
51703
51801
  })]
51704
51802
  }, ffid())
51705
51803
  }, runLevelExecutionDataSet?.runLevelExecutionDataSetId + ffid()))
51706
- }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
51707
- children: [jsxRuntime.jsx("div", {
51708
- className: "ff-selectedMachines-connecting-line ff-second-line",
51709
- children: jsxRuntime.jsxs("div", {
51710
- className: "ff-line",
51711
- children: [jsxRuntime.jsx("div", {
51712
- className: "ff-left-icon"
51713
- }), jsxRuntime.jsx("div", {
51714
- className: "ff-right-icon"
51715
- })]
51716
- })
51717
- }), jsxRuntime.jsx("div", {
51718
- className: "ff-machine-instance ff-machine-env-button",
51719
- children: getChildNodeComponent({
51720
- isButton: true,
51721
- parentNodeData,
51722
- parentNodeIndex,
51723
- childNodeIndex: childNodeIndex + 1
51724
- })
51725
- })]
51804
+ }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsxRuntime.jsx(jsxRuntime.Fragment, {
51805
+ children: !isReadOnlyMode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
51806
+ children: [jsxRuntime.jsx("div", {
51807
+ className: "ff-selectedMachines-connecting-line ff-second-line",
51808
+ children: jsxRuntime.jsxs("div", {
51809
+ className: "ff-line",
51810
+ children: [jsxRuntime.jsx("div", {
51811
+ className: "ff-left-icon"
51812
+ }), jsxRuntime.jsx("div", {
51813
+ className: "ff-right-icon"
51814
+ })]
51815
+ })
51816
+ }), jsxRuntime.jsx("div", {
51817
+ className: "ff-machine-instance ff-machine-env-button",
51818
+ children: getChildNodeComponent({
51819
+ isButton: true,
51820
+ parentNodeData,
51821
+ parentNodeIndex,
51822
+ childNodeIndex: childNodeIndex + 1
51823
+ })
51824
+ })]
51825
+ })
51726
51826
  })]
51727
51827
  }, ffid());
51728
51828
  })
@@ -51734,17 +51834,19 @@ const ConnectingBranch = ({
51734
51834
  getChildNodeComponent,
51735
51835
  getParentNodeComponent,
51736
51836
  getParentNodeComponentActionItems,
51737
- childNodeCurveHeight = 1.28
51837
+ childNodeCurveHeight = 1.28,
51838
+ isReadOnlyMode = false
51738
51839
  }) => {
51739
51840
  const datasetRef = React.useRef(null);
51740
51841
  const [datasetHeight, setDatasetHeight] = React.useState(0);
51741
51842
  const [curveHeights, setCurveHeights] = React.useState([]);
51742
51843
  const itemRefs = React.useRef([]);
51743
51844
  const calculateVerticalLineHeight = (machineInstances, datasetHeight, gap) => {
51744
- const totalDataSets = machineInstances.reduce((acc, instance) => {
51745
- return acc + (instance.runLevelExecutionDataSets?.length || 0);
51746
- }, 0);
51747
- return totalDataSets * datasetHeight + totalDataSets * gap;
51845
+ if (machineInstances.length === 1 && isReadOnlyMode) {
51846
+ return 0;
51847
+ }
51848
+ const totalDataSets = machineInstances.reduce((acc, instance, index) => acc + (index !== machineInstances.length - 1 || !isReadOnlyMode ? instance.runLevelExecutionDataSets?.length || 0 : 0), 0);
51849
+ return totalDataSets * (datasetHeight + gap);
51748
51850
  };
51749
51851
  React.useEffect(() => {
51750
51852
  if (datasetRef.current) {
@@ -51848,11 +51950,12 @@ const ConnectingBranch = ({
51848
51950
  curveHeights: curveHeights,
51849
51951
  itemRefs: itemRefs,
51850
51952
  datasetRef: datasetRef,
51851
- getChildNodeComponent: getChildNodeComponent
51953
+ getChildNodeComponent: getChildNodeComponent,
51954
+ isReadOnlyMode: isReadOnlyMode
51852
51955
  })]
51853
51956
  })]
51854
51957
  }, ffid());
51855
- }), jsxRuntime.jsx("div", {
51958
+ }), !isReadOnlyMode && jsxRuntime.jsx("div", {
51856
51959
  className: "ff-select-machine-input",
51857
51960
  style: {
51858
51961
  gridRow: `${currentRow}`
@@ -54815,7 +54918,7 @@ exports.StatusCard = StatusCard;
54815
54918
  exports.TIME_REGEX = TIME_REGEX;
54816
54919
  exports.TWITTER_HANDLE_REGEX = TWITTER_HANDLE_REGEX;
54817
54920
  exports.Table = Table$1;
54818
- exports.TableTree = TableTree;
54921
+ exports.TableTree = TreeTable;
54819
54922
  exports.TableWithAccordion = TableWithAccordion;
54820
54923
  exports.Tabs = Tabs;
54821
54924
  exports.TextArea = Textarea;