pollination-react-io 1.44.0 → 1.45.1

package/build/RunCard/RunCard.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import { RunCardProps } from './RunCard.types';
 import './RunCard.scss';
+/**
+ * Note it is a @deprecated component
+ * use RunCard from Cards.
+ */
 export declare const RunCard: React.FC<RunCardProps>;
 export default RunCard;

package/build/RunTable/RunRow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { RunRowProps } from './RunTable.types';
 import './RunTable.scss';
-declare const RunRow: React.FC<RunRowProps>;
+export declare const RunRow: React.FC<RunRowProps>;
 export default RunRow;

package/build/StudyCard/StudyCard.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import { StudyCardProps } from './StudyCard.types';
 import './StudyCard.scss';
+/**
+ * Note it is a @deprecated component
+ * use StudyCard from Cards.
+ */
 export declare const StudyCard: React.FC<StudyCardProps>;
 export default StudyCard;

package/build/index.d.ts

@@ -23,4 +23,5 @@ export * from './Cards/StudyCard';
 export * from './Cards/RunCard';
 export * from './FilePreview/FilePreview';
 export * from './RunDetails/RunDetails';
+export * from './RunTable/RunRow';
 export * from './RunTable/RunTable';

package/build/index.esm.js

@@ -48596,93 +48596,98 @@ var StudyCard = function (_a) {
             else ;
         } },
         React__default.createElement("div", { className: 'item1' },
-            React__default.createElement("a", { className: 'link', style: { marginRight: '0.75rem' }, onMouseOver: function (e) { return toggleHover('account', true); }, onMouseLeave: function (e) { return toggleHover('account', false); }, href: study && "/".concat(study.owner.name) },
+            React__default.createElement("a", { className: 'link', style: { marginRight: '0.75rem' }, title: 'Go to account page', onMouseOver: function (e) { return toggleHover('account', true); }, onMouseLeave: function (e) { return toggleHover('account', false); }, href: study && "/".concat(study.owner.name) },
                 React__default.createElement(Avatar, { src: study ? study.owner.picture_url : '', size: 32, color: hover.account ? '#40a9ff' : undefined })),
             React__default.createElement("span", { style: { marginRight: '0.75rem' } }, "/"),
-            React__default.createElement("a", { className: 'link', href: projectName && "/".concat(projectOwner, "/projects/").concat(projectName), 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("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(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=details");
-                        }, 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(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, "/workspace");
-                        }, 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(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('debugOver', true);
-                        }, onMouseLeave: function (e) {
-                            toggleHover('debugOver', false);
-                        }, style: { color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } })),
+                    React__default.createElement("span", { title: 'Go to run page' },
+                        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=details");
+                            }, 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();
+                                document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "/runs/").concat(run.id, "?tab=workspace&path=runs/").concat(run.id, "/workspace");
+                            }, 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) {
+                                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: { color: "".concat((hover.debug || hover.debugOver) ? '#40a9ff' : '#000') } }))),
             (study && total > 1) &&
                 React__default.createElement("div", null,
-                    React__default.createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
-                            e.stopPropagation();
-                            if (enableLink) {
-                                document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=details");
-                            }
-                            else {
-                                getValue(JobTabs.details);
-                                toggleHover(JobTabs.workspace, false);
-                                toggleHover(JobTabs.details, true);
-                            }
-                        }, 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(FolderOutlined$1, { className: 'link', onClick: function (e) {
-                            e.stopPropagation();
-                            if (enableLink) {
-                                document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=workspace");
-                            }
-                            else {
-                                getValue(JobTabs.workspace);
-                                toggleHover(JobTabs.workspace, true);
-                                toggleHover(JobTabs.details, false);
-                            }
-                        }, onMouseOver: function (e) {
-                            toggleHover('workspaceOver', true);
-                        }, onMouseLeave: function (e) {
-                            toggleHover('workspaceOver', false);
-                        }, style: { color: "".concat((hover.workspace || hover.workspaceOver)
-                                ? '#40a9ff' : '#000') } }))),
+                    React__default.createElement("span", { title: 'Go to study page' },
+                        React__default.createElement(InfoCircleOutlined$1, { className: 'link', onClick: function (e) {
+                                e.stopPropagation();
+                                if (enableLink) {
+                                    document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=details");
+                                }
+                                else {
+                                    getValue(JobTabs.details);
+                                    toggleHover(JobTabs.workspace, false);
+                                    toggleHover(JobTabs.details, true);
+                                }
+                            }, 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();
+                                if (enableLink) {
+                                    document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(study.id, "?tab=workspace");
+                                }
+                                else {
+                                    getValue(JobTabs.workspace);
+                                    toggleHover(JobTabs.workspace, true);
+                                    toggleHover(JobTabs.details, false);
+                                }
+                            }, onMouseOver: function (e) {
+                                toggleHover('workspaceOver', true);
+                            }, onMouseLeave: function (e) {
+                                toggleHover('workspaceOver', false);
+                            }, style: { color: "".concat((hover.workspace || hover.workspaceOver)
+                                    ? '#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 && total > 1 && "(#".concat(total, ")"),
-                React__default.createElement("button", { style: { all: 'unset', margin: '0 0 0 8px' }, onMouseOver: function (e) { return toggleHover('info', true); }, onMouseLeave: function (e) { return toggleHover('info', false); }, onClick: function (e) {
+                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; });
                     } },
                     React__default.createElement(InfoCircle$1, { size: 14, style: hover.info ? { color: '#40a9ff' } : {} })))),
