pollination-react-io 1.46.0 → 1.47.0

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

@@ -14,6 +14,9 @@ export interface RunCardProps {
     style?: CSSProperties;
     authUser?: UserPrivate;
     client?: APIClient;
-    getValue?: (any: any) => any;
+    getTab?: (tab: any) => any;
     defaultTab?: RunTabs;
+    interval?: number;
+    getValue?: (run: Run) => any;
+    canWrite?: boolean;
 }

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

@@ -1,4 +1,4 @@
-import { CloudJob, UserPrivate } from '@pollination-solutions/pollination-sdk';
+import { CloudJob, RunList, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 export declare enum JobTabs {
@@ -13,8 +13,10 @@ export interface StudyCardProps {
     authUser?: UserPrivate;
     client?: APIClient;
     enableClick?: boolean;
-    getValue?: (any: any) => any;
+    getTab?: (tab: any) => any;
     defaultTab?: JobTabs;
     enableLink?: boolean;
     canWrite?: boolean;
+    interval?: number;
+    getValue?: (runList: RunList) => any;
 }

package/build/index.esm.js

@@ -47070,7 +47070,7 @@ var JobTabs;
     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\" \"status status status status status status\" \"time time time cpu 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 32px 32px 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}";
+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\" \"status status status status status status\" \"time time time cpu 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 32px 32px 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}\n.blink-effect {\n  animation: blinker 2s linear infinite;\n}\n\n@keyframes blinker {\n  50% {\n    border: 0.1rem solid white;\n  }\n}";
 styleInject(css_248z$4);
 
 var IconContext = /*#__PURE__*/createContext({});
@@ -48562,41 +48562,46 @@ var formatDuration$1 = function (duration) {
 };
 var StudyCard = function (_a) {
     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, _k = _a.canWrite, canWrite = _k === void 0 ? false : _k;
+    var _c, _d, _e, _f, _g, _h;
+    var projectName = _a.projectName, projectOwner = _a.projectOwner, _study = _a.study, style = _a.style, authUser = _a.authUser, client = _a.client, enableClick = _a.enableClick, _j = _a.getTab, getTab = _j === void 0 ? function (tab) { } : _j, _k = _a.defaultTab, defaultTab = _k === void 0 ? '' : _k, _l = _a.enableLink, enableLink = _l === void 0 ? false : _l, _m = _a.canWrite, canWrite = _m === void 0 ? false : _m, _o = _a.getValue, getValue = _o === void 0 ? function (runList) { } : _o, _p = _a.interval, interval = _p === void 0 ? 5000 : _p;
     /**
      * Fetch hooks
      */
-    var _l = useJobs(client), fetchJob = _l.fetchJob, getDuration = _l.getDuration, statusMap = _l.statusMap, deleteJob = _l.deleteJob, cancelJob = _l.cancelJob;
+    var _q = useJobs(client), fetchJob = _q.fetchJob, getDuration = _q.getDuration, statusMap = _q.statusMap, deleteJob = _q.deleteJob, cancelJob = _q.cancelJob;
     var listRuns = useRuns(client).listRuns;
-    var _m = useWindowDimensions(), width = _m.width; _m.height;
-    var _o = useState(false), seeDescription = _o[0], setSeeDescription = _o[1];
-    var _p = useState(false), seeAction = _p[0], setSeeAction = _p[1];
+    var _r = useWindowDimensions(), width = _r.width; _r.height;
+    var _s = useState(false), seeDescription = _s[0], setSeeDescription = _s[1];
+    var _t = useState(false), seeAction = _t[0], setSeeAction = _t[1];
+    var _u = useState(false), stopRefresh = _u[0], setStopRefresh = _u[1];
+    var _v = useState(false), isReady = _v[0], setIsReady = _v[1];
     /**
      * From job to run
      */
-    var _q = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
+    var _w = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
         revalidateOnFocus: false,
-        refreshInterval: !_study || _study.status.finished_at ? undefined : 5000,
+        refreshInterval: stopRefresh ? undefined : interval,
         fallbackData: _study,
         errorRetryCount: 3,
         onSuccess: function (study, key, config) {
-            // Run ID auto-detection for single run
-            var tot = study.status.runs_pending +
-                study.status.runs_running +
-                study.status.runs_failed +
-                study.status.runs_completed +
-                study.status.runs_cancelled;
-            if (tot > 1)
+            if (!study)
                 return;
-            // One run only info
             listRuns(projectOwner, projectName, [study.id])
                 .then(function (d) {
-                setRun(d.resources[0]);
+                if (d.resources.length === 1) {
+                    setRun(d.resources[0]);
+                    sendRunList(d);
+                }
+                else {
+                    sendRunList(d);
+                }
             })
-                .catch(function () { setRun(undefined); });
+                .catch(function () { setRun(undefined); })
+                .finally(function () { return setIsReady(true); });
+            if (study.status.finished_at)
+                setStopRefresh(true);
         }
-    }), study = _q.data; _q.error; _q.isValidating;
+    }), study = _w.data; _w.error; _w.isValidating;
+    var sendRunList = useCallback(function (runList) { return getValue(runList); }, [study]);
     var total = useMemo(function () {
         if (!study)
             return undefined;
@@ -48619,8 +48624,8 @@ var StudyCard = function (_a) {
         }
         return study.status.status.toLocaleLowerCase();
     }, [study]);
