+ ({ process, auth, processLogsPanel, fetchOutputs, ...props }: ProcessPanelRootProps) => {
+
+ const [outputDetails, setOutputs] = useState<OutputDetails | undefined>(undefined);
+ const [rawInputs, setInputs] = useState<CommandInputParameter[] | undefined>(undefined);
+
+ const [processedOutputs, setProcessedOutputs] = useState<ProcessIOParameter[] | undefined>(undefined);
+ const [processedInputs, setProcessedInputs] = useState<ProcessIOParameter[] | undefined>(undefined);
+
+ const outputUuid = process?.containerRequest.outputUuid;
+ const requestUuid = process?.containerRequest.uuid;
+
+ const containerRequest = process?.containerRequest;
+
+ const inputMounts = getInputCollectionMounts(process?.containerRequest);
+
+ // Resets state when changing processes
+ React.useEffect(() => {
+ setOutputs(undefined);
+ setInputs(undefined);
+ setProcessedOutputs(undefined);
+ setProcessedInputs(undefined);
+ }, [requestUuid]);
+
+ // Fetch raw output (async for fetching from keep)
+ React.useEffect(() => {
+ if (containerRequest) {
+ fetchOutputs(containerRequest, setOutputs);
+ }
+ }, [containerRequest, fetchOutputs]);
+
+ // Format raw output into ProcessIOParameter[] when it changes
+ React.useEffect(() => {
+ if (outputDetails !== undefined && outputDetails.rawOutputs && containerRequest) {
+ const outputDefinitions = getOutputParameters(containerRequest);
+ setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
+ }
+ }, [outputDetails, auth, containerRequest]);
+
+ // Fetch raw inputs and format into ProcessIOParameter[]
+ // Can be sync because inputs are either already in containerRequest mounts or props
+ React.useEffect(() => {
+ if (containerRequest) {
+ const rawInputs = getRawInputs(containerRequest);
+ setInputs(rawInputs);
+
+ const inputs = getInputs(containerRequest);
+ setProcessedInputs(formatInputData(inputs, auth));
+ }
+ }, [requestUuid, auth, containerRequest]);
+
+ return process