-        React__default.createElement("div", { className: 'item4' }, study ? dayjs_min(study.status.started_at).format('[on] MMM DD YYYY') : '--'),
+        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) : '', 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 ? ((_f = study.author.display_name) !== null && _f !== void 0 ? _f : 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 })),
-            React__default.createElement("a", { className: 'link', href: study ? recipeLinkFromSource(study.recipe.source) : '', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover('recipe', true); }, onMouseLeave: function (e) { return toggleHover('recipe', false); }, style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
+            React__default.createElement("a", { className: 'link', href: study ? recipeLinkFromSource(study.recipe.source) : '', title: 'Go to recipe page', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover('recipe', true); }, onMouseLeave: function (e) { return toggleHover('recipe', false); }, style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
             study && React__default.createElement("span", { className: 'light-text' },
                 " ",
                 study.recipe.metadata.tag)),
@@ -48693,10 +48698,10 @@ var StudyCard = function (_a) {
                     "".concat(run.meta.progress.completed, " / ").concat(run.meta.progress.total, " steps"),
                 (study && total > 1) && width > 600 &&
                     "".concat(study.status.runs_completed, " / ").concat(total, " runs"))),
-        React__default.createElement("div", { className: 'item9' },
+        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$1(dayjs_min.duration(study.resources_duration.cpu, 'seconds'))) : '--')),
-        React__default.createElement("div", { className: 'item10' },
+        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$1(duration)) : '--')),
         open && React__default.createElement(React__default.Fragment, null,
@@ -48798,69 +48803,72 @@ var RunCard = function (_a) {
             }
         } },
         React__default.createElement("div", { className: 'item1' },
-            React__default.createElement("a", { className: 'link', style: { marginRight: '0.75rem' }, onMouseOver: function (e) { return toggleHover('account', true); }, onMouseLeave: function (e) { return toggleHover('account', false); }, href: study && "/".concat(study.owner.name) },
+            React__default.createElement("a", { className: 'link', style: { marginRight: '0.75rem' }, title: 'Go to account page', onMouseOver: function (e) { return toggleHover('account', true); }, onMouseLeave: function (e) { return toggleHover('account', false); }, href: study && "/".concat(study.owner.name) },
                 React__default.createElement(Avatar, { src: study ? study.owner.picture_url : '', size: 32, color: hover.account ? '#40a9ff' : undefined })),
             React__default.createElement("span", { style: { marginRight: '0.75rem' } }, "/"),
-            React__default.createElement("a", { className: 'link', href: projectName && "/".concat(projectOwner, "/projects/").concat(projectName), 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("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(InfoCircleOutlined$1, { className: 'link', 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(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(PartitionOutlined$1, { className: 'link', 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') } }))),
+                    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) {
+                                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') } })))),
         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) : '--',
-                React__default.createElement("button", { style: { all: 'unset', margin: '0 0 0 8px' }, onMouseOver: function (e) { return toggleHover('info', true); }, onMouseLeave: function (e) { return toggleHover('info', false); }, onClick: function (e) {
+                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; });
                     } },
                     React__default.createElement(InfoCircle$1, { size: 14, style: hover.info ? { color: '#40a9ff' } : {} })))),
