From b7073f48b6363773c30548eaf5756533bd379a0a Mon Sep 17 00:00:00 2001 From: Tyler Ohlsen Date: Mon, 16 Sep 2024 09:16:49 -0700 Subject: [PATCH] auto toggling based on parameters empty or not; var name updates Signed-off-by: Tyler Ohlsen --- .../input_transform_modal.tsx | 65 ++++++++++++------- .../output_transform_modal.tsx | 46 ++++++------- 2 files changed, 63 insertions(+), 48 deletions(-) diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx index c580037e..fe7c9286 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx @@ -97,21 +97,21 @@ export function InputTransformModal(props: InputTransformModalProps) { // fetching input data state const [isFetching, setIsFetching] = useState(false); - // source input / transformed output state + // source input / transformed input state const [sourceInput, setSourceInput] = useState('[]'); - const [transformedOutput, setTransformedOutput] = useState('{}'); + const [transformedInput, setTransformedInput] = useState('{}'); // get the current input map const map = getIn(values, props.inputMapFieldPath) as MapArrayFormValue; - // selected output state - const outputOptions = map.map((_, idx) => ({ + // selected transform state + const transformOptions = map.map((_, idx) => ({ value: idx, text: `Prediction ${idx + 1}`, })) as EuiSelectOption[]; - const [selectedOutputOption, setSelectedOutputOption] = useState< + const [selectedTransformOption, setSelectedTransformOption] = useState< number | undefined - >((outputOptions[0]?.value as number) ?? undefined); + >((transformOptions[0]?.value as number) ?? undefined); // popover state containing the model interface details, if applicable const [popoverOpen, setPopoverOpen] = useState(false); @@ -125,19 +125,19 @@ export function InputTransformModal(props: InputTransformModalProps) { if ( !isEmpty(map) && !isEmpty(JSON.parse(sourceInput)) && - selectedOutputOption !== undefined + selectedTransformOption !== undefined ) { let sampleSourceInput = {}; try { sampleSourceInput = JSON.parse(sourceInput); const output = generateTransform( sampleSourceInput, - map[selectedOutputOption] + map[selectedTransformOption] ); - setTransformedOutput(customStringify(output)); + setTransformedInput(customStringify(output)); } catch {} } - }, [map, sourceInput, selectedOutputOption]); + }, [map, sourceInput, selectedTransformOption]); // hook to re-determine validity when the generated output changes // utilize Ajv JSON schema validator library. For more info/examples, see @@ -150,11 +150,11 @@ export function InputTransformModal(props: InputTransformModalProps) { const validateFn = new Ajv().compile( props.modelInterface?.input?.properties?.parameters || {} ); - setIsValid(validateFn(JSON.parse(transformedOutput))); + setIsValid(validateFn(JSON.parse(transformedInput))); } else { setIsValid(undefined); } - }, [transformedOutput]); + }, [transformedInput]); // hook to set the prompt if found in the model config useEffect(() => { @@ -175,12 +175,19 @@ export function InputTransformModal(props: InputTransformModalProps) { // hook to set the transformed prompt, if a valid prompt found, and // valid parameters set useEffect(() => { - if (!isEmpty(originalPrompt)) { + const transformedInputObj = JSON.parse(transformedInput); + if (!isEmpty(originalPrompt) && !isEmpty(transformedInputObj)) { setTransformedPrompt( - injectValuesIntoPrompt(originalPrompt, JSON.parse(transformedOutput)) + injectValuesIntoPrompt(originalPrompt, transformedInputObj) ); + setViewPromptDetails(true); + setViewTransformedPrompt(true); + } else { + setViewPromptDetails(false); + setViewTransformedPrompt(false); + setTransformedPrompt(originalPrompt); } - }, [originalPrompt, transformedOutput]); + }, [originalPrompt, transformedInput]); return ( @@ -367,15 +374,15 @@ export function InputTransformModal(props: InputTransformModalProps) { // If the map we are adding is the first one, populate the selected option to index 0 onMapAdd={(curArray) => { if (isEmpty(curArray)) { - setSelectedOutputOption(0); + setSelectedTransformOption(0); } }} // If the map we are deleting is the one we last used to test, reset the state and // default to the first map in the list. onMapDelete={(idxToDelete) => { - if (selectedOutputOption === idxToDelete) { - setSelectedOutputOption(0); - setTransformedOutput('{}'); + if (selectedTransformOption === idxToDelete) { + setSelectedTransformOption(0); + setTransformedInput('{}'); } }} /> @@ -406,15 +413,15 @@ export function InputTransformModal(props: InputTransformModalProps) { )} - {outputOptions.length <= 1 ? ( + {transformOptions.length <= 1 ? ( Transformed input ) : ( Transformed input for} - options={outputOptions} - value={selectedOutputOption} + options={transformOptions} + value={selectedTransformOption} onChange={(e) => { - setSelectedOutputOption(Number(e.target.value)); + setSelectedTransformOption(Number(e.target.value)); }} /> )} @@ -454,7 +461,7 @@ export function InputTransformModal(props: InputTransformModalProps) { theme="textmate" width="100%" height="15vh" - value={transformedOutput} + value={transformedInput} readOnly={true} setOptions={{ fontSize: '12px', @@ -480,14 +487,22 @@ export function InputTransformModal(props: InputTransformModalProps) { label="Show" checked={viewPromptDetails} onChange={() => setViewPromptDetails(!viewPromptDetails)} + disabled={isEmpty(JSON.parse(transformedInput))} /> + {isEmpty(JSON.parse(transformedInput)) && ( + + + Transformed input is empty + + + )} {viewPromptDetails && ( <> setViewTransformedPrompt(!viewTransformedPrompt) diff --git a/public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx b/public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx index d88b03cb..785e5f16 100644 --- a/public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx +++ b/public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx @@ -73,40 +73,40 @@ export function OutputTransformModal(props: OutputTransformModalProps) { // fetching input data state const [isFetching, setIsFetching] = useState(false); - // source input / transformed output state - const [sourceInput, setSourceInput] = useState('[]'); + // source output / transformed output state + const [sourceOutput, setSourceOutput] = useState('[]'); const [transformedOutput, setTransformedOutput] = useState('{}'); // get the current output map const map = getIn(values, props.outputMapFieldPath) as MapArrayFormValue; - // selected output state - const outputOptions = map.map((_, idx) => ({ + // selected transform state + const transformOptions = map.map((_, idx) => ({ value: idx, text: `Prediction ${idx + 1}`, })) as EuiSelectOption[]; - const [selectedOutputOption, setSelectedOutputOption] = useState< + const [selectedTransformOption, setSelectedTransformOption] = useState< number | undefined - >((outputOptions[0]?.value as number) ?? undefined); + >((transformOptions[0]?.value as number) ?? undefined); // hook to re-generate the transform when any inputs to the transform are updated useEffect(() => { if ( !isEmpty(map) && - !isEmpty(JSON.parse(sourceInput)) && - selectedOutputOption !== undefined + !isEmpty(JSON.parse(sourceOutput)) && + selectedTransformOption !== undefined ) { - let sampleSourceInput = {}; + let sampleSourceOutput = {}; try { - sampleSourceInput = JSON.parse(sourceInput); + sampleSourceOutput = JSON.parse(sourceOutput); const output = generateTransform( - sampleSourceInput, - map[selectedOutputOption] + sampleSourceOutput, + map[selectedTransformOption] ); setTransformedOutput(customStringify(output)); } catch {} } - }, [map, sourceInput, selectedOutputOption]); + }, [map, sourceOutput, selectedTransformOption]); return ( @@ -169,7 +169,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) { if (docObjs.length > 0) { const sampleModelResult = docObjs[0]?.inference_results || {}; - setSourceInput( + setSourceOutput( customStringify(sampleModelResult) ); } @@ -226,7 +226,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) { if (hits.length > 0) { const sampleModelResult = hits[0].inference_results || {}; - setSourceInput(customStringify(sampleModelResult)); + setSourceOutput(customStringify(sampleModelResult)); } }) .catch((error: any) => { @@ -250,7 +250,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) { theme="textmate" width="100%" height="15vh" - value={sourceInput} + value={sourceOutput} readOnly={true} setOptions={{ fontSize: '12px', @@ -281,14 +281,14 @@ export function OutputTransformModal(props: OutputTransformModalProps) { // If the map we are adding is the first one, populate the selected option to index 0 onMapAdd={(curArray) => { if (isEmpty(curArray)) { - setSelectedOutputOption(0); + setSelectedTransformOption(0); } }} // If the map we are deleting is the one we last used to test, reset the state and // default to the first map in the list. onMapDelete={(idxToDelete) => { - if (selectedOutputOption === idxToDelete) { - setSelectedOutputOption(0); + if (selectedTransformOption === idxToDelete) { + setSelectedTransformOption(0); setTransformedOutput('{}'); } }} @@ -297,15 +297,15 @@ export function OutputTransformModal(props: OutputTransformModalProps) { <> - {outputOptions.length <= 1 ? ( + {transformOptions.length <= 1 ? ( Transformed output ) : ( Transformed output for} - options={outputOptions} - value={selectedOutputOption} + options={transformOptions} + value={selectedTransformOption} onChange={(e) => { - setSelectedOutputOption(Number(e.target.value)); + setSelectedTransformOption(Number(e.target.value)); }} /> )}