pollination-react-io 1.16.1 → 1.16.3

package/build/RunCard/RunCard.types.d.ts

@@ -1,10 +1,12 @@
 import { Run, UserPrivate } from '@pollination-solutions/pollination-sdk';
+import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 export interface RunCardProps {
     projectOwner: string;
     projectName: string;
     jobId: string;
     run: Run;
+    style?: CSSProperties;
     client?: APIClient;
     authUser?: UserPrivate;
 }

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

@@ -1,9 +1,11 @@
 import { CloudJob, UserPrivate } from '@pollination-solutions/pollination-sdk';
+import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 export interface StudyCardProps {
     projectOwner: string;
     projectName: string;
     study: CloudJob;
+    style?: CSSProperties;
     authUser?: UserPrivate;
     client: APIClient;
 }

package/build/index.esm.js

@@ -42031,14 +42031,14 @@ var useSWRHandler = function (_key, fetcher, config) {
 };
 var useSWR = withArgs(useSWRHandler);
 
-var css_248z$2 = "";
+var css_248z$2 = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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.run-card {\n  transition: box-shadow 250ms ease-in-out, border-color 250ms ease-in-out;\n  border-color: #d0d7de;\n  width: 100%;\n  background-color: white;\n}\n\na > .run-card:hover {\n  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 8px 0px;\n  border-color: var(--primary);\n}";
 styleInject(css_248z$2);
 
 dayjs_min.extend(duration);
 dayjs_min.extend(utc);
 var RunCard = function (_a) {
     var _b;
-    var projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, _run = _a.run, client = _a.client, authUser = _a.authUser;
+    var projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, _run = _a.run, style = _a.style, client = _a.client, authUser = _a.authUser;
     var _c = useRuns(client); _c.listRuns; var fetchRun = _c.fetchRun, cancelRun = _c.cancelRun;
     var _d = useSWR(authUser && typeof _run !== 'undefined' ? [projectOwner, projectName, _run.id] : null, fetchRun, {
         revalidateOnFocus: false,
@@ -42056,16 +42056,7 @@ var RunCard = function (_a) {
         }, 1000);
         return run.status.finished_at ? undefined : function () { return clearInterval(handle); };
     }, [run]);
-    return (React__default.createElement("div", { "data-testid": "RunCard", className: 'hover-card', style: {
-            borderRadius: 8,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            display: 'grid',
-            gridTemplateColumns: 'minmax(200px, 18%) 1fr',
-            gridTemplateRows: '1fr auto',
-            columnGap: 8,
-            rowGap: 0
-        } },
+    return (React__default.createElement("div", { "data-testid": "RunCard", className: 'run-card', style: __assign({ borderRadius: 8, borderWidth: 1, borderStyle: 'solid', display: 'grid', gridTemplateColumns: 'minmax(200px, 18%) 1fr', gridTemplateRows: '1fr auto', columnGap: 8, rowGap: 0 }, style) },
         React__default.createElement("div", { style: {
                 borderRight: '1px solid #d0d7de',
                 display: 'flex',
@@ -42130,31 +42121,35 @@ var RunCard = function (_a) {
                         textOverflow: 'ellipsis',
                         display: 'inline-block'
                     } }, run.id),
-                React__default.createElement(Dropdown, { trigger: React__default.createElement("button", { type: 'button', style: {
-                            width: 32,
-                            height: 32,
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            borderRadius: 9999,
-                            border: '1px solid #d0d7de',
-                            backgroundColor: 'white',
-                            outlineColor: 'var(--primary)'
-                        } }, isValidating ? React__default.createElement(LoadingIcon, null) : React__default.createElement(Gear$1, null)), optionGroups: [
-                        {
-                            options: [{
-                                    type: 'button',
-                                    id: 'cancel-study',
-                                    label: 'Cancel',
-                                    icon: React__default.createElement(XOctagon$1, null),
-                                    disabled: typeof run.status.finished_at === 'string',
-                                    onSelect: function () { return cancelRun(projectOwner, projectName, _run.id); }
-                                }]
-                        }
-                    ], contentProps: {
-                        align: 'end',
-                        sideOffset: 2,
-                    } })),
+                React__default.createElement("div", { style: {
+                        display: 'flex'
+                    } },
+                    React__default.createElement(Dropdown, { trigger: React__default.createElement("button", { type: 'button', style: {
+                                width: 32,
+                                height: 32,
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                borderRadius: 9999,
+                                border: '1px solid #d0d7de',
+                                backgroundColor: 'white',
+                                outlineColor: 'var(--primary)',
+                                cursor: 'pointer'
+                            } }, isValidating ? React__default.createElement(LoadingIcon, null) : React__default.createElement(Gear$1, null)), optionGroups: [
+                            {
+                                options: [{
+                                        type: 'button',
+                                        id: 'cancel-study',
+                                        label: 'Cancel',
+                                        icon: React__default.createElement(XOctagon$1, null),
+                                        disabled: typeof run.status.finished_at === 'string',
+                                        onSelect: function () { return cancelRun(projectOwner, projectName, _run.id); }
+                                    }]
+                            }
+                        ], contentProps: {
+                            align: 'end',
+                            sideOffset: 2,
+                        } }))),
             React__default.createElement("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',
@@ -42233,11 +42228,11 @@ var RunsList = function (_a) {
     var _b = useState(false), open = _b[0], setOpen = _b[1];
     var _c = useState(1), page = _c[0], setPage = _c[1];
     var _d = useState([]), items = _d[0], setItems = _d[1];
-    var listRuns = useRuns(client).listRuns;
-    var _e = useSWR(authUser ? [projectOwner, projectName, jobId, page] : undefined, listRuns, {
+    var _e = useRuns(client), listRuns = _e.listRuns, cancelRun = _e.cancelRun;
+    var _f = useSWR(authUser ? [projectOwner, projectName, jobId, page] : undefined, listRuns, {
         revalidateOnFocus: false,
         refreshInterval: subscribe ? 5000 : undefined,
-    }), runs = _e.data; _e.error; var isValidating = _e.isValidating; _e.mutate;
+    }), runs = _f.data; _f.error; var isValidating = _f.isValidating; _f.mutate;
     useEffect(function () {
         if (!runs || !runs.resources)
             return;
@@ -42254,13 +42249,26 @@ var RunsList = function (_a) {
         return (React__default.createElement("div", { key: item.id, style: {
                 display: 'flex',
                 justifyContent: 'space-between',
+                alignItems: 'center',
                 borderTop: '1px solid var(--slate5)',
                 padding: '6px 8px',
+                cursor: 'default'
             } },
             React__default.createElement("div", { style: {
                     display: 'flex',
+                    alignItems: 'center',
                     gap: 12
                 } },
+                item.status.status === dist.RunStatusEnum.Running &&
+                    React__default.createElement("button", { style: {
+                            display: 'flex',
+                            backgroundColor: 'rgba(0,0,0,0)',
+                            color: 'red',
+                            border: 'none'
+                        }, onClick: function () {
+                            cancelRun(projectOwner, projectName, item.id);
+                        } },
+                        React__default.createElement(XOctagon$1, null)),
                 React__default.createElement("a", { href: "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(jobId, "/runs/").concat(item.id), style: {
                         color: statusMap[item.status.status].color
                     } },
@@ -42297,7 +42305,7 @@ var RunsList = function (_a) {
                             backgroundColor: 'rgba(0,0,0,0)',
                             fontVariantNumeric: 'tabular-nums'
                         } }, "".concat(formatBytes(item.meta.resources_duration.memory), " of storage"))))));
-    }, [jobId, projectName, projectOwner]);
+    }, [cancelRun, jobId, projectName, projectOwner]);
     return (React__default.createElement("div", { "data-testid": "RunsList", className: "" },
         React__default.createElement($409067139f391064$export$be92b6f5f03c0fe9, { open: open, onOpenChange: function (val) { return setOpen(val); } },
             React__default.createElement($409067139f391064$export$41fb9f06171c75f4, { asChild: true },
@@ -42309,6 +42317,7 @@ var RunsList = function (_a) {
                     React__default.createElement("span", { style: {
                             display: 'flex',
                             alignItems: 'center',
+                            cursor: 'pointer',
                             gap: 8
                         } }, "".concat(runs.total_count, " Total Runs"),
                         runs.total_count > 0 && (isValidating ? React__default.createElement(LoadingIcon, { size: 16 }) : React__default.createElement(ChevronCompactDown$1, null))))),
@@ -43152,7 +43161,7 @@ var SendResults = function (_a) {
             }], asButtons: true, label: buttonLabel, helpText: "".concat(selOpt ? selOpt.charAt(0).toUpperCase() + selOpt.replace('-', ' ').slice(1) : 'Send', " results.") }));
 };
 