-        React__default.createElement("div", { className: 'item4' }, study ? dayjs_min(study.status.started_at).format('[on] MMM DD YYYY') : '--'),
+        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, { 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('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 ? ((_f = study.author.display_name) !== null && _f !== void 0 ? _f : study.author.name) : '--')),
         React__default.createElement("div", { className: 'item6' },
             React__default.createElement("span", { style: { marginRight: '0.75rem' } },
                 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('recipe', true); }, onMouseLeave: function (e) { return toggleHover('recipe', false); }, style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
+            React__default.createElement("a", { className: 'link', href: study ? recipeLinkFromSource(study.recipe.source) : '', title: 'Go to recipe page', target: '_blank', rel: 'noreferrer', onMouseOver: function (e) { return toggleHover('recipe', true); }, onMouseLeave: function (e) { return toggleHover('recipe', false); }, style: hover.recipe ? { color: '#40a9ff' } : {} }, study ? study.recipe.metadata.name : '--'),
             study && React__default.createElement("span", { className: 'light-text' },
                 " ",
                 study.recipe.metadata.tag)),
@@ -48868,10 +48876,10 @@ var RunCard = function (_a) {
             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("div", { className: 'item9' },
+        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' },
+        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,
@@ -49177,7 +49185,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-status {\n  grid-area: runstatus;\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 runcount runstatus runstatus runstatus\" \"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: auto auto 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;\n  grid-auto-rows: auto;\n  align-items: center;\n  grid-gap: 1rem;\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-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 runcount runlink 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::-webkit-scrollbar {\n  height: 10px !important;\n}\n\n::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n::-webkit-scrollbar-thumb {\n  background: #888;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: var(--primary);\n}";
 styleInject(css_248z);
 
 var RunRow = function (_a) {
@@ -49185,13 +49193,57 @@ var RunRow = function (_a) {
     var projectOwner = _a.projectOwner, projectName = _a.projectName, run = _a.run, index = _a.index, client = _a.client, authUser = _a.authUser, style = _a.style, getFileCard = _a.getFileCard, getFolderCard = _a.getFolderCard;
     var statusMap = useRuns(client).statusMap;
     var _d = useState(false), open = _d[0], setOpen = _d[1];
+    /*
+    * Manage hover
+    */
+    var initialValues = {
+        detailsOver: false,
+        workspaceOver: false,
+        debugOver: false,
+    };
+    var _e = useState(initialValues), hover = _e[0], setHover = _e[1];
+    var toggleHover = useCallback(function (id, value) {
+        if (value === void 0) { value = false; }
+        setHover(function (prevHover) {
+            var _a;
+            return (__assign(__assign({}, prevHover), (_a = {}, _a[id] = value, _a)));
+        });
+    }, [hover]);
     return React__default.createElement("div", { style: __assign(__assign({}, style), { margin: '10px 0 0 0', borderColor: (_c = (_b = statusMap[run.status.status]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : '#d0d7de' }), key: run.id, tabIndex: 0, role: 'button', onClick: function () { return setOpen(function (p) { return !p; }); }, className: 'study-run-container' },
         React__default.createElement("div", { className: 'run-count' },
             "# ",
             index),
-        React__default.createElement("div", { className: 'run-status' },
-            run.status.status,
-            " ", "".concat(run.meta.progress.completed, "/").concat(run.meta.progress.total, " steps")),
+        run &&
+            React__default.createElement("div", { className: 'run-link' },
+                React__default.createElement("span", { title: 'Go to run page' },
+                    React__default.createElement(InfoCircleOutlined$1, { onClick: function (e) {
+                            e.stopPropagation();
+                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(run.status.job_id, "/runs/").concat(run.id, "?tab=details");
+                        }, onMouseOver: function (e) {
+                            toggleHover('detailsOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover('detailsOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat(hover.detailsOver ? '#40a9ff' : '#000') } })),
+                React__default.createElement("span", { title: 'Go to workspace page' },
+                    React__default.createElement(FolderOutlined$1, { onClick: function (e) {
+                            e.stopPropagation();
+                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(run.status.job_id, "/runs/").concat(run.id, "?tab=workspace&path=runs/").concat(run.id, "/workspace");
+                        }, onMouseOver: function (e) {
+                            toggleHover('workspaceOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover('workspaceOver', false);
+                        }, style: { marginRight: '0.75rem',
+                            color: "".concat(hover.workspaceOver ? '#40a9ff' : '#000') } })),
+                React__default.createElement("span", { title: 'Go to debug page' },
+                    React__default.createElement(PartitionOutlined$1, { onClick: function (e) {
+                            e.stopPropagation();
+                            document.location = "/".concat(projectOwner, "/projects/").concat(projectName, "/studies/").concat(run.status.job_id, "/runs/").concat(run.id, "?tab=debug");
+                        }, onMouseOver: function (e) {
+                            toggleHover('debugOver', true);
+                        }, onMouseLeave: function (e) {
+                            toggleHover('debugOver', false);
+                        }, style: { color: "".concat(hover.debugOver ? '#40a9ff' : '#000') } }))),
         open && React__default.createElement("div", { className: 'run-details' },
             React__default.createElement(RunDetails, { projectOwner: projectOwner, projectName: projectName, run: run, authUser: authUser, client: client, getFileCard: getFileCard, getFolderCard: getFolderCard, style: style })));
 };
@@ -49206,6 +49258,11 @@ var RunTable = function (_a) {
         revalidateOnFocus: false,
         refreshInterval: study.status.finished_at ? 5000 : undefined,
         errorRetryCount: 3,
+        onSuccess: function (run) {
+            if (page > run.page_count) {
+                setPage(run.page_count);
+            }
+        }
     }), data = _d.data, error = _d.error;
     if (error)
         return React__default.createElement("h1", null, "Error");
@@ -49217,19 +49274,33 @@ var RunTable = function (_a) {
     var btnStyle = {
         all: 'unset',
         cursor: 'pointer',
-        margin: '10px 0 0 0'
+        border: '1px solid #d9d9d9',
+        fontSize: '11px',
+        color: '1px solid #d9d9d9',
+        textAlign: 'center',
+        padding: '8px 8px',
+        borderRadius: '2px',
+        margin: '10px 0 0 0',
+        width: '16px',
+        flexShrink: 0,
     };
+    var btnPgStyle = function (k) { return (__assign(__assign({}, btnStyle), { border: data.page !== (k + 1) ? '1px solid #d9d9d9' : '1px solid var(--primary)', color: data.page !== (k + 1) ? '#000000d9' : 'var(--primary)', margin: '0 4px 0 4px' })); };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", null,
-            data.resources.map(function (item, index) { return (React__default.createElement(RunRow, { key: "run-".concat(item.id), projectOwner: projectOwner, projectName: projectName, run: item, index: index + (page - 1) * perPage, client: client, authUser: authUser, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard })); }),
+            data.resources.map(function (item, index) { return (React__default.createElement(RunRow, { key: "run-".concat(item.id), projectOwner: projectOwner, projectName: projectName, run: item, index: (index + 1) + (page - 1) * perPage, client: client, authUser: authUser, style: style, getFileCard: getFileCard, getFolderCard: getFolderCard })); }),
             React__default.createElement("div", { className: 'run-navigator' },
                 React__default.createElement("div", null,
-                    React__default.createElement("button", { style: btnStyle, disabled: !data.resources, onClick: function () { return setPage(function (p) {
+                    React__default.createElement("button", { style: __assign(__assign({}, btnStyle), { cursor: "".concat(page - 1 < 1 ? 'not-allowed' : 'pointer') }), disabled: !data.resources, onClick: function () { return setPage(function (p) {
                             return p - 1 > 1 ? p - 1 : 1;
                         }); } },
-                        React__default.createElement(ChevronLeft$1, { size: 24, color: page - 1 < 1 ? 'gray' : '#000' }))),
+                        React__default.createElement(ChevronLeft$1, null))),
+                React__default.createElement("div", { style: { margin: '10px auto 0 auto' }, className: 'container-scroll' }, data.resources && Array.from(Array(data.page_count).keys()).map(function (k) {
+                    return (React__default.createElement("button", { key: "page-".concat(k), onClick: function (e) {
+                            setPage(k + 1);
+                        }, style: btnPgStyle(k) }, k + 1));
+                })),
                 React__default.createElement("div", { style: { margin: '10px auto 0 auto' } },
-                    React__default.createElement("input", { onChange: function (e) {
+                    React__default.createElement("input", { title: 'Number of rows for page', onChange: function (e) {
                             var val = parseInt(e.target.value);
                             if (val > 100)
                                 val = 100; // Max 100
@@ -49238,17 +49309,11 @@ var RunTable = function (_a) {
                             setTimeout(function () {
                                 setPerPage(val);
                             }, 3000); // Refresh after 3s
-                        }, style: {
-                            padding: '5px 5px',
-                            borderRadius: '6px',
-                            width: '100px',
-                            fontSize: '1rem',
-                            border: '1px solid rgba(0, 0, 0, 0.125)',
-                        }, type: 'number', min: 1, max: data.total_count, defaultValue: perPage })),
+                        }, className: 'run-pg-input', type: 'number', min: 1, max: data.total_count, defaultValue: perPage })),
                 React__default.createElement("div", null,
-                    React__default.createElement("button", { style: btnStyle, disabled: !data.next_page, onClick: function () { return setPage(function (p) { return p + 1; }); } },
-                        React__default.createElement(ChevronRight$1, { size: 24, color: !data.next_page ? 'gray' : '#000' })))))));
+                    React__default.createElement("button", { style: __assign(__assign({}, btnStyle), { cursor: "".concat(page >= data.page_count ? 'not-allowed' : 'pointer') }), disabled: !data.next_page, onClick: function () { return setPage(function (p) { return p + 1; }); } },
+                        React__default.createElement(ChevronRight$1, null)))))));
 };
 
-export { APIClient, AuthUser, Avatar, Button, ComboBox, ComboFileSelector, ConditionalWrapper, ConfigureLocalRun, CreateStudy, Dropdown, FileInput, FilePreview, FormInput, GetGeometry, GetModel, InputDescription, Label, Logo, NumberInput, RadioList, RecipeInputsForm, RunCard, RunDetails, RunTable, 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 };
+export { APIClient, AuthUser, Avatar, Button, ComboBox, ComboFileSelector, ConditionalWrapper, ConfigureLocalRun, CreateStudy, Dropdown, FileInput, FilePreview, FormInput, GetGeometry, GetModel, InputDescription, Label, Logo, NumberInput, RadioList, RecipeInputsForm, RunCard, RunDetails, RunRow, RunTable, 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