pollination-react-io 1.88.1 → 1.90.0

package/build/index.js

@@ -40927,7 +40927,7 @@ var useGetHbjson = function () {
     };
 };
 
-var UTILSENDPOINT$1 = process.env.REACT_APP_UTILS_ENDPOINT || 'https://utilities.staging.pollination.cloud';
+var UTILSENDPOINT$2 = process.env.REACT_APP_UTILS_ENDPOINT || 'https://utilities.staging.pollination.cloud';
 var useHbjsontoVTK = function () {
     var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
     var _b = React.useState(), vtk = _b[0], setVTK = _b[1];
@@ -40936,7 +40936,7 @@ var useHbjsontoVTK = function () {
             return undefined;
         setLoading(true);
         return hbjson.text().then(function (fileString) {
-            fetch("".concat(UTILSENDPOINT$1, "/hbjson-to-vtk"), {
+            fetch("".concat(UTILSENDPOINT$2, "/hbjson-to-vtk"), {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -40976,6 +40976,53 @@ var useHbjsontoVTK = function () {
     };
 };
 
+var UTILSENDPOINT$1 = process.env.REACT_APP_UTILS_ENDPOINT || 'https://utilities.staging.pollination.cloud';
+var useVsftoVTK = function () {
+    var _a = React.useState(false), loading = _a[0], setLoading = _a[1];
+    var _b = React.useState(), vtk = _b[0], setVTK = _b[1];
+    var fetchVTK = function (vsf) {
+        if (!vsf || vsf.size < 1)
+            return undefined;
+        setLoading(true);
+        return vsf.text().then(function (fileString) {
+            fetch("".concat(UTILSENDPOINT$1, "/vsf-to-vtk"), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Accept: '*/*',
+                },
+                body: "{\n          \"output_format\": \"vtkjs\",\n          \"vsf\": ".concat(fileString, "\n        }"),
+            })
+                .catch(function (e) {
+                throw new Error(e);
+            })
+                .then(function (res) { return __awaiter$1(void 0, void 0, void 0, function () {
+                var translatedFile;
+                return __generator$1(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!res.ok) return [3 /*break*/, 2];
+                            return [4 /*yield*/, res.blob()];
+                        case 1:
+                            translatedFile = _a.sent();
+                            setVTK(translatedFile);
+                            return [2 /*return*/, translatedFile];
+                        case 2: throw new Error('Failed to retrieve .vtkjs from .vsf file.Error translating vsf to vtkjs');
+                    }
+                });
+            }); })
+                .finally(function () {
+                setLoading(false);
+            });
+        });
+    };
+    return {
+        loading: loading,
+        vtk: vtk,
+        fetchVTK: fetchVTK,
+    };
+};
+
 var duration = createCommonjsModule(function (module, exports) {
 !function(t,s){module.exports=s();}(commonjsGlobal,(function(){var t,s,n=1e3,i=6e4,e=36e5,r=864e5,o=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,u=31536e6,h=2592e6,a=/^(-|\+)?P(?:([-+]?[0-9,.]*)Y)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)W)?(?:([-+]?[0-9,.]*)D)?(?:T(?:([-+]?[0-9,.]*)H)?(?:([-+]?[0-9,.]*)M)?(?:([-+]?[0-9,.]*)S)?)?$/,d={years:u,months:h,days:r,hours:e,minutes:i,seconds:n,milliseconds:1,weeks:6048e5},c=function(t){return t instanceof p},f=function(t,s,n){return new p(t,n,s.$l)},m=function(t){return s.p(t)+"s"},l=function(t){return t<0},$=function(t){return l(t)?Math.ceil(t):Math.floor(t)},y=function(t){return Math.abs(t)},g=function(t,s){return t?l(t)?{negative:!0,format:""+y(t)+s}:{negative:!1,format:""+t+s}:{negative:!1,format:""}},p=function(){function l(t,s,n){var i=this;if(this.$d={},this.$l=n,void 0===t&&(this.$ms=0,this.parseFromMilliseconds()),s)return f(t*d[m(s)],this);if("number"==typeof t)return this.$ms=t,this.parseFromMilliseconds(),this;if("object"==typeof t)return Object.keys(t).forEach((function(s){i.$d[m(s)]=t[s];})),this.calMilliseconds(),this;if("string"==typeof t){var e=t.match(a);if(e){var r=e.slice(2).map((function(t){return null!=t?Number(t):0}));return this.$d.years=r[0],this.$d.months=r[1],this.$d.weeks=r[2],this.$d.days=r[3],this.$d.hours=r[4],this.$d.minutes=r[5],this.$d.seconds=r[6],this.calMilliseconds(),this}}return this}var y=l.prototype;return y.calMilliseconds=function(){var t=this;this.$ms=Object.keys(this.$d).reduce((function(s,n){return s+(t.$d[n]||0)*d[n]}),0);},y.parseFromMilliseconds=function(){var t=this.$ms;this.$d.years=$(t/u),t%=u,this.$d.months=$(t/h),t%=h,this.$d.days=$(t/r),t%=r,this.$d.hours=$(t/e),t%=e,this.$d.minutes=$(t/i),t%=i,this.$d.seconds=$(t/n),t%=n,this.$d.milliseconds=t;},y.toISOString=function(){var t=g(this.$d.years,"Y"),s=g(this.$d.months,"M"),n=+this.$d.days||0;this.$d.weeks&&(n+=7*this.$d.weeks);var i=g(n,"D"),e=g(this.$d.hours,"H"),r=g(this.$d.minutes,"M"),o=this.$d.seconds||0;this.$d.milliseconds&&(o+=this.$d.milliseconds/1e3);var u=g(o,"S"),h=t.negative||s.negative||i.negative||e.negative||r.negative||u.negative,a=e.format||r.format||u.format?"T":"",d=(h?"-":"")+"P"+t.format+s.format+i.format+a+e.format+r.format+u.format;return "P"===d||"-P"===d?"P0D":d},y.toJSON=function(){return this.toISOString()},y.format=function(t){var n=t||"YYYY-MM-DDTHH:mm:ss",i={Y:this.$d.years,YY:s.s(this.$d.years,2,"0"),YYYY:s.s(this.$d.years,4,"0"),M:this.$d.months,MM:s.s(this.$d.months,2,"0"),D:this.$d.days,DD:s.s(this.$d.days,2,"0"),H:this.$d.hours,HH:s.s(this.$d.hours,2,"0"),m:this.$d.minutes,mm:s.s(this.$d.minutes,2,"0"),s:this.$d.seconds,ss:s.s(this.$d.seconds,2,"0"),SSS:s.s(this.$d.milliseconds,3,"0")};return n.replace(o,(function(t,s){return s||String(i[t])}))},y.as=function(t){return this.$ms/d[m(t)]},y.get=function(t){var s=this.$ms,n=m(t);return "milliseconds"===n?s%=1e3:s="weeks"===n?$(s/d[n]):this.$d[n],0===s?0:s},y.add=function(t,s,n){var i;return i=s?t*d[m(s)]:c(t)?t.$ms:f(t,this).$ms,f(this.$ms+i*(n?-1:1),this)},y.subtract=function(t,s){return this.add(t,s,!0)},y.locale=function(t){var s=this.clone();return s.$l=t,s},y.clone=function(){return f(this.$ms,this)},y.humanize=function(s){return t().add(this.$ms,"ms").locale(this.$l).fromNow(!s)},y.milliseconds=function(){return this.get("milliseconds")},y.asMilliseconds=function(){return this.as("milliseconds")},y.seconds=function(){return this.get("seconds")},y.asSeconds=function(){return this.as("seconds")},y.minutes=function(){return this.get("minutes")},y.asMinutes=function(){return this.as("minutes")},y.hours=function(){return this.get("hours")},y.asHours=function(){return this.as("hours")},y.days=function(){return this.get("days")},y.asDays=function(){return this.as("days")},y.weeks=function(){return this.get("weeks")},y.asWeeks=function(){return this.as("weeks")},y.months=function(){return this.get("months")},y.asMonths=function(){return this.as("months")},y.years=function(){return this.get("years")},y.asYears=function(){return this.as("years")},l}();return function(n,i,e){t=e,s=e().$utils(),e.duration=function(t,s){var n=e.locale();return f(t,{$l:n},s)},e.isDuration=c;var r=i.prototype.add,o=i.prototype.subtract;i.prototype.add=function(t,s){return c(t)&&(t=t.asMilliseconds()),r.bind(this)(t,s)},i.prototype.subtract=function(t,s){return c(t)&&(t=t.asMilliseconds()),o.bind(this)(t,s)};}}));
 });
