({ process, auth, processLogsPanel, fetchOutputs, ...props }: ProcessPanelRootProps) => {
const [outputDetails, setOutputs] = useState<OutputDetails | undefined>(undefined);
+ const [outputDefinitions, setOutputDefinitions] = useState<CommandOutputParameter[]>([]);
const [rawInputs, setInputs] = useState<CommandInputParameter[] | undefined>(undefined);
const [processedOutputs, setProcessedOutputs] = useState<ProcessIOParameter[] | undefined>(undefined);
// Resets state when changing processes
React.useEffect(() => {
setOutputs(undefined);
+ setOutputDefinitions([]);
setInputs(undefined);
setProcessedOutputs(undefined);
setProcessedInputs(undefined);
// Format raw output into ProcessIOParameter[] when it changes
React.useEffect(() => {
if (outputDetails !== undefined && outputDetails.rawOutputs && containerRequest) {
- const outputDefinitions = getOutputParameters(containerRequest);
+ const newOutputDefinitions = getOutputParameters(containerRequest);
+ // Avoid setting output definitions back to [] when mounts briefly go missing
+ if (newOutputDefinitions.length) {
+ setOutputDefinitions(newOutputDefinitions);
+ }
setProcessedOutputs(formatOutputData(outputDefinitions, outputDetails.rawOutputs, outputDetails.pdh, auth));
}
- }, [outputDetails, auth, containerRequest]);
+ }, [outputDetails, auth, containerRequest, 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) {
- const rawInputs = getRawInputs(containerRequest);
- setInputs(rawInputs);
-
- const inputs = getInputs(containerRequest);
- setProcessedInputs(formatInputData(inputs, auth));
+ // 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]);
+ }, [requestUuid, auth, containerRequest, processedInputs, rawInputs]);
return process
? <MPVContainer className={props.classes.root} spacing={8} panelStates={panelsData} justify-content="flex-start" direction="column" wrap="nowrap">