pollination-react-io 1.42.3 → 1.44.0

package/build/Cards/StudyCard.types.d.ts

@@ -1,6 +1,10 @@
 import { CloudJob, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
+export declare enum JobTabs {
+    details = "details",
+    workspace = "workspace"
+}
 export interface StudyCardProps {
     projectOwner: string;
     projectName: string;
@@ -9,4 +13,7 @@ export interface StudyCardProps {
     authUser?: UserPrivate;
     client?: APIClient;
     enableClick?: boolean;
+    getValue?: (any: any) => any;
+    defaultTab?: JobTabs;
+    enableLink?: boolean;
 }

package/build/index.esm.js

@@ -46988,6 +46988,12 @@ var SendModel = function (_a) {
             }], asButtons: true, label: buttonLabel, helpText: "".concat(selOpt ? selOpt.charAt(0).toUpperCase() + selOpt.replace('-', ' ').slice(1) : 'Send', " model.") }));
 };
 
+var JobTabs;
+(function (JobTabs) {
+    JobTabs["details"] = "details";
+    JobTabs["workspace"] = "workspace";
+})(JobTabs || (JobTabs = {}));
+
 var css_248z$4 = ":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 studyrun studyrun studyrun\" \"date date date 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 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}";
 styleInject(css_248z$4);
 
@@ -48479,15 +48485,16 @@ var formatDuration$1 = function (duration) {
     return "".concat(duration.days() > 0 ? "".concat(duration.days(), " day").concat(duration.days() !== 1 ? 's' : '', " and ") : '', " ").concat(duration.format('HH:mm:ss'));
 };
 var StudyCard = function (_a) {
-    var _b, _c, _d, _e;
-    var projectName = _a.projectName, projectOwner = _a.projectOwner, _study = _a.study, style = _a.style, authUser = _a.authUser, client = _a.client, enableClick = _a.enableClick;
+    var _b;
+    var _c, _d, _e, _f;
+    var projectName = _a.projectName, projectOwner = _a.projectOwner, _study = _a.study, style = _a.style, authUser = _a.authUser, client = _a.client, enableClick = _a.enableClick, _g = _a.getValue, getValue = _g === void 0 ? function (tab) { } : _g, _h = _a.defaultTab, defaultTab = _h === void 0 ? '' : _h, _j = _a.enableLink, enableLink = _j === void 0 ? false : _j;
     // Fetch _study
-    var _f = useJobs(client), fetchJob = _f.fetchJob, getDuration = _f.getDuration, statusMap = _f.statusMap;
+    var _k = useJobs(client), fetchJob = _k.fetchJob, getDuration = _k.getDuration, statusMap = _k.statusMap;
     var listRuns = useRuns(client).listRuns;
-    var _g = useWindowDimensions(), width = _g.width; _g.height;
-    var _h = useState(false), open = _h[0], setOpen = _h[1];
+    var _l = useWindowDimensions(), width = _l.width; _l.height;
+    var _m = useState(false), open = _m[0], setOpen = _m[1];
     // From job to run
-    var _j = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
+    var _o = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
         revalidateOnFocus: false,
         refreshInterval: !_study || _study.status.finished_at ? undefined : 5000,
         fallbackData: _study,
@@ -48508,7 +48515,7 @@ var StudyCard = function (_a) {
             })
                 .catch(function () { setRun(undefined); });
         }
-    }), study = _j.data; _j.error; _j.isValidating;
+    }), study = _o.data; _o.error; _o.isValidating;
     var total = useMemo(function () {
         if (!study)
             return undefined;
@@ -48531,8 +48538,8 @@ var StudyCard = function (_a) {
         }
         return study.status.status.toLocaleLowerCase();
     }, [study]);