@@ -47030,6 +47077,19 @@ var InputType;
     InputType["DAGArrayInput"] = "DAGArrayInput";
     InputType["DAGJSONObjectInput"] = "DAGJSONObjectInput";
 })(InputType || (InputType = {}));
+var InputTypeAlias;
+(function (InputTypeAlias) {
+    InputTypeAlias["DAGGenericInputAlias"] = "DAGGenericInputAlias";
+    InputTypeAlias["DAGStringInputAlias"] = "DAGStringInputAlias";
+    InputTypeAlias["DAGIntegerInputAlias"] = "DAGIntegerInputAlias";
+    InputTypeAlias["DAGNumberInputAlias"] = "DAGNumberInputAlias";
+    InputTypeAlias["DAGBooleanInputAlias"] = "DAGBooleanInputAlias";
+    InputTypeAlias["DAGFolderInputAlias"] = "DAGFolderInputAlias";
+    InputTypeAlias["DAGFileInputAlias"] = "DAGFileInputAlias";
+    InputTypeAlias["DAGPathInputAlias"] = "DAGPathInputAlias";
+    InputTypeAlias["DAGArrayInputAlias"] = "DAGArrayInputAlias";
+    InputTypeAlias["DAGJSONObjectInputAlias"] = "DAGJSONObjectInputAlias";
+})(InputTypeAlias || (InputTypeAlias = {}));
 var RecipeForm = function (_a) {
     var _b, _c;
     var recipe = _a.recipe, projectName = _a.projectName, projectOwner = _a.projectOwner, client = _a.client, onSubmit = _a.onSubmit, _d = _a.style, style = _d === void 0 ? {} : _d, _e = _a.initAsLocal, initAsLocal = _e === void 0 ? false : _e;
@@ -47040,6 +47100,11 @@ var RecipeForm = function (_a) {
      */
     var _h = React.useState(false), displaySettings = _h[0], setDisplaySettings = _h[1];
     var _j = React.useState(false), overSettings = _j[0], setOverSettings = _j[1];
+    /**
+     * Local study
+     */
+    var _k = React.useState(true), handlers = _k[0], setHandlers = _k[1];
+    var _l = React.useState(__assign(__assign({}, _defaultConfig), { isLocalJob: initAsLocal, cloudProjectName: projectName, cloudProjectOwner: projectOwner, localRunFolder: simulationPath, useHandlers: handlers })), localConfig = _l[0], setLocalConfig = _l[1];
     /**
      * Input mapping
      */
@@ -47047,9 +47112,10 @@ var RecipeForm = function (_a) {
         if (!recipe)
             return;
         var data = recipe.inputs.map(function (i) {
-            var _a;
+            var _a, _b;
             var customTab = (_a = i === null || i === void 0 ? void 0 : i.annotations['group_identifier']) !== null && _a !== void 0 ? _a : undefined;
-            return {
+            var alias = handlers && ((_b = i === null || i === void 0 ? void 0 : i.alias) === null || _b === void 0 ? void 0 : _b.find(function (a) { return a.platform.includes(host); }));
+            var inputInfo = {
                 type: InputType[i.type],
                 required: i.required,
                 name: i.name,
@@ -47060,9 +47126,21 @@ var RecipeForm = function (_a) {
                     i['extensions'] : [],
                 customTab: customTab
             };
+            alias && Object.keys(alias).forEach(function (key) {
+                if (key in inputInfo) {
+                    // if the alias is DAGGenericInputAlias use the native input type
+                    if (key == 'type') {
+                        if (alias[key] == 'DAGGenericInputAlias') {
+                            return;
+                        }
+                    }
+                    inputInfo[key] = alias[key];
+                }
+            });
+            return inputInfo;
         });
         return data;
-    }, [recipe]);
+    }, [recipe, handlers]);
     var schema = generateSchema(inputs);
     var customTabs = React.useMemo(function () {
         if (!inputs)
@@ -47080,10 +47158,10 @@ var RecipeForm = function (_a) {
     /**
      * Hooks
      */
-    var _k = useForm({
+    var _m = useForm({
         resolver: Oe(schema),
         mode: 'onChange'
-    }), control = _k.control, register = _k.register, handleSubmit = _k.handleSubmit, resetField = _k.resetField, watch = _k.watch, _l = _k.formState, errors = _l.errors, isValid = _l.isValid;
+    }), control = _m.control, register = _m.register, handleSubmit = _m.handleSubmit, resetField = _m.resetField, watch = _m.watch, _o = _m.formState, errors = _o.errors, isValid = _o.isValid;
     var watchStudyName = watch('study-name');
     /**
      * Form actions
@@ -47129,12 +47207,15 @@ var RecipeForm = function (_a) {
         var _a, _b, _c, _d, _e;
         switch (i.type) {
             case InputType.DAGNumberInput:
+            case InputTypeAlias.DAGNumberInputAlias:
                 return React__default["default"].createElement(NumberInput, { inputProps: __assign(__assign({}, register(i.name, { valueAsNumber: true })), { required: i.required, defaultValue: i.default, min: (_a = i.spec) === null || _a === void 0 ? void 0 : _a.minimum, max: (_b = i.spec) === null || _b === void 0 ? void 0 : _b.maximum, step: 0.1 }), key: i.name, reset: function () { return handleReset(i); } });
             case InputType.DAGIntegerInput:
+            case InputTypeAlias.DAGIntegerInputAlias:
                 return React__default["default"].createElement(NumberInput, { key: i.name, icon: i.name.startsWith('cpu')
                         ? React__default["default"].createElement(Cpu$1, null)
                         : undefined, inputProps: __assign(__assign({}, register(i.name, { valueAsNumber: true })), { required: i.required, defaultValue: i.default, min: (_c = i.spec) === null || _c === void 0 ? void 0 : _c.minimum, max: (_d = i.spec) === null || _d === void 0 ? void 0 : _d.maximum, step: 1 }), reset: function () { return handleReset(i); } });
             case InputType.DAGStringInput:
+            case InputTypeAlias.DAGStringInputAlias:
                 return ((_e = i.spec) === null || _e === void 0 ? void 0 : _e.enum)
                     ? React__default["default"].createElement(Controller, { name: i.name, control: control, defaultValue: i.default, render: function (_a) {
                             var _b = _a.field, onChange = _b.onChange, value = _b.value; __rest(_b, ["onChange", "value"]);
@@ -47142,6 +47223,7 @@ var RecipeForm = function (_a) {
                         } })
                     : React__default["default"].createElement(TextInput, { key: i.name, inputProps: __assign(__assign({}, register(i.name)), { defaultValue: i.default }), reset: function () { return handleReset(i); } });
             case InputType.DAGFileInput:
+            case InputTypeAlias.DAGFileInputAlias:
                 return React__default["default"].createElement(Controller, { name: i.name, control: control, defaultValue: i.default, render: function (_a) {
                         var _b, _c;
                         var _d = _a.field, value = _d.value, onChange = _d.onChange, field = __rest(_d, ["value", "onChange"]);
@@ -47158,11 +47240,6 @@ var RecipeForm = function (_a) {
                 return React__default["default"].createElement(TextInput, { key: i.name, inputProps: __assign(__assign({}, register(i.name)), { defaultValue: i.default }), reset: function () { return handleReset(i); } });
         }
     };
-    /**
-     * Local study
-     */
-    var _m = React.useState(true), handlers = _m[0], setHandlers = _m[1];
-    var _o = React.useState(__assign(__assign({}, _defaultConfig), { isLocalJob: initAsLocal, cloudProjectName: projectName, cloudProjectOwner: projectOwner, localRunFolder: simulationPath, useHandlers: handlers })), localConfig = _o[0], setLocalConfig = _o[1];
     /**
      * Warning for local study folder
      */
@@ -47206,7 +47283,7 @@ var RecipeForm = function (_a) {
                     " ",
                     recipe.metadata.name,
                     " study"),
-                React__default["default"].createElement("span", { style: { display: 'inline', float: 'right' }, title: 'Show settings' },
+                host != 'web' && React__default["default"].createElement("span", { style: { display: 'inline', float: 'right' }, title: 'Show settings' },
                     React__default["default"].createElement(SettingOutlined$1, { onMouseOver: function () { return setOverSettings(true); }, onMouseLeave: function () { return setOverSettings(false); }, onClick: function () { return setDisplaySettings(function (prev) { return !prev; }); }, style: {
                             fontSize: '18px',
                             cursor: 'pointer',
@@ -55403,7 +55480,10 @@ var SendGeometry = function (_a) {
                     options: geometryOptions
                 });
             } },
-            !disabled && (currOption === null || currOption === void 0 ? void 0 : currOption.icon),
+            !disabled && React__default["default"].createElement("span", { style: {
+                    flexShrink: 0,
+                    display: 'flex'
+                } }, currOption === null || currOption === void 0 ? void 0 : currOption.icon),
             !disabled && ((_b = currOption === null || currOption === void 0 ? void 0 : currOption.label) !== null && _b !== void 0 ? _b : 'Pollination'),
             disabled && React__default["default"].createElement("span", { style: { color: 'red' } }, "Enabled in Pollination CAD plugins")));
 };
@@ -55537,7 +55617,10 @@ var SendModel = function (_a) {
                     options: {},
                 });
             } },
