+ const inputMounts = getInputCollectionMounts(process?.containerRequest);
+
+ // Resets state when changing processes
+ React.useEffect(() => {
+ setOutputs(undefined);
+ setOutputDefinitions([]);
+ setInputs(undefined);
+ setProcessedOutputs(undefined);
+ setProcessedInputs(undefined);
+ }, [requestUuid]);
+
+ // Fetch raw output (async for fetching from keep)
+ React.useEffect(() => {
+ if (containerRequest) {
+ fetchOutputs(containerRequest, setOutputs);
+ }
+ }, [containerRequest, fetchOutputs]);
+
+ // Fetch outputDefinitons from mounts whenever containerRequest is updated
+ React.useEffect(() => {
+ if (containerRequest && containerRequest.mounts) {
+ const newOutputDefinitions = getOutputParameters(containerRequest);
+ // Avoid setting output definitions to [] when mounts briefly go missing
+ if (newOutputDefinitions.length) {
+ setOutputDefinitions(newOutputDefinitions);
+ }
+ }
+ }, [containerRequest]);
+
+ // Format raw output into ProcessIOParameter[] when it changes
+ React.useEffect(() => {
+ if (outputDetails !== undefined && outputDetails.rawOutputs) {
+ // Update processed outputs as long as outputDetails is loaded (or failed to load with {} rawOutputs)
+ setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
+ }
+ }, [outputDetails, auth, outputDefinitions]);
+
+ // Fetch raw inputs and format into ProcessIOParameter[]
+ // Can be sync because inputs are either already in containerRequest mounts or props
+ React.useEffect(() => {
+ if (containerRequest) {
+ // Since mounts can disappear and reappear, only set inputs if raw / processed inputs is undefined or new inputs has content
+ const newRawInputs = getRawInputs(containerRequest);
+ if (rawInputs === undefined || (newRawInputs && newRawInputs.length)) {
+ setInputs(newRawInputs);
+ }
+ const newInputs = getInputs(containerRequest);
+ if (processedInputs === undefined || (newInputs && newInputs.length)) {
+ setProcessedInputs(formatInputData(newInputs, auth));
+ }
+ }
+ }, [requestUuid, auth, containerRequest, processedInputs, rawInputs]);
+
+ return process
+ ? <MPVContainer className={props.classes.root} spacing={8} panelStates={panelsData} justify-content="flex-start" direction="column" wrap="nowrap">
+ <MPVPanelContent forwardProps xs="auto" data-cy="process-details">
+ <ProcessDetailsCard