pollination-react-io 1.51.1 → 1.52.1

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,7 +1,7 @@
-import React, { FC, ReactNode } from 'react';
+import React, { CSSProperties, FC, ReactNode } from 'react';
 import { OptionGroup } from '../Dropdown/Dropdown';
 export interface SettingsButtonProps {
-    onClick: () => void;
+    onClick: (e?: any) => void;
     label: string | ReactNode;
     options?: OptionGroup[];
     asButtons?: boolean;
@@ -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) {
@@ -13385,7 +13385,10 @@ var Dropdown = function (_a) {
         var _a;
         switch (o.type) {
             case 'checkbox':
-                return (React__default.createElement($d08ef79370b62062$export$16ce288f89fa631c, __assign({ key: o.id, className: "poll-select-item", onSelect: function () { return o.onSelect && o.onSelect(o); }, checked: o.checked, disabled: o.disabled }, itemProps),
+                return (React__default.createElement($d08ef79370b62062$export$16ce288f89fa631c, __assign({ key: o.id, className: "poll-select-item", onSelect: function (e) {
+                        e.stopPropagation();
+                        o.onSelect && o.onSelect(o);
+                    }, checked: o.checked, disabled: o.disabled }, itemProps),
                     React__default.createElement($d08ef79370b62062$export$c3468e2714d175fa, { style: {
                             position: 'absolute',
                             display: 'inline-flex',
@@ -13400,7 +13403,10 @@ var Dropdown = function (_a) {
                             } }, o.icon),
                     o.label));
             case 'radio':
-                return (React__default.createElement($d08ef79370b62062$export$371ab307eab489c0, __assign({ key: o.id, className: "poll-select-item", onSelect: function () { return o.onSelect && o.onSelect(o); }, textValue: o.label, value: o.id, disabled: o.disabled }, itemProps),
+                return (React__default.createElement($d08ef79370b62062$export$371ab307eab489c0, __assign({ key: o.id, className: "poll-select-item", onSelect: function (e) {
+                        e.stopPropagation();
+                        o.onSelect && o.onSelect(o);
+                    }, textValue: o.label, value: o.id, disabled: o.disabled }, itemProps),
                     React__default.createElement($d08ef79370b62062$export$c3468e2714d175fa, { style: {
                             position: 'absolute',
                             display: 'inline-flex',
@@ -13412,7 +13418,10 @@ var Dropdown = function (_a) {
                 return (React__default.createElement($d08ef79370b62062$export$b04be29aa201d4f5, { key: o.id }, o.label));
             case 'link':
                 return (React__default.createElement("a", { href: (_a = o.to) !== null && _a !== void 0 ? _a : '/', key: o.id, style: { color: 'unset' } },
-                    React__default.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, __assign({ className: "poll-select-item", onSelect: function () { return o.onSelect && o.onSelect(o); } }, itemProps),
+                    React__default.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, __assign({ className: "poll-select-item", onSelect: function (e) {
+                            e.stopPropagation();
+                            o.onSelect && o.onSelect(o);
+                        } }, itemProps),
                         React__default.createElement("div", { style: {
                                 position: 'absolute',
                                 display: 'inline-flex',
@@ -13420,7 +13429,10 @@ var Dropdown = function (_a) {
                             } }, o.icon),
                         o.label)));
             default:
-                return (React__default.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, __assign({ key: o.id, className: "poll-select-item", onSelect: function () { return o.onSelect && o.onSelect(o); }, disabled: o.disabled }, itemProps),
+                return (React__default.createElement($d08ef79370b62062$export$6d08773d2e66f8f2, __assign({ key: o.id, className: "poll-select-item", onSelect: function (e) {
+                        e.stopPropagation();
+                        o.onSelect && o.onSelect(o);
+                    }, disabled: o.disabled }, itemProps),
                     React__default.createElement("div", { style: {
                             position: 'absolute',
                             display: 'inline-flex',
@@ -15712,21 +15724,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 && 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 +44303,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 +44335,8 @@ 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 (e) {
+            e.stopPropagation();
             if (disabled)
                 return;
             sendMessage(getAction$2(selOpt), {
@@ -44341,7 +44354,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.preview ? undefined : Action$2.preview); });
@@ -44352,7 +44365,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.add ? undefined : Action$2.add); });
@@ -44363,7 +44376,7 @@ var SendResults = function (_a) {
                         id: Action$2.delete,
                         label: 'Delete',
                         checked: selOpt === Action$2.delete,
-                        icon: React__default.createElement(Trash$1, { size: 16 }),
+                        icon: React__default.createElement(Trash$1, { size: 16, color: style && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.delete ? undefined : Action$2.delete); });
@@ -44374,7 +44387,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.clear ? undefined : Action$2.clear); });
@@ -44385,7 +44398,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$2.subscribePreview ? undefined : Action$2.subscribePreview); });
@@ -46796,7 +46809,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 +46838,8 @@ 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 (e) {
+            e.stopPropagation();
             if (disabled)
                 return;
             sendMessage(getAction$1(selOpt), {
@@ -46843,7 +46857,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.preview ? undefined : Action$1.preview); });
@@ -46854,7 +46868,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.add ? undefined : Action$1.add); });
@@ -46865,7 +46879,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.delete ? undefined : Action$1.delete); });
@@ -46876,7 +46890,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.clear ? undefined : Action$1.clear); });
@@ -46887,7 +46901,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action$1.subscribePreview ? undefined : Action$1.subscribePreview); });
@@ -46923,9 +46937,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 +46972,8 @@ 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 (e) {
+            e.stopPropagation();
             if (disabled)
                 return;
             sendHbjson(getAction(selOpt), {
@@ -46979,7 +46994,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.preview ? undefined : Action.preview); });
@@ -46990,7 +47005,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.add ? undefined : Action.add); });
@@ -47001,7 +47016,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.clear ? undefined : Action.clear); });
@@ -47012,7 +47027,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 && style['color'] }),
                         disabled: disabled,
                         onSelect: function () {
                             setSelOpt(function (state) { return (state === Action.subscribePreview ? undefined : Action.subscribePreview); });
@@ -49168,26 +49183,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));
 };
 
@@ -49218,16 +49339,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];
@@ -49243,7 +49354,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':
@@ -49271,16 +49382,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
@@ -49288,21 +49390,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) {