pollination-react-io 1.40.2 → 1.41.0

package/build/RunDetails/RunContent.types.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 import { FileCardProps } from './Cards/FileCard';
+import { FolderCardProps } from './Cards/FolderCard';
 export interface RunContentProps {
     title: string;
     inputData: any[];
@@ -10,5 +11,6 @@ export interface RunContentProps {
     projectName?: string;
     client?: APIClient;
     style?: CSSProperties;
-    getCardValue?: (card: FileCardProps) => any;
+    getFileCard?: (card: FileCardProps) => any;
+    getFolderCard?: (card: FolderCardProps) => any;
 }

package/build/RunDetails/RunDetails.types.d.ts

@@ -2,6 +2,7 @@ import { Run, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 import { FileCardProps } from './Cards/FileCard';
+import { FolderCardProps } from './Cards/FolderCard';
 export interface LocalRun {
     meta: any;
     status: any;
@@ -16,5 +17,6 @@ export interface RunDetailsProps {
     authUser?: UserPrivate;
     client?: APIClient;
     style?: CSSProperties;
-    getCardValue?: (card: FileCardProps) => any;
+    getFileCard?: (card: FileCardProps) => any;
+    getFolderCard?: (card: FolderCardProps) => any;
 }

package/build/hooks/index.d.ts

@@ -11,4 +11,5 @@ export * from './useRunCommand';
 export * from './useRuns';
 export * from './useSendHbjson';
 export * from './useSendMessage';
+export * from './useWindowDimensions';
 export * from './utilities';

package/build/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const useWindowDimensions: () => {
+    width: number;
+    height: number;
+};

package/build/index.esm.js

@@ -40483,6 +40483,25 @@ var useSendHbjson = function () {
     });
 };
 
+var useWindowDimensions = function () {
+    var getDimension = function () {
+        var width = window.innerWidth, height = window.innerHeight;
+        return {
+            width: width,
+            height: height
+        };
+    };
+    var _a = useState(getDimension()), dimensions = _a[0], setDimensions = _a[1];
+    useEffect(function () {
+        function handleResize() {
+            setDimensions(getDimension());
+        }
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return dimensions;
+};
+
 var AuthUser = function (config) {
     var authUser = useAPIClient(config).authUser;
     return (React__default.createElement(Avatar, { alt: authUser && authUser.name, src: authUser && authUser.picture, href: authUser && "https://app.pollination.cloud/".concat(authUser.username), fallback: authUser
@@ -46932,7 +46951,7 @@ var SendModel = function (_a) {
             }], asButtons: true, label: buttonLabel, helpText: "".concat(selOpt ? selOpt.charAt(0).toUpperCase() + selOpt.replace('-', ' ').slice(1) : 'Send', " model.") }));
 };
 
-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.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 24px 24px 52px auto;\n  }\n  .item1 {\n    text-align: left !important;\n  }\n  .item2 {\n    text-align: right !important;\n    font-size: 1rem;\n    white-space: nowrap;\n  }\n  .item3, .item4 {\n    text-align: center !important;\n  }\n  .item5 {\n    font-size: 0.8rem;\n  }\n  .item6 {\n    white-space: nowrap;\n    font-size: 0.8rem;\n  }\n  .item7 {\n    font-size: 0.8rem;\n    text-align: center !important;\n  }\n  .item8 {\n    font-size: 1rem;\n    text-align: center !important;\n  }\n  .item9 {\n    text-align: left !important;\n    font-size: 1rem;\n    white-space: nowrap;\n  }\n  .item10 {\n    text-align: right !important;\n  }\n  .grid-container > div {\n    text-align: left;\n    vertical-align: middle;\n  }\n}";
+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.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 date date date\" \"author author author recipe recipe recipe\" \"time time status status cpu cpu\" \"description description description description description description\";\n    gap: 0.35rem;\n    border: 0.1rem solid;\n    align-items: center;\n    padding: 0.15rem;\n    transition: box-shadow 0.3s;\n    grid-template-rows: 52px 52px 32px 52px auto;\n  }\n  .item1 {\n    text-align: left !important;\n  }\n  .item2 {\n    text-align: right !important;\n    font-size: 1rem;\n    white-space: nowrap;\n  }\n  .item3, .item4 {\n    text-align: center !important;\n  }\n  .item5 {\n    font-size: 0.8rem;\n  }\n  .item6 {\n    white-space: nowrap;\n    font-size: 0.8rem;\n  }\n  .item7 {\n    font-size: 0.8rem;\n    text-align: center !important;\n  }\n  .item8 {\n    font-size: 1rem;\n    text-align: center !important;\n  }\n  .item9 {\n    text-align: left !important;\n    font-size: 1rem;\n    white-space: nowrap;\n  }\n  .item10 {\n    text-align: right !important;\n  }\n  .grid-container > div {\n    text-align: left;\n    vertical-align: middle;\n  }\n}";
 styleInject(css_248z$3);
 
 var IconContext = /*#__PURE__*/createContext({});
