pollination-react-io 0.0.44 → 0.0.45-beta.2

package/build/index.js

@@ -242,7 +242,7 @@ function isNumber(val) {
  * @param {Object} val The value to test
  * @returns {boolean} True if value is an Object, otherwise false
  */
-function isObject$1(val) {
+function isObject$2(val) {
   return val !== null && typeof val === 'object';
 }
 
@@ -314,7 +314,7 @@ function isFunction(val) {
  * @returns {boolean} True if value is a Stream, otherwise false
  */
 function isStream(val) {
-  return isObject$1(val) && isFunction(val.pipe);
+  return isObject$2(val) && isFunction(val.pipe);
 }
 
 /**
@@ -581,7 +581,7 @@ var utils = {
   isArrayBufferView: isArrayBufferView,
   isString: isString,
   isNumber: isNumber,
-  isObject: isObject$1,
+  isObject: isObject$2,
   isPlainObject: isPlainObject$1,
   isUndefined: isUndefined,
   isDate: isDate,
@@ -25441,7 +25441,7 @@ function isOrContainsNode(parent, child, environment) {
  */
 
 
-function debounce(fn, time) {
+function debounce$1(fn, time) {
   var timeoutId;
 
   function cancel() {
@@ -25805,7 +25805,7 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
-var cleanupStatus = debounce(function (documentProp) {
+var cleanupStatus = debounce$1(function (documentProp) {
   getStatusDiv(documentProp).textContent = '';
 }, 500);
 /**
@@ -26591,7 +26591,7 @@ var Downshift = /*#__PURE__*/function () {
         }, cb);
       };
 
-      _this.updateStatus = debounce(function () {
+      _this.updateStatus = debounce$1(function () {
         var state = _this.getState();
 
         var item = _this.items[state.highlightedIndex];
@@ -27135,7 +27135,7 @@ function getA11ySelectionMessage(selectionParameters) {
  */
 
 
-var updateA11yStatus = debounce(function (getA11yMessage, document) {
+var updateA11yStatus = debounce$1(function (getA11yMessage, document) {
   setStatus(getA11yMessage(), document);
 }, 200); // istanbul ignore next
 
@@ -28973,6 +28973,384 @@ var slugify = createCommonjsModule(function (module, exports) {
 }));
 });
 
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as the `TypeError` message for "Functions" methods. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/** Used to match leading and trailing whitespace. */
+var reTrim = /^\s+|\s+$/g;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root.Date.now();
+};
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject$1(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        result = wait - timeSinceLastCall;
+
+    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject$1(value) {
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && objectToString.call(value) == symbolTag);
+}
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject$1(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$1(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = value.replace(reTrim, '');
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+var lodash_debounce = debounce;
+
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -30618,11 +30996,16 @@ var PerfectScrollbar = /*@__PURE__*/getDefaultExportFromCjs(lib);
 
 var ICON_SIZE = 18;
 var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
-    var items = _a.items, renderItem = _a.renderItem, setSelected = _a.setSelected, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, inputStyle = _a.inputStyle, menuStyle = _a.menuStyle, inputProps = _a.inputProps, footer = _a.footer, _d = _a.noMatchText, noMatchText = _d === void 0 ? 'No matching items' : _d, environment = _a.environment;
+    var items = _a.items, renderItem = _a.renderItem, setSelected = _a.setSelected, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.loading, loading = _c === void 0 ? false : _c, inputStyle = _a.inputStyle, menuStyle = _a.menuStyle, inputProps = _a.inputProps, footer = _a.footer, _d = _a.noMatchText, noMatchText = _d === void 0 ? 'No matching items' : _d; _a.environment; var onScrollReachEnd = _a.onScrollReachEnd;
     var _e = React.useState(items), inputItems = _e[0], setInputItems = _e[1];
     React.useEffect(function () {
         setInputItems(items);
     }, [items]);
+    var debouncedOnScrollReachEnd = React.useMemo(function () {
+        return onScrollReachEnd ?
+            lodash_debounce(onScrollReachEnd, 1000, { leading: true, trailing: false })
+            : undefined;
+    }, [onScrollReachEnd]);
     var _f = useCombobox({
         items: inputItems,
         onInputValueChange: function (_a) {
@@ -30635,8 +31018,9 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
                 setInputItems(items);
             }
         },
-        environment: environment !== null && environment !== void 0 ? environment : undefined,
-    }), isOpen = _f.isOpen, getToggleButtonProps = _f.getToggleButtonProps, getMenuProps = _f.getMenuProps, getInputProps = _f.getInputProps, getComboboxProps = _f.getComboboxProps, highlightedIndex = _f.highlightedIndex, getItemProps = _f.getItemProps, openMenu = _f.openMenu, selectItem = _f.selectItem, selectedItem = _f.selectedItem, inputValue = _f.inputValue;
+        // to what extent is this necessary?
+        // environment: environment ? environment : undefined
+    }), isOpen = _f.isOpen, getToggleButtonProps = _f.getToggleButtonProps, getMenuProps = _f.getMenuProps, getInputProps = _f.getInputProps, getComboboxProps = _f.getComboboxProps, highlightedIndex = _f.highlightedIndex, getItemProps = _f.getItemProps, openMenu = _f.openMenu, closeMenu = _f.closeMenu, selectItem = _f.selectItem, selectedItem = _f.selectedItem, inputValue = _f.inputValue;
     React.useImperativeHandle(ref, function () { return ({
         selectItem: selectItem,
         selectedItem: selectedItem,
@@ -30648,12 +31032,13 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
         if (setSelected) {
             setSelected(selectedItem);
         }
-    }, [selectedItem, setSelected]);
+        closeMenu();
+    }, [closeMenu, selectedItem, setSelected]);
     return (React__default["default"].createElement("div", { "data-testid": "ComboBoxSelect", className: "poll-combobox" },
         React__default["default"].createElement("div", __assign$3({}, getComboboxProps(), { style: __assign$3(__assign$3({}, inputStyle), { position: 'relative', width: '100%' }), className: "poll-combo-group ".concat(disabled && 'poll-combo-group-disabled') }),
             React__default["default"].createElement("input", __assign$3({}, getInputProps(__assign$3(__assign$3({ placeholder: 'Search for something...' }, inputProps), { onFocus: function () {
                     openMenu();
-                } })), { disabled: disabled, style: {
+                } })), { spellCheck: false, disabled: disabled, style: {
                     paddingLeft: 50,
                     borderTopLeftRadius: 4,
                     borderBottomLeftRadius: isOpen ? 0 : 4,
@@ -30694,24 +31079,40 @@ var ComboBox = React__default["default"].forwardRef(function ComboBox(_a, ref) {
                 padding: isOpen ? '6px 4px' : 0,
                 visibility: isOpen ? undefined : 'hidden'
             } },
-            React__default["default"].createElement(PerfectScrollbar, null,
-                React__default["default"].createElement("ul", __assign$3({}, getMenuProps(), { style: __assign$3(__assign$3({}, menuStyle), { display: 'flex', width: '100%', boxSizing: 'border-box', zIndex: 100, padding: 0, flexDirection: 'column' }) }), inputItems.map(function (item, index) { return (React__default["default"].createElement("li", __assign$3({ className: "poll-combobox-item", style: highlightedIndex === index ? { backgroundColor: '#bde4ff' } : {}, key: "".concat(item.name, "-").concat(index) }, getItemProps({
+            React__default["default"].createElement(PerfectScrollbar, { options: {
+                    wheelPropagation: false,
+                }, onYReachEnd: function () {
+                    if (items.length < 1 || !isOpen)
+                        return;
+                    debouncedOnScrollReachEnd && debouncedOnScrollReachEnd();
+                } },
+                React__default["default"].createElement("ul", __assign$3({}, getMenuProps(), { style: __assign$3(__assign$3({}, menuStyle), { display: 'flex', width: '100%', boxSizing: 'border-box', zIndex: 100, padding: 0, flexDirection: 'column' }) }), inputItems.map(function (item, i, arr) { return (React__default["default"].createElement("li", __assign$3({ className: "poll-combobox-item", style: highlightedIndex === i ? { backgroundColor: '#bde4ff' } : {}, key: "".concat(item.name, "-").concat(i) }, getItemProps({
                     item: item,
-                    index: index,
-                    isSelected: selectedItem === item,
-                })), renderItem ? renderItem(item) : item.name)); }))),
+                    index: i,
+                    isSelected: selectedItem && selectedItem.id === item.id,
+                })), renderItem ? renderItem(item, i, arr) : item.name)); }))),
             React__default["default"].createElement("div", { className: 'poll-combo-footer-container', style: {
                     opacity: isOpen ? 1 : 0
                 } },
                 React__default["default"].createElement(Root$8, { key: "poll-separator", className: "poll-separator" }),
-                inputItems.length > 0 && footer,
-                inputItems.length < 1
-                    && (React__default["default"].createElement("div", { key: "footer", style: {
-                            width: '100%',
+                loading &&
+                    React__default["default"].createElement("div", { style: {
                             display: 'flex',
+                            alignItems: 'center',
                             justifyContent: 'center',
+                            background: 'var(--slate3)',
                             color: 'var(--slate10)',
-                        } }, noMatchText))))));
+                            padding: '6px 0px',
+                        } }, "Loading..."),
+                inputItems.length > 0 && !loading && footer,
+                inputItems.length < 1 && !loading &&
+                    React__default["default"].createElement("div", { key: "footer", style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            color: 'var(--slate10)',
+                            padding: '10px 0px',
+                        } }, noMatchText)))));
 });
 
 const r$3=React__namespace["useId".toString()]||(()=>{});let n$2=0;function useId(o){const[u,i]=React__namespace.useState(r$3());return useLayoutEffect((()=>{o||i((t=>null!=t?t:String(n$2++)));}),[o]),o||(u?`radix-${u}`:"")}
@@ -33807,6 +34208,50 @@ var SelectAccount = function (_a) {
             } }, "".concat(accounts === null || accounts === void 0 ? void 0 : accounts.total_count, " accounts"))) }));
 };
 