-    var _r = useState(), run = _r[0], setRun = _r[1];
-    var _s = useState(getDuration(study)), duration = _s[0], setDuration = _s[1];
+    var _x = useState(), run = _x[0], setRun = _x[1];
+    var _y = useState(getDuration(study)), duration = _y[0], setDuration = _y[1];
     useEffect(function () {
         setRun(undefined);
         if (!study)
@@ -48651,7 +48656,7 @@ var StudyCard = function (_a) {
         info: false,
         settings: false
     };
-    var _t = useState(__assign(__assign({}, initialValues), (_b = {}, _b[defaultTab] = true, _b))), hover = _t[0], setHover = _t[1];
+    var _z = useState(__assign(__assign({}, initialValues), (_b = {}, _b[defaultTab] = true, _b))), hover = _z[0], setHover = _z[1];
     var toggleHover = useCallback(function (id, value) {
         if (value === void 0) { value = false; }
         setHover(function (prevHover) {
@@ -48666,7 +48671,8 @@ var StudyCard = function (_a) {
         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 () {
+    return (React__default.createElement("div", { className: enableClick ? "grid-container ".concat(isReady && !((_c = study === null || study === void 0 ? void 0 : study.status) === null || _c === void 0 ? void 0 : _c.finished_at) && 'blink-effect')
+            : "grid-container disable-click ".concat(isReady && !((_d = study === null || study === void 0 ? void 0 : study.status) === null || _d === void 0 ? void 0 : _d.finished_at) && 'blink-effect'), tabIndex: 0, role: 'button', style: __assign({ borderColor: (_f = (_e = statusMap[status]) === null || _e === void 0 ? void 0 : _e.color) !== null && _f !== void 0 ? _f : '#d0d7de' }, style), onClick: function () {
             if (!enableClick)
                 return;
             if (study && total > 1) {
@@ -48683,9 +48689,9 @@ var StudyCard = function (_a) {
             React__default.createElement("span", { style: { marginRight: '0.75rem' } }, "/"),
             React__default.createElement("a", { className: 'link', href: projectName && "/".concat(projectOwner, "/projects/").concat(projectName), title: 'Go to project page', onMouseOver: function (e) { return toggleHover('project', true); }, onMouseLeave: function (e) { return toggleHover('project', false); }, style: hover.project ? { color: '#40a9ff' } : {} }, projectName !== null && projectName !== void 0 ? projectName : '--')),
         React__default.createElement("div", { className: 'item2' },
-            (study && !run) && total == 1 && React__default.createElement(LoadingOutlined$1, null),
-            study && run &&
-                React__default.createElement("div", null,
+            React__default.createElement("div", null,
+                (!isReady || !study) && React__default.createElement(LoadingOutlined$1, { style: { margin: '0 10px 0 0' } }),
+                (study && run && total === 1) && React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("span", { title: 'Go to run page' },
                         React__default.createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
                                 e.stopPropagation();
@@ -48708,16 +48714,20 @@ var StudyCard = function (_a) {
                                 color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } })),
                     React__default.createElement("span", { title: 'Go to debug page' },
                         React__default.createElement(PartitionOutlined$1, { className: 'link', onClick: function (e) {
+                                if (!study.status.finished_at)
+                                    return;
                                 e.stopPropagation();
                                 document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=debug");
                             }, onMouseOver: function (e) {
                                 toggleHover('debugOver', true);
                             }, onMouseLeave: function (e) {
                                 toggleHover('debugOver', false);
-                            }, style: { marginRight: '0.75rem',
-                                color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } }))),
-            (study && total > 1) &&
-                React__default.createElement("div", null,
+                            }, style: { marginRight: "".concat(canWrite
+                                    ? '0.75rem' : '0'),
+                                color: "".concat((!study.status.finished_at) ? 'gray'
+                                    : (hover.debug || hover.debugOver) ? '#40a9ff'
+                                        : '#000') } }))),
+                (study && total > 1) && React__default.createElement(React__default.Fragment, null,
                     React__default.createElement("span", { title: 'Go to study page' },
                         React__default.createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
                                 e.stopPropagation();
@@ -48725,7 +48735,7 @@ var StudyCard = function (_a) {
                                     document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=details");
                                 }
                                 else {
-                                    getValue(JobTabs.details);
+                                    getTab(JobTabs.details);
                                     toggleHover(JobTabs.workspace, false);
                                     toggleHover(JobTabs.details, true);
                                 }
@@ -48743,7 +48753,7 @@ var StudyCard = function (_a) {
                                     document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=workspace");
                                 }
                                 else {
-                                    getValue(JobTabs.workspace);
+                                    getTab(JobTabs.workspace);
                                     toggleHover(JobTabs.workspace, true);
                                     toggleHover(JobTabs.details, false);
                                 }
@@ -48751,29 +48761,35 @@ var StudyCard = function (_a) {
                                 toggleHover('workspaceOver', true);
                             }, onMouseLeave: function (e) {
                                 toggleHover('workspaceOver', false);
-                            }, style: { color: "".concat((hover.workspace || hover.workspaceOver)
-                                    ? '#40a9ff' : '#000') } })))),
+                            }, style: { marginRight: "".concat(canWrite
+                                    ? '0.75rem' : '0'),
+                                color: "".concat((hover.workspace || hover.workspaceOver)
+                                    ? '#40a9ff' : '#000') } }))),
+                canWrite && React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("span", { title: 'See study actions' },
+                        React__default.createElement(Gear$1, { className: 'link', onMouseOver: function (e) { return toggleHover('settings', true); }, onMouseLeave: function (e) { return toggleHover('settings', false); }, onClick: function (e) {
+                                e.stopPropagation();
+                                setSeeAction(function (prev) { return !prev; });
+                                setSeeDescription(false);
+                            }, style: { margin: '5px 0 0 0',
+                                cursor: 'pointer',
+                                color: "".concat((hover.settings)
+                                    ? '#40a9ff' : '#000') } }))))),
         React__default.createElement("div", { className: 'item3' },
             React__default.createElement("div", null,
-                study ? (_e = study.spec.name) !== null && _e !== void 0 ? _e : "Study: ".concat(study.id) : '--',
+                study ? (_g = study.spec.name) !== null && _g !== void 0 ? _g : "Study: ".concat(study.id) : '--',
                 study && total > 1 && "(#".concat(total, ")"),
                 React__default.createElement("button", { style: { all: 'unset', margin: '0 0 0 8px', cursor: 'pointer' }, title: 'See study info', onMouseOver: function (e) { return toggleHover('info', true); }, onMouseLeave: function (e) { return toggleHover('info', false); }, onClick: function (e) {
                         e.stopPropagation();
                         setSeeDescription(function (prev) { return !prev; });
                         setSeeAction(false);
                     } },
-                    React__default.createElement(InfoCircle$1, { size: 14, style: hover.info ? { color: '#40a9ff' } : {} })),
-                canWrite && React__default.createElement("button", { style: { all: 'unset', margin: '0 0 0 8px', cursor: 'pointer' }, title: 'See study actions', onMouseOver: function (e) { return toggleHover('settings', true); }, onMouseLeave: function (e) { return toggleHover('settings', false); }, onClick: function (e) {
-                        e.stopPropagation();
-                        setSeeAction(function (prev) { return !prev; });
-                        setSeeDescription(false);
-                    } },
-                    React__default.createElement(Gear$1, { size: 14, style: hover.settings ? { color: '#40a9ff' } : {} })))),
+                    React__default.createElement(InfoCircle$1, { size: 14, style: hover.info ? { color: '#40a9ff' } : {} })))),
         React__default.createElement("div", { className: 'item4', title: study && dayjs_min(study.status.started_at).format('[on] MMM DD YYYY [at] hh:mm') }, study ? dayjs_min(study.status.started_at).format('[on] MMM DD YYYY') : '--'),
         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) : '', title: 'Go to author page', 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("a", { className: 'link', href: study ? "/".concat(study.author.name) : '', title: 'Go to author page', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover('author', true); }, onMouseLeave: function (e) { return toggleHover('author', false); }, style: hover.author ? { color: '#40a9ff' } : {} }, study ? ((_h = study.author.display_name) !== null && _h !== void 0 ? _h : 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 })),
