pollination-react-io 1.51.0 → 1.52.0

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

@@ -1,15 +1,10 @@
-import { CloudJob, RunList, RunStatusEnum, UserPrivate } from '@pollination-solutions/pollination-sdk';
+import { CloudJob, UserPrivate } from '@pollination-solutions/pollination-sdk';
 import { CSSProperties } from 'react';
 import { APIClient } from '../hooks';
 export declare enum JobTabs {
     details = "details",
     workspace = "workspace"
 }
-export interface RunListParams {
-    page: number;
-    pageSize: number;
-    filter: RunStatusEnum;
-}
 export interface StudyCardProps {
     projectOwner: string;
     projectName: string;
@@ -23,6 +18,5 @@ export interface StudyCardProps {
     enableLink?: boolean;
     canWrite?: boolean;
     interval?: number;
-    getValue?: (runList: RunList) => any;
-    runListParams?: RunListParams;
+    getValue?: (job: CloudJob) => any;
 }

package/build/RunDetails/Cards/FileCard.d.ts

@@ -1,10 +1,16 @@
 import React from 'react';
 import './Card.scss';
+import { APIClient } from '../../hooks';
 export interface FileCardProps {
+    projectOwner?: string;
+    projectName?: string;
+    client?: APIClient;
+    studyId?: string;
+    runId?: string;
     label: string;
     path: string;
     description: string;
-    file?: Blob | File | string;
+    file?: Blob | File | string | undefined;
     onClicked?: (card: FileCardProps) => any;
 }
 export declare const FileCard: React.FC<FileCardProps>;

package/build/SendGeometry/SendGeometry.types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 export declare enum Action {
     add = "add",
     delete = "delete",
@@ -17,5 +18,6 @@ export interface SendGeometryProps {
     };
     buttonLabel?: string;
     geometryOptions?: GeometryOptions;
+    style?: CSSProperties;
 }
 export {};

package/build/SendModel/SendModel.types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 export declare enum Action {
     add = "add",
     delete = "delete",
@@ -13,4 +14,5 @@ export interface SendModelProps {
         [index in Action]: boolean;
     };
     buttonLabel?: string;
+    style?: CSSProperties;
 }

package/build/SendResults/SendResults.types.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 import { XOR } from '../ts-utils';
 export declare enum Action {
     add = "add",
@@ -18,5 +19,6 @@ export interface SendResultsProps {
     };
     buttonLabel?: string;
     geometryOptions?: ResultsOptions;
+    style?: CSSProperties;
 }
 export {};

package/build/atoms/SettingsButton/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { CSSProperties, FC, ReactNode } from 'react';
 import { OptionGroup } from '../Dropdown/Dropdown';
 export interface SettingsButtonProps {
     onClick: () => void;
@@ -9,6 +9,7 @@ export interface SettingsButtonProps {
     triggerIcon?: React.ReactNode;
     helpText?: string;
     icon?: ReactNode;
+    style?: CSSProperties;
 }
 export declare const SettingsButton: FC<SettingsButtonProps>;
 export default SettingsButton;

package/build/index.esm.js

@@ -3186,7 +3186,7 @@ var Button = function (_a) {
         children));
 };
 
