pollination-react-io 1.18.1 → 1.19.0

package/build/SelectAccount/SelectAccount.types.d.ts

@@ -4,5 +4,6 @@ export declare type Account = Organization | UserPrivate;
 export interface SelectAccountProps {
     authUser?: UserPrivate;
     client?: APIClient;
+    defaultValue?: string;
     setSelAccount?: (account: Account) => void;
 }

package/build/SelectProject/SelectProject.types.d.ts

@@ -3,6 +3,7 @@ import { APIClient } from '../hooks';
 export interface SelectProjectProps {
     authUser?: UserPrivate;
     client?: APIClient;
-    projectOwner: string;
+    projectOwner?: string;
+    defaultValue?: string;
     setSelProject?: (project: Project) => void;
 }

package/build/SelectRun/SelectRun.types.d.ts

@@ -4,6 +4,7 @@ export interface SelectRunProps {
     projectOwner?: string;
     projectName?: string;
     jobId?: string[];
+    defaultValue?: string;
     setSelRun?: (recipe: Run) => void;
     authUser?: UserPrivate;
     client?: APIClient;

package/build/SelectStudy/SelectStudy.types.d.ts

@@ -4,6 +4,7 @@ export interface SelectStudyProps {
     projectName?: string;
     projectOwner?: string;
     authUser?: UserPrivate;
+    defaultValue?: string;
     client?: APIClient;
     setSelStudy?: (project: CloudJob) => void;
 }

package/build/atoms/ComboBox/ComboBox.types.d.ts

@@ -8,6 +8,7 @@ export interface ComboBoxProps {
     }[];
     renderItem?: (item: any, i?: number, arr?: any[]) => ReactNode;
     setSelected?: (item: any) => void;
+    onClear?: () => void;
     onScrollReachEnd?: (...args: any) => void;
     stateReducer?: (state: UseComboboxState<{
         id: string;

package/build/index.esm.js

@@ -8647,12 +8647,11 @@ var ScrollZone = function (_a) {
 
 var ICON_SIZE = 18;
 var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
-    var _b;
-    var items = _a.items, renderItem = _a.renderItem, setSelected = _a.setSelected, onScrollReachEnd = _a.onScrollReachEnd, _c = _a.stateReducer, stateReducer = _c === void 0 ? function (state, _a) {
+    var items = _a.items, renderItem = _a.renderItem, setSelected = _a.setSelected, onClear = _a.onClear, onScrollReachEnd = _a.onScrollReachEnd, _b = _a.stateReducer, stateReducer = _b === void 0 ? function (state, _a) {
         _a.type; var changes = _a.changes;
         return changes;
-    } : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, hidden = _a.hidden, _e = _a.loading, loading = _e === void 0 ? false : _e, _f = _a.icon, icon = _f === void 0 ? React__default.createElement(CursorText$1, null) : _f, inputStyle = _a.inputStyle, menuStyle = _a.menuStyle, _g = _a.maxHeight, maxHeight = _g === void 0 ? 180 : _g, inputProps = _a.inputProps, header = _a.header, footer = _a.footer, _h = _a.noMatchText, noMatchText = _h === void 0 ? 'No matching items' : _h;
-    var _j = useState(items), inputItems = _j[0], setInputItems = _j[1];
+    } : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, hidden = _a.hidden, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.icon, icon = _e === void 0 ? React__default.createElement(CursorText$1, null) : _e, inputStyle = _a.inputStyle, menuStyle = _a.menuStyle, _f = _a.maxHeight, maxHeight = _f === void 0 ? 180 : _f, inputProps = _a.inputProps, header = _a.header, footer = _a.footer, _g = _a.noMatchText, noMatchText = _g === void 0 ? 'No matching items' : _g;
+    var _h = useState(items), inputItems = _h[0], setInputItems = _h[1];
     useEffect(function () {
         setInputItems(items);
     }, [items]);
@@ -8661,7 +8660,7 @@ var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
             lodash_debounce(onScrollReachEnd, 1000, { leading: true, trailing: false })
             : undefined;
     }, [onScrollReachEnd]);
-    var _k = useCombobox({
+    var _j = useCombobox({
         items: inputItems,
         onInputValueChange: function (_a) {
             var inputValue = _a.inputValue;
@@ -8676,20 +8675,22 @@ var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
         stateReducer: stateReducer
         // to what extent is this necessary?
         // environment: environment ? environment : undefined
-    }), isOpen = _k.isOpen, getToggleButtonProps = _k.getToggleButtonProps, getMenuProps = _k.getMenuProps, getInputProps = _k.getInputProps, getComboboxProps = _k.getComboboxProps, highlightedIndex = _k.highlightedIndex, getItemProps = _k.getItemProps, openMenu = _k.openMenu, closeMenu = _k.closeMenu, selectItem = _k.selectItem, selectedItem = _k.selectedItem, inputValue = _k.inputValue;
+    }), isOpen = _j.isOpen, getToggleButtonProps = _j.getToggleButtonProps, getMenuProps = _j.getMenuProps, getInputProps = _j.getInputProps, getComboboxProps = _j.getComboboxProps, highlightedIndex = _j.highlightedIndex, getItemProps = _j.getItemProps, openMenu = _j.openMenu, closeMenu = _j.closeMenu, selectItem = _j.selectItem, selectedItem = _j.selectedItem, inputValue = _j.inputValue, setInputValue = _j.setInputValue;
     useImperativeHandle(ref, function () { return ({
         selectItem: selectItem,
         selectedItem: selectedItem,
-        inputValue: inputValue
+        inputValue: inputValue,
+        setInputValue: setInputValue,
     }); });
     useEffect(function () {
-        // @ts-ignore
-        // console.log('combobox: ', selectedItem && (selectedItem.name || selectedItem.file_name) ? selectedItem.name ?? selectedItem.file_name : undefined,)
+        var _a;
         if (!selectedItem)
             return;
+        // @ts-ignore
+        setInputValue((_a = selectedItem.name) !== null && _a !== void 0 ? _a : selectedItem.file_name);
         setSelected && setSelected(selectedItem);
         closeMenu();
-    }, [closeMenu, selectedItem, setSelected]);
+    }, [closeMenu, selectedItem, setInputValue, setSelected]);
     return (React__default.createElement("div", { "data-testid": "ComboBoxSelect", className: hidden ? undefined : 'poll-combobox' },
         React__default.createElement(ButtonGroup, { wrapperProps: __assign(__assign({}, getComboboxProps()), { style: __assign(__assign({}, inputStyle), { position: 'relative', width: '100%' }) }), disabled: disabled },
             React__default.createElement("input", __assign({}, getInputProps(__assign(__assign({ placeholder: 'Search for something...', spellCheck: false, disabled: disabled, style: {
@@ -8698,9 +8699,7 @@ var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
                     borderBottomLeftRadius: isOpen ? 0 : 4,
                     flex: 12,
                     lineHeight: '1.5rem',
-                }, 
-                // @ts-ignore
-                value: selectedItem && (selectedItem.name || selectedItem.file_name) ? (_b = selectedItem.name) !== null && _b !== void 0 ? _b : selectedItem.file_name : '' }, inputProps), { onFocus: function () {
+                } }, inputProps), { onFocus: function () {
                     openMenu();
                 }, type: hidden ? 'hidden' : undefined })))),
             !hidden &&
@@ -8731,6 +8730,7 @@ var ComboBox = React__default.forwardRef(function ComboBox(_a, ref) {
                     return (React__default.createElement("button", { type: 'button', tabIndex: -1, disabled: disabled, onClick: function () {
                             selectItem(null);
                             setSelected && setSelected(undefined);
+                            onClear && onClear();
                         }, style: {
                             borderBottomRightRadius: isOpen ? 0 : 4,
                         } },
@@ -40503,6 +40503,7 @@ var SelectCloudArtifacts = function (_a) {
     // Support default values
     var defaultValueRef = useRef(defaultValue ? defaultValue.split('/').splice(-1)[0] : undefined);
     var _g = useState(defaultValue ? defaultValue.split('/').slice(0, -1) : []), path = _g[0], setPath = _g[1];
+    var pathRef = useRef(defaultValue ? defaultValue.split('/').slice(0, -1) : []);
     var _h = useState(), selArtifact = _h[0], setSelArtifact = _h[1];
     useEffect(function () {
         setLoading(true);
@@ -40517,22 +40518,35 @@ var SelectCloudArtifacts = function (_a) {
                 if (defaultFile) {
                     comboBoxRef.current.selectItem(defaultFile);
                     defaultValueRef.current = undefined;
-                    onChange && onChange(__assign(__assign({}, selArtifact), { pollination_cloud_path: "".concat(path, "/").concat(defaultFile.file_name) }));
+                    setSelArtifact(defaultFile);
                 }
             }
         })
             .finally(function () { return setLoading(false); });
-    }, [client, defaultValue, fileNameMatch, host, jobId, listArtifacts, onChange, path, selArtifact]);
+    }, [
+        client,
+        defaultValue,
+        fileNameMatch,
+        host,
+        jobId,
+        listArtifacts,
+        onChange,
+        path,
+    ]);
     useEffect(function () {
         if (!selArtifact || selArtifact.file_type !== 'folder')
             return;
-        setPath(function (path) { return ["".concat(path, "/").concat(selArtifact.file_name)]; });
+        setPath(function (path) {
+            var newPath = ["".concat(path, "/").concat(selArtifact.file_name)];
+            pathRef.current = ["".concat(path, "/").concat(selArtifact.file_name)];
+            return newPath;
+        });
     }, [onChange, selArtifact]);
     useEffect(function () {
         if (!selArtifact || selArtifact.file_type !== 'file')
             return;
-        onChange && onChange(__assign(__assign({}, selArtifact), { pollination_cloud_path: "".concat(path, "/").concat(selArtifact.file_name) }));
-    }, [onChange, path, selArtifact]);
+        onChange && onChange(__assign(__assign({}, selArtifact), { pollination_cloud_path: "".concat(pathRef.current, "/").concat(selArtifact.file_name) }));
+    }, [onChange, selArtifact]);
     var stateReducer = useCallback(function (state, actionAndChanges) {
         var type = actionAndChanges.type, changes = actionAndChanges.changes;
         switch (type) {
@@ -40570,7 +40584,7 @@ var SelectCloudArtifacts = function (_a) {
                 } },
                 icon,
                 item.name));
-        }, setSelected: setSelArtifact, loading: loading, disabled: !projectName || !projectOwner, hidden: hidden, icon: React__default.createElement(CloudPlus$1, null), header: path.length > 0 &&
+        }, setSelected: setSelArtifact, onClear: function () { return setPath([]); }, loading: loading, disabled: !projectName || !projectOwner, hidden: hidden, icon: React__default.createElement(CloudPlus$1, null), header: path.length > 0 &&
             React__default.createElement("div", { key: "header", style: {
                     width: '100%',
                     display: 'flex',
@@ -41596,24 +41610,26 @@ TabPanel.defaultProps = defaultProps;
 
 var SelectProject = function (_a) {
     var _b, _c;
-    var authUser = _a.authUser, client = _a.client, projectOwner = _a.projectOwner, setSelProject = _a.setSelProject;
+    var authUser = _a.authUser, client = _a.client, projectOwner = _a.projectOwner, _defaultValue = _a.defaultValue, setSelProject = _a.setSelProject;
     var comboBoxRef = useRef();
-    var _d = useState(), projects = _d[0], setProjects = _d[1];
-    var _e = useState(false), loading = _e[0], setLoading = _e[1];
-    var totalRunsRef = useRef({
+    var _d = useState(_defaultValue ? [_defaultValue] : undefined), defaultValue = _d[0], setDefaultValue = _d[1];
+    var _e = useState([]), projects = _e[0], setProjects = _e[1];
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
+    var totalProjectsRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _f = useState(0), total = _f[0], setTotal = _f[1];
-    var _g = useState({
+    var _g = useState(0), total = _g[0], setTotal = _g[1];
+    var _h = useState({
         owner: (_b = [projectOwner]) !== null && _b !== void 0 ? _b : (authUser && [authUser.username]),
         page: 1,
         perPage: 10,
-    }), queryConfig = _g[0], setQueryConfig = _g[1];
+        ids: defaultValue
+    }), queryConfig = _h[0], setQueryConfig = _h[1];
     // resetting query
     useEffect(function () {
         // reset total loaded
-        totalRunsRef.current = {
+        totalProjectsRef.current = {
             loaded: 0,
             total: undefined
         };
@@ -41622,14 +41638,14 @@ var SelectProject = function (_a) {
             comboBoxRef.current.selectItem(null);
         }
         setProjects([]);
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { owner: [projectOwner], page: 1 })); });
-    }, [projectOwner]);
+        setQueryConfig(function (q) { return (__assign(__assign({}, q), { owner: [projectOwner], ids: defaultValue, page: 1 })); });
+    }, [defaultValue, projectOwner]);
     var fetchProjects = useCallback(function (queryConfig) {
-        if (!authUser)
+        if (!authUser || !client || !client.projects)
             return;
         if (!queryConfig.owner)
             return;
-        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        var _a = totalProjectsRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
         setLoading(true);
@@ -41638,24 +41654,36 @@ var SelectProject = function (_a) {
             var data = _a.data;
             setProjects(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
             setTotal(data.total_count);
-            totalRunsRef.current.loaded += data.resources.length;
-            totalRunsRef.current.total = data.total_count;
+            totalProjectsRef.current.loaded += data.resources.length;
+            totalProjectsRef.current.total = data.total_count;
         })
             .finally(function () {
             setLoading(false);
         });
-    }, [authUser, client.projects]);
+    }, [authUser, client]);
     useEffect(function () {
         fetchProjects(queryConfig);
     }, [fetchProjects, queryConfig]);