-    var _k = useState(), run = _k[0], setRun = _k[1];
-    var _l = useState(getDuration(study)), duration = _l[0], setDuration = _l[1];
+    var _p = useState(), run = _p[0], setRun = _p[1];
+    var _q = useState(getDuration(study)), duration = _q[0], setDuration = _q[1];
     useEffect(function () {
         setRun(undefined);
         if (!study)
@@ -48549,7 +48556,7 @@ var StudyCard = function (_a) {
     /*
     * Manage hover
     */
-    var _m = useState({
+    var initialValues = {
         account: false,
         project: false,
         details: false,
@@ -48561,7 +48568,8 @@ var StudyCard = function (_a) {
         author: false,
         recipe: false,
         info: false
-    }), hover = _m[0], setHover = _m[1];
+    };
+    var _r = useState(__assign(__assign({}, initialValues), (_b = {}, _b[defaultTab] = true, _b))), hover = _r[0], setHover = _r[1];
     var toggleHover = useCallback(function (id, value) {
         if (value === void 0) { value = false; }
         setHover(function (prevHover) {
@@ -48569,11 +48577,18 @@ var StudyCard = function (_a) {
             return (__assign(__assign({}, prevHover), (_a = {}, _a[id] = value, _a)));
         });
     }, [hover]);
-    return (React__default.createElement("div", { className: enableClick ? 'grid-container' : 'grid-container disable-click', tabIndex: 0, role: 'button', style: __assign({ borderColor: (_c = (_b = statusMap[status]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : '#d0d7de' }, style), onClick: function () {
+    /*
+    * Reset hover and use default tab
+    */
+    useEffect(function () {
+        var _a;
+        setHover(__assign(__assign({}, initialValues), (_a = {}, _a[defaultTab] = true, _a)));
+    }, [defaultTab]);
+    return (React__default.createElement("div", { className: enableClick ? 'grid-container' : 'grid-container disable-click', tabIndex: 0, role: 'button', style: __assign({ borderColor: (_d = (_c = statusMap[status]) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : '#d0d7de' }, style), onClick: function () {
             if (!enableClick)
                 return;
             if (study && total > 1) {
-                window.location.href = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id);
+                window.location.href = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=details");
             }
             else if (study && run) {
                 window.location.href = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=details");
@@ -48617,18 +48632,42 @@ var StudyCard = function (_a) {
                         }, style: { color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } })),
             (study && total > 1) &&
                 React__default.createElement("div", null,
+                    React__default.createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
+                            e.stopPropagation();
+                            if (enableLink) {
+                                document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=details");
+                            }
+                            else {
+                                getValue(JobTabs.details);
+                                toggleHover(JobTabs.workspace, false);
+                                toggleHover(JobTabs.details, true);
+                            }
+                        }, onMouseOver: function (e) {
+                            toggleHover('detailsOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover('detailsOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat((hover.details || hover.detailsOver)
+                                ? '#40a9ff' : '#000') } }),
                     React__default.createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
                             e.stopPropagation();
-                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/workspace");
+                            if (enableLink) {
+                                document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=workspace");
+                            }
+                            else {
+                                getValue(JobTabs.workspace);
+                                toggleHover(JobTabs.workspace, true);
+                                toggleHover(JobTabs.details, false);
+                            }
                         }, onMouseOver: function (e) {
                             toggleHover('workspaceOver', true);
                         }, onMouseLeave: function (e) {
                             toggleHover('workspaceOver', false);
-                        }, style: { marginRight: '0.75rem',
-                            color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } }))),
+                        }, style: { color: "".concat((hover.workspace || hover.workspaceOver)
+                                ? '#40a9ff' : '#000') } }))),
         React__default.createElement("div", { className: 'item3' },
             React__default.createElement("div", null,
-                study ? (_d = study.spec.name) !== null && _d !== void 0 ? _d : "Study: ".concat(study.id) : '--',
+                study ? (_e = study.spec.name) !== null && _e !== void 0 ? _e : "Study: ".concat(study.id) : '--',
                 study && total > 1 && "(#".concat(total, ")"),
                 React__default.createElement("button", { style: { all: 'unset', margin: '0 0 0 8px' }, onMouseOver: function (e) { return toggleHover('info', true); }, onMouseLeave: function (e) { return toggleHover('info', false); }, onClick: function (e) {
                         e.stopPropagation();
@@ -48639,7 +48678,7 @@ var StudyCard = function (_a) {
         React__default.createElement("div", { className: 'item5' },
             React__default.createElement("span", { style: { marginRight: '0.75rem' } },
                 React__default.createElement(Avatar, { src: study ? study.author.picture_url : '', size: 24, color: hover.author ? '#40a9ff' : undefined })),
-            React__default.createElement("a", { className: 'link', href: study ? "/".concat(study.author.name) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover('author', true); }, onMouseLeave: function (e) { return toggleHover('author', false); }, style: hover.author ? { color: '#40a9ff' } : {} }, study ? ((_e = study.author.display_name) !== null && _e !== void 0 ? _e : study.author.name) : '--')),
+            React__default.createElement("a", { className: 'link', href: study ? "/".concat(study.author.name) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover('author', true); }, onMouseLeave: function (e) { return toggleHover('author', false); }, style: hover.author ? { color: '#40a9ff' } : {} }, study ? ((_f = study.author.display_name) !== null && _f !== void 0 ? _f : study.author.name) : '--')),
         React__default.createElement("div", { className: 'item6' },
             React__default.createElement("span", { style: { marginRight: '0.75rem' } },
                 React__default.createElement(Avatar, { src: study ? study.recipe.metadata.icon : '', size: 24, color: hover.recipe ? '#40a9ff' : undefined })),