@@ -48428,9 +48447,10 @@ var StudyCard = function (_a) {
     // Fetch _study
     var _f = useJobs(client), fetchJob = _f.fetchJob, getDuration = _f.getDuration, statusMap = _f.statusMap;
     var listRuns = useRuns(client).listRuns;
-    var _g = useState(false), open = _g[0], setOpen = _g[1];
+    var _g = useWindowDimensions(), width = _g.width; _g.height;
+    var _h = useState(false), open = _h[0], setOpen = _h[1];
     // From job to run
-    var _h = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
+    var _j = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
         revalidateOnFocus: false,
         refreshInterval: !_study || _study.status.finished_at ? undefined : 5000,
         fallbackData: _study,
@@ -48451,7 +48471,7 @@ var StudyCard = function (_a) {
             })
                 .catch(function () { setRun(undefined); });
         }
-    }), study = _h.data; _h.error; _h.isValidating;
+    }), study = _j.data; _j.error; _j.isValidating;
     var total = useMemo(function () {
         if (!study)
             return undefined;
@@ -48474,8 +48494,8 @@ var StudyCard = function (_a) {
         }
         return study.status.status.toLocaleLowerCase();
     }, [study]);
-    var _j = useState(), run = _j[0], setRun = _j[1];
-    var _k = useState(getDuration(study)), duration = _k[0], setDuration = _k[1];
+    var _k = useState(), run = _k[0], setRun = _k[1];
+    var _l = useState(getDuration(study)), duration = _l[0], setDuration = _l[1];
     useEffect(function () {
         setRun(undefined);
         if (!study)
@@ -48492,16 +48512,19 @@ var StudyCard = function (_a) {
     /*
     * Manage hover
     */
-    var _l = useState({
+    var _m = useState({
         account: false,
         project: false,
-        runDetails: false,
-        runWorkspace: false,
-        runDebug: false,
+        details: false,
+        workspace: false,
+        debug: false,
+        detailsOver: false,
+        workspaceOver: false,
+        debugOver: false,
         author: false,
         recipe: false,
         info: false
-    }), hover = _l[0], setHover = _l[1];
+    }), hover = _m[0], setHover = _m[1];
     var toggleHover = function (event, inputId, value) {
         if (inputId === void 0) { inputId = undefined; }
         if (value === void 0) { value = false; }
@@ -48534,16 +48557,43 @@ var StudyCard = function (_a) {
             (study && !run) && total == 1 && React__default.createElement(LoadingOutlined$1, null),
             study && run &&
                 React__default.createElement("div", null,
-                    React__default.createElement("a", { style: { marginRight: '0.75rem' }, className: 'link', href: "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=info") },
-                        React__default.createElement(InfoCircleOutlined$1, { onMouseOver: function (e) { return toggleHover(e, 'runDetails', true); }, onMouseLeave: function (e) { return toggleHover(e, 'runDetails', false); }, style: hover.runDetails ? { color: '#40a9ff' } : { color: '#000' } })),
-                    React__default.createElement("a", { style: { marginRight: '0.75rem' }, className: 'link', href: "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=workspace&path=runs/").concat(run.id) },
-                        React__default.createElement(FolderOutlined$1, { onMouseOver: function (e) { return toggleHover(e, 'runWorkspace', true); }, onMouseLeave: function (e) { return toggleHover(e, 'runWorkspace', false); }, style: hover.runWorkspace ? { color: '#40a9ff' } : {} })),
-                    React__default.createElement("a", { className: 'link', href: "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=debug") },
-                        React__default.createElement(PartitionOutlined$1, { onMouseOver: function (e) { return toggleHover(e, 'runDebug', true); }, onMouseLeave: function (e) { return toggleHover(e, 'runDebug', false); }, style: hover.runDebug ? { color: '#40a9ff' } : {} }))),
+                    React__default.createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
+                            e.stopPropagation();
+                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=info");
+                        }, onMouseOver: function (e) {
+                            toggleHover(e, 'detailsOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover(e, 'detailsOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat((hover.details || hover.detailsOver) ? '#40a9ff' : '#000') } }),
+                    React__default.createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
+                            e.stopPropagation();
+                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=workspace&path=runs/").concat(run.id);
+                        }, onMouseOver: function (e) {
+                            toggleHover(e, 'workspaceOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover(e, 'workspaceOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } }),
+                    React__default.createElement(PartitionOutlined$1, { className: 'link', onClick: function (e) {
+                            e.stopPropagation();
+                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=debug");
+                        }, onMouseOver: function (e) {
+                            toggleHover(e, 'debugOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover(e, 'debugOver', false);
+                        }, style: { color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } })),
             (study && total > 1) &&
                 React__default.createElement("div", null,
-                    React__default.createElement("a", { className: 'link', href: "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/workspace") },
-                        React__default.createElement(FolderOutlined$1, { onMouseOver: function (e) { return toggleHover(e, 'runWorkspace', true); }, onMouseLeave: function (e) { return toggleHover(e, 'runWorkspace', false); }, style: hover.runWorkspace ? { color: '#40a9ff' } : {} })))),
+                    React__default.createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
+                            e.stopPropagation();
+                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/workspace");
+                        }, onMouseOver: function (e) {
+                            toggleHover(e, 'workspaceOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover(e, 'workspaceOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } }))),
         React__default.createElement("div", { className: 'item3' },
             React__default.createElement("div", null,
                 study ? (_d = study.spec.name) !== null && _d !== void 0 ? _d : "Study: ".concat(study.id) : '--',
@@ -48556,11 +48606,11 @@ var StudyCard = function (_a) {
         React__default.createElement("div", { className: 'item4' }, 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 })),
+                React__default.createElement(Avatar, { src: study ? study.author.picture_url : '', size: 24, color: hover.author ? '#40a9ff' : undefined })),
             React__default.createElement("a", { className: 'link', href: study ? "/".concat(study.author.name) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'author', style: hover.author ? { color: '#40a9ff' } : {} }, study ? ((_e = study.author.display_name) !== null && _e !== void 0 ? _e : 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 })),
