pollination-react-io 1.16.1 → 1.16.2

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.hover-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 > .hover-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: 'hover-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',
@@ -42233,11 +42224,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;
@@ -42261,6 +42252,14 @@ var RunsList = function (_a) {
                     display: 'flex',
                     gap: 12
                 } },
+                React__default.createElement("button", { style: {
+                        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 +42296,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 },
@@ -43152,7 +43151,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.hover-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 > .hover-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 +43165,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 +43195,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: 'hover-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',