pollination-react-io 1.48.0 → 1.49.0

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

@@ -1,4 +1,4 @@
-import { CloudJob, RunList, UserPrivate } from '@pollination-solutions/pollination-sdk';
+import { CloudJob, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 export declare enum JobTabs {
@@ -18,5 +18,5 @@ export interface StudyCardProps {
     enableLink?: boolean;
     canWrite?: boolean;
     interval?: number;
-    getValue?: (runList: RunList) => any;
+    getValue?: (job: CloudJob) => any;
 }

package/build/index.esm.js

@@ -47032,7 +47032,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 runworkspacedebug 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 runworkspacedebug 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}";
+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 runworkspacedebug 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 runworkspacedebug 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 5s 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({});
@@ -48538,7 +48538,7 @@ var formatDuration$1 = function (duration) {
 var StudyCard = function (_a) {
     var _b;
     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;
+    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 (job) { } : _o, _p = _a.interval, interval = _p === void 0 ? 5000 : _p;
     /**
      * Fetch hooks
      */
@@ -48560,23 +48560,33 @@ var StudyCard = function (_a) {
         onSuccess: function (study, key, config) {
             if (!study)
                 return;
-            listRuns(projectOwner, projectName, [study.id])
-                .then(function (d) {
-                if (d.resources.length === 1) {
-                    setRun(d.resources[0]);
-                    sendRunList(d);
-                }
-                else {
-                    sendRunList(d);
-                }
-            })
-                .catch(function () { setRun(undefined); })
-                .finally(function () { return setIsReady(true); });
+            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) {
+                listRuns(projectOwner, projectName, [study.id])
+                    .then(function (d) {
+                    if (d.resources.length === 1) {
+                        setRun(d.resources[0]);
+                    }
+                })
+                    .catch(function () { setRun(undefined); })
+                    .finally(function () {
+                    sendJob(study);
+                    setIsReady(true);
+                });
+            }
+            else {
+                sendJob(study);
+                setIsReady(true);
+            }
             if (study.status.finished_at)
                 setStopRefresh(true);
         }
     }), study = _w.data; _w.error; _w.isValidating;
-    var sendRunList = useCallback(function (runList) { return getValue(runList); }, [study]);
+    var sendJob = useCallback(function (job) { return getValue(job); }, [study]);
     var total = useMemo(function () {
         if (!study)
             return undefined;
@@ -49349,7 +49359,7 @@ var RunDetails = function (_a) {
             React__default.createElement(RunContent, { title: 'Extra Inputs', inputData: extraInputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard })));
 };
 
-var css_248z = ":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.run-count {\n  grid-area: runcount;\n  font-size: 1rem;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-progress {\n  grid-area: runprogress;\n  text-align: center !important;\n  font-size: 1rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-link {\n  grid-area: runlink;\n  text-align: right !important;\n  font-size: 1rem;\n  white-space: nowrap;\n}\n\n.run-details {\n  grid-area: rundetails;\n  font-size: 0.9rem;\n}\n\n.study-run-container {\n  display: grid;\n  grid-template-areas: \"runcount runcount runprogress runprogress runlink runlink\" \"rundetails rundetails rundetails rundetails rundetails rundetails\";\n  gap: 0.35rem;\n  border: 0.1rem solid;\n  align-items: center;\n  padding: 0.75rem;\n  transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;\n  grid-template-rows: 12px auto;\n  border-radius: 6px;\n  line-height: 1.5;\n}\n\n.study-run-container:hover {\n  cursor: pointer;\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}\n\n.run-navigator {\n  display: grid;\n  grid-template-columns: min-content auto min-content min-content;\n  grid-auto-rows: auto;\n  align-items: center;\n  grid-gap: 0.9rem;\n}\n\n.run-pg-input {\n  margin: 0 4px 0 4px;\n  padding: 8px 8px;\n  text-align: center;\n  color: rgba(0, 0, 0, 0.8509803922);\n  width: min-content;\n  border-radius: 2px;\n  font-size: 12px;\n  border: 1px solid rgba(0, 0, 0, 0.125);\n}\n\n.container-scroll {\n  display: inline-flex;\n  flex-direction: row;\n  overflow-x: auto;\n  width: 100%;\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}";
+var css_248z = ":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.run-count {\n  grid-area: runcount;\n  font-size: 1rem;\n  font-weight: 500;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-progress {\n  grid-area: runprogress;\n  text-align: center !important;\n  font-size: 1rem;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.run-link {\n  grid-area: runlink;\n  text-align: right !important;\n  font-size: 1rem;\n  white-space: nowrap;\n}\n\n.run-details {\n  grid-area: rundetails;\n  font-size: 0.9rem;\n}\n\n.study-run-container {\n  display: grid;\n  grid-template-areas: \"runcount runcount runprogress runprogress runlink runlink\" \"rundetails rundetails rundetails rundetails rundetails rundetails\";\n  gap: 0.35rem;\n  border: 0.1rem solid;\n  align-items: center;\n  padding: 0.75rem;\n  transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;\n  grid-template-rows: 12px auto;\n  border-radius: 6px;\n  line-height: 1.5;\n}\n\n.study-run-container:hover {\n  cursor: pointer;\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}\n\n.run-navigator {\n  display: grid;\n  grid-template-columns: min-content auto min-content min-content;\n  grid-auto-rows: auto;\n  align-items: center;\n  grid-gap: 0.9rem;\n}\n\n.run-pg-input {\n  margin: 0 4px 0 4px;\n  padding: 8px 8px;\n  text-align: center;\n  color: rgba(0, 0, 0, 0.8509803922);\n  width: min-content;\n  border-radius: 2px;\n  font-size: 12px;\n  border: 1px solid rgba(0, 0, 0, 0.125);\n}\n\n.container-scroll {\n  display: inline-flex;\n  flex-direction: row;\n  overflow-x: auto;\n  width: 100%;\n}\n\n.blink-effect {\n  animation: blinker 5s linear infinite;\n}\n\n@keyframes blinker {\n  50% {\n    border: 0.1rem solid white;\n  }\n}";
 styleInject(css_248z);
 
 var RunRow = function (_a) {