+                React__default.createElement(Avatar, { src: study ? study.recipe.metadata.icon : '', size: 24, color: hover.recipe ? '#40a9ff' : undefined })),
             React__default.createElement("a", { className: 'link', href: study ? recipeLinkFromSource(study.recipe.source) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'recipe', style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
             study && React__default.createElement("span", { className: 'light-text' },
                 " ",
@@ -48568,15 +48618,15 @@ 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' },
-                (study && total == 1) && run &&
+                (study && total == 1) && run && width > 600 &&
                     "".concat(run.meta.progress.completed, " / ").concat(run.meta.progress.total, " steps"),
-                (study && total > 1) &&
+                (study && total > 1) && width > 600 &&
                     "".concat(study.status.runs_completed, " / ").concat(total, " runs"))),
         React__default.createElement("div", { className: 'item9' },
-            React__default.createElement(Cpu$1, { size: 18, style: { marginRight: '0.75rem' } }),
+            React__default.createElement(Cpu$1, { size: 18, style: { marginRight: '0.15rem' } }),
             React__default.createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration$1(dayjs_min.duration(study.resources_duration.cpu, 'seconds'))) : '--')),
         React__default.createElement("div", { className: 'item10' },
-            React__default.createElement(Clock$1, { size: 18, style: { marginRight: '0.75rem' } }),
+            React__default.createElement(Clock$1, { size: 18, style: { marginRight: '0.15rem' } }),
             React__default.createElement("span", { className: 'light-text' }, study ? "".concat(formatDuration$1(duration)) : '--')),
         open && React__default.createElement(React__default.Fragment, null,
             React__default.createElement("div", { className: 'item7' }, study ? study.spec.description : '--'))));