+var SelectStudy = function (_a) {
+    var _b;
+    var projectOwner = _a.projectOwner, authUser = _a.authUser, client = _a.client, setSelStudy = _a.setSelStudy, queryConfig = _a.queryConfig, environment = _a.environment;
+    var _c = React.useState(), studies = _c[0], setStudies = _c[1];
+    var comboBoxRef = React.useRef();
+    var _d = React.useState(false), loading = _d[0], setLoading = _d[1];
+    var fetchStudies = React.useCallback(function (owner) {
+        if (!authUser)
+            return;
+        setLoading(true);
+        client.jobs.listJobs(__assign$3({ 
+            // @ts-ignore
+            owner: owner, page: 1, perPage: 25 }, queryConfig))
+            .then(function (_a) {
+            var data = _a.data;
+            setStudies(data);
+        })
+            .finally(function () {
+            setLoading(false);
+        });
+    }, [authUser, client.jobs, queryConfig]);
+    React.useEffect(function () {
+        // recent selection on refetch
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+    }, [queryConfig]);
+    // initial fetch
+    React.useEffect(function () {
+        if (!authUser)
+            return;
+        var owner = projectOwner !== null && projectOwner !== void 0 ? projectOwner : authUser.username;
+        fetchStudies(owner);
+    }, [authUser, fetchStudies, projectOwner]);
+    return (React__default["default"].createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = studies === null || studies === void 0 ? void 0 : studies.resources.map(function (r) { var _a; return (__assign$3(__assign$3({}, r), { name: (_a = r.spec.name) !== null && _a !== void 0 ? _a : "".concat(r.recipe.metadata.name, " : ").concat(r.status.id.slice(0, 5), "...") })); })) !== null && _b !== void 0 ? _b : [], setSelected: setSelStudy, inputProps: {
+            placeholder: 'Select a study...',
+        }, loading: !client || loading, disabled: !client || !(queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.owner), footer: (React__default["default"].createElement("div", { key: "footer", style: {
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                color: 'var(--grey4)',
+            } }, "".concat(studies === null || studies === void 0 ? void 0 : studies.total_count, " studies"))) }));
+};
+
 var SelectProject = function (_a) {
     var _b;
     var authUser = _a.authUser, client = _a.client, setSelProject = _a.setSelProject, queryConfig = _a.queryConfig, environment = _a.environment;
@@ -33849,31 +34294,43 @@ var SelectProject = function (_a) {
 };
 
 var SelectRecipe = function (_a) {
-    var _b;
+    var _b, _c;
     var projectName = _a.projectName, authUser = _a.authUser, client = _a.client, setSelRecipe = _a.setSelRecipe, environment = _a.environment;
-    var _c = React.useState(), recipes = _c[0], setRecipes = _c[1];
+    var _d = React.useState(), recipes = _d[0], setRecipes = _d[1];
+    var totalRecipesRef = React.useRef({
+        loaded: 0,
+        total: undefined
+    });
+    var _e = React.useState(0), total = _e[0], setTotal = _e[1];
+    var _f = React.useState(1), page = _f[0], setPage = _f[1];
     var comboBoxRef = React.useRef();
-    var _d = React.useState(false), loading = _d[0], setLoading = _d[1];
+    var _g = React.useState(false), loading = _g[0], setLoading = _g[1];
     var fetchRecipes = React.useCallback(function (name, owner) {
         if (!client)
             return;
+        // we've already loaded all recipes
+        var _a = totalRecipesRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
+            return;
         setLoading(true);
         client.projects.getProjectRecipes({
             name: name,
             owner: owner,
-            page: 1,
+            page: page,
             perPage: 10,
         })
             .then(function (_a) {
             var data = _a.data;
-            setRecipes(data);
+            setRecipes(function (state) { return state ? __spreadArray$2(__spreadArray$2([], state, true), data.resources, true) : __spreadArray$2([], data.resources, true); });
+            setTotal(data.total_count);
+            totalRecipesRef.current.loaded += data.resources.length;
+            totalRecipesRef.current.total = data.total_count;
         })
             .finally(function () {
             setLoading(false);
         });
-    }, [client]);
+    }, [client, page]);
     React.useEffect(function () {
-        console.log(projectName);
         // recent selection on refetch
         if (comboBoxRef.current) {
             comboBoxRef.current.selectItem(null);
@@ -33885,9 +34342,20 @@ var SelectRecipe = function (_a) {
             return;
         fetchRecipes(projectName, authUser.username);
     }, [authUser, fetchRecipes, projectName]);
-    return (React__default["default"].createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = recipes === null || recipes === void 0 ? void 0 : recipes.resources.map(function (r, i) { return (__assign$3(__assign$3({}, r), { name: r.metadata.name, id: "".concat(r.metadata.name, "-").concat(r.metadata.tag) })); })) !== null && _b !== void 0 ? _b : [], renderItem: function (item) { return (React__default["default"].createElement("div", { style: {
+    var onScrollReachEnd = React.useCallback(function () {
+        console.log(totalRecipesRef.current);
+        var _a = totalRecipesRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
+            return;
+        setPage(function (p) {
+            p++;
+            return p;
+        });
+    }, []);
+    return (React__default["default"].createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = recipes === null || recipes === void 0 ? void 0 : recipes.map(function (r, i) { return (__assign$3(__assign$3({}, r), { name: "".concat(r.metadata.name, "-").concat(r.metadata.tag), id: "".concat(r.metadata.name, "-").concat(r.metadata.tag) })); })) !== null && _b !== void 0 ? _b : [], renderItem: function (item) { return (React__default["default"].createElement("div", { style: {
                 display: 'flex',
-                gap: 16,
+                alignItems: 'center',
+                gap: 8,
             }, id: "".concat(item.metadata.name, "-").concat(item.metadata.tag) },
             React__default["default"].createElement(Avatar, { src: item.metadata.icon, alt: item.metadata.name, fallback: item.metadata.name, size: 24 }), "".concat(item.metadata.name, "-").concat(item.metadata.tag))); }, setSelected: setSelRecipe, inputProps: {
             placeholder: 'Select a recipe...',
@@ -33896,7 +34364,96 @@ var SelectRecipe = function (_a) {
                 display: 'flex',
                 justifyContent: 'center',
                 color: 'var(--grey4)',
-            } }, "".concat(recipes === null || recipes === void 0 ? void 0 : recipes.total_count, " recipes"))) }));
+                padding: '6px 0px',
+            } }, "Showing ".concat((_c = recipes === null || recipes === void 0 ? void 0 : recipes.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " recipes"))), onScrollReachEnd: onScrollReachEnd }));
+};
+
+var SelectRun = function (_a) {
+    var _b, _c;
+    var projectOwner = _a.projectOwner, projectName = _a.projectName, jobId = _a.jobId, authUser = _a.authUser, client = _a.client, setSelRun = _a.setSelRun, environment = _a.environment;
+    var _d = React.useState(), runs = _d[0], setRuns = _d[1];
+    var totalRunsRef = React.useRef({
+        loaded: 0,
+        total: undefined
+    });
+    var _e = React.useState(0), total = _e[0], setTotal = _e[1];
+    var _f = React.useState(1), page = _f[0], setPage = _f[1];
+    var comboBoxRef = React.useRef();
+    var _g = React.useState(false), loading = _g[0], setLoading = _g[1];
+    var fetchRuns = React.useCallback(function (name, owner, jobId) {
+        if (!client)
+            return;
+        // we've already loaded all Runs
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
+            return;
+        setLoading(true);
+        client.runs.listRuns({
+            name: name,
+            owner: owner,
+            jobId: jobId,
+            page: page,
+            perPage: 10,
+        })
+            .then(function (_a) {
+            var data = _a.data;
+            setRuns(function (state) { return state ? __spreadArray$2(__spreadArray$2([], state, true), data.resources, true) : __spreadArray$2([], data.resources, true); });
+            setTotal(data.total_count);
+            totalRunsRef.current.loaded += data.resources.length;
+            totalRunsRef.current.total = data.total_count;
+        })
+            .finally(function () {
+            setLoading(false);
+        });
+    }, [client, page]);
+    React.useEffect(function () {
+        // recent selection on refetch
+        if (comboBoxRef.current) {
+            comboBoxRef.current.selectItem(null);
+        }
+    }, [projectName]);
+    // initial fetch
+    React.useEffect(function () {
+        if (!authUser || !projectName)
+            return;
+        var owner = projectOwner !== null && projectOwner !== void 0 ? projectOwner : authUser.username;
+        fetchRuns(projectName, owner, jobId);
+    }, [authUser, fetchRuns, jobId, projectName, projectOwner]);
+    var onScrollReachEnd = React.useCallback(function () {
+        var _a = totalRunsRef.current, total = _a.total, loaded = _a.loaded;
+        if (total && loaded >= total)
+            return;
+        setPage(function (p) {
+            p++;
+            return p;
+        });
+    }, []);
+    return (React__default["default"].createElement(ComboBox, { ref: comboBoxRef, environment: environment, items: (_b = runs === null || runs === void 0 ? void 0 : runs.map(function (r) { return (__assign$3(__assign$3({}, r), { name: "".concat(r.recipe.metadata.name, " : ").concat(r.status.status) })); })) !== null && _b !== void 0 ? _b : [], renderItem: function (item, i) { return (React__default["default"].createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                paddingRight: 14
+            } },
+            React__default["default"].createElement("div", { style: {
+                    display: 'flex',
+                    gap: 8,
+                    alignItems: 'center',
+                }, id: "".concat(item.id) },
+                React__default["default"].createElement(Avatar, { src: item.recipe.metadata.icon, alt: item.recipe.metadata.name, fallback: item.recipe.metadata.name, size: 24 }),
+                React__default["default"].createElement("span", null, "".concat(item.recipe.metadata.name, " : ").concat(item.status.status))),
+            React__default["default"].createElement("span", { style: {
+                    fontVariantNumeric: 'tabular-nums',
+                    width: 24,
+                    display: 'flex',
+                    justifyContent: 'flex-end'
+                }, className: 'secondary' }, "".concat(i)))); }, setSelected: setSelRun, inputProps: {
+            placeholder: 'Select a run...',
+        }, loading: !client || loading, disabled: !client || !projectName, footer: (React__default["default"].createElement("div", { key: "footer", style: {
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                color: 'var(--grey4)',
+                padding: '6px 0px',
+            } }, "Showing ".concat((_c = runs === null || runs === void 0 ? void 0 : runs.length) !== null && _c !== void 0 ? _c : 0, " of ").concat(total, " recipes"))), onScrollReachEnd: onScrollReachEnd }));
 };
 
 var getAction$1 = function (key) {
@@ -34145,6 +34702,8 @@ exports.PreviewBakeModel = PreviewBakeModel;
 exports.SelectAccount = SelectAccount;
 exports.SelectProject = SelectProject;
 exports.SelectRecipe = SelectRecipe;
+exports.SelectRun = SelectRun;
+exports.SelectStudy = SelectStudy;
 exports.SendGeometry = SendGeometry;
 exports.SendModel = SendModel;
 exports.SendResults = SendResults;