` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: PropTypes.any,\n\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: PropTypes.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: PropTypes.bool,\n\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: PropTypes.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: PropTypes.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nexport default TransitionGroup;","'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\n/**\n * @ignore - internal component.\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction Ripple(props) {\n const {\n className,\n classes,\n pulsate = false,\n rippleX,\n rippleY,\n rippleSize,\n in: inProp,\n onExited,\n timeout\n } = props;\n const [leaving, setLeaving] = React.useState(false);\n const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);\n const rippleStyles = {\n width: rippleSize,\n height: rippleSize,\n top: -(rippleSize / 2) + rippleY,\n left: -(rippleSize / 2) + rippleX\n };\n const childClassName = clsx(classes.child, leaving && classes.childLeaving, pulsate && classes.childPulsate);\n if (!inProp && !leaving) {\n setLeaving(true);\n }\n React.useEffect(() => {\n if (!inProp && onExited != null) {\n // react-transition-group#onExited\n const timeoutId = setTimeout(onExited, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n }\n return undefined;\n }, [onExited, inProp, timeout]);\n return /*#__PURE__*/_jsx(\"span\", {\n className: rippleClassName,\n style: rippleStyles,\n children: /*#__PURE__*/_jsx(\"span\", {\n className: childClassName\n })\n });\n}\nprocess.env.NODE_ENV !== \"production\" ? Ripple.propTypes = {\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n /**\n * @ignore - injected from TransitionGroup\n */\n in: PropTypes.bool,\n /**\n * @ignore - injected from TransitionGroup\n */\n onExited: PropTypes.func,\n /**\n * If `true`, the ripple pulsates, typically indicating the keyboard focus state of an element.\n */\n pulsate: PropTypes.bool,\n /**\n * Diameter of the ripple.\n */\n rippleSize: PropTypes.number,\n /**\n * Horizontal position of the ripple center.\n */\n rippleX: PropTypes.number,\n /**\n * Vertical position of the ripple center.\n */\n rippleY: PropTypes.number,\n /**\n * exit delay\n */\n timeout: PropTypes.number.isRequired\n} : void 0;\nexport default Ripple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getTouchRippleUtilityClass(slot) {\n return generateUtilityClass('MuiTouchRipple', slot);\n}\nconst touchRippleClasses = generateUtilityClasses('MuiTouchRipple', ['root', 'ripple', 'rippleVisible', 'ripplePulsate', 'child', 'childLeaving', 'childPulsate']);\nexport default touchRippleClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"center\", \"classes\", \"className\"];\nlet _ = t => t,\n _t,\n _t2,\n _t3,\n _t4;\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\nimport { keyframes } from '@mui/system';\nimport useTimeout from '@mui/utils/useTimeout';\nimport styled from '../styles/styled';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport Ripple from './Ripple';\nimport touchRippleClasses from './touchRippleClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst DURATION = 550;\nexport const DELAY_RIPPLE = 80;\nconst enterKeyframe = keyframes(_t || (_t = _`\n 0% {\n transform: scale(0);\n opacity: 0.1;\n }\n\n 100% {\n transform: scale(1);\n opacity: 0.3;\n }\n`));\nconst exitKeyframe = keyframes(_t2 || (_t2 = _`\n 0% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n`));\nconst pulsateKeyframe = keyframes(_t3 || (_t3 = _`\n 0% {\n transform: scale(1);\n }\n\n 50% {\n transform: scale(0.92);\n }\n\n 100% {\n transform: scale(1);\n }\n`));\nexport const TouchRippleRoot = styled('span', {\n name: 'MuiTouchRipple',\n slot: 'Root'\n})({\n overflow: 'hidden',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n borderRadius: 'inherit'\n});\n\n// This `styled()` function invokes keyframes. `styled-components` only supports keyframes\n// in string templates. Do not convert these styles in JS object as it will break.\nexport const TouchRippleRipple = styled(Ripple, {\n name: 'MuiTouchRipple',\n slot: 'Ripple'\n})(_t4 || (_t4 = _`\n opacity: 0;\n position: absolute;\n\n &.${0} {\n opacity: 0.3;\n transform: scale(1);\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n &.${0} {\n animation-duration: ${0}ms;\n }\n\n & .${0} {\n opacity: 1;\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: currentColor;\n }\n\n & .${0} {\n opacity: 0;\n animation-name: ${0};\n animation-duration: ${0}ms;\n animation-timing-function: ${0};\n }\n\n & .${0} {\n position: absolute;\n /* @noflip */\n left: 0px;\n top: 0;\n animation-name: ${0};\n animation-duration: 2500ms;\n animation-timing-function: ${0};\n animation-iteration-count: infinite;\n animation-delay: 200ms;\n }\n`), touchRippleClasses.rippleVisible, enterKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.ripplePulsate, ({\n theme\n}) => theme.transitions.duration.shorter, touchRippleClasses.child, touchRippleClasses.childLeaving, exitKeyframe, DURATION, ({\n theme\n}) => theme.transitions.easing.easeInOut, touchRippleClasses.childPulsate, pulsateKeyframe, ({\n theme\n}) => theme.transitions.easing.easeInOut);\n\n/**\n * @ignore - internal component.\n *\n * TODO v5: Make private\n */\nconst TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiTouchRipple'\n });\n const {\n center: centerProp = false,\n classes = {},\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const [ripples, setRipples] = React.useState([]);\n const nextKey = React.useRef(0);\n const rippleCallback = React.useRef(null);\n React.useEffect(() => {\n if (rippleCallback.current) {\n rippleCallback.current();\n rippleCallback.current = null;\n }\n }, [ripples]);\n\n // Used to filter out mouse emulated events on mobile.\n const ignoringMouseDown = React.useRef(false);\n // We use a timer in order to only show the ripples for touch \"click\" like events.\n // We don't want to display the ripple for touch scroll events.\n const startTimer = useTimeout();\n\n // This is the hook called once the previous timeout is ready.\n const startTimerCommit = React.useRef(null);\n const container = React.useRef(null);\n const startCommit = React.useCallback(params => {\n const {\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n } = params;\n setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {\n classes: {\n ripple: clsx(classes.ripple, touchRippleClasses.ripple),\n rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),\n ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),\n child: clsx(classes.child, touchRippleClasses.child),\n childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),\n childPulsate: clsx(classes.childPulsate, touchRippleClasses.childPulsate)\n },\n timeout: DURATION,\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n }, nextKey.current)]);\n nextKey.current += 1;\n rippleCallback.current = cb;\n }, [classes]);\n const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {\n const {\n pulsate = false,\n center = centerProp || options.pulsate,\n fakeElement = false // For test purposes\n } = options;\n if ((event == null ? void 0 : event.type) === 'mousedown' && ignoringMouseDown.current) {\n ignoringMouseDown.current = false;\n return;\n }\n if ((event == null ? void 0 : event.type) === 'touchstart') {\n ignoringMouseDown.current = true;\n }\n const element = fakeElement ? null : container.current;\n const rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n };\n\n // Get the size of the ripple\n let rippleX;\n let rippleY;\n let rippleSize;\n if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n const {\n clientX,\n clientY\n } = event.touches && event.touches.length > 0 ? event.touches[0] : event;\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n if (center) {\n rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);\n\n // For some reason the animation is broken on Mobile Chrome if the size is even.\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);\n }\n\n // Touche devices\n if (event != null && event.touches) {\n // check that this isn't another touchstart due to multitouch\n // otherwise we will only clear a single timer when unmounting while two\n // are running\n if (startTimerCommit.current === null) {\n // Prepare the ripple effect.\n startTimerCommit.current = () => {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n };\n // Delay the execution of the ripple effect.\n // We have to make a tradeoff with this delay value.\n startTimer.start(DELAY_RIPPLE, () => {\n if (startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n }\n });\n }\n } else {\n startCommit({\n pulsate,\n rippleX,\n rippleY,\n rippleSize,\n cb\n });\n }\n }, [centerProp, startCommit, startTimer]);\n const pulsate = React.useCallback(() => {\n start({}, {\n pulsate: true\n });\n }, [start]);\n const stop = React.useCallback((event, cb) => {\n startTimer.clear();\n\n // The touch interaction occurs too quickly.\n // We still want to show ripple effect.\n if ((event == null ? void 0 : event.type) === 'touchend' && startTimerCommit.current) {\n startTimerCommit.current();\n startTimerCommit.current = null;\n startTimer.start(0, () => {\n stop(event, cb);\n });\n return;\n }\n startTimerCommit.current = null;\n setRipples(oldRipples => {\n if (oldRipples.length > 0) {\n return oldRipples.slice(1);\n }\n return oldRipples;\n });\n rippleCallback.current = cb;\n }, [startTimer]);\n React.useImperativeHandle(ref, () => ({\n pulsate,\n start,\n stop\n }), [pulsate, start, stop]);\n return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({\n className: clsx(touchRippleClasses.root, classes.root, className),\n ref: container\n }, other, {\n children: /*#__PURE__*/_jsx(TransitionGroup, {\n component: null,\n exit: true,\n children: ripples\n })\n }));\n});\nprocess.env.NODE_ENV !== \"production\" ? TouchRipple.propTypes = {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: PropTypes.bool,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string\n} : void 0;\nexport default TouchRipple;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getButtonBaseUtilityClass(slot) {\n return generateUtilityClass('MuiButtonBase', slot);\n}\nconst buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);\nexport default buttonBaseClasses;","'use client';\n\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nconst _excluded = [\"action\", \"centerRipple\", \"children\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"LinkComponent\", \"onBlur\", \"onClick\", \"onContextMenu\", \"onDragLeave\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"touchRippleRef\", \"type\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport refType from '@mui/utils/refType';\nimport elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';\nimport composeClasses from '@mui/utils/composeClasses';\nimport styled from '../styles/styled';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport useForkRef from '../utils/useForkRef';\nimport useEventCallback from '../utils/useEventCallback';\nimport useIsFocusVisible from '../utils/useIsFocusVisible';\nimport TouchRipple from './TouchRipple';\nimport buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n focusVisible,\n focusVisibleClassName,\n classes\n } = ownerState;\n const slots = {\n root: ['root', disabled && 'disabled', focusVisible && 'focusVisible']\n };\n const composedClasses = composeClasses(slots, getButtonBaseUtilityClass, classes);\n if (focusVisible && focusVisibleClassName) {\n composedClasses.root += ` ${focusVisibleClassName}`;\n }\n return composedClasses;\n};\nexport const ButtonBaseRoot = styled('button', {\n name: 'MuiButtonBase',\n slot: 'Root',\n overridesResolver: (props, styles) => styles.root\n})({\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n boxSizing: 'border-box',\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 0,\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n MozAppearance: 'none',\n // Reset\n WebkitAppearance: 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n },\n [`&.${buttonBaseClasses.disabled}`]: {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n },\n '@media print': {\n colorAdjust: 'exact'\n }\n});\n\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\nconst ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiButtonBase'\n });\n const {\n action,\n centerRipple = false,\n children,\n className,\n component = 'button',\n disabled = false,\n disableRipple = false,\n disableTouchRipple = false,\n focusRipple = false,\n LinkComponent = 'a',\n onBlur,\n onClick,\n onContextMenu,\n onDragLeave,\n onFocus,\n onFocusVisible,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onMouseLeave,\n onMouseUp,\n onTouchEnd,\n onTouchMove,\n onTouchStart,\n tabIndex = 0,\n TouchRippleProps,\n touchRippleRef,\n type\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const buttonRef = React.useRef(null);\n const rippleRef = React.useRef(null);\n const handleRippleRef = useForkRef(rippleRef, touchRippleRef);\n const {\n isFocusVisibleRef,\n onFocus: handleFocusVisible,\n onBlur: handleBlurVisible,\n ref: focusVisibleRef\n } = useIsFocusVisible();\n const [focusVisible, setFocusVisible] = React.useState(false);\n if (disabled && focusVisible) {\n setFocusVisible(false);\n }\n React.useImperativeHandle(action, () => ({\n focusVisible: () => {\n setFocusVisible(true);\n buttonRef.current.focus();\n }\n }), []);\n const [mountedState, setMountedState] = React.useState(false);\n React.useEffect(() => {\n setMountedState(true);\n }, []);\n const enableTouchRipple = mountedState && !disableRipple && !disabled;\n React.useEffect(() => {\n if (focusVisible && focusRipple && !disableRipple && mountedState) {\n rippleRef.current.pulsate();\n }\n }, [disableRipple, focusRipple, focusVisible, mountedState]);\n function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {\n return useEventCallback(event => {\n if (eventCallback) {\n eventCallback(event);\n }\n const ignore = skipRippleAction;\n if (!ignore && rippleRef.current) {\n rippleRef.current[rippleAction](event);\n }\n return true;\n });\n }\n const handleMouseDown = useRippleHandler('start', onMouseDown);\n const handleContextMenu = useRippleHandler('stop', onContextMenu);\n const handleDragLeave = useRippleHandler('stop', onDragLeave);\n const handleMouseUp = useRippleHandler('stop', onMouseUp);\n const handleMouseLeave = useRippleHandler('stop', event => {\n if (focusVisible) {\n event.preventDefault();\n }\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n });\n const handleTouchStart = useRippleHandler('start', onTouchStart);\n const handleTouchEnd = useRippleHandler('stop', onTouchEnd);\n const handleTouchMove = useRippleHandler('stop', onTouchMove);\n const handleBlur = useRippleHandler('stop', event => {\n handleBlurVisible(event);\n if (isFocusVisibleRef.current === false) {\n setFocusVisible(false);\n }\n if (onBlur) {\n onBlur(event);\n }\n }, false);\n const handleFocus = useEventCallback(event => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!buttonRef.current) {\n buttonRef.current = event.currentTarget;\n }\n handleFocusVisible(event);\n if (isFocusVisibleRef.current === true) {\n setFocusVisible(true);\n if (onFocusVisible) {\n onFocusVisible(event);\n }\n }\n if (onFocus) {\n onFocus(event);\n }\n });\n const isNonNativeButton = () => {\n const button = buttonRef.current;\n return component && component !== 'button' && !(button.tagName === 'A' && button.href);\n };\n\n /**\n * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat\n */\n const keydownRef = React.useRef(false);\n const handleKeyDown = useEventCallback(event => {\n // Check if key is already down to avoid repeats being counted as multiple activations\n if (focusRipple && !keydownRef.current && focusVisible && rippleRef.current && event.key === ' ') {\n keydownRef.current = true;\n rippleRef.current.stop(event, () => {\n rippleRef.current.start(event);\n });\n }\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === ' ') {\n event.preventDefault();\n }\n if (onKeyDown) {\n onKeyDown(event);\n }\n\n // Keyboard accessibility for non interactive elements\n if (event.target === event.currentTarget && isNonNativeButton() && event.key === 'Enter' && !disabled) {\n event.preventDefault();\n if (onClick) {\n onClick(event);\n }\n }\n });\n const handleKeyUp = useEventCallback(event => {\n // calling preventDefault in keyUp on a \n );\n}\n\nconst FlowStopController = ({ hostIP, hostPort, WindowTitle }) => {\n const [tabIndex, setTabIndex] = useState(0);\n const [timeStamp, setTimeStamp] = useState('0');\n const [experimentName, setExperimentName] = useState('Test');\n const [experimentDescription, setExperimentDescription] = useState('Some description');\n const [uniqueId, setUniqueId] = useState('1');\n const [numImages, setNumImages] = useState('10');\n const [volumePerImage, setVolumePerImage] = useState('1000');\n const [timeToStabilize, setTimeToStabilize] = useState(0.5);\n const [pumpSpeed, setPumpSpeed] = useState(10000);\n const [isRunning, setIsRunning] = useState(false);\n const [currentImageCount, setCurrentImageCount] = useState(0);\n\n useEffect(() => {\n const fetchStatus = async () => {\n try {\n const response = await fetch(`${hostIP}:${hostPort}/FlowStopController/getStatus`);\n const data = await response.json();\n setIsRunning(data[0]);\n setCurrentImageCount(data[1]);\n } catch (error) {\n //console.error('Error fetching status:', error);\n }\n };\n\n const fetchExperimentParameters = async () => {\n try {\n const response = await fetch(`${hostIP}:${hostPort}/FlowStopController/getExperimentParameters`);\n const data = await response.json();\n setTimeStamp(data.timeStamp);\n setExperimentName(data.defaultExperimentName);\n setExperimentDescription(\"Add some description here\");\n setUniqueId(data.uniqueId);\n setNumImages(parseInt(data.defaultNumberOfFrames, 10));\n setVolumePerImage(parseFloat(data.defaultFlowRate));\n setTimeToStabilize(parseFloat(data.defaultFrameRate));\n setPumpSpeed(parseInt(10000, 10));\n } catch (error) {\n console.error('Error fetching experiment parameters:', error);\n }\n };\n\n fetchStatus();\n fetchExperimentParameters();\n\n const interval = setInterval(() => {\n fetchStatus();\n }, 1000); // fetch status every second\n\n return () => clearInterval(interval); // clean up the interval on component unmount\n }, [hostIP, hostPort]);\n\n const startExperiment = () => {\n // https://localhost:8001/FlowStopController/startFlowStopExperiment?timeStamp=asdf&experimentName=adf&experimentDescription=asdf&uniqueId=asdf&numImages=19&volumePerImage=199&timeToStabilize=1&delayToStart=1&frameRate=1&filePath=.%2F&fileFormat=TIF&isRecordVideo=true&pumpSpeed=10000\n\n const url = `${hostIP}:${hostPort}/FlowStopController/startFlowStopExperiment?timeStamp=${timeStamp}&experimentName=${experimentName}&experimentDescription=${experimentDescription}&uniqueId=${uniqueId}&numImages=${numImages}&volumePerImage=${volumePerImage}&timeToStabilize=${timeToStabilize}&isRecordVideo=true&pumpSpeed=${pumpSpeed}`;\n\n fetch(url, { method: 'GET' })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n setIsRunning(true);\n })\n .catch(error => console.error('Error:', error));\n };\n\n const stopExperiment = () => {\n const url = `${hostIP}:${hostPort}/FlowStopController/stopFlowStopExperiment`;\n\n fetch(url, { method: 'GET' })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n setIsRunning(false);\n })\n .catch(error => console.error('Error:', error));\n };\n\n const handleTabChange = (event, newValue) => {\n setTabIndex(newValue);\n };\n\n return (\n
\n \n \n \n \n\n \n Focus\n \n Pump Speed\n \n \n \n \n \n\n \n \n \n setTimeStamp(e.target.value)}\n fullWidth\n />\n \n \n setExperimentName(e.target.value)}\n fullWidth\n />\n \n \n setExperimentDescription(e.target.value)}\n fullWidth\n />\n \n \n setVolumePerImage(e.target.value)}\n fullWidth\n />\n \n \n setTimeToStabilize(e.target.value)}\n fullWidth\n />\n \n \n setUniqueId(e.target.value)}\n fullWidth\n />\n \n \n setNumImages(e.target.value)}\n fullWidth\n />\n \n \n \n \n Start\n \n \n Stop\n \n
\n \n \n \n Status: \n {isRunning ? (\n \n ) : (\n \n )}\n \n \n \n Images Taken: {currentImageCount}\n \n \n \n \n );\n};\n\nexport default FlowStopController;\n","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getDividerUtilityClass(slot) {\n return generateUtilityClass('MuiDivider', slot);\n}\nconst dividerClasses = generateUtilityClasses('MuiDivider', ['root', 'absolute', 'fullWidth', 'inset', 'middle', 'flexItem', 'light', 'vertical', 'withChildren', 'withChildrenVertical', 'textAlignRight', 'textAlignLeft', 'wrapper', 'wrapperVertical']);\nexport default dividerClasses;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getListItemIconUtilityClass(slot) {\n return generateUtilityClass('MuiListItemIcon', slot);\n}\nconst listItemIconClasses = generateUtilityClasses('MuiListItemIcon', ['root', 'alignItemsFlexStart']);\nexport default listItemIconClasses;","import generateUtilityClasses from '@mui/utils/generateUtilityClasses';\nimport generateUtilityClass from '@mui/utils/generateUtilityClass';\nexport function getMenuItemUtilityClass(slot) {\n return generateUtilityClass('MuiMenuItem', slot);\n}\nconst menuItemClasses = generateUtilityClasses('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);\nexport default menuItemClasses;","'use client';\n\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\nconst _excluded = [\"autoFocus\", \"component\", \"dense\", \"divider\", \"disableGutters\", \"focusVisibleClassName\", \"role\", \"tabIndex\", \"className\"];\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport { alpha } from '@mui/system/colorManipulator';\nimport styled, { rootShouldForwardProp } from '../styles/styled';\nimport { useDefaultProps } from '../DefaultPropsProvider';\nimport ListContext from '../List/ListContext';\nimport ButtonBase from '../ButtonBase';\nimport useEnhancedEffect from '../utils/useEnhancedEffect';\nimport useForkRef from '../utils/useForkRef';\nimport { dividerClasses } from '../Divider';\nimport { listItemIconClasses } from '../ListItemIcon';\nimport { listItemTextClasses } from '../ListItemText';\nimport menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const overridesResolver = (props, styles) => {\n const {\n ownerState\n } = props;\n return [styles.root, ownerState.dense && styles.dense, ownerState.divider && styles.divider, !ownerState.disableGutters && styles.gutters];\n};\nconst useUtilityClasses = ownerState => {\n const {\n disabled,\n dense,\n divider,\n disableGutters,\n selected,\n classes\n } = ownerState;\n const slots = {\n root: ['root', dense && 'dense', disabled && 'disabled', !disableGutters && 'gutters', divider && 'divider', selected && 'selected']\n };\n const composedClasses = composeClasses(slots, getMenuItemUtilityClass, classes);\n return _extends({}, classes, composedClasses);\n};\nconst MenuItemRoot = styled(ButtonBase, {\n shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',\n name: 'MuiMenuItem',\n slot: 'Root',\n overridesResolver\n})(({\n theme,\n ownerState\n}) => _extends({}, theme.typography.body1, {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'center',\n position: 'relative',\n textDecoration: 'none',\n minHeight: 48,\n paddingTop: 6,\n paddingBottom: 6,\n boxSizing: 'border-box',\n whiteSpace: 'nowrap'\n}, !ownerState.disableGutters && {\n paddingLeft: 16,\n paddingRight: 16\n}, ownerState.divider && {\n borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,\n backgroundClip: 'padding-box'\n}, {\n '&:hover': {\n textDecoration: 'none',\n backgroundColor: (theme.vars || theme).palette.action.hover,\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n },\n [`&.${menuItemClasses.selected}`]: {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),\n [`&.${menuItemClasses.focusVisible}`]: {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)\n }\n },\n [`&.${menuItemClasses.selected}:hover`]: {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)\n }\n },\n [`&.${menuItemClasses.focusVisible}`]: {\n backgroundColor: (theme.vars || theme).palette.action.focus\n },\n [`&.${menuItemClasses.disabled}`]: {\n opacity: (theme.vars || theme).palette.action.disabledOpacity\n },\n [`& + .${dividerClasses.root}`]: {\n marginTop: theme.spacing(1),\n marginBottom: theme.spacing(1)\n },\n [`& + .${dividerClasses.inset}`]: {\n marginLeft: 52\n },\n [`& .${listItemTextClasses.root}`]: {\n marginTop: 0,\n marginBottom: 0\n },\n [`& .${listItemTextClasses.inset}`]: {\n paddingLeft: 36\n },\n [`& .${listItemIconClasses.root}`]: {\n minWidth: 36\n }\n}, !ownerState.dense && {\n [theme.breakpoints.up('sm')]: {\n minHeight: 'auto'\n }\n}, ownerState.dense && _extends({\n minHeight: 32,\n // https://m2.material.io/components/menus#specs > Dense\n paddingTop: 4,\n paddingBottom: 4\n}, theme.typography.body2, {\n [`& .${listItemIconClasses.root} svg`]: {\n fontSize: '1.25rem'\n }\n})));\nconst MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {\n const props = useDefaultProps({\n props: inProps,\n name: 'MuiMenuItem'\n });\n const {\n autoFocus = false,\n component = 'li',\n dense = false,\n divider = false,\n disableGutters = false,\n focusVisibleClassName,\n role = 'menuitem',\n tabIndex: tabIndexProp,\n className\n } = props,\n other = _objectWithoutPropertiesLoose(props, _excluded);\n const context = React.useContext(ListContext);\n const childContext = React.useMemo(() => ({\n dense: dense || context.dense || false,\n disableGutters\n }), [context.dense, dense, disableGutters]);\n const menuItemRef = React.useRef(null);\n useEnhancedEffect(() => {\n if (autoFocus) {\n if (menuItemRef.current) {\n menuItemRef.current.focus();\n } else if (process.env.NODE_ENV !== 'production') {\n console.error('MUI: Unable to set focus to a MenuItem whose component has not been rendered.');\n }\n }\n }, [autoFocus]);\n const ownerState = _extends({}, props, {\n dense: childContext.dense,\n divider,\n disableGutters\n });\n const classes = useUtilityClasses(props);\n const handleRef = useForkRef(menuItemRef, ref);\n let tabIndex;\n if (!props.disabled) {\n tabIndex = tabIndexProp !== undefined ? tabIndexProp : -1;\n }\n return /*#__PURE__*/_jsx(ListContext.Provider, {\n value: childContext,\n children: /*#__PURE__*/_jsx(MenuItemRoot, _extends({\n ref: handleRef,\n role: role,\n tabIndex: tabIndex,\n component: component,\n focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),\n className: clsx(classes.root, className)\n }, other, {\n ownerState: ownerState,\n classes: classes\n }))\n });\n});\nprocess.env.NODE_ENV !== \"production\" ? MenuItem.propTypes /* remove-proptypes */ = {\n // ┌────────────────────────────── Warning ──────────────────────────────┐\n // │ These PropTypes are generated from the TypeScript type definitions. │\n // │ To update them, edit the d.ts file and run `pnpm proptypes`. │\n // └─────────────────────────────────────────────────────────────────────┘\n /**\n * If `true`, the list item is focused during the first mount.\n * Focus will also be triggered if the value changes from false to true.\n * @default false\n */\n autoFocus: PropTypes.bool,\n /**\n * The content of the component.\n */\n children: PropTypes.node,\n /**\n * Override or extend the styles applied to the component.\n */\n classes: PropTypes.object,\n /**\n * @ignore\n */\n className: PropTypes.string,\n /**\n * The component used for the root node.\n * Either a string to use a HTML element or a component.\n */\n component: PropTypes.elementType,\n /**\n * If `true`, compact vertical padding designed for keyboard and mouse input is used.\n * The prop defaults to the value inherited from the parent Menu component.\n * @default false\n */\n dense: PropTypes.bool,\n /**\n * @ignore\n */\n disabled: PropTypes.bool,\n /**\n * If `true`, the left and right padding is removed.\n * @default false\n */\n disableGutters: PropTypes.bool,\n /**\n * If `true`, a 1px light border is added to the bottom of the menu item.\n * @default false\n */\n divider: PropTypes.bool,\n /**\n * This prop can help identify which element has keyboard focus.\n * The class name will be applied when the element gains the focus through keyboard interaction.\n * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).\n * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).\n * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components\n * if needed.\n */\n focusVisibleClassName: PropTypes.string,\n /**\n * @ignore\n */\n role: PropTypes /* @typescript-to-proptypes-ignore */.string,\n /**\n * If `true`, the component is selected.\n * @default false\n */\n selected: PropTypes.bool,\n /**\n * The system prop that allows defining system overrides as well as additional CSS styles.\n */\n sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),\n /**\n * @default 0\n */\n tabIndex: PropTypes.number\n} : void 0;\nexport default MenuItem;","import React, { useState, useEffect } from 'react';\nimport { Paper, Grid, TextField, Checkbox, FormControlLabel, Button, Typography, Slider, Select, MenuItem } from '@mui/material';\n\nconst HistoScanController = ({ hostIP, hostPort }) => {\n const [illuminationSource, setIlluminationSource] = useState('Laser 1');\n const [illuminationValue, setIlluminationValue] = useState(128);\n const [stepSizeX, setStepSizeX] = useState('300');\n const [stepSizeY, setStepSizeY] = useState('300');\n const [stepsX, setStepsX] = useState('2');\n const [stepsY, setStepsY] = useState('2');\n const [path, setPath] = useState('Default Path');\n const [timeInterval, setTimeInterval] = useState('');\n const [numberOfScans, setNumberOfScans] = useState('');\n const [isRunning, setIsRunning] = useState(false);\n const [scanStatus, setScanStatus] = useState(false); // For scan status visualization\n const [isStitchAshlar, setIsStitchAshlar] = useState(false);\n const [isStitchAshlarFlipX, setIsStitchAshlarFlipX] = useState(false);\n const [isStitchAshlarFlipY, setIsStitchAshlarFlipY] = useState(false);\n const [resizeFactor, setResizeFactor] = useState(1);\n const [initPosX, setInitPosX] = useState('');\n const [initPosY, setInitPosY] = useState('');\n\n\n\n const handleStart = () => {\n // Set default values if inputs are empty\n const nTimesValue = numberOfScans || 1;\n const tPeriodValue = timeInterval || 1;\n const mInitPosX = initPosX || 0; \n const mInitPosY = initPosY || 0;\n\n const url = `${hostIP}:${hostPort}/HistoScanController/startHistoScanTileBasedByParameters?` +\n `numberTilesX=${stepsX}&numberTilesY=${stepsY}&stepSizeX=${stepSizeX}&stepSizeY=${stepSizeY}&` +\n `nTimes=${nTimesValue}&tPeriod=${tPeriodValue}&` +\n `initPosX=${mInitPosX}&initPosY=${mInitPosY}&isStitchAshlar=${isStitchAshlar}&` +\n `isStitchAshlarFlipX=${isStitchAshlarFlipX}&isStitchAshlarFlipY=${isStitchAshlarFlipY}&resizeFactor=${resizeFactor}`;\n\n\n fetch(url, { method: 'GET' })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n setIsRunning(true);\n })\n .catch(error => console.error('Error:', error));\n };\n\n const handleStop = () => {\n const url = `${hostIP}:${hostPort}/HistoScanController/stopHistoScan`;\n fetch(url, { method: 'GET' })\n .then(response => response.json())\n .then(data => {\n console.log(data);\n setIsRunning(false);\n })\n .catch(error => console.error('Error:', error));\n };\n\n useEffect(() => {\n const interval = setInterval(() => {\n const url = `${hostIP}:${hostPort}/HistoScanController/getStatusScanRunning`;\n fetch(url, { method: 'GET' })\n .then(response => response.json())\n .then(data => {\n setScanStatus(data.isRunning); // Assume the API returns { isRunning: true/false }\n })\n .catch(error => console.error('Error:', error));\n }, 5000); // Check every 5 seconds\n\n return () => clearInterval(interval); // Cleanup on unmount\n }, [hostIP, hostPort]);\n\n return (\n
\n \n \n HistoScan Controller\n \n\n {/* Illumination Source Selector */}\n \n Illumination Source:\n setIlluminationSource(e.target.value)}\n fullWidth\n >\n \n \n \n \n \n\n {/* Illumination Value Slider */}\n \n Illumination Value: {illuminationValue}\n setIlluminationValue(value)}\n max={255}\n step={1}\n />\n \n\n {/* Position and other parameters */}\n \n setStepSizeX(e.target.value)}\n fullWidth\n />\n \n \n setStepSizeY(e.target.value)}\n fullWidth\n />\n \n \n setStepsX(e.target.value)}\n fullWidth\n />\n \n \n setStepsY(e.target.value)}\n fullWidth\n />\n \n \n setPath(e.target.value)}\n fullWidth\n />\n \n \n setTimeInterval(e.target.value)}\n fullWidth\n />\n \n \n setNumberOfScans(e.target.value)}\n fullWidth\n />\n \n \n setIsStitchAshlar(e.target.checked)}\n />\n Stitch Ashlar\n \n \n setIsStitchAshlarFlipX(e.target.checked)}\n />\n Stitch Ashlar Flip X\n \n \n setIsStitchAshlarFlipY(e.target.checked)} \n />\n Stitch Ashlar Flip Y\n \n \n setResizeFactor(e.target.value)}\n fullWidth\n />\n \n \n setInitPosX(e.target.value)}\n fullWidth\n />\n \n \n setInitPosY(e.target.value)}\n fullWidth\n />\n \n\n\n\n\n\n {/* Start and Stop buttons */}\n \n \n Start\n \n \n \n \n Stop\n \n \n\n {/* Scan status indicator */}\n \n \n Scan Status: {scanStatus ? 'Running' : 'Stopped'}\n \n \n \n \n );\n};\n\nexport default HistoScanController;\n","// src/context/MCTContext.js\nimport React, { createContext, useState } from 'react';\n\n// Create the context\nexport const MCTContext = createContext();\n\n// Create the provider component\nexport const MCTProvider = ({ children }) => {\n const [timePeriod, setTimePeriod] = useState('5');\n const [numMeasurements, setNumMeasurements] = useState('1');\n const [zMin, setZMin] = useState('-100');\n const [zMax, setZMax] = useState('100');\n const [zSteps, setZSteps] = useState('0');\n const [zStackEnabled, setZStackEnabled] = useState(false);\n const [xMin, setXMin] = useState('-1000');\n const [xMax, setXMax] = useState('1000');\n const [xSteps, setXSteps] = useState('0');\n const [xStackEnabled, setXStackEnabled] = useState(false);\n const [yMin, setYMin] = useState('-1000');\n const [yMax, setYMax] = useState('1000');\n const [ySteps, setYSteps] = useState('0');\n const [yStackEnabled, setYStackEnabled] = useState(false);\n const [intensityLaser1, setIntensityLaser1] = useState(0);\n const [intensityLaser2, setIntensityLaser2] = useState(0);\n const [intensityLED, setIntensityLED] = useState(0);\n const [fileName, setFileName] = useState('MCT');\n const [isRunning, setIsRunning] = useState(false);\n\n return (\n
\n {children}\n \n );\n};\n","import React, { useContext, useState, useEffect } from \"react\";\nimport { MCTContext } from \"../context/MCTContext\";\nimport {\n Paper,\n Grid,\n TextField,\n Checkbox,\n FormControlLabel,\n Slider,\n Button,\n Typography,\n} from \"@mui/material\";\n\nconst MCTController = ({ hostIP, hostPort }) => {\n const [numImagesTaken, setNumImagesTaken] = useState(0);\n const [folderPath, setFolderPath] = useState(\"\");\n const {\n timePeriod,\n setTimePeriod,\n numMeasurements,\n setNumMeasurements,\n zMin,\n setZMin,\n zMax,\n setZMax,\n zSteps,\n setZSteps,\n zStackEnabled,\n setZStackEnabled,\n xMin,\n setXMin,\n xMax,\n setXMax,\n xSteps,\n setXSteps,\n xStackEnabled,\n setXStackEnabled,\n yMin,\n setYMin,\n yMax,\n setYMax,\n ySteps,\n setYSteps,\n yStackEnabled,\n setYStackEnabled,\n intensityLaser1,\n setIntensityLaser1,\n intensityLaser2,\n setIntensityLaser2,\n intensityLED,\n setIntensityLED,\n fileName,\n setFileName,\n isRunning,\n setIsRunning,\n } = useContext(MCTContext);\n\n useEffect(() => {\n const fetchMCTStatus = () => {\n const url = `${hostIP}:${hostPort}/MCTController/getMCTStatus`;\n\n fetch(url)\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n // Set default values from the response\n /* // TODO: Should we fetch this on the first render? \n \n setTimePeriod(data.timePeriod);\n setZStackEnabled(data.zStackEnabled);\n setZMin(data.zStackMin);\n setZMax(data.zStackMax);\n setZSteps(data.zStackStep);\n setXStackEnabled(data.xyScanEnabled);\n setXMin(data.xScanMin);\n setXMax(data.xScanMax);\n setXSteps(data.xScanStep);\n setYMin(data.yScanMin);\n setYMax(data.yScanMax);\n setYSteps(data.yScanStep);\n setIntensityLaser1(data.Illu1Value);\n #setIntensityLaser2(data.Illu2Value);\n setIntensityLED(data.Illu3Value);\n */\n // enable/disable start/stop\n setNumImagesTaken(data.nImagesTaken); \n setIsRunning(data.isMCTrunning);\n setFolderPath(data.MCTFilename);\n })\n .catch((error) => {\n //console.error(\"Error fetching MCT status:\", error);\n });\n };\n\n fetchMCTStatus();\n\n // Set an interval to fetch the number of images taken every second\n const intervalId = setInterval(() => {\n fetchMCTStatus();\n }, 1000);\n\n return () => clearInterval(intervalId); // Clean up interval on unmount\n }, [\n hostIP,\n hostPort,\n setNumMeasurements,\n setTimePeriod,\n setZStackEnabled,\n setZMin,\n setZMax,\n setZSteps,\n setXStackEnabled,\n setXMin,\n setXMax,\n setXSteps,\n setYMin,\n setYMax,\n setYSteps,\n setIntensityLaser1,\n setIntensityLaser2,\n setIntensityLED,\n ]);\n\n const handleStart = () => {\n const url =\n `${hostIP}:${hostPort}/MCTController/startTimelapseImaging?` +\n `tperiod=${timePeriod}&nImagesToCapture=${numMeasurements}&MCTFilename=${fileName}&` +\n `zStackEnabled=${zStackEnabled}&zStackMin=${zMin}&zStackMax=${zMax}&zStackStep=${zSteps}&` +\n `xyScanEnabled=${xStackEnabled}&xScanMin=${xMin}&xScanMax=${xMax}&xScanStep=${xSteps}&` +\n `yScanMin=${yMin}&yScanMax=${yMax}&yScanStep=${ySteps}&` +\n `IlluValue1=${intensityLaser1}&IlluValue2=${intensityLaser2}&IlluValue3=${intensityLED}`;\n\n fetch(url, { method: \"GET\" })\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n setIsRunning(true);\n })\n .catch((error) => console.error(\"Error:\", error));\n };\n\n const handleStop = () => {\n const url = `${hostIP}:${hostPort}/MCTController/stopTimelapseImaging`;\n fetch(url, { method: \"GET\" })\n .then((response) => response.json())\n .then((data) => {\n console.log(data);\n setIsRunning(false);\n })\n .catch((error) => console.error(\"Error:\", error));\n };\n\n return (\n \n \n \n setTimePeriod(e.target.value)}\n fullWidth\n />\n \n \n setNumMeasurements(e.target.value)}\n fullWidth\n />\n \n {/* Z-Stack, X-Stack, Y-Stack UI */}\n \n setZMin(e.target.value)}\n fullWidth\n />\n \n \n setZMax(e.target.value)}\n fullWidth\n />\n \n \n setZSteps(e.target.value)}\n fullWidth\n />\n \n \n }\n checked={zStackEnabled}\n onChange={(e) => setZStackEnabled(e.target.checked)}\n label=\"Z-Stack Enabled\"\n />\n \n {/* XY Scan and Y Scan */}\n \n setXMin(e.target.value)}\n fullWidth\n />\n \n \n setXMax(e.target.value)}\n fullWidth\n />\n \n \n setXSteps(e.target.value)}\n fullWidth\n />\n \n \n }\n checked={xStackEnabled}\n onChange={(e) => setXStackEnabled(e.target.checked)}\n label=\"XY Scan Enabled\"\n />\n \n \n setYMin(e.target.value)}\n fullWidth\n />\n \n \n setYMax(e.target.value)}\n fullWidth\n />\n \n \n setYSteps(e.target.value)}\n fullWidth\n />\n \n \n }\n checked={yStackEnabled}\n onChange={(e) => setYStackEnabled(e.target.checked)}\n label=\"Y-Stack Enabled\"\n />\n \n {/* Intensity Controls */}\n \n Intensity (Laser 1): {intensityLaser1}\n setIntensityLaser1(value)}\n max={32767}\n step={1}\n />\n \n \n Intensity (Laser 2): {intensityLaser2}\n setIntensityLaser2(value)}\n max={32767}\n step={1}\n />\n \n \n Intensity (LED): {intensityLED}\n setIntensityLED(value)}\n max={255}\n step={1}\n />\n \n \n setFileName(e.target.value)}\n fullWidth\n />\n \n \n \n {`Images taken: ${numImagesTaken}`}\n \n \n \n \n {`Folder: ${folderPath}`}\n \n \n \n \n Start\n \n \n Stop\n \n \n \n \n );\n};\n\nexport default MCTController;\n","import React, { useState, useEffect } from 'react';\nimport { Paper, Tabs, Tab, Box, Typography, TextField, Button, Slider, Grid } from '@mui/material';\nimport { green, red } from '@mui/material/colors';\nimport CheckCircleIcon from '@mui/icons-material/CheckCircle';\nimport CancelIcon from '@mui/icons-material/Cancel';\n\nconst TabPanel = (props) => {\n const { children, value, index, ...other } = props;\n\n return (\n \n {value === index && (\n \n {children}\n \n )}\n