+    useEffect(function () {
+        if (!defaultValue || !projects.length)
+            return;
+        // if this were to become a multiselect could use defaultValue.includes(p.id)
+        // other things would have to change
+        var selDefault = projects.find(function (p) { return p.id === defaultValue[0]; });
+        if (selDefault) {
+            setSelProject(selDefault);
+            comboBoxRef.current.selectItem(selDefault);
+            return;
+        }
+    }, [defaultValue, projects, setSelProject]);
     var onScrollReachEnd = useCallback(function () {
         // already loaded all runs
-        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        var _a = totalProjectsRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
         setQueryConfig(function (q) { return (__assign(__assign({}, q), { page: q.page ? q.page + 1 : 1 })); });
     }, []);
-    return (React__default.createElement(ComboBox, { ref: comboBoxRef, items: projects !== null && projects !== void 0 ? projects : [], setSelected: setSelProject, inputProps: {
+    return (React__default.createElement(ComboBox, { ref: comboBoxRef, items: projects !== null && projects !== void 0 ? projects : [], setSelected: setSelProject, onClear: function () { return setDefaultValue(undefined); }, inputProps: {
             placeholder: 'Select a project...',
         }, loading: loading, disabled: !authUser || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
@@ -41667,11 +41695,11 @@ var SelectProject = function (_a) {
 
 var SelectAccount = function (_a) {
     var _b;
-    var authUser = _a.authUser, client = _a.client, setSelAccount = _a.setSelAccount;
+    var authUser = _a.authUser, client = _a.client, defaultValue = _a.defaultValue, setSelAccount = _a.setSelAccount;
     var comboBoxRef = useRef();
     var _c = useState(function () { return authUser ? [authUser] : []; }), accounts = _c[0], setAccounts = _c[1];
     var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var totalRunsRef = useRef({
+    var totalAccountsRef = useRef({
         loaded: 0,
         total: undefined
     });
@@ -41682,8 +41710,10 @@ var SelectAccount = function (_a) {
     }), queryConfig = _f[0], setQueryConfig = _f[1];
     // resetting query
     useEffect(function () {
+        if (!authUser)
+            return;
         // reset total loaded
-        totalRunsRef.current = {
+        totalAccountsRef.current = {
             loaded: 0,
             total: undefined
         };
@@ -41691,16 +41721,16 @@ var SelectAccount = function (_a) {
         if (comboBoxRef.current) {
             comboBoxRef.current.selectItem(null);
         }
-        setAccounts(authUser ? [authUser] : []);
-        setQueryConfig(function (q) { return (__assign(__assign({}, q), { member: authUser ? [authUser === null || authUser === void 0 ? void 0 : authUser.username] : undefined, page: 1 })); });
-    }, [authUser]);
+        setAccounts([authUser]);
+        setQueryConfig(function (q) { return (__assign(__assign({}, q), { member: [authUser === null || authUser === void 0 ? void 0 : authUser.username], page: 1 })); });
+    }, [authUser, defaultValue, setSelAccount]);
     var fetchOrganizations = useCallback(function (queryConfig) {
-        if (!authUser)
+        if (!authUser || !client || !client.orgs)
             return;
         if (!queryConfig.member)
             return;
-        // we've already loaded all Runs
-        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        var _a = totalAccountsRef.current, total = _a.total, loaded = _a.loaded;
+        // we've already loaded all accounts
         if (total && loaded >= total)
             return;
         setLoading(true);
@@ -41709,19 +41739,30 @@ var SelectAccount = function (_a) {
             var data = _a.data;
             setAccounts(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
             setTotal(data.total_count);
-            totalRunsRef.current.loaded += data.resources.length;
-            totalRunsRef.current.total = data.total_count;
+            totalAccountsRef.current.loaded += data.resources.length;
+            totalAccountsRef.current.total = data.total_count;
         })
             .finally(function () {
             setLoading(false);
         });
-    }, [authUser, client.orgs]);
+    }, [authUser, client]);
     useEffect(function () {
         fetchOrganizations(queryConfig);
     }, [fetchOrganizations, queryConfig]);
+    useEffect(function () {
+        if (!defaultValue || !accounts.length)
+            return;
+        // @ts-ignore
+        var selDefault = accounts.find(function (a) { return typeof a.username !== 'undefined' ? a.username === defaultValue : a.account_name === defaultValue; });
+        if (selDefault) {
+            setSelAccount(selDefault);
+            comboBoxRef.current.selectItem(selDefault);
+            return;
+        }
+    }, [defaultValue, accounts, setSelAccount, authUser]);
     var onScrollReachEnd = useCallback(function () {
         // already loaded all runs
-        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        var _a = totalAccountsRef.current, total = _a.total, loaded = _a.loaded;
         if (total && loaded >= total)
             return;
         setQueryConfig(function (q) { return (__assign(__assign({}, q), { page: q.page ? q.page + 1 : 1 })); });
@@ -41787,7 +41828,7 @@ var SelectRecipe = function (_a) {
         setQueryConfig(function (q) { return (__assign(__assign({}, q), { owner: projectOwner, name: projectName, page: 1 })); });
     }, [projectOwner, projectName]);
     var fetchRecipes = useCallback(function (queryConfig) {
-        if (!authUser)
+        if (!authUser || !client || !client.projects)
             return;
         if (!queryConfig.owner || !queryConfig.name)
             return;
@@ -43856,7 +43897,7 @@ var RecipeInputsForm = function (_a) {
     var _e = useForm({
         resolver: Oe(schema),
         mode: 'all'
-    }), control = _e.control, register = _e.register, handleSubmit = _e.handleSubmit, resetField = _e.resetField, _f = _e.formState, errors = _f.errors, isValid = _f.isValid; _f.isSubmitting;
+    }), control = _e.control, register = _e.register, handleSubmit = _e.handleSubmit, reset = _e.reset, resetField = _e.resetField, _f = _e.formState, errors = _f.errors, isValid = _f.isValid; _f.isSubmitting;
     var _onSubmit = function (_data) {
         var data = __assign({}, _data);
         // strip study name
@@ -43878,6 +43919,7 @@ var RecipeInputsForm = function (_a) {
             setLoading(true);
             onSubmit(studyName, data)
                 .finally(function () {
+                reset();
                 setLoading(false);
             });
         }
@@ -45655,8 +45697,6 @@ var SelectLocalArtifacts = function (_a) {
         if (!selArtifact)
             return;
         if (selArtifact.kind === 'file') {
-            // console.log(selArtifact)
-            // directoryRef.current[0].resolve(selArtifact).then((path) => console.log(path) )
             var getFile = function (fileHandle) { return __awaiter$1(void 0, void 0, void 0, function () {
                 var path, _a, _b;
                 return __generator$1(this, function (_c) {
@@ -45812,22 +45852,23 @@ var SelectLocalArtifacts = function (_a) {
 
 var SelectRun = function (_a) {
     var _b, _c;
-    var authUser = _a.authUser, client = _a.client, projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, setSelRun = _a.setSelRun;
+    var authUser = _a.authUser, client = _a.client, projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, _defaultValue = _a.defaultValue, setSelRun = _a.setSelRun;
     var comboBoxRef = useRef();
-    var _d = useState(), runs = _d[0], setRuns = _d[1];
-    var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var _d = useState(_defaultValue), defaultValue = _d[0], setDefaultValue = _d[1];
+    var _e = useState(), runs = _e[0], setRuns = _e[1];
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
     var totalRunsRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _f = useState(0), total = _f[0], setTotal = _f[1];
-    var _g = useState({
+    var _g = useState(0), total = _g[0], setTotal = _g[1];
+    var _h = useState({
         owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && authUser.username),
         name: projectName,
         jobId: jobId,
         page: 1,
         perPage: 10,
-    }), queryConfig = _g[0], setQueryConfig = _g[1];
+    }), queryConfig = _h[0], setQueryConfig = _h[1];
     // resetting query
     useEffect(function () {
         // reset total loaded
@@ -45837,13 +45878,14 @@ var SelectRun = function (_a) {
         };
         // deselect items
         if (comboBoxRef.current) {
+            console.log('clear selection');
             comboBoxRef.current.selectItem(null);
         }
         setRuns([]);
         setQueryConfig(function (q) { return (__assign(__assign({}, q), { jobId: jobId, owner: projectOwner, name: projectName, page: 1 })); });
     }, [jobId, projectOwner, projectName]);
     var fetchRuns = useCallback(function (queryConfig) {
-        if (!authUser)
+        if (!authUser || !client || !client.runs)
             return;
         if (!queryConfig.name || !queryConfig.owner || !queryConfig.jobId)
             return;
@@ -45855,7 +45897,13 @@ var SelectRun = function (_a) {
         client.runs.listRuns(queryConfig)
             .then(function (_a) {
             var data = _a.data;
-            setRuns(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
+            setRuns(function (state) {
+                if (!state)
+                    return __spreadArray([], data.resources, true);
+                var newRuns = __spreadArray(__spreadArray([], state, true), data.resources, true);
+                var uniqueRuns = newRuns.filter(function (run, i, arr) { return arr.findIndex(function (v) { return v.id === run.id; }) === i; });
+                return uniqueRuns;
+            });
             setTotal(data.total_count);
             totalRunsRef.current.loaded += data.resources.length;
             totalRunsRef.current.total = data.total_count;
@@ -45863,10 +45911,32 @@ var SelectRun = function (_a) {
             .finally(function () {
             setLoading(false);
         });
-    }, [authUser, client.runs]);
+    }, [authUser, client]);
     useEffect(function () {
         fetchRuns(queryConfig);
     }, [fetchRuns, queryConfig]);
+    useEffect(function () {
+        if (!defaultValue || !client || !client.runs)
+            return;
+        client.runs.getRun({
+            owner: projectOwner,
+            name: projectName,
+            runId: defaultValue
+        }).then(function (_a) {
+            var data = _a.data;
+            if (!data)
+                return;
+            setRuns(function (state) {
+                if (!state)
+                    return [data];
+                var newRuns = __spreadArray(__spreadArray([], state, true), [data], false);
+                var uniqueRuns = newRuns.filter(function (run, i, arr) { return arr.findIndex(function (v) { return v.id === run.id; }) === i; });
+                return uniqueRuns;
+            });
+            setSelRun(data);
+            comboBoxRef.current.selectItem(__assign(__assign({}, data), { name: "".concat(data.recipe.metadata.name, " : ").concat(data.status.status) }));
+        });
+    }, [client, defaultValue, projectName, projectOwner, setSelRun]);
     var onScrollReachEnd = useCallback(function () {
         // already loaded all runs
         var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
@@ -45891,7 +45961,7 @@ var SelectRun = function (_a) {
                     width: 24,
                     display: 'flex',
                     justifyContent: 'flex-end'
-                }, className: 'secondary' }, "".concat(i)))); }, setSelected: setSelRun, inputProps: {
+                }, className: 'secondary' }, "".concat(i)))); }, setSelected: setSelRun, onClear: function () { return setDefaultValue(undefined); }, inputProps: {
             placeholder: 'Select a run...',
         }, loading: loading, disabled: !authUser || !queryConfig.name || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',
@@ -45902,23 +45972,36 @@ var SelectRun = function (_a) {
             } }, "Showing ".concat((_c = runs === null || runs === void 0 ? void 0 : runs.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " runs"))), onScrollReachEnd: onScrollReachEnd }));
 };
 
+var formatStudy = function (study) {
+    var name = study.spec.name;
+    if (!name) {
+        if (study.recipe && study.recipe.metadata) {
+            name = "".concat(study.recipe.metadata.name, " : ").concat(study.status.id.slice(0, 5), "...");
+        }
+        else {
+            name = 'No name';
+        }
+    }
+    return (__assign(__assign({}, study), { name: name }));
+};
 var SelectStudy = function (_a) {
     var _b, _c;
-    var authUser = _a.authUser, client = _a.client, projectName = _a.projectName, projectOwner = _a.projectOwner, setSelStudy = _a.setSelStudy;
+    var authUser = _a.authUser, client = _a.client, projectName = _a.projectName, projectOwner = _a.projectOwner, _defaultValue = _a.defaultValue, setSelStudy = _a.setSelStudy;
     var comboBoxRef = useRef();
-    var _d = useState(), studies = _d[0], setStudies = _d[1];
-    var _e = useState(false), loading = _e[0], setLoading = _e[1];
+    var _d = useState(_defaultValue), defaultValue = _d[0], setDefaultValue = _d[1];
+    var _e = useState([]), studies = _e[0], setStudies = _e[1];
+    var _f = useState(false), loading = _f[0], setLoading = _f[1];
     var totalRunsRef = useRef({
         loaded: 0,
         total: undefined
     });
-    var _f = useState(0), total = _f[0], setTotal = _f[1];
-    var _g = useState({
+    var _g = useState(0), total = _g[0], setTotal = _g[1];
+    var _h = useState({
         owner: projectOwner !== null && projectOwner !== void 0 ? projectOwner : (authUser && authUser.username),
         name: projectName,
         page: 1,
         perPage: 10,
-    }), queryConfig = _g[0], setQueryConfig = _g[1];
+    }), queryConfig = _h[0], setQueryConfig = _h[1];
     // resetting query
     useEffect(function () {
         // reset total loaded
@@ -45934,7 +46017,7 @@ var SelectStudy = function (_a) {
         setQueryConfig(function (q) { return (__assign(__assign({}, q), { owner: projectOwner, name: projectName, page: 1 })); });
     }, [projectOwner, projectName]);
     var fetchStudies = useCallback(function (queryConfig) {
-        if (!authUser)
+        if (!authUser || !client || !client.jobs)
             return;
         if (!queryConfig.name || !queryConfig.owner)
             return;
@@ -45946,7 +46029,13 @@ var SelectStudy = function (_a) {
         client.jobs.listJobs(queryConfig)
             .then(function (_a) {
             var data = _a.data;
-            setStudies(function (state) { return state ? __spreadArray(__spreadArray([], state, true), data.resources, true) : __spreadArray([], data.resources, true); });
+            setStudies(function (state) {
+                if (!state)
+                    return __spreadArray([], data.resources, true);
+                var newStudies = __spreadArray(__spreadArray([], state, true), data.resources, true);
+                var uniqueStudies = newStudies.filter(function (study, i, arr) { return arr.findIndex(function (v) { return v.id === study.id; }) === i; });
+                return uniqueStudies;
+            });
             setTotal(data.total_count);
             totalRunsRef.current.loaded += data.resources.length;
             totalRunsRef.current.total = data.total_count;
@@ -45954,10 +46043,32 @@ var SelectStudy = function (_a) {
             .finally(function () {
             setLoading(false);
         });
-    }, [authUser, client.jobs]);
+    }, [authUser, client]);
     useEffect(function () {
         fetchStudies(queryConfig);
     }, [fetchStudies, queryConfig]);
+    useEffect(function () {
+        if (!defaultValue || !client || !client.jobs)
+            return;
+        client.jobs.getJob({
+            owner: projectOwner,
+            name: projectName,
+            jobId: defaultValue
+        }).then(function (_a) {
+            var data = _a.data;
+            if (!data)
+                return;
+            setStudies(function (state) {
+                if (!state)
+                    return [data];
+                var newStudies = __spreadArray(__spreadArray([], state, true), [data], false);
+                var uniqueStudies = newStudies.filter(function (study, i, arr) { return arr.findIndex(function (v) { return v.id === study.id; }) === i; });
+                return uniqueStudies;
+            });
+            setSelStudy(data);
+            comboBoxRef.current.selectItem(formatStudy(data));
+        });
+    }, [client, defaultValue, projectName, projectOwner, setSelStudy]);
     var onScrollReachEnd = useCallback(function () {
         // already loaded all runs
         var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
@@ -45965,18 +46076,7 @@ var SelectStudy = function (_a) {
             return;
         setQueryConfig(function (q) { return (__assign(__assign({}, q), { page: q.page ? q.page + 1 : 1 })); });
     }, []);
-    return (React__default.createElement(ComboBox, { ref: comboBoxRef, items: (_b = studies === null || studies === void 0 ? void 0 : studies.map(function (r) {
-            var name = r.spec.name;
-            if (!name) {
-                if (r.recipe && r.recipe.metadata) {
-                    name = "".concat(r.recipe.metadata.name, " : ").concat(r.status.id.slice(0, 5), "...");
-                }
-                else {
-                    name = 'No name';
-                }
-            }
-            return (__assign(__assign({}, r), { name: name }));
-        })) !== null && _b !== void 0 ? _b : [], setSelected: setSelStudy, inputProps: {
+    return (React__default.createElement(ComboBox, { ref: comboBoxRef, items: (_b = studies === null || studies === void 0 ? void 0 : studies.map(formatStudy)) !== null && _b !== void 0 ? _b : [], setSelected: setSelStudy, onClear: function () { return setDefaultValue(undefined); }, inputProps: {
             placeholder: 'Select a study...',
         }, loading: loading, disabled: !authUser || !queryConfig.name || !queryConfig.owner, footer: (React__default.createElement("div", { key: "footer", style: {
                 width: '100%',