-var css_248z = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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.hover-card {\n  transition: box-shadow 250ms ease-in-out, border-color 250ms ease-in-out;\n  border-color: #d0d7de;\n}\n\na > .hover-card:hover {\n  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 8px 0px;\n  border-color: var(--primary);\n}";
+var css_248z = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --primary2: #40a9ff;\n  --primary1: #cceefe;\n  --primary0: #e6f7ff;\n  --secondary: #fff566;\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.study-card {\n  transition: box-shadow 250ms ease-in-out, border-color 250ms ease-in-out;\n  border-color: #d0d7de;\n  width: 100%;\n  background-color: white;\n}\n\na > .study-card:hover {\n  box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 8px 0px;\n  border-color: var(--primary);\n}";
 styleInject(css_248z);
 
 dayjs_min.extend(duration);
@@ -43166,7 +43175,7 @@ var getStudyDuration = function (study) {
 };
 var StudyCard = function (_a) {
     var _b;
-    var projectName = _a.projectName, projectOwner = _a.projectOwner, _study = _a.study, authUser = _a.authUser, client = _a.client;
+    var projectName = _a.projectName, projectOwner = _a.projectOwner, _study = _a.study, style = _a.style, authUser = _a.authUser, client = _a.client;
     var _c = useJobs(client), cancelJob = _c.cancelJob, deleteJob = _c.deleteJob, fetchJob = _c.fetchJob;
     var _d = useSWR(authUser ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
         revalidateOnFocus: false,
@@ -43196,16 +43205,7 @@ var StudyCard = function (_a) {
         }, 1000);
         return study.status.finished_at ? undefined : function () { return clearInterval(handle); };
     }, [study]);
