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.
- package/lib/ComponentProps/TreeNodeProps.d.ts +3 -0
- package/lib/components/AppHeader/types.d.ts +1 -0
- package/lib/components/ConnectingBranch/types.d.ts +2 -0
- package/lib/components/TableTree/Components/AddModule/AddModule.d.ts +2 -1
- package/lib/components/TableTree/Components/TableBody.d.ts +1 -1
- package/lib/components/TableTree/Components/TableCell.d.ts +2 -2
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/addNewRow.d.ts +1 -0
- package/lib/components/TableTree/data.d.ts +34 -0
- package/lib/components/TableTree/types.d.ts +12 -12
- package/lib/index.d.ts +15 -8
- package/lib/index.esm.js +237 -134
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +237 -134
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +3 -0
- package/src/assets/icons/spinner.svg +42 -0
- package/src/components/AppHeader/AppHeader.scss +7 -1
- package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
- package/src/components/AppHeader/AppHeader.tsx +8 -1
- package/src/components/AppHeader/types.ts +1 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +36 -27
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +10 -0
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +36 -23
- package/src/components/ConnectingBranch/types.ts +2 -0
- package/src/components/Select/Select.stories.tsx +34 -10
- package/src/components/Select/Select.tsx +1 -0
- package/src/components/Select/components/Dropdown.tsx +24 -21
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +19 -14
- package/src/components/TableTree/Components/AddModule/AddModule.scss +73 -1
- package/src/components/TableTree/Components/AddModule/AddModule.tsx +50 -14
- package/src/components/TableTree/Components/TableBody.tsx +2 -0
- package/src/components/TableTree/Components/TableCell.tsx +125 -75
- package/src/components/TableTree/Components/TableRow.tsx +2 -0
- package/src/components/TableTree/TableTree.scss +14 -2
- package/src/components/TableTree/TableTree.stories.tsx +26 -7
- package/src/components/TableTree/TableTree.tsx +31 -5
- package/src/components/TableTree/Utils/addNewRow.ts +3 -1
- package/src/components/TableTree/data.ts +5 -1
- package/src/components/TableTree/types.ts +13 -12
package/lib/index.esm.js
CHANGED
@@ -2937,7 +2937,7 @@ const Dropdown$1 = ({
|
|
2937
2937
|
}),
|
2938
2938
|
children: !checkEmpty(options) ? options.map(option => jsx("div", {
|
2939
2939
|
className: classNames('ff-select-dropdown-option', {
|
2940
|
-
'ff-select-dropdown-option__selected':
|
2940
|
+
'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
|
2941
2941
|
}, currentTheme),
|
2942
2942
|
onClick: () => {
|
2943
2943
|
if ('disable' in option && option['disable']) return;
|
@@ -3265,7 +3265,8 @@ const Select$1 = ({
|
|
3265
3265
|
onSaveModal: onSaveModal,
|
3266
3266
|
onCancelModal: onCancelModal,
|
3267
3267
|
modalJSXProps: modalJSXProps,
|
3268
|
-
recurrence: recurrence
|
3268
|
+
recurrence: recurrence,
|
3269
|
+
valueAccessor: valueAccessor
|
3269
3270
|
}), document.body)
|
3270
3271
|
})]
|
3271
3272
|
});
|
@@ -14566,7 +14567,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
|
|
14566
14567
|
}), document.body);
|
14567
14568
|
});
|
14568
14569
|
|
14569
|
-
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:
|
14570
|
+
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}";
|
14570
14571
|
styleInject(css_248z$R);
|
14571
14572
|
|
14572
14573
|
const TableHead = /*#__PURE__*/React__default.memo(({
|
@@ -14608,33 +14609,58 @@ const TableHead = /*#__PURE__*/React__default.memo(({
|
|
14608
14609
|
});
|
14609
14610
|
});
|
14610
14611
|
|
14611
|
-
var css_248z$Q = ".add-module-container {\n display: flex;\n}\n.add-module-container .icons {\n cursor: pointer;\n}";
|
14612
|
+
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}";
|
14612
14613
|
styleInject(css_248z$Q);
|
14613
14614
|
|
14614
14615
|
const AddModule = ({
|
14615
14616
|
onConfirm,
|
14616
14617
|
onCancel,
|
14617
14618
|
error,
|
14618
|
-
value = ''
|
14619
|
+
value = '',
|
14620
|
+
label = 'Add Script'
|
14619
14621
|
}) => {
|
14620
|
-
console.log('🚀 ~ value:', value);
|
14621
14622
|
const [text, setText] = useState(value);
|
14623
|
+
const isValueFilled = !checkEmpty(text);
|
14622
14624
|
return jsxs(Fragment, {
|
14623
14625
|
children: [jsxs("div", {
|
14624
|
-
className:
|
14625
|
-
children: [
|
14626
|
-
|
14627
|
-
|
14628
|
-
|
14629
|
-
|
14630
|
-
|
14631
|
-
|
14632
|
-
|
14633
|
-
|
14634
|
-
|
14635
|
-
|
14636
|
-
|
14637
|
-
|
14626
|
+
className: classNames('add-module-container'),
|
14627
|
+
children: [jsxs("div", {
|
14628
|
+
className: classNames('ff-add-module-input-container', {
|
14629
|
+
'ff-add-module-input-container--float': isValueFilled
|
14630
|
+
}),
|
14631
|
+
children: [jsx("label", {
|
14632
|
+
className: "ff-add-module-label-container",
|
14633
|
+
htmlFor: "add-module-input",
|
14634
|
+
children: jsx("span", {
|
14635
|
+
className: classNames('ff-add-module-label', {
|
14636
|
+
'ff-input-label--no-hover': !!text
|
14637
|
+
}),
|
14638
|
+
children: label
|
14639
|
+
})
|
14640
|
+
}), jsx("input", {
|
14641
|
+
name: "add-module-input",
|
14642
|
+
type: "text",
|
14643
|
+
className: "add-module-input",
|
14644
|
+
onChange: e => setText(e.target.value),
|
14645
|
+
value: text
|
14646
|
+
})]
|
14647
|
+
}), jsxs("div", {
|
14648
|
+
className: "ff-module-icon-container",
|
14649
|
+
children: [jsx(Icon, {
|
14650
|
+
className: "icons",
|
14651
|
+
name: "update_icon",
|
14652
|
+
onClick: () => onConfirm && onConfirm(text),
|
14653
|
+
color: "var(--label-edit-confirm-icon)",
|
14654
|
+
height: 18,
|
14655
|
+
width: 18
|
14656
|
+
}), jsx(Icon, {
|
14657
|
+
className: "icons",
|
14658
|
+
name: "close",
|
14659
|
+
onClick: onCancel,
|
14660
|
+
color: "var(--label-edit-cancel-icon)",
|
14661
|
+
height: 14,
|
14662
|
+
width: 14
|
14663
|
+
})]
|
14638
14664
|
})]
|
14639
14665
|
}), jsx("small", {
|
14640
14666
|
children: error
|
@@ -14642,6 +14668,8 @@ const AddModule = ({
|
|
14642
14668
|
});
|
14643
14669
|
};
|
14644
14670
|
|
14671
|
+
const SvgSpinner = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.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.createElement("circle", { className: "spinner_DupU", cx: 12, cy: 3, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_GWtZ", cx: 16.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_n0Yb", cx: 7.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_dwN6", cx: 19.79, cy: 7.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_GIL4", cx: 4.21, cy: 7.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_46QP", cx: 21, cy: 12, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_DQhX", cx: 3, cy: 12, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_PD82", cx: 19.79, cy: 16.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_tVmX", cx: 4.21, cy: 16.5, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_eUgh", cx: 16.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_j38H", cx: 7.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React.createElement("circle", { className: "spinner_DupU spinner_eUaP", cx: 12, cy: 21, r: 0 }));
|
14672
|
+
|
14645
14673
|
const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
|
14646
14674
|
let siblingsArray = parentSiblings;
|
14647
14675
|
let isLastNode = isLast;
|
@@ -14667,48 +14695,82 @@ const TableCell = /*#__PURE__*/React__default.memo(({
|
|
14667
14695
|
onCheckBoxChange,
|
14668
14696
|
onToggleExpand,
|
14669
14697
|
onAddConfirm,
|
14670
|
-
onAddCancel
|
14671
|
-
|
14672
|
-
|
14673
|
-
|
14674
|
-
|
14675
|
-
|
14676
|
-
|
14677
|
-
|
14678
|
-
|
14679
|
-
|
14680
|
-
|
14681
|
-
|
14682
|
-
|
14683
|
-
|
14684
|
-
|
14685
|
-
|
14686
|
-
|
14687
|
-
|
14688
|
-
|
14689
|
-
}
|
14690
|
-
|
14691
|
-
|
14692
|
-
|
14693
|
-
|
14698
|
+
onAddCancel,
|
14699
|
+
isExpanding
|
14700
|
+
}) => {
|
14701
|
+
useEffect(() => {
|
14702
|
+
const handleHover = (event, isHovering) => {
|
14703
|
+
const target = event.target;
|
14704
|
+
const levelClass = Array.from(target.classList).find(cls => cls.startsWith('tree-table-space-block-'));
|
14705
|
+
if (levelClass) {
|
14706
|
+
const level = levelClass.split('-').pop();
|
14707
|
+
// Check if level is valid before selecting elements
|
14708
|
+
if (level) {
|
14709
|
+
const sameLevelBlocks = document.querySelectorAll(`.tree-table-space-block-${level}`);
|
14710
|
+
sameLevelBlocks.forEach(block => {
|
14711
|
+
if (isHovering) {
|
14712
|
+
block.classList.add('tree-table-hovered');
|
14713
|
+
} else {
|
14714
|
+
block.classList.remove('tree-table-hovered');
|
14715
|
+
}
|
14716
|
+
});
|
14717
|
+
}
|
14718
|
+
}
|
14719
|
+
};
|
14720
|
+
const spaceBlocks = document.querySelectorAll('.tree-table-space-block');
|
14721
|
+
spaceBlocks.forEach(block => {
|
14722
|
+
block.addEventListener('mouseenter', e => handleHover(e, true));
|
14723
|
+
block.addEventListener('mouseleave', e => handleHover(e, false));
|
14724
|
+
});
|
14725
|
+
return () => {
|
14726
|
+
spaceBlocks.forEach(block => {
|
14727
|
+
block.removeEventListener('mouseenter', e => handleHover(e, true));
|
14728
|
+
block.removeEventListener('mouseleave', e => handleHover(e, false));
|
14729
|
+
});
|
14730
|
+
};
|
14731
|
+
}, []);
|
14732
|
+
return jsxs("td", {
|
14733
|
+
className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
|
14734
|
+
children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxs("div", {
|
14735
|
+
className: "tree-title-container",
|
14736
|
+
children: [col.isTree && jsx("span", {
|
14737
|
+
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'}`,
|
14738
|
+
children: node.container && (node?.resourceCount + node?.subContainerCount > 0 || node.expandable) && jsxs("span", {
|
14739
|
+
onClick: () => onToggleExpand(node),
|
14740
|
+
children: [' ', isExpanding ? jsx(SvgSpinner, {}) : jsx(SvgArrowsDownIcon, {})]
|
14741
|
+
})
|
14742
|
+
}), jsxs("span", {
|
14743
|
+
className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
|
14744
|
+
children: [!node?.isNewNode && jsxs(Fragment, {
|
14745
|
+
children: [col.isTree && select === 'checkbox' && jsx(Checkbox, {
|
14746
|
+
checked: node?.checked || false,
|
14747
|
+
partial: node?.checked === 'partial',
|
14748
|
+
onChange: e => onCheckBoxChange(e, node)
|
14749
|
+
}), col.isTree && select === 'radio' && jsx(RadioButton, {
|
14750
|
+
name: node.key,
|
14751
|
+
checked: selected.includes(node.key),
|
14752
|
+
value: node.key,
|
14753
|
+
onChange: e => onCheckBoxChange(e, node)
|
14754
|
+
})]
|
14755
|
+
}), node.isNewNode && col.isTree ? jsx(AddModule, {
|
14756
|
+
onCancel: onAddCancel,
|
14757
|
+
onConfirm: onAddConfirm,
|
14758
|
+
error: node?.error || '',
|
14759
|
+
value: node.value,
|
14760
|
+
label: node?.label || ''
|
14761
|
+
}) : jsx("span", {
|
14762
|
+
className: "tree-table-td-content-text",
|
14763
|
+
children: prepareData(node, col)
|
14694
14764
|
})]
|
14695
|
-
}), node.isNewNode && col.isTree ? jsx(AddModule, {
|
14696
|
-
onCancel: onAddCancel,
|
14697
|
-
onConfirm: onAddConfirm,
|
14698
|
-
error: node?.error || '',
|
14699
|
-
value: node.value
|
14700
|
-
}) : jsx("span", {
|
14701
|
-
className: "tree-table-td-content-text",
|
14702
|
-
children: prepareData(node, col)
|
14703
14765
|
})]
|
14766
|
+
}), col.actions && !node?.isNewNode && jsx("div", {
|
14767
|
+
className: `table-tree-row-action`,
|
14768
|
+
children: (() => {
|
14769
|
+
return col.actions(node, treeRowRef);
|
14770
|
+
})()
|
14704
14771
|
})]
|
14705
|
-
})
|
14706
|
-
|
14707
|
-
children: (() => {
|
14708
|
-
return col.actions(node, treeRowRef);
|
14709
|
-
})()
|
14710
|
-
})]
|
14711
|
-
}));
|
14772
|
+
});
|
14773
|
+
});
|
14712
14774
|
|
14713
14775
|
const TableRow = /*#__PURE__*/React__default.memo(({
|
14714
14776
|
node,
|
@@ -14719,7 +14781,8 @@ const TableRow = /*#__PURE__*/React__default.memo(({
|
|
14719
14781
|
onToggleExpand,
|
14720
14782
|
onCheckBoxChange,
|
14721
14783
|
onAddConfirm,
|
14722
|
-
onAddCancel
|
14784
|
+
onAddCancel,
|
14785
|
+
isExpanding
|
14723
14786
|
}) => {
|
14724
14787
|
const treeRowRef = useRef(null);
|
14725
14788
|
return jsx("tr", {
|
@@ -14736,7 +14799,8 @@ const TableRow = /*#__PURE__*/React__default.memo(({
|
|
14736
14799
|
onCheckBoxChange: onCheckBoxChange,
|
14737
14800
|
onToggleExpand: onToggleExpand,
|
14738
14801
|
onAddConfirm: onAddConfirm,
|
14739
|
-
onAddCancel: onAddCancel
|
14802
|
+
onAddCancel: onAddCancel,
|
14803
|
+
isExpanding: isExpanding
|
14740
14804
|
}, col.name))
|
14741
14805
|
});
|
14742
14806
|
});
|
@@ -14746,7 +14810,8 @@ const addNewRow = (treeData, newNode) => {
|
|
14746
14810
|
sourceId,
|
14747
14811
|
action,
|
14748
14812
|
value = '',
|
14749
|
-
error = ''
|
14813
|
+
error = '',
|
14814
|
+
label
|
14750
14815
|
} = newNode;
|
14751
14816
|
if (!sourceId || !action) return treeData;
|
14752
14817
|
const nodeMap = new Map(treeData.map(node => [node.key, node]));
|
@@ -14760,7 +14825,8 @@ const addNewRow = (treeData, newNode) => {
|
|
14760
14825
|
isNewNode: true,
|
14761
14826
|
key: 'new-node',
|
14762
14827
|
value,
|
14763
|
-
error
|
14828
|
+
error,
|
14829
|
+
label
|
14764
14830
|
};
|
14765
14831
|
switch (action) {
|
14766
14832
|
case 'addAbove':
|
@@ -14789,7 +14855,8 @@ const TableBody = ({
|
|
14789
14855
|
onCheckBoxChange,
|
14790
14856
|
newNode = {},
|
14791
14857
|
onAddConfirm,
|
14792
|
-
onAddCancel
|
14858
|
+
onAddCancel,
|
14859
|
+
expanding
|
14793
14860
|
}) => {
|
14794
14861
|
if (checkEmpty(flattenedTreeData)) {
|
14795
14862
|
return null;
|
@@ -14807,7 +14874,8 @@ const TableBody = ({
|
|
14807
14874
|
onToggleExpand: node => onToggleExpand(node, index),
|
14808
14875
|
onCheckBoxChange: onCheckBoxChange,
|
14809
14876
|
onAddConfirm: onAddConfirm,
|
14810
|
-
onAddCancel: onAddCancel
|
14877
|
+
onAddCancel: onAddCancel,
|
14878
|
+
isExpanding: node.key === expanding
|
14811
14879
|
}, node.key)), jsx("tr", {
|
14812
14880
|
id: "ff-table-tree-last-node"
|
14813
14881
|
})]
|
@@ -14850,14 +14918,11 @@ const TreeTable = ({
|
|
14850
14918
|
loadMore = () => {},
|
14851
14919
|
tableBorder,
|
14852
14920
|
height = 'auto',
|
14853
|
-
newNode = {
|
14854
|
-
action: 'addInside',
|
14855
|
-
sourceId: 'PAG1013',
|
14856
|
-
value: 'newNode'
|
14857
|
-
},
|
14921
|
+
newNode = {},
|
14858
14922
|
onAddConfirm = _name => {},
|
14859
14923
|
onAddCancel = () => {}
|
14860
14924
|
}) => {
|
14925
|
+
const [expanding, setExpanding] = useState(null);
|
14861
14926
|
const observerRef = useRef(null);
|
14862
14927
|
const isTriggeredAbove = useRef(false); // Track if pagination for "above" direction has been triggered
|
14863
14928
|
const isTriggeredBelow = useRef(false); // Track if pagination for "below" direction has been triggered
|
@@ -14929,11 +14994,33 @@ const TreeTable = ({
|
|
14929
14994
|
throttledLoadMore.cancel();
|
14930
14995
|
};
|
14931
14996
|
}, [treeData, throttledLoadMore]);
|
14932
|
-
|
14997
|
+
useEffect(() => {
|
14998
|
+
if (expanding) {
|
14999
|
+
setExpanding(null);
|
15000
|
+
}
|
15001
|
+
}, [treeData]);
|
15002
|
+
useEffect(() => {
|
15003
|
+
if (expanding) {
|
15004
|
+
setTimeout(() => {
|
15005
|
+
if (expanding) {
|
15006
|
+
setExpanding(null);
|
15007
|
+
}
|
15008
|
+
}, 3000);
|
15009
|
+
}
|
15010
|
+
}, [expanding]);
|
15011
|
+
const handleToggleExpand = useCallback((node, index) => {
|
15012
|
+
if (expanding) return;
|
15013
|
+
setExpanding(node.key);
|
15014
|
+
onExpand?.(node, index);
|
15015
|
+
}, [onExpand]);
|
14933
15016
|
const handleCheckBoxChange = useCallback((e, node) => {
|
15017
|
+
if (expanding) return;
|
14934
15018
|
onChange?.(e, node);
|
14935
15019
|
}, [onChange]);
|
14936
|
-
const handleRowClick = useCallback((e, node) =>
|
15020
|
+
const handleRowClick = useCallback((e, node) => {
|
15021
|
+
if (expanding) return;
|
15022
|
+
onClick?.(e, node);
|
15023
|
+
}, [onClick]);
|
14937
15024
|
return jsx("div", {
|
14938
15025
|
className: "tree-table-wrap",
|
14939
15026
|
children: jsx("div", {
|
@@ -14957,13 +15044,13 @@ const TreeTable = ({
|
|
14957
15044
|
onCheckBoxChange: handleCheckBoxChange,
|
14958
15045
|
newNode: newNode,
|
14959
15046
|
onAddConfirm: onAddConfirm,
|
14960
|
-
onAddCancel: onAddCancel
|
15047
|
+
onAddCancel: onAddCancel,
|
15048
|
+
expanding: expanding
|
14961
15049
|
})]
|
14962
15050
|
})
|
14963
15051
|
})
|
14964
15052
|
});
|
14965
15053
|
};
|
14966
|
-
var TableTree = /*#__PURE__*/memo(TreeTable);
|
14967
15054
|
|
14968
15055
|
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}";
|
14969
15056
|
styleInject(css_248z$P);
|
@@ -27281,12 +27368,13 @@ const PieChart = ({
|
|
27281
27368
|
});
|
27282
27369
|
};
|
27283
27370
|
|
27284
|
-
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}";
|
27371
|
+
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}";
|
27285
27372
|
styleInject(css_248z$F);
|
27286
27373
|
|
27287
27374
|
const AppHeader = ({
|
27288
27375
|
logoIconName = 'fireflink_icon',
|
27289
27376
|
width,
|
27377
|
+
borderRadius,
|
27290
27378
|
leftContent,
|
27291
27379
|
rightContent,
|
27292
27380
|
projectsList,
|
@@ -27312,6 +27400,10 @@ const AppHeader = ({
|
|
27312
27400
|
className: "ff-app-header-main",
|
27313
27401
|
children: jsxs("div", {
|
27314
27402
|
className: "ff-app-header",
|
27403
|
+
style: {
|
27404
|
+
borderStartStartRadius: borderRadius,
|
27405
|
+
borderStartEndRadius: borderRadius
|
27406
|
+
},
|
27315
27407
|
children: [jsxs("div", {
|
27316
27408
|
className: "ff-app-header-left-container",
|
27317
27409
|
children: [jsx("div", {
|
@@ -30391,7 +30483,8 @@ const Branches = ({
|
|
30391
30483
|
readOnly
|
30392
30484
|
}) => {
|
30393
30485
|
const evenRow = rowIndex % 2 === 0;
|
30394
|
-
const
|
30486
|
+
const getLastIndex = readOnly ? 0 : 1;
|
30487
|
+
const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - getLastIndex]);
|
30395
30488
|
const getBorderStyle = (currentBranch, nextBranch) => {
|
30396
30489
|
if (currentBranch && nextBranch && 'machineInstanceId' in currentBranch && 'machineInstanceId' in nextBranch) {
|
30397
30490
|
return currentBranch.machineInstanceId === nextBranch.machineInstanceId ? 'dashed' : 'solid';
|
@@ -30548,16 +30641,18 @@ const Branches = ({
|
|
30548
30641
|
color: "var(--ff-connecting-branch-color)",
|
30549
30642
|
children: "Dataset List"
|
30550
30643
|
})]
|
30551
|
-
}),
|
30552
|
-
|
30553
|
-
|
30554
|
-
|
30555
|
-
|
30556
|
-
|
30557
|
-
|
30558
|
-
|
30559
|
-
|
30560
|
-
|
30644
|
+
}), !readOnly && jsxs(Fragment, {
|
30645
|
+
children: [jsx(Icon, {
|
30646
|
+
name: "plus_icon",
|
30647
|
+
className: "ff-connecting-icon",
|
30648
|
+
onClick: () => onAddRunBrowser(machineInstanceId),
|
30649
|
+
color: "var(--ff-connecting-branch-color)",
|
30650
|
+
hoverEffect: true
|
30651
|
+
}), jsx(Typography, {
|
30652
|
+
className: "ff-connecting-text",
|
30653
|
+
color: "var(--ff-connecting-branch-color)",
|
30654
|
+
children: "Run"
|
30655
|
+
})]
|
30561
30656
|
})]
|
30562
30657
|
}), !readOnly && jsx(Icon, {
|
30563
30658
|
name: "delete",
|
@@ -51599,28 +51694,31 @@ const MachineInstances = ({
|
|
51599
51694
|
datasetHeight,
|
51600
51695
|
curveHeights,
|
51601
51696
|
itemRefs,
|
51602
|
-
datasetRef
|
51697
|
+
datasetRef,
|
51698
|
+
isReadOnlyMode
|
51603
51699
|
}) => {
|
51604
51700
|
return jsx(Fragment, {
|
51605
|
-
children: parentNodeData?.machineInstances?.length === 0 ?
|
51606
|
-
children:
|
51607
|
-
|
51608
|
-
|
51609
|
-
|
51610
|
-
|
51611
|
-
|
51612
|
-
|
51613
|
-
|
51614
|
-
|
51615
|
-
|
51616
|
-
|
51617
|
-
|
51618
|
-
|
51619
|
-
|
51620
|
-
|
51621
|
-
|
51622
|
-
|
51623
|
-
|
51701
|
+
children: parentNodeData?.machineInstances?.length === 0 ? jsx(Fragment, {
|
51702
|
+
children: !isReadOnlyMode && jsxs(Fragment, {
|
51703
|
+
children: [jsx("div", {
|
51704
|
+
className: "ff-selectedMachines-connecting-line",
|
51705
|
+
children: jsxs("div", {
|
51706
|
+
className: "ff-line",
|
51707
|
+
children: [jsx("div", {
|
51708
|
+
className: "ff-left-icon"
|
51709
|
+
}), jsx("div", {
|
51710
|
+
className: "ff-right-icon"
|
51711
|
+
})]
|
51712
|
+
})
|
51713
|
+
}), jsx("div", {
|
51714
|
+
className: "ff-machine-instance ff-machine-env-button",
|
51715
|
+
children: getChildNodeComponent({
|
51716
|
+
isButton: true,
|
51717
|
+
parentNodeData,
|
51718
|
+
parentNodeIndex
|
51719
|
+
})
|
51720
|
+
})]
|
51721
|
+
})
|
51624
51722
|
}) : parentNodeData?.machineInstances?.map((childNodeData, childNodeIndex) => {
|
51625
51723
|
const isFirstLine = childNodeIndex === 0;
|
51626
51724
|
return jsxs("div", {
|
@@ -51683,26 +51781,28 @@ const MachineInstances = ({
|
|
51683
51781
|
})]
|
51684
51782
|
}, ffid())
|
51685
51783
|
}, runLevelExecutionDataSet?.runLevelExecutionDataSetId + ffid()))
|
51686
|
-
}), childNodeIndex === parentNodeData.machineInstances.length - 1 &&
|
51687
|
-
children:
|
51688
|
-
|
51689
|
-
|
51690
|
-
|
51691
|
-
|
51692
|
-
|
51693
|
-
|
51694
|
-
|
51695
|
-
|
51696
|
-
|
51697
|
-
|
51698
|
-
|
51699
|
-
|
51700
|
-
|
51701
|
-
|
51702
|
-
|
51703
|
-
|
51704
|
-
|
51705
|
-
|
51784
|
+
}), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsx(Fragment, {
|
51785
|
+
children: !isReadOnlyMode && jsxs(Fragment, {
|
51786
|
+
children: [jsx("div", {
|
51787
|
+
className: "ff-selectedMachines-connecting-line ff-second-line",
|
51788
|
+
children: jsxs("div", {
|
51789
|
+
className: "ff-line",
|
51790
|
+
children: [jsx("div", {
|
51791
|
+
className: "ff-left-icon"
|
51792
|
+
}), jsx("div", {
|
51793
|
+
className: "ff-right-icon"
|
51794
|
+
})]
|
51795
|
+
})
|
51796
|
+
}), jsx("div", {
|
51797
|
+
className: "ff-machine-instance ff-machine-env-button",
|
51798
|
+
children: getChildNodeComponent({
|
51799
|
+
isButton: true,
|
51800
|
+
parentNodeData,
|
51801
|
+
parentNodeIndex,
|
51802
|
+
childNodeIndex: childNodeIndex + 1
|
51803
|
+
})
|
51804
|
+
})]
|
51805
|
+
})
|
51706
51806
|
})]
|
51707
51807
|
}, ffid());
|
51708
51808
|
})
|
@@ -51714,17 +51814,19 @@ const ConnectingBranch = ({
|
|
51714
51814
|
getChildNodeComponent,
|
51715
51815
|
getParentNodeComponent,
|
51716
51816
|
getParentNodeComponentActionItems,
|
51717
|
-
childNodeCurveHeight = 1.28
|
51817
|
+
childNodeCurveHeight = 1.28,
|
51818
|
+
isReadOnlyMode = false
|
51718
51819
|
}) => {
|
51719
51820
|
const datasetRef = useRef(null);
|
51720
51821
|
const [datasetHeight, setDatasetHeight] = useState(0);
|
51721
51822
|
const [curveHeights, setCurveHeights] = useState([]);
|
51722
51823
|
const itemRefs = useRef([]);
|
51723
51824
|
const calculateVerticalLineHeight = (machineInstances, datasetHeight, gap) => {
|
51724
|
-
|
51725
|
-
return
|
51726
|
-
}
|
51727
|
-
|
51825
|
+
if (machineInstances.length === 1 && isReadOnlyMode) {
|
51826
|
+
return 0;
|
51827
|
+
}
|
51828
|
+
const totalDataSets = machineInstances.reduce((acc, instance, index) => acc + (index !== machineInstances.length - 1 || !isReadOnlyMode ? instance.runLevelExecutionDataSets?.length || 0 : 0), 0);
|
51829
|
+
return totalDataSets * (datasetHeight + gap);
|
51728
51830
|
};
|
51729
51831
|
useEffect(() => {
|
51730
51832
|
if (datasetRef.current) {
|
@@ -51828,11 +51930,12 @@ const ConnectingBranch = ({
|
|
51828
51930
|
curveHeights: curveHeights,
|
51829
51931
|
itemRefs: itemRefs,
|
51830
51932
|
datasetRef: datasetRef,
|
51831
|
-
getChildNodeComponent: getChildNodeComponent
|
51933
|
+
getChildNodeComponent: getChildNodeComponent,
|
51934
|
+
isReadOnlyMode: isReadOnlyMode
|
51832
51935
|
})]
|
51833
51936
|
})]
|
51834
51937
|
}, ffid());
|
51835
|
-
}), jsx("div", {
|
51938
|
+
}), !isReadOnlyMode && jsx("div", {
|
51836
51939
|
className: "ff-select-machine-input",
|
51837
51940
|
style: {
|
51838
51941
|
gridRow: `${currentRow}`
|
@@ -54676,5 +54779,5 @@ async function getFromIndexedDB(key) {
|
|
54676
54779
|
});
|
54677
54780
|
}
|
54678
54781
|
|
54679
|
-
export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, Accordion, AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BASE64_REGEX, BINARY_NUMBER_REGEX, BarChart, BrowserTabs, Button$1 as Button, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, Checkbox, Chip, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_TAG_REGEX, HighlightText, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LINKEDIN_PROFILE_REGEX, LabelEditTextField, LazyLoad, LineChart, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MenuOption, MiniModal, MobileSkin, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, ProgressBar, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, SSN_REGEX, STEP_GROUP_NAME_REGEX, ScriptSwitchButton, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, TIME_REGEX, TWITTER_HANDLE_REGEX, Table$1 as Table, TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, WHITESPACE_REGEX, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getFromIndexedDB, getSequentialPayload, getTreeDetails, handleTreeNodeSect, hasDuplicateFile, rearrangeDragItem, saveFileFromBlob, saveToIndexedDB, throttle, toast, truncateText, useClickOutside, useFileDropzone, useKeyboardActions, useTheme };
|
54782
|
+
export { AADHAAR_REGEX, ALPHABET_ONLY_REGEX, ALPHANUMERIC_REGEX, ALPHANUMERIC_WITH_ROUND_BRACES_REGEX, Accordion, AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BASE64_REGEX, BINARY_NUMBER_REGEX, BarChart, BrowserTabs, Button$1 as Button, CREDIT_CARD_REGEX, CURRENCY_GENERIC_REGEX, Checkbox, Chip, ChooseFile, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, CreateVariableSlider, DATE_REGEX, DECIMAL_NUMBER_REGEX, DRIVING_LICENSE_REGEX, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, ELEMENTS_TRAILING_SPACE_REGEX, ELEMENTS_WHITE_SPACE_REGEX, EMAIL_REGEX, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FILE_EXTENSION_REGEX, FILE_NAME_REGEX, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, GSTIN_REGEX, HEXADECIMAL_NUMBER_REGEX, HEX_COLOR_REGEX, HSL_COLOR_REGEX, HTML_ATTRIBUTE_REGEX, HTML_TAG_REGEX, HighlightText, INDIAN_CURRENCY_REGEX, INDIAN_PASSPORT_REGEX, INDIAN_PHONE_REGEX, INDIAN_PIN_CODE_REGEX, INTERNATIONAL_PHONE_REGEX, IPV4_REGEX, IPV6_REGEX, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LINKEDIN_PROFILE_REGEX, LabelEditTextField, LazyLoad, LineChart, MAC_ADDRESS_REGEX, MEMORY_VALIDATION_REGEX, MachineInputField, MenuOption, MiniModal, MobileSkin, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, NLP_DESCRIPTION_REGEX, NUMBERS_ONLY_REGEX, NUMBER_REGEX, PAN_CARD_REGEX, PARAMETER_ALPHANUMERIC_REGEX, PASSWORD_COMPLEX_REGEX, PASSWORD_SIMPLE_REGEX, PHONE_REGEX, POSTAL_CODE_REGEX, Paper, PhoneInputField, PieChart, PopUpModal, ProgressBar, RGB_COLOR_REGEX, ROMAN_NUMERALS_REGEX, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, SSN_REGEX, STEP_GROUP_NAME_REGEX, ScriptSwitchButton, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, TIME_REGEX, TWITTER_HANDLE_REGEX, Table$1 as Table, TreeTable as TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, UNIT_REGEX, URL_REGEX, USERNAME_REGEX, USERNAME_SPECIAL_REGEX, US_ZIP_CODE_REGEX, UUID_REGEX, VEHICLE_REGISTRATION_REGEX, VariableDropdown, VariableInput, WHITESPACE_REGEX, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getFromIndexedDB, getSequentialPayload, getTreeDetails, handleTreeNodeSect, hasDuplicateFile, rearrangeDragItem, saveFileFromBlob, saveToIndexedDB, throttle, toast, truncateText, useClickOutside, useFileDropzone, useKeyboardActions, useTheme };
|
54680
54783
|
//# sourceMappingURL=index.esm.js.map
|