@@ -48595,11 +48645,12 @@ var RunCard = function (_a) {
      */
     var fetchJob = useJobs(client).fetchJob;
     var _f = useRuns(client), fetchRun = _f.fetchRun, statusMap = _f.statusMap, getDuration = _f.getDuration;
-    var _g = useState(false), open = _g[0], setOpen = _g[1];
+    var _g = useWindowDimensions(), width = _g.width; _g.height;
+    var _h = useState(false), open = _h[0], setOpen = _h[1];
     /*
      * From run to job
      */
-    var _h = useSWR(authUser && _run ? [projectOwner, projectName, _run.id] : undefined, fetchRun, {
+    var _j = useSWR(authUser && _run ? [projectOwner, projectName, _run.id] : undefined, fetchRun, {
         revalidateOnFocus: false,
         refreshInterval: !_run || _run.status.finished_at ? undefined : 5000,
         fallbackData: _run,
@@ -48611,14 +48662,14 @@ var RunCard = function (_a) {
             })
                 .catch(function () { setStudy(undefined); });
         }
-    }), run = _h.data; _h.error; _h.isValidating;
+    }), run = _j.data; _j.error; _j.isValidating;
     var status = useMemo(function () {
         if (!run)
             return undefined;
         return run.status.status;
     }, [run]);
