pollination-react-io 1.40.1 → 1.41.0
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/build/RunDetails/RunContent.types.d.ts +3 -1
- package/build/RunDetails/RunDetails.types.d.ts +3 -1
- package/build/hooks/index.d.ts +1 -0
- package/build/hooks/useWindowDimensions.d.ts +4 -0
- package/build/index.esm.js +139 -68
- package/build/index.esm.js.map +1 -1
- package/build/index.js +139 -67
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -40509,6 +40509,25 @@ var useSendHbjson = function () {
|
|
|
40509
40509
|
});
|
|
40510
40510
|
};
|
|
40511
40511
|
|
|
40512
|
+
var useWindowDimensions = function () {
|
|
40513
|
+
var getDimension = function () {
|
|
40514
|
+
var width = window.innerWidth, height = window.innerHeight;
|
|
40515
|
+
return {
|
|
40516
|
+
width: width,
|
|
40517
|
+
height: height
|
|
40518
|
+
};
|
|
40519
|
+
};
|
|
40520
|
+
var _a = React.useState(getDimension()), dimensions = _a[0], setDimensions = _a[1];
|
|
40521
|
+
React.useEffect(function () {
|
|
40522
|
+
function handleResize() {
|
|
40523
|
+
setDimensions(getDimension());
|
|
40524
|
+
}
|
|
40525
|
+
window.addEventListener('resize', handleResize);
|
|
40526
|
+
return function () { return window.removeEventListener('resize', handleResize); };
|
|
40527
|
+
}, []);
|
|
40528
|
+
return dimensions;
|
|
40529
|
+
};
|
|
40530
|
+
|
|
40512
40531
|
var AuthUser = function (config) {
|
|
40513
40532
|
var authUser = useAPIClient(config).authUser;
|
|
40514
40533
|
return (React__default["default"].createElement(Avatar, { alt: authUser && authUser.name, src: authUser && authUser.picture, href: authUser && "https://app.pollination.cloud/".concat(authUser.username), fallback: authUser
|
|
@@ -46958,7 +46977,7 @@ var SendModel = function (_a) {
|
|
|
46958
46977
|
}], asButtons: true, label: buttonLabel, helpText: "".concat(selOpt ? selOpt.charAt(0).toUpperCase() + selOpt.replace('-', ' ').slice(1) : 'Send', " model.") }));
|
|
46959
46978
|
};
|
|
46960
46979
|
|
|
46961
|
-
var css_248z$3 = ":root {\n --background: #FFFAEE;\n --primary: #1890ff;\n --primary2: #40a9ff;\n --primary1: #cceefe;\n --primary0: #e6f7ff;\n --secondary: #fff566;\n --primary3: #000;\n --success: #46A758;\n --warning: #F76809;\n --danger: #FF4616;\n /* radix-ui/colors */\n --slate1: hsl(206, 30.0%, 98.8%);\n --slate2: hsl(210, 16.7%, 97.6%);\n --slate3: hsl(209, 13.3%, 95.3%);\n --slate4: hsl(209, 12.2%, 93.2%);\n --slate5: hsl(208, 11.7%, 91.1%);\n --slate6: hsl(208, 11.3%, 88.9%);\n --slate7: hsl(207, 11.1%, 85.9%);\n --slate8: hsl(205, 10.7%, 78.0%);\n --slate9: hsl(206, 6.0%, 56.1%);\n --slate10: hsl(206, 5.8%, 52.3%);\n --slate11: hsl(206, 6.0%, 43.5%);\n --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n.spin {\n animation: spin 1s linear 0s infinite;\n}\n\n@keyframes Animation {\n 0% {\n background-position: 200%;\n }\n 50% {\n background-position: 100%;\n }\n 100% {\n background-position: 0%;\n }\n}\n.loading {\n background: linear-gradient(45deg, transparent, var(--primary), 12%, transparent);\n background-size: 200%;\n animation: Animation 3s ease infinite;\n}\n\n@keyframes open {\n from {\n height: 0;\n }\n to {\n height: var(--radix-collapsible-content-height);\n }\n}\n@keyframes close {\n from {\n height: var(--radix-collapsible-content-height);\n }\n to {\n height: 0;\n }\n}\n.collapse-content {\n overflow: hidden;\n font-size: inherit;\n color: inherit;\n}\n\n.collapse-content[data-state=open] {\n animation: open 300ms ease-out;\n}\n\n.collapse-content[data-state=closed] {\n animation: close 300ms ease-out;\n}\n\n.item1 {\n grid-area: accountprj;\n font-size: 1rem;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item2 {\n grid-area: runworkspacedebug;\n text-align: right !important;\n font-size: 1.25rem;\n white-space: nowrap;\n}\n\n.item3 {\n grid-area: studyrun;\n font-size: 1.25rem;\n font-weight: 500;\n white-space: wrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item4 {\n grid-area: date;\n color: var(--slate10);\n font-size: 0.9rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: right !important;\n}\n\n.item5 {\n grid-area: author;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item6 {\n grid-area: recipe;\n white-space: wrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item7 {\n grid-area: description;\n white-space: wrap;\n color: var(--slate10);\n font-size: 0.9rem;\n}\n\n.item8 {\n grid-area: status;\n font-size: 0.9rem;\n}\n\n.status-label {\n font-weight: 500;\n}\n\n.item9 {\n grid-area: time;\n text-align: right !important;\n white-space: wrap;\n}\n\n.item10 {\n grid-area: cpu;\n text-align: right !important;\n white-space: wrap;\n}\n\n.link {\n text-decoration: none;\n color: var(--primary3);\n}\n\n.link:hover {\n color: var(--primary3);\n}\n\n.light-text {\n color: var(--slate10);\n font-size: 0.9rem;\n}\n\n.grid-container {\n display: grid;\n grid-template-areas: \"accountprj accountprj accountprj accountprj accountprj runworkspacedebug\" \"studyrun studyrun studyrun studyrun date date\" \"author recipe recipe recipe recipe recipe\" \"status status status status cpu time\" \"description description description description description description\";\n gap: 0.35rem;\n border: 0.1rem solid;\n align-items: center;\n padding: 0.35rem;\n transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;\n grid-template-rows: 52px 38px 46px 46px auto;\n border-radius: 6px;\n line-height: 1.5;\n}\n\n.grid-container:hover {\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px -2px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px, rgba(0, 0, 0, 0.09) 0px 5px 12px 4px;\n cursor: pointer;\n}\n\n.disable-click {\n box-shadow: none !important;\n cursor: default !important;\n}\n\n.grid-container > div {\n text-align: left;\n padding: 1rem;\n vertical-align: middle;\n}\n\n.description-expander {\n all: unset;\n}\n\n.description-expander:focus {\n outline: 0 !important;\n}\n\n@media (max-width: 600px) {\n .grid-container {\n display: grid;\n grid-template-areas: \"accountprj accountprj accountprj accountprj accountprj runworkspacedebug\" \"studyrun studyrun studyrun
|
|
46980
|
+
var css_248z$3 = ":root {\n --background: #FFFAEE;\n --primary: #1890ff;\n --primary2: #40a9ff;\n --primary1: #cceefe;\n --primary0: #e6f7ff;\n --secondary: #fff566;\n --primary3: #000;\n --success: #46A758;\n --warning: #F76809;\n --danger: #FF4616;\n /* radix-ui/colors */\n --slate1: hsl(206, 30.0%, 98.8%);\n --slate2: hsl(210, 16.7%, 97.6%);\n --slate3: hsl(209, 13.3%, 95.3%);\n --slate4: hsl(209, 12.2%, 93.2%);\n --slate5: hsl(208, 11.7%, 91.1%);\n --slate6: hsl(208, 11.3%, 88.9%);\n --slate7: hsl(207, 11.1%, 85.9%);\n --slate8: hsl(205, 10.7%, 78.0%);\n --slate9: hsl(206, 6.0%, 56.1%);\n --slate10: hsl(206, 5.8%, 52.3%);\n --slate11: hsl(206, 6.0%, 43.5%);\n --slate12: hsl(206, 24.0%, 9.0%);\n}\n\n@keyframes spin {\n from {\n transform: rotate(0);\n }\n to {\n transform: rotate(360deg);\n }\n}\n.spin {\n animation: spin 1s linear 0s infinite;\n}\n\n@keyframes Animation {\n 0% {\n background-position: 200%;\n }\n 50% {\n background-position: 100%;\n }\n 100% {\n background-position: 0%;\n }\n}\n.loading {\n background: linear-gradient(45deg, transparent, var(--primary), 12%, transparent);\n background-size: 200%;\n animation: Animation 3s ease infinite;\n}\n\n@keyframes open {\n from {\n height: 0;\n }\n to {\n height: var(--radix-collapsible-content-height);\n }\n}\n@keyframes close {\n from {\n height: var(--radix-collapsible-content-height);\n }\n to {\n height: 0;\n }\n}\n.collapse-content {\n overflow: hidden;\n font-size: inherit;\n color: inherit;\n}\n\n.collapse-content[data-state=open] {\n animation: open 300ms ease-out;\n}\n\n.collapse-content[data-state=closed] {\n animation: close 300ms ease-out;\n}\n\n.item1 {\n grid-area: accountprj;\n font-size: 1rem;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item2 {\n grid-area: runworkspacedebug;\n text-align: right !important;\n font-size: 1.25rem;\n white-space: nowrap;\n}\n\n.item3 {\n grid-area: studyrun;\n font-size: 1.25rem;\n font-weight: 500;\n white-space: wrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item4 {\n grid-area: date;\n color: var(--slate10);\n font-size: 0.9rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-align: right !important;\n}\n\n.item5 {\n grid-area: author;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item6 {\n grid-area: recipe;\n white-space: wrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item7 {\n grid-area: description;\n white-space: wrap;\n color: var(--slate10);\n font-size: 0.9rem;\n}\n\n.item8 {\n grid-area: status;\n font-size: 0.9rem;\n}\n\n.status-label {\n font-weight: 500;\n}\n\n.item9 {\n grid-area: time;\n text-align: right !important;\n white-space: wrap;\n}\n\n.item10 {\n grid-area: cpu;\n text-align: right !important;\n white-space: wrap;\n}\n\n.link {\n text-decoration: none;\n color: var(--primary3);\n}\n\n.link:hover {\n color: var(--primary3);\n}\n\n.light-text {\n color: var(--slate10);\n font-size: 0.9rem;\n}\n\n.grid-container {\n display: grid;\n grid-template-areas: \"accountprj accountprj accountprj accountprj accountprj runworkspacedebug\" \"studyrun studyrun studyrun studyrun date date\" \"author recipe recipe recipe recipe recipe\" \"status status status status cpu time\" \"description description description description description description\";\n gap: 0.35rem;\n border: 0.1rem solid;\n align-items: center;\n padding: 0.35rem;\n transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;\n grid-template-rows: 52px 38px 46px 46px auto;\n border-radius: 6px;\n line-height: 1.5;\n}\n\n.grid-container:hover {\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px -2px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px, rgba(0, 0, 0, 0.09) 0px 5px 12px 4px;\n cursor: pointer;\n}\n\n.disable-click {\n box-shadow: none !important;\n cursor: default !important;\n}\n\n.grid-container > div {\n text-align: left;\n padding: 1rem;\n vertical-align: middle;\n}\n\n.description-expander {\n all: unset;\n}\n\n.description-expander:focus {\n outline: 0 !important;\n}\n\n@media (max-width: 600px) {\n .grid-container {\n display: grid;\n grid-template-areas: \"accountprj accountprj accountprj accountprj accountprj runworkspacedebug\" \"studyrun studyrun studyrun date date date\" \"author author author recipe recipe recipe\" \"time time status status cpu cpu\" \"description description description description description description\";\n gap: 0.35rem;\n border: 0.1rem solid;\n align-items: center;\n padding: 0.15rem;\n transition: box-shadow 0.3s;\n grid-template-rows: 52px 52px 32px 52px auto;\n }\n .item1 {\n text-align: left !important;\n }\n .item2 {\n text-align: right !important;\n font-size: 1rem;\n white-space: nowrap;\n }\n .item3, .item4 {\n text-align: center !important;\n }\n .item5 {\n font-size: 0.8rem;\n }\n .item6 {\n white-space: nowrap;\n font-size: 0.8rem;\n }\n .item7 {\n font-size: 0.8rem;\n text-align: center !important;\n }\n .item8 {\n font-size: 1rem;\n text-align: center !important;\n }\n .item9 {\n text-align: left !important;\n font-size: 1rem;\n white-space: nowrap;\n }\n .item10 {\n text-align: right !important;\n }\n .grid-container > div {\n text-align: left;\n vertical-align: middle;\n }\n}";
|
|
46962
46981
|
styleInject(css_248z$3);
|
|
46963
46982
|
|
|
46964
46983
|
var IconContext = /*#__PURE__*/React.createContext({});
|
|
@@ -48454,9 +48473,10 @@ var StudyCard = function (_a) {
|
|
|
48454
48473
|
// Fetch _study
|
|
48455
48474
|
var _f = useJobs(client), fetchJob = _f.fetchJob, getDuration = _f.getDuration, statusMap = _f.statusMap;
|
|
48456
48475
|
var listRuns = useRuns(client).listRuns;
|
|
48457
|
-
var _g =
|
|
48476
|
+
var _g = useWindowDimensions(), width = _g.width; _g.height;
|
|
48477
|
+
var _h = React.useState(false), open = _h[0], setOpen = _h[1];
|
|
48458
48478
|
// From job to run
|
|
48459
|
-
var
|
|
48479
|
+
var _j = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
|
|
48460
48480
|
revalidateOnFocus: false,
|
|
48461
48481
|
refreshInterval: !_study || _study.status.finished_at ? undefined : 5000,
|
|
48462
48482
|
fallbackData: _study,
|
|
@@ -48477,7 +48497,7 @@ var StudyCard = function (_a) {
|
|
|
48477
48497
|
})
|
|
48478
48498
|
.catch(function () { setRun(undefined); });
|
|
48479
48499
|
}
|
|
48480
|
-
}), study =
|
|
48500
|
+
}), study = _j.data; _j.error; _j.isValidating;
|
|
48481
48501
|
var total = React.useMemo(function () {
|
|
48482
48502
|
if (!study)
|
|
48483
48503
|
return undefined;
|
|
@@ -48500,8 +48520,8 @@ var StudyCard = function (_a) {
|
|
|
48500
48520
|
}
|
|
48501
48521
|
return study.status.status.toLocaleLowerCase();
|
|
48502
48522
|
}, [study]);
|
|
48503
|
-
var
|
|
48504
|
-
var
|
|
48523
|
+
var _k = React.useState(), run = _k[0], setRun = _k[1];
|
|
48524
|
+
var _l = React.useState(getDuration(study)), duration = _l[0], setDuration = _l[1];
|
|
48505
48525
|
React.useEffect(function () {
|
|
48506
48526
|
setRun(undefined);
|
|
48507
48527
|
if (!study)
|
|
@@ -48518,16 +48538,19 @@ var StudyCard = function (_a) {
|
|
|
48518
48538
|
/*
|
|
48519
48539
|
* Manage hover
|
|
48520
48540
|
*/
|
|
48521
|
-
var
|
|
48541
|
+
var _m = React.useState({
|
|
48522
48542
|
account: false,
|
|
48523
48543
|
project: false,
|
|
48524
|
-
|
|
48525
|
-
|
|
48526
|
-
|
|
48544
|
+
details: false,
|
|
48545
|
+
workspace: false,
|
|
48546
|
+
debug: false,
|
|
48547
|
+
detailsOver: false,
|
|
48548
|
+
workspaceOver: false,
|
|
48549
|
+
debugOver: false,
|
|
48527
48550
|
author: false,
|
|
48528
48551
|
recipe: false,
|
|
48529
48552
|
info: false
|
|
48530
|
-
}), hover =
|
|
48553
|
+
}), hover = _m[0], setHover = _m[1];
|
|
48531
48554
|
var toggleHover = function (event, inputId, value) {
|
|
48532
48555
|
if (inputId === void 0) { inputId = undefined; }
|
|
48533
48556
|
if (value === void 0) { value = false; }
|
|
@@ -48560,16 +48583,43 @@ var StudyCard = function (_a) {
|
|
|
48560
48583
|
(study && !run) && total == 1 && React__default["default"].createElement(LoadingOutlined$1, null),
|
|
48561
48584
|
study && run &&
|
|
48562
48585
|
React__default["default"].createElement("div", null,
|
|
48563
|
-
React__default["default"].createElement(
|
|
48564
|
-
|
|
48565
|
-
|
|
48566
|
-
|
|
48567
|
-
|
|
48568
|
-
|
|
48586
|
+
React__default["default"].createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
|
|
48587
|
+
e.stopPropagation();
|
|
48588
|
+
document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=info");
|
|
48589
|
+
}, onMouseOver: function (e) {
|
|
48590
|
+
toggleHover(e, 'detailsOver', true);
|
|
48591
|
+
}, onMouseLeave: function (e) {
|
|
48592
|
+
toggleHover(e, 'detailsOver', false);
|
|
48593
|
+
}, style: { marginRight: '0.75rem',
|
|
48594
|
+
color: "".concat((hover.details || hover.detailsOver) ? '#40a9ff' : '#000') } }),
|
|
48595
|
+
React__default["default"].createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
|
|
48596
|
+
e.stopPropagation();
|
|
48597
|
+
document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=workspace&path=runs/").concat(run.id);
|
|
48598
|
+
}, onMouseOver: function (e) {
|
|
48599
|
+
toggleHover(e, 'workspaceOver', true);
|
|
48600
|
+
}, onMouseLeave: function (e) {
|
|
48601
|
+
toggleHover(e, 'workspaceOver', false);
|
|
48602
|
+
}, style: { marginRight: '0.75rem',
|
|
48603
|
+
color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } }),
|
|
48604
|
+
React__default["default"].createElement(PartitionOutlined$1, { className: 'link', onClick: function (e) {
|
|
48605
|
+
e.stopPropagation();
|
|
48606
|
+
document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=debug");
|
|
48607
|
+
}, onMouseOver: function (e) {
|
|
48608
|
+
toggleHover(e, 'debugOver', true);
|
|
48609
|
+
}, onMouseLeave: function (e) {
|
|
48610
|
+
toggleHover(e, 'debugOver', false);
|
|
48611
|
+
}, style: { color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } })),
|
|
48569
48612
|
(study && total > 1) &&
|
|
48570
48613
|
React__default["default"].createElement("div", null,
|
|
48571
|
-
React__default["default"].createElement(
|
|
48572
|
-
|
|
48614
|
+
React__default["default"].createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
|
|
48615
|
+
e.stopPropagation();
|
|
48616
|
+
document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/workspace");
|
|
48617
|
+
}, onMouseOver: function (e) {
|
|
48618
|
+
toggleHover(e, 'workspaceOver', true);
|
|
48619
|
+
}, onMouseLeave: function (e) {
|
|
48620
|
+
toggleHover(e, 'workspaceOver', false);
|
|
48621
|
+
}, style: { marginRight: '0.75rem',
|
|
48622
|
+
color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } }))),
|
|
48573
48623
|
React__default["default"].createElement("div", { className: 'item3' },
|
|
48574
48624
|
React__default["default"].createElement("div", null,
|
|
48575
48625
|
study ? (_d = study.spec.name) !== null && _d !== void 0 ? _d : "Study: ".concat(study.id) : '--',
|
|
@@ -48582,11 +48632,11 @@ var StudyCard = function (_a) {
|
|
|
48582
48632
|
React__default["default"].createElement("div", { className: 'item4' }, study ? dayjs_min(study.status.started_at).format('[on] MMM DD YYYY') : '--'),
|
|
48583
48633
|
React__default["default"].createElement("div", { className: 'item5' },
|
|
48584
48634
|
React__default["default"].createElement("span", { style: { marginRight: '0.75rem' } },
|
|
48585
|
-
React__default["default"].createElement(Avatar, { src: study ? study.author.picture_url : '', size: 24 })),
|
|
48635
|
+
React__default["default"].createElement(Avatar, { src: study ? study.author.picture_url : '', size: 24, color: hover.author ? '#40a9ff' : undefined })),
|
|
48586
48636
|
React__default["default"].createElement("a", { className: 'link', href: study ? "/".concat(study.author.name) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'author', style: hover.author ? { color: '#40a9ff' } : {} }, study ? ((_e = study.author.display_name) !== null && _e !== void 0 ? _e : study.author.name) : '--')),
|
|
48587
48637
|
React__default["default"].createElement("div", { className: 'item6' },
|
|
48588
48638
|
React__default["default"].createElement("span", { style: { marginRight: '0.75rem' } },
|
|
48589
|
-
React__default["default"].createElement(Avatar, { src: study ? study.recipe.metadata.icon : '', size: 24 })),
|
|
48639
|
+
React__default["default"].createElement(Avatar, { src: study ? study.recipe.metadata.icon : '', size: 24, color: hover.recipe ? '#40a9ff' : undefined })),
|
|
48590
48640
|
React__default["default"].createElement("a", { className: 'link', href: study ? recipeLinkFromSource(study.recipe.source) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'recipe', style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
|
|
48591
48641
|
study && React__default["default"].createElement("span", { className: 'light-text' },
|
|
48592
48642
|
" ",
|
|
@@ -48594,15 +48644,15 @@ var StudyCard = function (_a) {
|
|
|
48594
48644
|
React__default["default"].createElement("div", { className: 'item8' },
|
|
48595
48645
|
React__default["default"].createElement("span", { className: 'status-label', style: { marginRight: '0.75rem' } }, study ? status.charAt(0).toUpperCase() + status.slice(1) : '--'),
|
|
48596
48646
|
React__default["default"].createElement("span", { className: 'light-text' },
|
|
48597
|
-
(study && total == 1) && run &&
|
|
48647
|
+
(study && total == 1) && run && width > 600 &&
|
|
48598
48648
|
"".concat(run.meta.progress.completed, " / ").concat(run.meta.progress.total, " steps"),
|
|
48599
|
-
(study && total > 1) &&
|
|
48649
|
+
(study && total > 1) && width > 600 &&
|
|
48600
48650
|
"".concat(study.status.runs_completed, " / ").concat(total, " runs"))),
|
|
48601
48651
|
React__default["default"].createElement("div", { className: 'item9' },
|
|
48602
|
-
React__default["default"].createElement(Cpu$1, { size: 18, style: { marginRight: '0.
|
|
48652
|
+
React__default["default"].createElement(Cpu$1, { size: 18, style: { marginRight: '0.15rem' } }),
|
|
48603
48653
|
React__default["default"].createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration$1(dayjs_min.duration(study.resources_duration.cpu, 'seconds'))) : '--')),
|
|
48604
48654
|
React__default["default"].createElement("div", { className: 'item10' },
|
|
48605
|
-
React__default["default"].createElement(Clock$1, { size: 18, style: { marginRight: '0.
|
|
48655
|
+
React__default["default"].createElement(Clock$1, { size: 18, style: { marginRight: '0.15rem' } }),
|
|
48606
48656
|
React__default["default"].createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration$1(duration)) : '--')),
|
|
48607
48657
|
open && React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
48608
48658
|
React__default["default"].createElement("div", { className: 'item7' }, study ? study.spec.description : '--'))));
|
|
@@ -48621,11 +48671,12 @@ var RunCard = function (_a) {
|
|
|
48621
48671
|
*/
|
|
48622
48672
|
var fetchJob = useJobs(client).fetchJob;
|
|
48623
48673
|
var _f = useRuns(client), fetchRun = _f.fetchRun, statusMap = _f.statusMap, getDuration = _f.getDuration;
|
|
48624
|
-
var _g =
|
|
48674
|
+
var _g = useWindowDimensions(), width = _g.width; _g.height;
|
|
48675
|
+
var _h = React.useState(false), open = _h[0], setOpen = _h[1];
|
|
48625
48676
|
/*
|
|
48626
48677
|
* From run to job
|
|
48627
48678
|
*/
|
|
48628
|
-
var
|
|
48679
|
+
var _j = useSWR(authUser && _run ? [projectOwner, projectName, _run.id] : undefined, fetchRun, {
|
|
48629
48680
|
revalidateOnFocus: false,
|
|
48630
48681
|
refreshInterval: !_run || _run.status.finished_at ? undefined : 5000,
|
|
48631
48682
|
fallbackData: _run,
|
|
@@ -48637,14 +48688,14 @@ var RunCard = function (_a) {
|
|
|
48637
48688
|
})
|
|
48638
48689
|
.catch(function () { setStudy(undefined); });
|
|
48639
48690
|
}
|
|
48640
|
-
}), run =
|
|
48691
|
+
}), run = _j.data; _j.error; _j.isValidating;
|
|
48641
48692
|
var status = React.useMemo(function () {
|
|
48642
48693
|
if (!run)
|
|
48643
48694
|
return undefined;
|
|
48644
48695
|
return run.status.status;
|
|
48645
48696
|
}, [run]);
|
|
48646
|
-
var
|
|
48647
|
-
var
|
|
48697
|
+
var _k = React.useState(), study = _k[0], setStudy = _k[1];
|
|
48698
|
+
var _l = React.useState(getDuration(run)), duration = _l[0], setDuration = _l[1];
|
|
48648
48699
|
React.useEffect(function () {
|
|
48649
48700
|
if (!run)
|
|
48650
48701
|
return undefined;
|
|
@@ -48660,16 +48711,19 @@ var RunCard = function (_a) {
|
|
|
48660
48711
|
/*
|
|
48661
48712
|
* Manage hover
|
|
48662
48713
|
*/
|
|
48663
|
-
var
|
|
48714
|
+
var _m = React.useState({
|
|
48664
48715
|
account: false,
|
|
48665
48716
|
project: false,
|
|
48666
|
-
|
|
48667
|
-
|
|
48668
|
-
|
|
48717
|
+
details: false,
|
|
48718
|
+
workspace: false,
|
|
48719
|
+
debug: false,
|
|
48720
|
+
detailsOver: false,
|
|
48721
|
+
workspaceOver: false,
|
|
48722
|
+
debugOver: false,
|
|
48669
48723
|
author: false,
|
|
48670
48724
|
recipe: false,
|
|
48671
48725
|
info: false
|
|
48672
|
-
}), hover =
|
|
48726
|
+
}), hover = _m[0], setHover = _m[1];
|
|
48673
48727
|
var toggleHover = function (event, inputId, value) {
|
|
48674
48728
|
if (inputId === void 0) { inputId = undefined; }
|
|
48675
48729
|
if (value === void 0) { value = false; }
|
|
@@ -48696,27 +48750,41 @@ var RunCard = function (_a) {
|
|
|
48696
48750
|
!study && run && React__default["default"].createElement(LoadingOutlined$1, null),
|
|
48697
48751
|
run && study &&
|
|
48698
48752
|
React__default["default"].createElement("div", null,
|
|
48699
|
-
React__default["default"].createElement(
|
|
48700
|
-
// href={`/${projectOwner}/projects/${projectName}/studies/${study.id}/runs/${run.id}`}
|
|
48701
|
-
onClick: function (e) {
|
|
48753
|
+
React__default["default"].createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
|
|
48702
48754
|
e.stopPropagation();
|
|
48703
|
-
getValue('
|
|
48704
|
-
|
|
48705
|
-
|
|
48706
|
-
|
|
48707
|
-
|
|
48708
|
-
|
|
48755
|
+
getValue('details');
|
|
48756
|
+
toggleHover(e, 'workspace', false);
|
|
48757
|
+
toggleHover(e, 'details', true);
|
|
48758
|
+
toggleHover(e, 'debug', false);
|
|
48759
|
+
}, onMouseOver: function (e) {
|
|
48760
|
+
toggleHover(e, 'detailsOver', true);
|
|
48761
|
+
}, onMouseLeave: function (e) {
|
|
48762
|
+
toggleHover(e, 'detailsOver', false);
|
|
48763
|
+
}, style: { marginRight: '0.75rem',
|
|
48764
|
+
color: "".concat((hover.details || hover.detailsOver) ? '#40a9ff' : '#000') } }),
|
|
48765
|
+
React__default["default"].createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
|
|
48709
48766
|
e.stopPropagation();
|
|
48710
48767
|
getValue('workspace');
|
|
48711
|
-
|
|
48712
|
-
|
|
48713
|
-
|
|
48714
|
-
|
|
48715
|
-
|
|
48768
|
+
toggleHover(e, 'workspace', true);
|
|
48769
|
+
toggleHover(e, 'details', false);
|
|
48770
|
+
toggleHover(e, 'debug', false);
|
|
48771
|
+
}, onMouseOver: function (e) {
|
|
48772
|
+
toggleHover(e, 'workspaceOver', true);
|
|
48773
|
+
}, onMouseLeave: function (e) {
|
|
48774
|
+
toggleHover(e, 'workspaceOver', false);
|
|
48775
|
+
}, style: { marginRight: '0.75rem',
|
|
48776
|
+
color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } }),
|
|
48777
|
+
React__default["default"].createElement(PartitionOutlined$1, { className: 'link', onClick: function (e) {
|
|
48716
48778
|
e.stopPropagation();
|
|
48717
48779
|
getValue('debug');
|
|
48718
|
-
|
|
48719
|
-
|
|
48780
|
+
toggleHover(e, 'workspace', false);
|
|
48781
|
+
toggleHover(e, 'details', false);
|
|
48782
|
+
toggleHover(e, 'debug', true);
|
|
48783
|
+
}, onMouseOver: function (e) {
|
|
48784
|
+
toggleHover(e, 'debugOver', true);
|
|
48785
|
+
}, onMouseLeave: function (e) {
|
|
48786
|
+
toggleHover(e, 'debugOver', false);
|
|
48787
|
+
}, style: { color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } }))),
|
|
48720
48788
|
React__default["default"].createElement("div", { className: 'item3' },
|
|
48721
48789
|
React__default["default"].createElement("div", null,
|
|
48722
48790
|
study ? (_d = study.spec.name) !== null && _d !== void 0 ? _d : "Study: ".concat(study.id) : '--',
|
|
@@ -48728,24 +48796,24 @@ var RunCard = function (_a) {
|
|
|
48728
48796
|
React__default["default"].createElement("div", { className: 'item4' }, study ? dayjs_min(study.status.started_at).format('[on] MMM DD YYYY') : '--'),
|
|
48729
48797
|
React__default["default"].createElement("div", { className: 'item5' },
|
|
48730
48798
|
React__default["default"].createElement("span", { style: { marginRight: '0.75rem' } },
|
|
48731
|
-
React__default["default"].createElement(Avatar, { src: study ? study.author.picture_url : '', size: 24 })),
|
|
48799
|
+
React__default["default"].createElement(Avatar, { color: hover.author ? '#40a9ff' : undefined, src: study ? study.author.picture_url : '', size: 24 })),
|
|
48732
48800
|
React__default["default"].createElement("a", { className: 'link', href: study ? "/".concat(study.author.name) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'author', style: hover.author ? { color: '#40a9ff' } : {} }, study ? ((_e = study.author.display_name) !== null && _e !== void 0 ? _e : study.author.name) : '--')),
|
|
48733
48801
|
React__default["default"].createElement("div", { className: 'item6' },
|
|
48734
48802
|
React__default["default"].createElement("span", { style: { marginRight: '0.75rem' } },
|
|
48735
|
-
React__default["default"].createElement(Avatar, { src: study ? study.recipe.metadata.icon : '', size: 24 })),
|
|
48803
|
+
React__default["default"].createElement(Avatar, { color: hover.recipe ? '#40a9ff' : undefined, src: study ? study.recipe.metadata.icon : '', size: 24 })),
|
|
48736
48804
|
React__default["default"].createElement("a", { className: 'link', href: study ? recipeLinkFromSource(study.recipe.source) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'recipe', style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
|
|
48737
48805
|
study && React__default["default"].createElement("span", { className: 'light-text' },
|
|
48738
48806
|
" ",
|
|
48739
48807
|
study.recipe.metadata.tag)),
|
|
48740
48808
|
React__default["default"].createElement("div", { className: 'item8' },
|
|
48741
48809
|
React__default["default"].createElement("span", { className: 'status-label', style: { marginRight: '0.75rem' } }, study ? status : '--'),
|
|
48742
|
-
React__default["default"].createElement("span", { className: 'light-text' }, study && run &&
|
|
48810
|
+
React__default["default"].createElement("span", { className: 'light-text' }, study && run && width > 600 &&
|
|
48743
48811
|
"".concat(run.meta.progress.completed, " / ").concat(run.meta.progress.total, " steps"))),
|
|
48744
48812
|
React__default["default"].createElement("div", { className: 'item9' },
|
|
48745
|
-
React__default["default"].createElement(Cpu$1, { size: 18, style: { marginRight: '0.
|
|
48813
|
+
React__default["default"].createElement(Cpu$1, { size: 18, style: { marginRight: '0.15rem' } }),
|
|
48746
48814
|
React__default["default"].createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration(dayjs_min.duration(run.meta.resources_duration.cpu, 'seconds'))) : '--')),
|
|
48747
48815
|
React__default["default"].createElement("div", { className: 'item10' },
|
|
48748
|
-
React__default["default"].createElement(Clock$1, { size: 18, style: { marginRight: '0.
|
|
48816
|
+
React__default["default"].createElement(Clock$1, { size: 18, style: { marginRight: '0.15rem' } }),
|
|
48749
48817
|
React__default["default"].createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration(duration)) : '--')),
|
|
48750
48818
|
open && React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
48751
48819
|
React__default["default"].createElement("div", { className: 'item7' }, study ? study.spec.description : '--'))));
|
|
@@ -48899,14 +48967,14 @@ var css_248z = ":root {\n --background: #FFFAEE;\n --primary: #1890ff;\n --pr
|
|
|
48899
48967
|
styleInject(css_248z);
|
|
48900
48968
|
|
|
48901
48969
|
var RunContent = function (_a) {
|
|
48902
|
-
var inputData = _a.inputData, projectOwner = _a.projectOwner, projectName = _a.projectName, studyId = _a.studyId, runId = _a.runId, client = _a.client, title = _a.title, style = _a.style,
|
|
48970
|
+
var inputData = _a.inputData, projectOwner = _a.projectOwner, projectName = _a.projectName, studyId = _a.studyId, runId = _a.runId, client = _a.client, title = _a.title, style = _a.style, getFileCard = _a.getFileCard, getFolderCard = _a.getFolderCard;
|
|
48903
48971
|
var downloadArtifact = useArtifacts(projectOwner, projectName, client).downloadArtifact;
|
|
48904
48972
|
var fetchAndSet = function (url, card) {
|
|
48905
48973
|
fetch(url)
|
|
48906
48974
|
.then(function (response) { return response.blob()
|
|
48907
48975
|
.then(function (blob) {
|
|
48908
48976
|
blob.type;
|
|
48909
|
-
|
|
48977
|
+
getFileCard(__assign(__assign({}, card), { file: blob }));
|
|
48910
48978
|
}); })
|
|
48911
48979
|
.catch(function () { });
|
|
48912
48980
|
};
|
|
@@ -48957,23 +49025,26 @@ var RunContent = function (_a) {
|
|
|
48957
49025
|
// Generate Blob on click
|
|
48958
49026
|
studyId && downloadArtifact(card.path, studyId)
|
|
48959
49027
|
.then(function (url) { return fetchAndSet(url, card); })
|
|
48960
|
-
.catch(function () { return
|
|
49028
|
+
.catch(function () { return getFileCard(__assign(__assign({}, card), { file: undefined })); });
|
|
48961
49029
|
}
|
|
48962
49030
|
else {
|
|
48963
49031
|
// TODO: Local later...
|
|
48964
|
-
|
|
49032
|
+
getFileCard(__assign(__assign({}, card), { file: card.path }));
|
|
48965
49033
|
}
|
|
48966
49034
|
};
|
|
48967
49035
|
/**
|
|
48968
49036
|
* Click event handler of the folder card
|
|
48969
|
-
* @param card
|
|
49037
|
+
* @param card Folder card props
|
|
48970
49038
|
*/
|
|
48971
49039
|
var onFolderClicked = function (card) {
|
|
48972
49040
|
if (isCloud) {
|
|
48973
|
-
|
|
49041
|
+
getFolderCard(__assign({}, card));
|
|
49042
|
+
// window.location.href = `/${projectOwner}/projects/${projectName}/studies/${studyId}/runs/${runId}/workspace?path=${card.path}`
|
|
48974
49043
|
}
|
|
48975
49044
|
else {
|
|
48976
|
-
|
|
49045
|
+
// TODO: Fix it later when Local is ready
|
|
49046
|
+
getFolderCard(__assign({}, card));
|
|
49047
|
+
// alert(runId.concat('/').concat(card.path))
|
|
48977
49048
|
}
|
|
48978
49049
|
};
|
|
48979
49050
|
return React__default["default"].createElement("div", { className: 'cards-container', style: __assign({}, style) },
|
|
@@ -48998,7 +49069,7 @@ var RunContent = function (_a) {
|
|
|
48998
49069
|
var RunDetails = function (_a) {
|
|
48999
49070
|
var projectName = _a.projectName, projectOwner = _a.projectOwner, run = _a.run, // Cloud and Local
|
|
49000
49071
|
runId = _a.runId; // TODO: delete it if RUN JSON has the field
|
|
49001
|
-
_a.authUser; var client = _a.client, style = _a.style,
|
|
49072
|
+
_a.authUser; var client = _a.client, style = _a.style, getFileCard = _a.getFileCard, getFolderCard = _a.getFolderCard;
|
|
49002
49073
|
var _b = React.useState([]), extraInputs = _b[0], setExtraInputs = _b[1];
|
|
49003
49074
|
var _c = React.useState([]), recipeInputs = _c[0], setRecipeInputs = _c[1];
|
|
49004
49075
|
var _d = React.useState([]), outputs = _d[0], setOutputs = _d[1];
|
|
@@ -49031,11 +49102,11 @@ var RunDetails = function (_a) {
|
|
|
49031
49102
|
}, [currRun]);
|
|
49032
49103
|
return (React__default["default"].createElement("div", null,
|
|
49033
49104
|
outputs &&
|
|
49034
|
-
React__default["default"].createElement(RunContent, { title: 'Outputs', inputData: outputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style,
|
|
49105
|
+
React__default["default"].createElement(RunContent, { title: 'Outputs', inputData: outputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard }),
|
|
49035
49106
|
recipeInputs &&
|
|
49036
|
-
React__default["default"].createElement(RunContent, { title: 'Inputs', inputData: recipeInputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style,
|
|
49107
|
+
React__default["default"].createElement(RunContent, { title: 'Inputs', inputData: recipeInputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard }),
|
|
49037
49108
|
extraInputs && extraInputs.length > 0 &&
|
|
49038
|
-
React__default["default"].createElement(RunContent, { title: 'Extra Inputs', inputData: extraInputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style,
|
|
49109
|
+
React__default["default"].createElement(RunContent, { title: 'Extra Inputs', inputData: extraInputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard })));
|
|
49039
49110
|
};
|
|
49040
49111
|
|
|
49041
49112
|
exports.APIClient = APIClient;
|
|
@@ -49096,4 +49167,5 @@ exports.useRunCommand = useRunCommand;
|
|
|
49096
49167
|
exports.useRuns = useRuns;
|
|
49097
49168
|
exports.useSendHbjson = useSendHbjson;
|
|
49098
49169
|
exports.useSendMessage = useSendMessage;
|
|
49170
|
+
exports.useWindowDimensions = useWindowDimensions;
|
|
49099
49171
|
//# sourceMappingURL=index.js.map
|