-var css_248z$n = ":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.btn-group {\n  width: fit-content;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.btn-group:hover {\n  box-shadow: 0 1px 2px 0 rgba(26, 115, 232, 0.45), 0 1px 3px 1px rgba(26, 115, 232, 0.3);\n}\n\n.btn-group-disabled:hover {\n  box-shadow: none;\n}\n\n.btn-group input {\n  width: 100%;\n}\n\n.btn-group input::placeholder {\n  color: var(--primary1);\n}\n\n.btn-group-disabled input::placeholder {\n  color: var(--slate9);\n}\n\n.btn-group * {\n  background-color: var(--primary);\n  color: white;\n  transition: background-color 0.125s ease-in-out;\n}\n\n.btn-group-disabled * {\n  background-color: var(--slate5);\n  border-color: var(--slate11) !important;\n  color: var(--slate11);\n  cursor: default !important;\n}\n\n.btn-group i,\n.btn-group svg {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.btn-group button,\n.btn-group input {\n  display: flex;\n  padding: 8px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--primary);\n  border-left-color: #096dd9;\n  transition: box-shadow 0.125s ease-in-out;\n  line-height: 1.5rem;\n}\n\n.btn-group button:active {\n  box-shadow: inset 0px 0px 14px 14px #096dd9;\n}\n\n.btn-group button:first-child,\n.btn-group input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: 0px;\n  border-left-color: var(--primary);\n}\n\n.btn-group button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n\n.btn-group button:not(:last-child),\n.btn-group input:not(:last-child) {\n  border-right: none;\n}\n\n.btn-group button:focus-visible,\n.btn-group input:focus-visible {\n  outline: none;\n}\n\n.btn-group button:focus,\n.btn-group input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.btn-group:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.btn-group button:hover,\n.btn-group input:hover {\n  background-color: var(--primary2);\n  z-index: 11;\n}\n\n.btn-group-disabled:hover button:hover {\n  box-shadow: none;\n}\n\n.btn-group-disabled:hover button:hover,\n.btn-group-disabled:hover input:hover {\n  background-color: var(--slate5);\n}\n\n.options-content {\n  font-size: clamp(0.65rem, 8vw - 0.75rem, 0.85rem);\n}";
+var css_248z$n = ":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.btn-group {\n  width: fit-content;\n  display: flex;\n  border-radius: 4px;\n  box-sizing: border-box;\n}\n\n.btn-group:hover {\n  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px -2px, rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.09) 0px 3px 8px 3px;\n}\n\n.btn-group-disabled:hover {\n  box-shadow: none;\n}\n\n.btn-group input {\n  width: 100%;\n}\n\n.btn-group input::placeholder {\n  color: var(--primary1);\n}\n\n.btn-group-disabled input::placeholder {\n  color: var(--slate9);\n}\n\n.btn-group * {\n  background-color: var(--primary);\n  color: white;\n  transition: background-color 0.125s ease-in-out;\n}\n\n.btn-group-disabled * {\n  background-color: var(--slate5);\n  border-color: var(--slate11) !important;\n  color: var(--slate11);\n  cursor: default !important;\n}\n\n.btn-group i,\n.btn-group svg {\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.btn-group button,\n.btn-group input {\n  display: flex;\n  padding: 8px 10px;\n  cursor: pointer;\n  float: left;\n  z-index: 10;\n  align-items: center;\n  gap: 8px;\n  border: 1px solid var(--primary);\n  border-left-color: var(--primary2);\n  transition: box-shadow 0.125s ease-in-out;\n  line-height: 1.5rem;\n}\n\n.btn-group button:active {\n  box-shadow: inset 0px 0px 7px 7px var(--primary2);\n}\n\n.btn-group button:first-child,\n.btn-group input:first-child {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-top-right-radius: 0px;\n  border-bottom-right-radius: 0px;\n  border-left-color: var(--primary);\n}\n\n.btn-group button:last-child {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top-left-radius: 0px;\n  border-bottom-left-radius: 0px;\n}\n\n.btn-group button:not(:last-child),\n.btn-group input:not(:last-child) {\n  border-right: none;\n}\n\n.btn-group button:focus-visible,\n.btn-group input:focus-visible {\n  outline: none;\n}\n\n.btn-group button:focus,\n.btn-group input:focus {\n  outline: none;\n}\n\n/* Clear floats (clearfix hack) */\n.btn-group:after {\n  content: \"\";\n  clear: both;\n  display: table;\n}\n\n.btn-group button:hover,\n.btn-group input:hover {\n  background-color: var(--primary2);\n  z-index: 11;\n}\n\n.btn-group-disabled:hover button:hover {\n  box-shadow: none;\n}\n\n.btn-group-disabled:hover button:hover,\n.btn-group-disabled:hover input:hover {\n  background-color: var(--slate5);\n}\n\n.options-content {\n  font-size: clamp(0.65rem, 8vw - 0.75rem, 0.85rem);\n}";
 styleInject(css_248z$n);
 
 var ButtonGroup = function (_a) {
@@ -15712,21 +15712,21 @@ var RadioList = function (_a) {
 };
 
 var SettingsButton = function (_a) {
-    var onClick = _a.onClick, label = _a.label, options = _a.options, asButtons = _a.asButtons, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.triggerIcon, triggerIcon = _c === void 0 ? React__default.createElement(CaretDownFill$1, null) : _c, helpText = _a.helpText, _d = _a.icon, icon = _d === void 0 ? React__default.createElement(Logo, null) : _d;
+    var onClick = _a.onClick, label = _a.label, options = _a.options, asButtons = _a.asButtons, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.triggerIcon, triggerIcon = _c === void 0 ? React__default.createElement(CaretDownFill$1, null) : _c, helpText = _a.helpText, _d = _a.icon, icon = _d === void 0 ? React__default.createElement(Logo, null) : _d, _e = _a.style, style = _e === void 0 ? {} : _e;
     return (React__default.createElement(ConditionalWrapper, { condition: typeof helpText !== 'undefined' || disabled, wrapper: function (children) { return React__default.createElement(InputDescription, { helpText: disabled ? 'Enabled in Pollination CAD plugins.' : helpText }, children); } },
         React__default.createElement(ButtonGroup, { disabled: disabled },
-            React__default.createElement("button", { type: 'button', onClick: onClick, disabled: disabled, style: {
-                    flex: 1,
-                } },
+            React__default.createElement("button", { type: 'button', onClick: onClick, disabled: disabled, style: __assign(__assign({}, style), { flex: 1 }) },
                 icon,
                 label),
             options && options.length
                 && React__default.createElement(React__default.Fragment, null, asButtons ?
                     React__default.createElement(React__default.Fragment, null, options.reduce(function (p, c) { return __spreadArray(__spreadArray([], p, true), c.options, true); }, []).map(function (o) {
                         var _a;
-                        return React__default.createElement("button", { type: 'button', key: o.id, style: {
-                                boxShadow: !disabled && o.checked ? 'inset 0px 0px 9px 4px #096dd9' : undefined
-                            }, onClick: function (e) { return o.onSelect && o.onSelect(o); } }, (_a = o.icon) !== null && _a !== void 0 ? _a : o.label);
+                        return React__default.createElement("button", { type: 'button', key: o.id, style: __assign(__assign({}, style), { boxShadow: !disabled && o.checked
+                                    ? style['highlight']
+                                        ? "inset 0px 0px 9px 4px ".concat(style['highlight'])
+                                        : 'inset 0px 0px 9px 4px #096dd9'
+                                    : undefined }), onClick: function (e) { return o.onSelect && o.onSelect(o); } }, (_a = o.icon) !== null && _a !== void 0 ? _a : o.label);
                     }))
                     :
                         React__default.createElement(Dropdown, { trigger: (React__default.createElement("button", { type: 'button' }, triggerIcon)), optionGroups: options, contentProps: {
@@ -44291,9 +44291,9 @@ var getAction$2 = function (key) {
     }
 };
 var SendResults = function (_a) {
-    var results = _a.results, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Results' : _b, geometryOptions = _a.geometryOptions;
-    var _c = useState(defaultAction !== null && defaultAction !== void 0 ? defaultAction : Action$2.preview), selOpt = _c[0], setSelOpt = _c[1];
-    var _d = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _d[0], setKey = _d[1];
+    var results = _a.results, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Results' : _b, geometryOptions = _a.geometryOptions, _c = _a.style, style = _c === void 0 ? {} : _c;
+    var _d = useState(defaultAction !== null && defaultAction !== void 0 ? defaultAction : Action$2.preview), selOpt = _d[0], setSelOpt = _d[1];
+    var _e = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _e[0], setKey = _e[1];
     var sendMessage = useSendMessage().sendMessage;
     var disabled = useMemo(function () {
         return !checkPollinationPanel();
@@ -44323,7 +44323,7 @@ var SendResults = function (_a) {
             });
         };
     }, [disabled, geometryOptions, key, results, selOpt, sendMessage]);
-    return (React__default.createElement(SettingsButton, { disabled: disabled, onClick: function () {
+    return (React__default.createElement(SettingsButton, { style: style, disabled: disabled, onClick: function () {
             if (disabled)
                 return;
             sendMessage(getAction$2(selOpt), {
@@ -44341,7 +44341,7 @@ var SendResults = function (_a) {
                         id: Action$2.preview,
                         label: 'Preview',
                         checked: selOpt === Action$2.preview,
-                        icon: React__default.createElement(Eyeglasses$1, { size: 16 }),
+                        icon: React__default.createElement(Eyeglasses$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.preview ? undefined : Action$2.preview); });
@@ -44352,7 +44352,7 @@ var SendResults = function (_a) {
                         id: Action$2.add,
                         label: 'Add',
                         checked: selOpt === Action$2.add,
-                        icon: React__default.createElement(Building$1, { size: 16 }),
+                        icon: React__default.createElement(Building$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.add ? undefined : Action$2.add); });
@@ -44374,7 +44374,7 @@ var SendResults = function (_a) {
                         id: Action$2.clear,
                         label: 'Clear',
                         checked: selOpt === Action$2.clear,
-                        icon: React__default.createElement(Recycle$1, { size: 16 }),
+                        icon: React__default.createElement(Recycle$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.clear ? undefined : Action$2.clear); });
@@ -44385,7 +44385,7 @@ var SendResults = function (_a) {
                         id: Action$2.subscribePreview,
                         label: 'Subscribe Preview',
                         checked: selOpt === Action$2.subscribePreview,
-                        icon: React__default.createElement(ArrowRepeat$1, { size: 16 }),
+                        icon: React__default.createElement(ArrowRepeat$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.subscribePreview ? undefined : Action$2.subscribePreview); });
@@ -46796,7 +46796,7 @@ var getAction$1 = function (key) {
     }
 };
 var SendGeometry = function (_a) {
-    var geometry = _a.geometry, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Geometry' : _b, geometryOptions = _a.geometryOptions;
+    var geometry = _a.geometry, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Geometry' : _b, geometryOptions = _a.geometryOptions, style = _a.style;
     var _c = useState(defaultAction !== null && defaultAction !== void 0 ? defaultAction : Action$1.preview), selOpt = _c[0], setSelOpt = _c[1];
     var _d = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _d[0], setKey = _d[1];
     var sendMessage = useSendMessage().sendMessage;
@@ -46825,7 +46825,7 @@ var SendGeometry = function (_a) {
             });
         };
     }, [disabled, geometry, geometryOptions, key, selOpt, sendMessage]);
-    return (React__default.createElement(SettingsButton, { disabled: disabled, onClick: function () {
+    return (React__default.createElement(SettingsButton, { style: style, disabled: disabled, onClick: function () {
             if (disabled)
                 return;
             sendMessage(getAction$1(selOpt), {
@@ -46843,7 +46843,7 @@ var SendGeometry = function (_a) {
                         id: Action$1.preview,
                         label: 'Preview',
                         checked: selOpt === Action$1.preview,
-                        icon: React__default.createElement(Eyeglasses$1, { size: 16 }),
+                        icon: React__default.createElement(Eyeglasses$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.preview ? undefined : Action$1.preview); });
@@ -46854,7 +46854,7 @@ var SendGeometry = function (_a) {
                         id: Action$1.add,
                         label: 'Add',
                         checked: selOpt === Action$1.add,
-                        icon: React__default.createElement(Building$1, { size: 16 }),
+                        icon: React__default.createElement(Building$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.add ? undefined : Action$1.add); });
@@ -46865,7 +46865,7 @@ var SendGeometry = function (_a) {
                         id: Action$1.delete,
                         label: 'Delete',
                         checked: selOpt === Action$1.delete,
-                        icon: React__default.createElement(Trash$1, { size: 16 }),
+                        icon: React__default.createElement(Trash$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.delete ? undefined : Action$1.delete); });
@@ -46876,7 +46876,7 @@ var SendGeometry = function (_a) {
                         id: Action$1.clear,
                         label: 'Clear',
                         checked: selOpt === Action$1.clear,
-                        icon: React__default.createElement(Recycle$1, { size: 16 }),
+                        icon: React__default.createElement(Recycle$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.clear ? undefined : Action$1.clear); });
@@ -46887,7 +46887,7 @@ var SendGeometry = function (_a) {
                         id: Action$1.subscribePreview,
                         label: 'Subscribe Preview',
                         checked: selOpt === Action$1.subscribePreview,
-                        icon: React__default.createElement(ArrowRepeat$1, { size: 16 }),
+                        icon: React__default.createElement(ArrowRepeat$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.subscribePreview ? undefined : Action$1.subscribePreview); });
@@ -46923,9 +46923,9 @@ var getAction = function (key) {
     }
 };
 var SendModel = function (_a) {
-    var hbjson = _a.hbjson, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Model' : _b;
-    var _c = useState(defaultAction !== null && defaultAction !== void 0 ? defaultAction : Action.preview), selOpt = _c[0], setSelOpt = _c[1];
-    var _d = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _d[0], setKey = _d[1];
+    var hbjson = _a.hbjson, defaultAction = _a.defaultAction, defaultKey = _a.defaultKey, optionsConfig = _a.optionsConfig, _b = _a.buttonLabel, buttonLabel = _b === void 0 ? 'Send Model' : _b, _c = _a.style, style = _c === void 0 ? {} : _c;
+    var _d = useState(defaultAction !== null && defaultAction !== void 0 ? defaultAction : Action.preview), selOpt = _d[0], setSelOpt = _d[1];
+    var _e = useState(defaultKey !== null && defaultKey !== void 0 ? defaultKey : performance.now().toString()), key = _e[0], setKey = _e[1];
     var sendHbjson = useSendHbjson().sendHbjson;
     var disabled = useMemo(function () {
         return !checkPollinationPanel();
@@ -46958,7 +46958,7 @@ var SendModel = function (_a) {
             });
         };
     }, [disabled, hbjson, key, selOpt, sendHbjson]);
-    return (React__default.createElement(SettingsButton, { disabled: disabled, onClick: function () {
+    return (React__default.createElement(SettingsButton, { style: style, disabled: disabled, onClick: function () {
             if (disabled)
                 return;
             sendHbjson(getAction(selOpt), {
@@ -46979,7 +46979,7 @@ var SendModel = function (_a) {
                         id: Action.preview,
                         label: 'Preview',
                         checked: selOpt === Action.preview,
-                        icon: React__default.createElement(Eyeglasses$1, { size: 16 }),
+                        icon: React__default.createElement(Eyeglasses$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.preview ? undefined : Action.preview); });
@@ -46990,7 +46990,7 @@ var SendModel = function (_a) {
                         id: Action.add,
                         label: 'Add',
                         checked: selOpt === Action.add,
-                        icon: React__default.createElement(Building$1, { size: 16 }),
+                        icon: React__default.createElement(Building$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.add ? undefined : Action.add); });
@@ -47001,7 +47001,7 @@ var SendModel = function (_a) {
                         id: Action.clear,
                         label: 'Clear',
                         checked: selOpt === Action.clear,
-                        icon: React__default.createElement(Recycle$1, { size: 16 }),
+                        icon: React__default.createElement(Recycle$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.clear ? undefined : Action.clear); });
@@ -47012,7 +47012,7 @@ var SendModel = function (_a) {
                         id: Action.subscribePreview,
                         label: 'Subscribe Preview',
                         checked: selOpt === Action.subscribePreview,
-                        icon: React__default.createElement(ArrowRepeat$1, { size: 16 }),
+                        icon: React__default.createElement(ArrowRepeat$1, { size: 16, color: style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.subscribePreview ? undefined : Action.subscribePreview); });
@@ -48538,21 +48538,21 @@ var formatDuration$1 = function (duration) {
 var StudyCard = function (_a) {
     var _b;
     var _c, _d, _e, _f, _g, _h;
-    var projectName = _a.projectName, projectOwner = _a.projectOwner, _study = _a.study, style = _a.style, authUser = _a.authUser, client = _a.client, enableClick = _a.enableClick, _j = _a.getTab, getTab = _j === void 0 ? function (tab) { } : _j, _k = _a.defaultTab, defaultTab = _k === void 0 ? '' : _k, _l = _a.enableLink, enableLink = _l === void 0 ? false : _l, _m = _a.canWrite, canWrite = _m === void 0 ? false : _m, _o = _a.getValue, getValue = _o === void 0 ? function (runList) { } : _o, _p = _a.interval, interval = _p === void 0 ? 5000 : _p, _q = _a.runListParams, runListParams = _q === void 0 ? { page: 1, pageSize: 1, filter: undefined } : _q;
+    var projectName = _a.projectName, projectOwner = _a.projectOwner, _study = _a.study, style = _a.style, authUser = _a.authUser, client = _a.client, enableClick = _a.enableClick, _j = _a.getTab, getTab = _j === void 0 ? function (tab) { } : _j, _k = _a.defaultTab, defaultTab = _k === void 0 ? '' : _k, _l = _a.enableLink, enableLink = _l === void 0 ? false : _l, _m = _a.canWrite, canWrite = _m === void 0 ? false : _m, _o = _a.getValue, getValue = _o === void 0 ? function (job) { } : _o, _p = _a.interval, interval = _p === void 0 ? 5000 : _p;
     /**
      * Fetch hooks
      */
-    var _r = useJobs(client), fetchJob = _r.fetchJob, getDuration = _r.getDuration, statusMap = _r.statusMap, deleteJob = _r.deleteJob, cancelJob = _r.cancelJob;
+    var _q = useJobs(client), fetchJob = _q.fetchJob, getDuration = _q.getDuration, statusMap = _q.statusMap, deleteJob = _q.deleteJob, cancelJob = _q.cancelJob;
     var listRuns = useRuns(client).listRuns;
-    var _s = useWindowDimensions(), width = _s.width; _s.height;
-    var _t = useState(false), seeDescription = _t[0], setSeeDescription = _t[1];
-    var _u = useState(false), seeAction = _u[0], setSeeAction = _u[1];
-    var _v = useState(false), stopRefresh = _v[0], setStopRefresh = _v[1];
-    var _w = useState(false), isReady = _w[0], setIsReady = _w[1];
+    var _r = useWindowDimensions(), width = _r.width; _r.height;
+    var _s = useState(false), seeDescription = _s[0], setSeeDescription = _s[1];
+    var _t = useState(false), seeAction = _t[0], setSeeAction = _t[1];
+    var _u = useState(false), stopRefresh = _u[0], setStopRefresh = _u[1];
+    var _v = useState(false), isReady = _v[0], setIsReady = _v[1];
     /**
      * From job to run
      */
-    var _x = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
+    var _w = useSWR(authUser && _study ? [projectOwner, projectName, _study.id] : undefined, fetchJob, {
         revalidateOnFocus: false,
         refreshInterval: stopRefresh ? undefined : interval,
         fallbackData: _study,
@@ -48560,24 +48560,33 @@ var StudyCard = function (_a) {
         onSuccess: function (study, key, config) {
             if (!study)
                 return;
-            var page = runListParams.page, pageSize = runListParams.pageSize, filter = runListParams.filter;
-            listRuns(projectOwner, projectName, [study.id], page, pageSize, filter)
-                .then(function (d) {
-                if (d.resources.length === 1) {
-                    setRun(d.resources[0]);
-                    sendRunList(d);
-                }
-                else {
-                    sendRunList(d);
-                }
-            })
-                .catch(function () { return setRun(undefined); })
-                .finally(function () { return setIsReady(true); });
+            var tot = study.status.runs_pending +
+                study.status.runs_running +
+                study.status.runs_failed +
+                study.status.runs_completed +
+                study.status.runs_cancelled;
+            if (tot === 1) {
+                listRuns(projectOwner, projectName, [study.id], 1, 1)
+                    .then(function (d) {
+                    if (d.resources.length === 1) {
+                        setRun(d.resources[0]);
+                    }
+                })
+                    .catch(function () { setRun(undefined); })
+                    .finally(function () {
+                    sendJob(study);
+                    setIsReady(true);
+                });
+            }
+            else {
+                sendJob(study);
+                setIsReady(true);
+            }
             if (study.status.finished_at)
                 setStopRefresh(true);
         }
-    }), study = _x.data; _x.error; _x.isValidating;
-    var sendRunList = useCallback(function (runList) { return getValue(runList); }, [study]);
+    }), study = _w.data; _w.error; _w.isValidating;
+    var sendJob = useCallback(function (job) { return getValue(job); }, [study]);
     var total = useMemo(function () {
         if (!study)
             return undefined;
@@ -48600,8 +48609,8 @@ var StudyCard = function (_a) {
         }
         return study.status.status.toLocaleLowerCase();
     }, [study]);
-    var _y = useState(), run = _y[0], setRun = _y[1];
-    var _z = useState(getDuration(study)), duration = _z[0], setDuration = _z[1];
+    var _x = useState(), run = _x[0], setRun = _x[1];
+    var _y = useState(getDuration(study)), duration = _y[0], setDuration = _y[1];
     useEffect(function () {
         setRun(undefined);
         if (!study)
@@ -48632,7 +48641,7 @@ var StudyCard = function (_a) {
         info: false,
         settings: false
     };
-    var _0 = useState(__assign(__assign({}, initialValues), (_b = {}, _b[defaultTab] = true, _b))), hover = _0[0], setHover = _0[1];
+    var _z = useState(__assign(__assign({}, initialValues), (_b = {}, _b[defaultTab] = true, _b))), hover = _z[0], setHover = _z[1];
     var toggleHover = useCallback(function (id, value) {
         if (value === void 0) { value = false; }
         setHover(function (prevHover) {
@@ -49159,26 +49168,132 @@ var getFileIcon = function (size, type) {
     }
 };
 
+var CADtypeEnum;
+(function (CADtypeEnum) {
+    CADtypeEnum[CADtypeEnum["HBJSON"] = 0] = "HBJSON";
+    CADtypeEnum[CADtypeEnum["VSF"] = 1] = "VSF";
+})(CADtypeEnum || (CADtypeEnum = {}));
 var FileCard = function (_a) {
     var _b, _c;
-    var label = _a.label, path = _a.path, file = _a.file, description = _a.description, onClicked = _a.onClicked;
+    var projectOwner = _a.projectOwner, projectName = _a.projectName, client = _a.client, studyId = _a.studyId, runId = _a.runId, label = _a.label, path = _a.path, file = _a.file, description = _a.description, onClicked = _a.onClicked;
+    var host = getHost();
     var _d = useState(false), open = _d[0], setOpen = _d[1];
     var _e = useState(false), over = _e[0], setOver = _e[1];
+    var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
+    // Data to use for CAD injections
+    var _g = useState(), CADdata = _g[0], setCADdata = _g[1];
+    // File to send to parent
+    var _h = useState(), currFile = _h[0], setCurrFile = _h[1];
+    /**
+     * Check if run id is a valid UUID or file path (Local sim)
+     * @param str run id
+     * @returns true or false
+     */
+    var checkIfValidUUID = function (str) {
+        var regexExp = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi;
+        return regexExp.test(str);
+    };
+    var isCloud = useMemo(function () { return checkIfValidUUID(runId); }, [runId]);
+    var downloadArtifact = useArtifacts(projectOwner, projectName, client).downloadArtifact;
+    var setCADintegration = useCallback(function (file) {
+        if (!file)
+            return;
+        if (host !== 'rhino')
+            return;
+        if (path.endsWith('hbjson')) {
+            var reader_1 = new FileReader();
+            reader_1.readAsText(file);
+            reader_1.onload = function () {
+                var res = reader_1 === null || reader_1 === void 0 ? void 0 : reader_1.result;
+                setCADdata({
+                    data: JSON.parse(res),
+                    id: path,
+                    type: CADtypeEnum.HBJSON
+                });
+            };
+        }
+        else if (path.endsWith('vsf')) {
+            var reader_2 = new FileReader();
+            reader_2.readAsText(file);
+            reader_2.onload = function () {
+                var res = reader_2 === null || reader_2 === void 0 ? void 0 : reader_2.result;
+                setCADdata({
+                    data: JSON.parse(res),
+                    id: path,
+                    type: CADtypeEnum.VSF
+                });
+            };
+        }
+    }, [file]);
+    /**
+     * Fetch file from cloud
+     */
+    var fetchAndSet = function (url) {
+        fetch(url)
+            .then(function (response) { return response.blob()
+            .then(function (blob) {
+            setCurrFile(blob);
+            setCADintegration(blob);
+        }); })
+            .catch(function () { })
+            .finally(function () { return setIsLoading(false); });
+    };
+    useEffect(function () {
+        if (isCloud) {
+            // Generate Blob on click
+            studyId && downloadArtifact(path, studyId)
+                .then(function (url) { return fetchAndSet(url); })
+                .catch(function () { return onClicked({ label: label, path: path, file: undefined, description: description, runId: runId }); });
+        }
+        else {
+            // TODO: Local later...
+            onClicked({ label: label, path: path, file: currFile, description: description, runId: runId });
+        }
+    }, [studyId, runId, label, path]);
     return React__default.createElement("div", { className: 'card-param card-folder', tabIndex: 0, role: 'button', key: label, onClick: function (event) {
             event.stopPropagation();
-            onClicked({ label: label, path: path, file: file, description: description });
+            onClicked({ label: label, path: path, file: currFile, description: description });
         } },
         React__default.createElement("div", { className: 'title-param' },
-            React__default.createElement("div", { style: { float: 'left', margin: '0 8px 0 0' } },
+            React__default.createElement("div", { style: { float: 'left', margin: '0 8px 0 0' } }, !isLoading ? React__default.createElement("div", null,
                 React__default.createElement("span", { style: { margin: '0 8px 0 0' } }, getFileIcon(18, ((_c = (_b = path.split('/')
                     .reverse()[0]) === null || _b === void 0 ? void 0 : _b.split('.')) === null || _c === void 0 ? void 0 : _c.pop()) || '')),
-                label),
+                label)
+                : React__default.createElement(LoadingIcon, { size: 14 })),
             React__default.createElement("div", { style: { textAlign: 'right' } },
                 React__default.createElement("button", { style: { all: 'unset', margin: '0 0 0 8px' }, onMouseOver: function () { return setOver(true); }, onMouseLeave: function () { return setOver(false); }, onClick: function (event) {
                         event.stopPropagation();
                         setOpen(function (prev) { return !prev; });
                     } },
                     React__default.createElement(InfoCircle$1, { size: 14, style: over ? { color: '#40a9ff' } : {} })))),
+        CADdata && React__default.createElement("hr", null),
+        React__default.createElement("div", { className: 'value-param' },
+            CADdata && CADdata.type === CADtypeEnum.HBJSON && React__default.createElement(SendModel, { style: {
+                    backgroundColor: '#fff',
+                    color: 'var(--primary3)',
+                    border: '1px solid var(--slate9)',
+                    // @ts-ignore
+                    highlight: 'var(--slate7)'
+                }, hbjson: CADdata.data, buttonLabel: 'Model', defaultAction: Action.add, optionsConfig: {
+                    add: true,
+                    delete: false,
+                    'subscribe-preview': false,
+                    clear: true,
+                    preview: true
+                }, key: CADdata.id, defaultKey: CADdata.id }),
+            CADdata && CADdata.type === CADtypeEnum.VSF && React__default.createElement(SendResults, { style: {
+                    backgroundColor: '#fff',
+                    color: 'var(--primary3)',
+                    border: '1px solid var(--slate9)',
+                    // @ts-ignore
+                    highlight: 'var(--slate7)'
+                }, results: CADdata.data, buttonLabel: 'Results', defaultAction: Action.add, optionsConfig: {
+                    add: true,
+                    delete: false,
+                    'subscribe-preview': false,
+                    clear: true,
+                    preview: true
+                }, key: CADdata.id, defaultKey: CADdata.id })),
         open && React__default.createElement("div", { className: 'card-description' }, description));
 };
 
@@ -49209,16 +49324,6 @@ styleInject(css_248z$2);
 
 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, 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;
-            getFileCard(__assign(__assign({}, card), { file: blob }));
-        }); })
-            .catch(function () { });
-    };
     var _b = useState([]), currData = _b[0], setCurrData = _b[1];
     var _c = useState([]), currParams = _c[0], setCurrParams = _c[1];
     var _d = useState([]), currFiles = _d[0], setCurrFiles = _d[1];
@@ -49234,7 +49339,7 @@ var RunContent = function (_a) {
             switch (i.type) {
                 case 'StepFileInput':
                 case 'StepFileOutput':
-                    files.push({ label: i.name,
+                    files.push({ runId: runId, label: i.name,
                         path: i.source.path, description: i.description });
                     break;
                 case 'StepFolderInput':
@@ -49262,16 +49367,7 @@ var RunContent = function (_a) {
      * @param card File card props
      */
     var onFileClicked = function (card) {
-        if (isCloud) {
-            // Generate Blob on click
-            studyId && downloadArtifact(card.path, studyId)
-                .then(function (url) { return fetchAndSet(url, card); })
-                .catch(function () { return getFileCard(__assign(__assign({}, card), { file: undefined })); });
-        }
-        else {
-            // TODO: Local later...
-            getFileCard(__assign(__assign({}, card), { file: card.path }));
-        }
+        getFileCard(card);
     };
     /**
      * Click event handler of the folder card
@@ -49279,21 +49375,21 @@ var RunContent = function (_a) {
      */
     var onFolderClicked = function (card) {
         if (isCloud) {
-            getFolderCard(__assign({}, card));
+            getFolderCard(card);
             // window.location.href = `/${projectOwner}/projects/${projectName}/studies/${studyId}/runs/${runId}/workspace?path=${card.path}`
         }
         else {
             // TODO: Fix it later when Local is ready
-            getFolderCard(__assign({}, card));
+            getFolderCard(card);
             // alert(runId.concat('/').concat(card.path)) 
         }
     };
     return React__default.createElement("div", { className: 'cards-container', style: __assign({}, style) },
         React__default.createElement("h5", { className: 'cards-container-title' }, title || 'Something'),
-        currFiles.length > 0 && React__default.createElement("div", { style: { padding: '20px' } },
+        currFiles.length > 0 && projectOwner && projectName && client && runId && React__default.createElement("div", { style: { padding: '20px' } },
             React__default.createElement("div", { className: 'cards' }, currFiles.map(function (_a, index) {
                 var label = _a.label, path = _a.path, description = _a.description;
-                return React__default.createElement(FileCard, { key: "filecard-".concat(index), label: label, path: path, description: description, onClicked: onFileClicked });
+                return React__default.createElement(FileCard, { projectOwner: projectOwner, projectName: projectName, studyId: studyId, runId: runId, client: client, key: "filecard-".concat(index), label: label, path: path, description: description, onClicked: onFileClicked });
             }))),
         currFolders.length > 0 && React__default.createElement("div", { style: { padding: '20px' } },
             React__default.createElement("div", { className: 'cards' }, currFolders.map(function (_a, index) {