-    var _j = useState(), study = _j[0], setStudy = _j[1];
-    var _k = useState(getDuration(run)), duration = _k[0], setDuration = _k[1];
+    var _k = useState(), study = _k[0], setStudy = _k[1];
+    var _l = useState(getDuration(run)), duration = _l[0], setDuration = _l[1];
     useEffect(function () {
         if (!run)
             return undefined;
@@ -48634,16 +48685,19 @@ var RunCard = function (_a) {
     /*
      * Manage hover
      */
-    var _l = useState({
+    var _m = useState({
         account: false,
         project: false,
-        runDetails: false,
-        runWorkspace: false,
-        runDebug: false,
+        details: false,
+        workspace: false,
+        debug: false,
+        detailsOver: false,
+        workspaceOver: false,
+        debugOver: false,
         author: false,
         recipe: false,
         info: false
-    }), hover = _l[0], setHover = _l[1];
+    }), hover = _m[0], setHover = _m[1];
     var toggleHover = function (event, inputId, value) {
         if (inputId === void 0) { inputId = undefined; }
         if (value === void 0) { value = false; }
@@ -48670,27 +48724,41 @@ var RunCard = function (_a) {
             !study && run && React__default.createElement(LoadingOutlined$1, null),
             run && study &&
                 React__default.createElement("div", null,
-                    React__default.createElement("a", { style: { marginRight: '0.75rem' }, 
-                        // href={`/${projectOwner}/projects/${projectName}/studies/${study.id}/runs/${run.id}`} 
-                        onClick: function (e) {
+                    React__default.createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
                             e.stopPropagation();
-                            getValue('info');
-                        } },
-                        React__default.createElement(InfoCircleOutlined$1, { onMouseOver: function (e) { return toggleHover(e, 'runDetails', true); }, onMouseLeave: function (e) { return toggleHover(e, 'runDetails', false); }, style: hover.runDetails ? { color: '#40a9ff' } : { color: '#000' } })),
-                    React__default.createElement("a", { style: { marginRight: '0.75rem' }, className: 'link', 
-                        // href={`/${projectOwner}/projects/${projectName}/studies/${study.id}/runs/${run.id}/workspace?path=runs/${run.id}`} 
-                        onClick: function (e) {
+                            getValue('details');
+                            toggleHover(e, 'workspace', false);
+                            toggleHover(e, 'details', true);
+                            toggleHover(e, 'debug', false);
+                        }, onMouseOver: function (e) {
+                            toggleHover(e, 'detailsOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover(e, 'detailsOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat((hover.details || hover.detailsOver) ? '#40a9ff' : '#000') } }),
+                    React__default.createElement(FolderOutlined$1, { className: 'link', onClick: function (e) {
                             e.stopPropagation();
                             getValue('workspace');
-                        } },
-                        React__default.createElement(FolderOutlined$1, { onMouseOver: function (e) { return toggleHover(e, 'runWorkspace', true); }, onMouseLeave: function (e) { return toggleHover(e, 'runWorkspace', false); }, style: hover.runWorkspace ? { color: '#40a9ff' } : {} })),
-                    React__default.createElement("a", { className: 'link', 
-                        // href={`/${projectOwner}/projects/${projectName}/studies/${study.id}/runs/${run.id}/debug`} 
-                        onClick: function (e) {
+                            toggleHover(e, 'workspace', true);
+                            toggleHover(e, 'details', false);
+                            toggleHover(e, 'debug', false);
+                        }, onMouseOver: function (e) {
+                            toggleHover(e, 'workspaceOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover(e, 'workspaceOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat((hover.workspace || hover.workspaceOver) ? '#40a9ff' : '#000') } }),
+                    React__default.createElement(PartitionOutlined$1, { className: 'link', onClick: function (e) {
                             e.stopPropagation();
                             getValue('debug');
-                        } },
-                        React__default.createElement(PartitionOutlined$1, { onMouseOver: function (e) { return toggleHover(e, 'runDebug', true); }, onMouseLeave: function (e) { return toggleHover(e, 'runDebug', false); }, style: hover.runDebug ? { color: '#40a9ff' } : {} })))),
+                            toggleHover(e, 'workspace', false);
+                            toggleHover(e, 'details', false);
+                            toggleHover(e, 'debug', true);
+                        }, onMouseOver: function (e) {
+                            toggleHover(e, 'debugOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover(e, 'debugOver', false);
+                        }, style: { color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } }))),
         React__default.createElement("div", { className: 'item3' },
             React__default.createElement("div", null,
                 study ? (_d = study.spec.name) !== null && _d !== void 0 ? _d : "Study: ".concat(study.id) : '--',
@@ -48702,24 +48770,24 @@ var RunCard = function (_a) {
         React__default.createElement("div", { className: 'item4' }, 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 })),
+                React__default.createElement(Avatar, { color: hover.author ? '#40a9ff' : undefined, src: study ? study.author.picture_url : '', size: 24 })),
             React__default.createElement("a", { className: 'link', href: study ? "/".concat(study.author.name) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'author', style: hover.author ? { color: '#40a9ff' } : {} }, study ? ((_e = study.author.display_name) !== null && _e !== void 0 ? _e : 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 })),
+                React__default.createElement(Avatar, { color: hover.recipe ? '#40a9ff' : undefined, src: study ? study.recipe.metadata.icon : '', size: 24 })),
             React__default.createElement("a", { className: 'link', href: study ? recipeLinkFromSource(study.recipe.source) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover(e, undefined, true); }, onMouseLeave: function (e) { return toggleHover(e, undefined, false); }, id: 'recipe', style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
             study && React__default.createElement("span", { className: 'light-text' },
                 " ",
                 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 &&
+            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("div", { className: 'item9' },
-            React__default.createElement(Cpu$1, { size: 18, style: { marginRight: '0.75rem' } }),
+            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' },
-            React__default.createElement(Clock$1, { size: 18, style: { marginRight: '0.75rem' } }),
+            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 : '--'))));
@@ -48873,14 +48941,14 @@ var css_248z = ":root {\n  --background: #FFFAEE;\n  --primary: #1890ff;\n  --pr
 styleInject(css_248z);
 
 var RunContent = function (_a) {
-    var inputData = _a.inputData, projectOwner = _a.projectOwner, projectName = _a.projectName, studyId = _a.studyId, runId = _a.runId, client = _a.client, title = _a.title, style = _a.style, getCardValue = _a.getCardValue;
+    var inputData = _a.inputData, projectOwner = _a.projectOwner, projectName = _a.projectName, studyId = _a.studyId, runId = _a.runId, client = _a.client, title = _a.title, style = _a.style, getFileCard = _a.getFileCard, getFolderCard = _a.getFolderCard;
     var downloadArtifact = useArtifacts(projectOwner, projectName, client).downloadArtifact;
     var fetchAndSet = function (url, card) {
         fetch(url)
             .then(function (response) { return response.blob()
             .then(function (blob) {
             blob.type;
-            getCardValue(__assign(__assign({}, card), { file: blob }));
+            getFileCard(__assign(__assign({}, card), { file: blob }));
         }); })
             .catch(function () { });
     };
@@ -48931,23 +48999,26 @@ var RunContent = function (_a) {
             // Generate Blob on click
             studyId && downloadArtifact(card.path, studyId)
                 .then(function (url) { return fetchAndSet(url, card); })
-                .catch(function () { return getCardValue(__assign(__assign({}, card), { file: undefined })); });
+                .catch(function () { return getFileCard(__assign(__assign({}, card), { file: undefined })); });
         }
         else {
             // TODO: Local later...
-            getCardValue(__assign(__assign({}, card), { file: card.path }));
+            getFileCard(__assign(__assign({}, card), { file: card.path }));
         }
     };
     /**
      * Click event handler of the folder card
-     * @param card File card props
+     * @param card Folder card props
      */
     var onFolderClicked = function (card) {
         if (isCloud) {
-            window.location.href = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(studyId, "/runs/").concat(runId, "/workspace?path=").concat(card.path);
+            getFolderCard(__assign({}, card));
+            // window.location.href = `/${projectOwner}/projects/${projectName}/studies/${studyId}/runs/${runId}/workspace?path=${card.path}`
         }
         else {
-            alert(runId.concat('/').concat(card.path)); // TODO: Fix it once local RUN JSON is ready
+            // TODO: Fix it later when Local is ready
+            getFolderCard(__assign({}, card));
+            // alert(runId.concat('/').concat(card.path)) 
         }
     };
     return React__default.createElement("div", { className: 'cards-container', style: __assign({}, style) },
@@ -48972,7 +49043,7 @@ var RunContent = function (_a) {
 var RunDetails = function (_a) {
     var projectName = _a.projectName, projectOwner = _a.projectOwner, run = _a.run, // Cloud and Local
     runId = _a.runId; // TODO: delete it if RUN JSON has the field
-    _a.authUser; var client = _a.client, style = _a.style, getCardValue = _a.getCardValue;
+    _a.authUser; var client = _a.client, style = _a.style, getFileCard = _a.getFileCard, getFolderCard = _a.getFolderCard;
     var _b = useState([]), extraInputs = _b[0], setExtraInputs = _b[1];
     var _c = useState([]), recipeInputs = _c[0], setRecipeInputs = _c[1];
     var _d = useState([]), outputs = _d[0], setOutputs = _d[1];
@@ -49005,12 +49076,12 @@ var RunDetails = function (_a) {
     }, [currRun]);
     return (React__default.createElement("div", null,
         outputs &&
-            React__default.createElement(RunContent, { title: 'Outputs', inputData: outputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getCardValue: getCardValue }),
+            React__default.createElement(RunContent, { title: 'Outputs', inputData: outputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard }),
         recipeInputs &&
-            React__default.createElement(RunContent, { title: 'Inputs', inputData: recipeInputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getCardValue: getCardValue }),
+            React__default.createElement(RunContent, { title: 'Inputs', inputData: recipeInputs, projectName: projectName, projectOwner: projectOwner, studyId: run.status.job_id, runId: run.id || runId, client: client, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard }),
         extraInputs && extraInputs.length > 0 &&
-            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, getCardValue: getCardValue })));
+            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 })));
 };
 