@@ -48784,6 +48800,7 @@ var StudyCard = function (_a) {
         React__default.createElement("div", { className: 'item8' },
             React__default.createElement("span", { className: 'status-label', style: { marginRight: '0.75rem' } }, study ? status.charAt(0).toUpperCase() + status.slice(1) : '--'),
             React__default.createElement("span", { className: 'light-text' },
+                !isReady && React__default.createElement(LoadingOutlined$1, null),
                 (study && total == 1) && run && width > 600 &&
                     "".concat(run.meta.progress.completed, " / ").concat(run.meta.progress.total, " steps"),
                 (study && total > 1) && width > 600 &&
@@ -48837,37 +48854,55 @@ var formatDuration = function (duration) {
 var RunCard = function (_a) {
     var _b;
     var _c, _d, _e, _f;
-    var projectName = _a.projectName, projectOwner = _a.projectOwner, _run = _a.run, style = _a.style, authUser = _a.authUser, client = _a.client, enableClick = _a.enableClick, getValue = _a.getValue, defaultTab = _a.defaultTab;
+    var projectName = _a.projectName, projectOwner = _a.projectOwner, _run = _a.run, style = _a.style, authUser = _a.authUser, client = _a.client, enableClick = _a.enableClick, getTab = _a.getTab, defaultTab = _a.defaultTab, getValue = _a.getValue, _g = _a.interval, interval = _g === void 0 ? 5000 : _g, _h = _a.canWrite, canWrite = _h === void 0 ? false : _h;
     /*
      * Fetch run
      */
     var fetchJob = useJobs(client).fetchJob;
-    var _g = useRuns(client), fetchRun = _g.fetchRun, statusMap = _g.statusMap, getDuration = _g.getDuration;
-    var _h = useWindowDimensions(), width = _h.width; _h.height;
-    var _j = useState(false), open = _j[0], setOpen = _j[1];
+    var _j = useRuns(client), fetchRun = _j.fetchRun, statusMap = _j.statusMap, getDuration = _j.getDuration, cancelRun = _j.cancelRun;
+    var _k = useWindowDimensions(), width = _k.width; _k.height;
+    var _l = useState(false), seeDescription = _l[0], setSeeDescription = _l[1];
+    var _m = useState(false), seeAction = _m[0], setSeeAction = _m[1];
+    var _o = useState(false), stopRefresh = _o[0], setStopRefresh = _o[1];
+    var _p = useState(false), isReady = _p[0], setIsReady = _p[1];
     /*
-     * From run to job
+     * From run and stop when it is done
      */
-    var _k = useSWR(authUser && _run ? [projectOwner, projectName, _run.id] : undefined, fetchRun, {
+    var _q = useSWR(authUser && _run ? [projectOwner, projectName, _run.id] : undefined, fetchRun, {
         revalidateOnFocus: false,
-        refreshInterval: !_run || _run.status.finished_at ? undefined : 5000,
+        refreshInterval: stopRefresh ? undefined : interval,
         fallbackData: _run,
         errorRetryCount: 3,
         onSuccess: function (run, key, config) {
-            fetchJob(projectOwner, projectName, run.status.job_id)
-                .then(function (d) {
-                setStudy(d);
-            })
-                .catch(function () { setStudy(undefined); });
-        }
-    }), run = _k.data; _k.error; _k.isValidating;
+            sendRun(run);
+            if (run.status.finished_at)
+                setStopRefresh(true);
+            setIsReady(true);
+        },
+    }), run = _q.data; _q.error; _q.isValidating;
+    var sendRun = useCallback(function (run) { return getValue(run); }, [run]);
+    /**
+     * Fetch job just one time
+     */
+    useEffect(function () {
+        if (!_run)
+            return;
+        fetchJob(projectOwner, projectName, run.status.job_id)
+            .then(function (d) {
+            setStudy(d);
+        })
+            .catch(function () { setStudy(undefined); });
+    }, [_run]);
+    /**
+     * Refresh status
+     */
     var status = useMemo(function () {
         if (!run)
             return undefined;
         return run.status.status;
     }, [run]);
-    var _l = useState(), study = _l[0], setStudy = _l[1];
-    var _m = useState(getDuration(run)), duration = _m[0], setDuration = _m[1];
+    var _r = useState(), study = _r[0], setStudy = _r[1];
+    var _s = useState(getDuration(run)), duration = _s[0], setDuration = _s[1];
     useEffect(function () {
         if (!run)
             return undefined;
@@ -48880,8 +48915,8 @@ var RunCard = function (_a) {
         }, 1000);
         return run.status.finished_at ? undefined : function () { return clearInterval(handle); };
     }, [run]);
-    /*
-     * Manage hover
+    /**
+     * Manage hover effect
      */
     var initialValues = {
         study: false,
@@ -48895,9 +48930,10 @@ var RunCard = function (_a) {
         debugOver: false,
         author: false,
         recipe: false,
-        info: false
+        info: false,
+        settings: false,
     };
-    var _o = useState(__assign(__assign({}, initialValues), (_b = {}, _b[defaultTab] = true, _b))), hover = _o[0], setHover = _o[1];
+    var _t = useState(__assign(__assign({}, initialValues), (_b = {}, _b[defaultTab] = true, _b))), hover = _t[0], setHover = _t[1];
     var toggleHover = useCallback(function (id, value) {
         if (value === void 0) { value = false; }
         setHover(function (prevHover) {
@@ -48912,7 +48948,8 @@ var RunCard = function (_a) {
         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 () {
+    return (React__default.createElement("div", { className: enableClick ? "grid-container ".concat(isReady && !run.status.finished_at && 'blink-effect')
+            : "grid-container disable-click ".concat(isReady && !run.status.finished_at && 'blink-effect'), 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 (run && enableClick) {
                 window.location.href = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id);
             }
@@ -48923,57 +48960,74 @@ var RunCard = function (_a) {
             React__default.createElement("span", { style: { marginRight: '0.75rem' } }, "/"),
             React__default.createElement("a", { className: 'link', href: projectName && "/".concat(projectOwner, "/projects/").concat(projectName), title: 'Go to project page', onMouseOver: function (e) { return toggleHover('project', true); }, onMouseLeave: function (e) { return toggleHover('project', false); }, style: hover.project ? { color: '#40a9ff' } : {} }, projectName !== null && projectName !== void 0 ? projectName : '--')),
         React__default.createElement("div", { className: 'item2' },
-            !study && run && React__default.createElement(LoadingOutlined$1, null),
-            run && study &&
-                React__default.createElement("div", null,
-                    React__default.createElement("span", { title: 'Go to run page' },
-                        React__default.createElement(InfoCircleOutlined$1, { onClick: function (e) {
-                                e.stopPropagation();
-                                getValue(RunTabs.details);
-                                toggleHover(RunTabs.workspace, false);
-                                toggleHover(RunTabs.details, true);
-                                toggleHover(RunTabs.debug, false);
-                            }, 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("span", { title: 'Go to workspace page' },
-                        React__default.createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
-                                e.stopPropagation();
-                                getValue(RunTabs.workspace);
-                                toggleHover(RunTabs.workspace, true);
-                                toggleHover(RunTabs.details, false);
-                                toggleHover(RunTabs.debug, 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') } })),
-                    React__default.createElement("span", { title: 'Go to debug page' },
-                        React__default.createElement(PartitionOutlined$1, { className: 'link', onClick: function (e) {
+            React__default.createElement("div", null,
+                (!isReady || !study) && React__default.createElement(LoadingOutlined$1, { style: { margin: '0 10px 0 0' } }),
+                (study && run) &&
+                    React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("span", { title: 'Go to run page' },
+                            React__default.createElement(InfoCircleOutlined$1, { onClick: function (e) {
+                                    e.stopPropagation();
+                                    getTab(RunTabs.details);
+                                    toggleHover(RunTabs.workspace, false);
+                                    toggleHover(RunTabs.details, true);
+                                    toggleHover(RunTabs.debug, false);
+                                }, 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("span", { title: 'Go to workspace page' },
+                            React__default.createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
+                                    e.stopPropagation();
+                                    getTab(RunTabs.workspace);
+                                    toggleHover(RunTabs.workspace, true);
+                                    toggleHover(RunTabs.details, false);
+                                    toggleHover(RunTabs.debug, 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') } })),
+                        React__default.createElement("span", { title: 'Go to debug page' },
+                            React__default.createElement(PartitionOutlined$1, { className: 'link', onClick: function (e) {
+                                    if (!run.status.finished_at)
+                                        return;
+                                    e.stopPropagation();
+                                    getTab(RunTabs.debug);
+                                    toggleHover(RunTabs.workspace, false);
+                                    toggleHover(RunTabs.details, false);
+                                    toggleHover(RunTabs.debug, true);
+                                }, onMouseOver: function (e) {
+                                    toggleHover('debugOver', true);
+                                }, onMouseLeave: function (e) {
+                                    toggleHover('debugOver', false);
+                                }, style: { marginRight: "".concat(canWrite
+                                        ? '0.75rem' : '0'),
+                                    color: "".concat((!run.status.finished_at) ? 'gray'
+                                        : (hover.debug || hover.debugOver) ? '#40a9ff'
+                                            : '#000') } }))),
+                canWrite && React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("span", { title: 'See study actions' },
+                        React__default.createElement(Gear$1, { className: 'link', onMouseOver: function (e) { return toggleHover('settings', true); }, onMouseLeave: function (e) { return toggleHover('settings', false); }, onClick: function (e) {
                                 e.stopPropagation();
-                                getValue(RunTabs.debug);
-                                toggleHover(RunTabs.workspace, false);
-                                toggleHover(RunTabs.details, false);
-                                toggleHover(RunTabs.debug, true);
-                            }, onMouseOver: function (e) {
-                                toggleHover('debugOver', true);
-                            }, onMouseLeave: function (e) {
-                                toggleHover('debugOver', false);
-                            }, style: { color: "".concat((hover.debug || hover.debugOver)
-                                    ? '#40a9ff' : '#000') } })))),
+                                setSeeAction(function (prev) { return !prev; });
+                                setSeeDescription(false);
+                            }, style: { margin: '5px 0 0 0',
+                                cursor: 'pointer',
+                                color: "".concat((hover.settings)
+                                    ? '#40a9ff' : '#000') } }))))),
         React__default.createElement("div", { className: 'item3' },
             React__default.createElement("div", null,
                 React__default.createElement("a", { className: 'link', href: projectName && study && "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id), title: 'Go to study page', onMouseOver: function (e) { return toggleHover('study', true); }, onMouseLeave: function (e) { return toggleHover('study', false); }, style: { color: "".concat(hover.study
                             ? '#40a9ff' : '#000') } }, study ? (_e = study.spec.name) !== null && _e !== void 0 ? _e : "Study: ".concat(study.id) : '--'),
                 React__default.createElement("button", { style: { all: 'unset', margin: '0 0 0 8px', cursor: 'pointer' }, onMouseOver: function (e) { return toggleHover('info', true); }, onMouseLeave: function (e) { return toggleHover('info', false); }, onClick: function (e) {
                         e.stopPropagation();
-                        setOpen(function (prev) { return !prev; });
+                        setSeeDescription(function (prev) { return !prev; });
+                        setSeeAction(false);
                     } },
                     React__default.createElement(InfoCircle$1, { size: 14, style: hover.info ? { color: '#40a9ff' } : {} })))),
         React__default.createElement("div", { className: 'item4', title: study && dayjs_min(study.status.started_at).format('[on] MMM DD YYYY [at] hh:mm') }, study ? dayjs_min(study.status.started_at).format('[on] MMM DD YYYY') : '--'),
@@ -48990,16 +49044,33 @@ var RunCard = function (_a) {
                 study.recipe.metadata.tag)),
         React__default.createElement("div", { className: 'item8' },
             React__default.createElement("span", { className: 'status-label', style: { marginRight: '0.75rem' } }, study ? status : '--'),
-            React__default.createElement("span", { className: 'light-text' }, study && run && width > 600 &&
-                "".concat(run.meta.progress.completed, " / ").concat(run.meta.progress.total, " steps"))),
+            React__default.createElement("span", { className: 'light-text' },
+                !isReady && React__default.createElement(LoadingOutlined$1, null),
+                study && run && width > 600 &&
+                    "".concat(run.meta.progress.completed, " / ").concat(run.meta.progress.total, " steps"))),
         React__default.createElement("div", { className: 'item9', title: 'CPU usage' },
             React__default.createElement(Cpu$1, { size: 18, style: { marginRight: '0.15rem' } }),
             React__default.createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration(dayjs_min.duration(run.meta.resources_duration.cpu, 'seconds'))) : '--')),
         React__default.createElement("div", { className: 'item10', title: 'Duration of the simulation' },
             React__default.createElement(Clock$1, { size: 18, style: { marginRight: '0.15rem' } }),
             React__default.createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration(duration)) : '--')),
-        open && React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("div", { className: 'item7' }, study ? study.spec.description : '--'))));
+        seeDescription && React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: 'item7' }, study ? study.spec.description : '--')),
+        seeAction && width && React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: 'item7' },
+                React__default.createElement(Button, { style: (width > 600) ? { display: 'inline' } : { display: 'inline', float: 'left' }, disabled: !run || (run.status.status === dist.RunStatusEnum.Failed ||
+                        run.status.status === dist.RunStatusEnum.Succeeded ||
+                        run.status.status === dist.RunStatusEnum.Cancelled ||
+                        run.status.status === dist.RunStatusEnum.Unknown), onClick: function (e) {
+                        e.stopPropagation();
+                        if (!run)
+                            return;
+                        cancelRun(projectOwner, projectName, run.id)
+                            .then(function (d) { return console.log(d); })
+                            .catch(function (e) { return console.log(e); });
+                    } },
+                    React__default.createElement(XOctagon$1, { style: { display: 'inline', margin: '0 5px 0 0' } }),
+                    " Cancel")))));
 };
 
 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.card-group {\n  border: 0.05rem solid var(--slate9);\n  padding: 10px;\n  margin: 0 0 10px 0;\n  border-radius: 6px;\n  background-color: \"#fff\" !important;\n}\n\n.expander {\n  border: 0.05rem solid var(--slate9);\n  padding: 10px;\n  cursor: pointer;\n  margin: 0 0 10px 0;\n  transition: opacity 0.5s;\n  border-radius: 6px;\n  background-color: \"#fff\" !important;\n}\n\n.expander:hover {\n  opacity: 0.7;\n}\n\n.expander > p {\n  color: var(--primary3);\n  display: inline;\n  margin: 0 10px 0 0;\n  text-align: left;\n}\n\n.arrow {\n  float: right;\n  padding: 0 10px 0 0;\n}";