-    return (React__default.createElement("div", { "data-testid": "StudyCard", className: 'hover-card', style: {
-            borderRadius: 8,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            display: 'grid',
-            gridTemplateColumns: 'minmax(200px, 18%) 1fr',
-            gridTemplateRows: '1fr auto',
-            columnGap: 8,
-            rowGap: 0
-        } },
+    return (React__default.createElement("div", { "data-testid": "StudyCard", className: 'study-card', style: __assign({ borderRadius: 8, borderWidth: 1, borderStyle: 'solid', display: 'grid', gridTemplateColumns: 'minmax(200px, 18%) 1fr', gridTemplateRows: '1fr auto', columnGap: 8, rowGap: 0 }, style) },
         React__default.createElement("div", { style: {
                 borderRight: '1px solid #d0d7de',
                 display: 'flex',
@@ -43274,37 +43274,40 @@ var StudyCard = function (_a) {
                         textOverflow: 'ellipsis',
                         display: 'inline-block'
                     } }, study.spec.name),
-                React__default.createElement(Dropdown, { trigger: React__default.createElement("button", { type: 'button', style: {
-                            width: 32,
-                            height: 32,
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            borderRadius: 9999,
-                            border: '1px solid #d0d7de',
-                            backgroundColor: 'white',
-                            outlineColor: 'var(--primary)'
-                        } }, isValidating ? React__default.createElement(LoadingIcon, null) : React__default.createElement(Gear$1, null)), optionGroups: [
-                        {
-                            options: [{
-                                    type: 'button',
-                                    id: 'cancel-study',
-                                    label: 'Cancel',
-                                    icon: React__default.createElement(XOctagon$1, null),
-                                    disabled: status.pending < 1 && status.running < 1,
-                                    onSelect: function () { return cancelJob(projectOwner, projectName, study.id); }
-                                }, {
-                                    type: 'button',
-                                    id: 'delete-study',
-                                    label: 'Delete',
-                                    icon: React__default.createElement(Trash$1, null),
-                                    onSelect: function () { return deleteJob(projectOwner, projectName, study.id); }
-                                },]
-                        }
-                    ], contentProps: {
-                        align: 'end',
-                        sideOffset: 2,
-                    } })),
+                React__default.createElement("div", { style: {
+                        display: 'flex'
+                    } },
+                    React__default.createElement(Dropdown, { trigger: React__default.createElement("button", { type: 'button', style: {
+                                width: 32,
+                                height: 32,
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                borderRadius: 9999,
+                                border: '1px solid #d0d7de',
+                                backgroundColor: 'white',
+                                outlineColor: 'var(--primary)'
+                            } }, isValidating ? React__default.createElement(LoadingIcon, null) : React__default.createElement(Gear$1, null)), optionGroups: [
+                            {
+                                options: [{
+                                        type: 'button',
+                                        id: 'cancel-study',
+                                        label: 'Cancel',
+                                        icon: React__default.createElement(XOctagon$1, null),
+                                        disabled: status.pending < 1 && status.running < 1,
+                                        onSelect: function () { return cancelJob(projectOwner, projectName, study.id); }
+                                    }, {
+                                        type: 'button',
+                                        id: 'delete-study',
+                                        label: 'Delete',
+                                        icon: React__default.createElement(Trash$1, null),
+                                        onSelect: function () { return deleteJob(projectOwner, projectName, study.id); }
+                                    },]
+                            }
+                        ], contentProps: {
+                            align: 'end',
+                            sideOffset: 2,
+                        } }))),
             React__default.createElement("div", { style: {
                     display: 'flex',
                     flexDirection: 'column',