-            !disabled && (currOption === null || currOption === void 0 ? void 0 : currOption.icon),
+            !disabled && React__default["default"].createElement("span", { style: {
+                    flexShrink: 0,
+                    display: 'flex'
+                } }, currOption === null || currOption === void 0 ? void 0 : currOption.icon),
             !disabled && ((_b = currOption === null || currOption === void 0 ? void 0 : currOption.label) !== null && _b !== void 0 ? _b : 'Pollination'),
             disabled && React__default["default"].createElement("span", { style: { color: 'red' } }, "Enabled in Pollination CAD plugins")));
 };
@@ -55724,10 +55807,14 @@ var SendResults = function (_a) {
             border: 'solid 1px #fff',
             flexShrink: '0',
         }, placement: 'bottomRight', activeId: defaultAction, action: 'click', disabled: disabled, onSelect: onSelect, options: values },
-        React__default["default"].createElement(Button, { title: helpTextButton[currOption === null || currOption === void 0 ? void 0 : currOption.id], disabled: disabled, style: {
+        React__default["default"].createElement(Button, { title: (((currOption === null || currOption === void 0 ? void 0 : currOption.id) === Action.preview
+                || (currOption === null || currOption === void 0 ? void 0 : currOption.id) === Action.subscribePreview)
+                && (dataSets.length >= 1)
+                ? dataSets === null || dataSets === void 0 ? void 0 : dataSets.map(function (d, index) { return "".concat(d.labels[initialIds[index]]); }).join(' & ')
+                : helpTextButton[currOption === null || currOption === void 0 ? void 0 : currOption.id]), disabled: disabled, style: {
                 width: '100%',
                 fontSize: '14px',
-                border: 'solid 1px #fff'
+                border: 'solid 1px #fff',
             }, onClick: function (e) {
                 e.stopPropagation();
                 if (disabled)
@@ -55740,15 +55827,22 @@ var SendResults = function (_a) {
                     options: geometryOptions,
                 });
             } },
-            !disabled && (currOption === null || currOption === void 0 ? void 0 : currOption.icon),
+            !disabled && React__default["default"].createElement("span", { style: {
+                    flexShrink: 0,
+                    display: 'flex'
+                } }, currOption === null || currOption === void 0 ? void 0 : currOption.icon),
             !disabled &&
                 ((currOption === null || currOption === void 0 ? void 0 : currOption.id) !== Action.preview && (currOption === null || currOption === void 0 ? void 0 : currOption.id) !== Action.subscribePreview)
                 && ((_b = currOption === null || currOption === void 0 ? void 0 : currOption.label) !== null && _b !== void 0 ? _b : 'Pollination'),
             !disabled &&
                 ((currOption === null || currOption === void 0 ? void 0 : currOption.id) === Action.preview || (currOption === null || currOption === void 0 ? void 0 : currOption.id) === Action.subscribePreview)
-                && (dataSets.length >= 1
+                && React__default["default"].createElement("span", { style: {
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                    } }, (dataSets.length >= 1
                     ? dataSets === null || dataSets === void 0 ? void 0 : dataSets.map(function (d, index) { return "".concat(d.labels[initialIds[index]]); }).join(' & ')
-                    : ((_c = currOption === null || currOption === void 0 ? void 0 : currOption.label) !== null && _c !== void 0 ? _c : 'Pollination')),
+                    : ((_c = currOption === null || currOption === void 0 ? void 0 : currOption.label) !== null && _c !== void 0 ? _c : 'Pollination'))),
             disabled && React__default["default"].createElement("span", { style: { color: 'red' } }, "Enabled in Pollination CAD plugins")),
         (currOption === null || currOption === void 0 ? void 0 : currOption.id)
             && ((currOption === null || currOption === void 0 ? void 0 : currOption.id) === Action.preview || (currOption === null || currOption === void 0 ? void 0 : currOption.id) === Action.subscribePreview)
@@ -56791,22 +56885,26 @@ var FileCard = function (_a) {
     var host = getHost();
     var fromFileToBase64 = usePollinationPanel().fromFileToBase64;
     var _d = useVSFToHTML(), loading = _d.loading, html = _d.html, fetchHTML = _d.fetchHTML;
+    // VTKJS Handlers
+    var _e = useHbjsontoVTK(), loadingHBJSON = _e.loading, vtkHBJSON = _e.vtk, fetchVTKfromHBJSON = _e.fetchVTK;
+    var _f = useVsftoVTK(), loadingVSF = _f.loading, vtkHBVSF = _f.vtk, fetchVTKfromVSF = _f.fetchVTK;
     var downloadArtifact = useArtifacts(projectOwner, projectName, client).downloadArtifact;
-    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
+    var _g = React.useState(false), open = _g[0], setOpen = _g[1];
     // Hover effects
-    var _f = React.useState(false), infoOver = _f[0], setInfoOver = _f[1];
-    var _g = React.useState(false), downloadOver = _g[0], setDownloadOver = _g[1];
-    var _h = React.useState(false), htmlOver = _h[0], setHtmlOver = _h[1];
-    var _j = React.useState(true), isLoading = _j[0], setIsLoading = _j[1];
-    var _k = React.useState(false), isInactive = _k[0], setIsInactive = _k[1];
+    var _h = React.useState(false), infoOver = _h[0], setInfoOver = _h[1];
+    var _j = React.useState(false), downloadOver = _j[0], setDownloadOver = _j[1];
+    var _k = React.useState(false), htmlOver = _k[0], setHtmlOver = _k[1];
+    var _l = React.useState(true), isLoading = _l[0], setIsLoading = _l[1];
+    var _m = React.useState(false), isInactive = _m[0], setIsInactive = _m[1];
     // Data to use for CAD injections
-    var _l = React.useState(), CADdata = _l[0], setCADdata = _l[1];
+    var _o = React.useState(), CADdata = _o[0], setCADdata = _o[1];
     // File to send to parent
-    var _m = React.useState(), currFile = _m[0], setCurrFile = _m[1];
+    var _p = React.useState(), currFile = _p[0], setCurrFile = _p[1];
+    var _q = React.useState(), currPreview = _q[0], setCurrPreview = _q[1];
     // HTML integration
-    var _o = React.useState(false), hasHtml = _o[0], setHasHtml = _o[1];
+    var _r = React.useState(false), hasHtml = _r[0], setHasHtml = _r[1];
     // ZIP integration
-    var _p = React.useState(), innerName = _p[0], setInnerName = _p[1];
+    var _s = React.useState(), innerName = _s[0], setInnerName = _s[1];
     /**
      * Get file name to use
      */
@@ -56815,6 +56913,38 @@ var FileCard = function (_a) {
             return;
         return innerName !== null && innerName !== void 0 ? innerName : path.split('/').reverse()[0];
     }, [path, innerName]);
+    React.useEffect(function () {
+        if (!vtkHBJSON)
+            return;
+        if (filename.endsWith('hbjson')) {
+            setCurrPreview(vtkHBJSON);
+        }
+    }, [vtkHBJSON]);
+    React.useEffect(function () {
+        if (!vtkHBVSF)
+            return;
+        if (filename.endsWith('vsf')) {
+            setCurrPreview(vtkHBVSF);
+        }
+    }, [vtkHBVSF]);
+    /**
+     * Preview name
+     */
+    var previewName = React.useMemo(function () {
+        if (!currPreview || !filename)
+            return;
+        var prevName;
+        if (filename.endsWith('zip')) {
+            prevName = filename.replace('.zip', 'vtkjs');
+        }
+        else if (filename.endsWith('hbjson')) {
+            prevName = filename.replace('hbjson', 'vtkjs');
+        }
+        else if (filename.endsWith('vsf')) {
+            prevName = filename.replace('vsf', 'vtkjs');
+        }
+        return prevName;
+    }, [currPreview, filename]);
     /**
      * Get file from a ZIP file.
      * 1 zip = 1 file for now
@@ -56842,10 +56972,12 @@ var FileCard = function (_a) {
                         setInnerName(name);
                         var blob = f.slice(0, f.size, 'text/plain');
                         setCurrFile(blob);
+                        // Note: inputs are always available
                         if (name.endsWith('vsf')) {
                             setHasHtml(true);
                             fetchHTML(blob);
                             setCADintegration(blob, name);
+                            fetchVTKfromVSF(blob);
                         }
                     });
                 });
@@ -56899,6 +57031,7 @@ var FileCard = function (_a) {
                 // Deleted from cloud
                 setIsInactive(true);
                 setCurrFile(undefined);
+                setCurrPreview(undefined);
                 setCADintegration(undefined);
                 setIsLoading(false);
                 setHasHtml(false);
@@ -56918,10 +57051,12 @@ var FileCard = function (_a) {
                         setHasHtml(true);
                         fetchHTML(blob); // HTML button
                         setCADintegration(blob);
+                        fetchVTKfromVSF(blob);
                     }
                     else if (path === null || path === void 0 ? void 0 : path.endsWith('hbjson')) {
                         setHasHtml(false);
                         setCADintegration(blob);
+                        fetchVTKfromHBJSON(blob);
                     }
                     else {
                         setHasHtml(false);
@@ -56975,7 +57110,13 @@ var FileCard = function (_a) {
             // Generate Blob on click
             run && downloadArtifact(path, run.status.job_id)
                 .then(function (url) { return fetchAndSet(url); })
-                .catch(function () { return onClicked({ label: label, path: path, file: undefined, description: description, name: filename }); });
+                .catch(function () { return onClicked({
+                label: label,
+                path: path,
+                file: undefined,
+                description: description,
+                name: filename
+            }); });
         }
         else {
             // Some inputs has path == null
@@ -56992,14 +57133,19 @@ var FileCard = function (_a) {
     }, [run, label, path]);
     return React__default["default"].createElement("div", { className: isInactive
             ? 'card-param card-folder-inactive'
-            : 'card-param card-folder', tabIndex: 0, role: 'button', key: label, onClick: function (event) {
+            : (loadingHBJSON || loadingVSF)
+                ? 'card-param'
+                : 'card-param card-folder', tabIndex: 0, role: (loadingHBJSON || loadingVSF) ? 'none' : 'button', key: label, onClick: function (event) {
             event.stopPropagation();
-            if (isInactive)
+            if (isInactive || (loadingHBJSON || loadingVSF))
                 return;
-            onClicked({ label: label, path: path, file: currFile, description: description, name: filename });
+            onClicked({ label: label, path: path, file: currFile, description: description, name: filename,
+                previewFile: currPreview !== null && currPreview !== void 0 ? currPreview : currFile,
+                previewName: previewName !== null && previewName !== void 0 ? previewName : filename
+            });
         } },
         React__default["default"].createElement("div", { className: 'title-param' },
-            React__default["default"].createElement("div", { style: { float: 'left', margin: '0 8px 0 0' } }, !isLoading ? React__default["default"].createElement("div", { title: !isInactive
+            React__default["default"].createElement("div", { style: { float: 'left', margin: '0 8px 0 0' } }, (!isLoading) ? React__default["default"].createElement("div", { title: !isInactive
                     ? 'Open the viewer'
                     : 'File is missing. Check run workspace' },
                 React__default["default"].createElement("span", { style: { margin: '0 8px 0 0' } }, path && filename && getFileIcon(18, ((_b = filename === null || filename === void 0 ? void 0 : filename.split('.')) === null || _b === void 0 ? void 0 : _b.pop()) || '')),
@@ -58123,5 +58269,6 @@ exports.useRuns = useRuns;
 exports.useSendHbjson = useSendHbjson;
 exports.useSendMessage = useSendMessage;
 exports.useVSFToHTML = useVSFToHTML;
+exports.useVsftoVTK = useVsftoVTK;
 exports.useWindowDimensions = useWindowDimensions;
 //# sourceMappingURL=index.js.map