-export { APIClient, AuthUser, Avatar, Button, ComboBox, ComboFileSelector, ConditionalWrapper, ConfigureLocalRun, CreateStudy, Dropdown, FileInput, FilePreview, FormInput, GetGeometry, GetModel, InputDescription, Label, Logo, NumberInput, RadioList, RecipeInputsForm, RunCard, RunDetails, SelectAccount, SelectCloudArtifacts, SelectLocalArtifacts, SelectProject, SelectRecipe, SelectRun, SelectStudy, SendGeometry, SendModel, SendResults, SettingsButton, StudyCard, TextInput, Tooltip, _defaultConfig, checkDotNet, checkPollinationPanel, checkRuby, formatBytes, getHost, recipeLinkFromSource, sendMessageDotNet, sendMessageRuby, useAPIClient, useArtifacts, useCreateStudy, useGetGeometry, useGetHbjson, useHbjsontoVTK, useJobs, useManageSettings, useRunCommand, useRuns, useSendHbjson, useSendMessage };
+export { APIClient, AuthUser, Avatar, Button, ComboBox, ComboFileSelector, ConditionalWrapper, ConfigureLocalRun, CreateStudy, Dropdown, FileInput, FilePreview, FormInput, GetGeometry, GetModel, InputDescription, Label, Logo, NumberInput, RadioList, RecipeInputsForm, RunCard, RunDetails, SelectAccount, SelectCloudArtifacts, SelectLocalArtifacts, SelectProject, SelectRecipe, SelectRun, SelectStudy, SendGeometry, SendModel, SendResults, SettingsButton, StudyCard, TextInput, Tooltip, _defaultConfig, checkDotNet, checkPollinationPanel, checkRuby, formatBytes, getHost, recipeLinkFromSource, sendMessageDotNet, sendMessageRuby, useAPIClient, useArtifacts, useCreateStudy, useGetGeometry, useGetHbjson, useHbjsontoVTK, useJobs, useManageSettings, useRunCommand, useRuns, useSendHbjson, useSendMessage, useWindowDimensions };
 //# sourceMappingURL=index.esm.js.map