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.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':
|
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:
|
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:
|
14645
|
-
children: [jsxRuntime.
|
14646
|
-
|
14647
|
-
|
14648
|
-
|
14649
|
-
|
14650
|
-
|
14651
|
-
|
14652
|
-
|
14653
|
-
|
14654
|
-
|
14655
|
-
|
14656
|
-
|
14657
|
-
|
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
|
-
|
14692
|
-
|
14693
|
-
|
14694
|
-
|
14695
|
-
|
14696
|
-
|
14697
|
-
|
14698
|
-
|
14699
|
-
|
14700
|
-
|
14701
|
-
|
14702
|
-
|
14703
|
-
|
14704
|
-
|
14705
|
-
|
14706
|
-
|
14707
|
-
|
14708
|
-
|
14709
|
-
}
|
14710
|
-
|
14711
|
-
|
14712
|
-
|
14713
|
-
|
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
|
-
})
|
14726
|
-
|
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
|
-
|
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) =>
|
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
|
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.
|
30572
|
-
|
30573
|
-
|
30574
|
-
|
30575
|
-
|
30576
|
-
|
30577
|
-
|
30578
|
-
|
30579
|
-
|
30580
|
-
|
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.
|
51626
|
-
children:
|
51627
|
-
|
51628
|
-
|
51629
|
-
|
51630
|
-
|
51631
|
-
|
51632
|
-
|
51633
|
-
|
51634
|
-
|
51635
|
-
|
51636
|
-
|
51637
|
-
|
51638
|
-
|
51639
|
-
|
51640
|
-
|
51641
|
-
|
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.
|
51707
|
-
children:
|
51708
|
-
|
51709
|
-
|
51710
|
-
|
51711
|
-
|
51712
|
-
|
51713
|
-
|
51714
|
-
|
51715
|
-
|
51716
|
-
|
51717
|
-
|
51718
|
-
|
51719
|
-
|
51720
|
-
|
51721
|
-
|
51722
|
-
|
51723
|
-
|
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
|
-
|
51745
|
-
return
|
51746
|
-
}
|
51747
|
-
|
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 =
|
54921
|
+
exports.TableTree = TreeTable;
|
54819
54922
|
exports.TableWithAccordion = TableWithAccordion;
|
54820
54923
|
exports.Tabs = Tabs;
|
54821
54924
|
exports.TextArea = Textarea;
|