Skip to content

Commit

Permalink
auto toggling based on parameters empty or not; var name updates
Browse files Browse the repository at this point in the history 
Signed-off-by: Tyler Ohlsen <[email protected]>
  • Loading branch information
@ohltyler
ohltyler committed Sep 16, 2024
1 parent ed3ec58 commit b7073f4
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 48 deletions.
65 changes: 40 additions & 25 deletions public/pages/workflow_detail/workflow_inputs/processor_inputs/input_transform_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,21 +97,21 @@ export function InputTransformModal(props: InputTransformModalProps) {
// fetching input data state
const [isFetching, setIsFetching] = useState<boolean>(false);

// source input / transformed output state
// source input / transformed input state
const [sourceInput, setSourceInput] = useState<string>('[]');
const [transformedOutput, setTransformedOutput] = useState<string>('{}');
const [transformedInput, setTransformedInput] = useState<string>('{}');

// 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<boolean>(false);
Expand All @@ -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
Expand All @@ -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(() => {
Expand All @@ -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 (
<EuiModal onClose={props.onClose} style={{ width: '70vw' }}>
Expand Down Expand Up @@ -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('{}');
}
}}
/>
Expand Down Expand Up @@ -406,15 +413,15 @@ export function InputTransformModal(props: InputTransformModalProps) {
</EuiFlexItem>
)}
<EuiFlexItem grow={true}>
{outputOptions.length <= 1 ? (
{transformOptions.length <= 1 ? (
<EuiText>Transformed input</EuiText>
) : (
<EuiCompressedSelect
prepend={<EuiText>Transformed input for</EuiText>}
options={outputOptions}
value={selectedOutputOption}
options={transformOptions}
value={selectedTransformOption}
onChange={(e) => {
setSelectedOutputOption(Number(e.target.value));
setSelectedTransformOption(Number(e.target.value));
}}
/>
)}
Expand Down Expand Up @@ -454,7 +461,7 @@ export function InputTransformModal(props: InputTransformModalProps) {
theme="textmate"
width="100%"
height="15vh"
value={transformedOutput}
value={transformedInput}
readOnly={true}
setOptions={{
fontSize: '12px',
Expand All @@ -480,14 +487,22 @@ export function InputTransformModal(props: InputTransformModalProps) {
label="Show"
checked={viewPromptDetails}
onChange={() => setViewPromptDetails(!viewPromptDetails)}
disabled={isEmpty(JSON.parse(transformedInput))}
/>
</EuiFlexItem>
{isEmpty(JSON.parse(transformedInput)) && (
<EuiFlexItem grow={false} style={{ marginTop: '16px' }}>
<EuiText size="s" color="subdued">
Transformed input is empty
</EuiText>
</EuiFlexItem>
)}
</EuiFlexGroup>
{viewPromptDetails && (
<>
<EuiSpacer size="s" />
<EuiSwitch
label="With injected inputs"
label="With transformed inputs"
checked={viewTransformedPrompt}
onChange={() =>
setViewTransformedPrompt(!viewTransformedPrompt)
Expand Down
46 changes: 23 additions & 23 deletions public/pages/workflow_detail/workflow_inputs/processor_inputs/output_transform_modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,40 +73,40 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
// fetching input data state
const [isFetching, setIsFetching] = useState<boolean>(false);

// source input / transformed output state
const [sourceInput, setSourceInput] = useState<string>('[]');
// source output / transformed output state
const [sourceOutput, setSourceOutput] = useState<string>('[]');
const [transformedOutput, setTransformedOutput] = useState<string>('{}');

// 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 (
<EuiModal onClose={props.onClose} style={{ width: '70vw' }}>
Expand Down Expand Up @@ -169,7 +169,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
if (docObjs.length > 0) {
const sampleModelResult =
docObjs[0]?.inference_results || {};
setSourceInput(
setSourceOutput(
customStringify(sampleModelResult)
);
}
Expand Down Expand Up @@ -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) => {
Expand All @@ -250,7 +250,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
theme="textmate"
width="100%"
height="15vh"
value={sourceInput}
value={sourceOutput}
readOnly={true}
setOptions={{
fontSize: '12px',
Expand Down Expand Up @@ -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('{}');
}
}}
Expand All @@ -297,15 +297,15 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
</EuiFlexItem>
<EuiFlexItem>
<>
{outputOptions.length <= 1 ? (
{transformOptions.length <= 1 ? (
<EuiText>Transformed output</EuiText>
) : (
<EuiCompressedSelect
prepend={<EuiText>Transformed output for</EuiText>}
options={outputOptions}
value={selectedOutputOption}
options={transformOptions}
value={selectedTransformOption}
onChange={(e) => {
setSelectedOutputOption(Number(e.target.value));
setSelectedTransformOption(Number(e.target.value));
}}
/>
)}
Expand Down

0 comments on commit b7073f4

Please sign in to comment.