clean up input/output map defaults; simplify prediction in advanced m…

…odals; Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Sep 3, 2024 · 6a4bb7c · 6a4bb7c
1 parent 42bc5f8
commit 6a4bb7c
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 69 deletions.
diff --git a/common/constants.ts b/common/constants.ts
@@ -396,6 +396,7 @@ export const DATE_FORMAT_PATTERN = 'MM/DD/YY hh:mm A';
 export const EMPTY_FIELD_STRING = '--';
 export const INDEX_NOT_FOUND_EXCEPTION = 'index_not_found_exception';
 export const ERROR_GETTING_WORKFLOW_MSG = 'Failed to retrieve template';
+export const NO_TEMPLATES_FOUND_MSG = 'There are no templates';
 export const NO_MODIFICATIONS_FOUND_TEXT =
   'Template does not contain any modifications';
 export const JSONPATH_ROOT_SELECTOR = '$.';

diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
@@ -30,6 +30,7 @@ import {
   ERROR_GETTING_WORKFLOW_MSG,
   FETCH_ALL_QUERY,
   MAX_WORKFLOW_NAME_TO_DISPLAY,
+  NO_TEMPLATES_FOUND_MSG,
   getCharacterLimitedString,
 } from '../../../common';
 import { MountPoint } from '../../../../../src/core/public';
@@ -105,7 +106,8 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
     dispatch(searchModels({ apiBody: FETCH_ALL_QUERY, dataSourceId }));
   }, []);
 
-  return errorMessage.includes(ERROR_GETTING_WORKFLOW_MSG) ? (
+  return errorMessage.includes(ERROR_GETTING_WORKFLOW_MSG) ||
+    errorMessage.includes(NO_TEMPLATES_FOUND_MSG) ? (
     <EuiFlexGroup direction="column" alignItems="center">
       <EuiFlexItem grow={3}>
         <EuiEmptyPrompt

diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/map_field.tsx
@@ -108,9 +108,6 @@ export function MapField(props: MapFieldProps) {
                                   fieldPath={`${props.fieldPath}.${idx}.key`}
                                   options={props.keyOptions as any[]}
                                   placeholder={props.keyPlaceholder || 'Input'}
-                                  autofill={
-                                    props.keyOptions?.length === 1 && idx === 0
-                                  }
                                 />
                               ) : (
                                 <TextField
@@ -124,7 +121,7 @@ export function MapField(props: MapFieldProps) {
                           </EuiFlexItem>
                           <EuiFlexItem
                             grow={false}
-                            style={{ marginTop: '14px' }}
+                            style={{ marginTop: '10px' }}
                           >
                             <EuiIcon type="sortRight" />
                           </EuiFlexItem>
@@ -137,10 +134,6 @@ export function MapField(props: MapFieldProps) {
                                   placeholder={
                                     props.valuePlaceholder || 'Output'
                                   }
-                                  autofill={
-                                    props.valueOptions?.length === 1 &&
-                                    idx === 0
-                                  }
                                 />
                               ) : (
                                 <TextField
@@ -158,7 +151,6 @@ export function MapField(props: MapFieldProps) {
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
                         <EuiSmallButtonIcon
-                          style={{ marginTop: '8px' }}
                           iconType={'trash'}
                           color="danger"
                           aria-label="Delete"

diff --git a/public/pages/workflow_detail/workflow_inputs/input_fields/select_with_custom_options.tsx b/public/pages/workflow_detail/workflow_inputs/input_fields/select_with_custom_options.tsx
@@ -13,7 +13,6 @@ interface SelectWithCustomOptionsProps {
   fieldPath: string;
   placeholder: string;
   options: any[];
-  autofill: boolean;
 }
 
 /**
@@ -27,19 +26,11 @@ export function SelectWithCustomOptions(props: SelectWithCustomOptionsProps) {
   // selected option state
   const [selectedOption, setSelectedOption] = useState<any[]>([]);
 
-  // update the selected option when the form is updated. if the form is empty,
-  // default to the top option. by default, this will re-trigger this hook with a populated
-  // value, to then finally update the displayed option.
+  // set the visible option when the underlying form is updated.
   useEffect(() => {
-    if (props.autofill) {
-      const formValue = getIn(values, props.fieldPath);
-      if (!isEmpty(formValue)) {
-        setSelectedOption([{ label: getIn(values, props.fieldPath) }]);
-      } else {
-        if (props.options.length > 0) {
-          setFieldValue(props.fieldPath, props.options[0].label);
-        }
-      }
+    const formValue = getIn(values, props.fieldPath);
+    if (!isEmpty(formValue)) {
+      setSelectedOption([{ label: formValue }]);
     }
   }, [getIn(values, props.fieldPath)]);
 
@@ -73,7 +64,7 @@ export function SelectWithCustomOptions(props: SelectWithCustomOptionsProps) {
   return (
     <EuiComboBox
       fullWidth={true}
-      compressed={false}
+      compressed={true}
       placeholder={props.placeholder}
       singleSelection={{ asPlainText: true }}
       isClearable={false}

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
@@ -274,15 +274,19 @@ export function InputTransformModal(props: InputTransformModalProps) {
           </EuiFlexItem>
           <EuiFlexItem>
             <>
-              <EuiCompressedSelect
-                prepend={<EuiText>Expected output for</EuiText>}
-                options={outputOptions}
-                value={selectedOutputOption}
-                onChange={(e) => {
-                  setSelectedOutputOption(Number(e.target.value));
-                  setTransformedOutput('{}');
-                }}
-              />
+              {outputOptions.length === 1 ? (
+                <EuiText>Expected output</EuiText>
+              ) : (
+                <EuiCompressedSelect
+                  prepend={<EuiText>Expected output for</EuiText>}
+                  options={outputOptions}
+                  value={selectedOutputOption}
+                  onChange={(e) => {
+                    setSelectedOutputOption(Number(e.target.value));
+                    setTransformedOutput('{}');
+                  }}
+                />
+              )}
               <EuiSpacer size="s" />
               <EuiSmallButton
                 style={{ width: '100px' }}

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
@@ -79,7 +79,7 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
   // selected output state
   const outputOptions = map.map((_, idx) => ({
     value: idx,
-    text: `Prediction output ${idx + 1}`,
+    text: `Prediction ${idx + 1}`,
   })) as EuiSelectOption[];
   const [selectedOutputOption, setSelectedOutputOption] = useState<
     number | undefined
@@ -257,15 +257,19 @@ export function OutputTransformModal(props: OutputTransformModalProps) {
           </EuiFlexItem>
           <EuiFlexItem>
             <>
-              <EuiCompressedSelect
-                prepend={<EuiText>Expected output for</EuiText>}
-                options={outputOptions}
-                value={selectedOutputOption}
-                onChange={(e) => {
-                  setSelectedOutputOption(Number(e.target.value));
-                  setTransformedOutput('{}');
-                }}
-              />
+              {outputOptions.length === 1 ? (
+                <EuiText>Expected output</EuiText>
+              ) : (
+                <EuiCompressedSelect
+                  prepend={<EuiText>Expected output for</EuiText>}
+                  options={outputOptions}
+                  value={selectedOutputOption}
+                  onChange={(e) => {
+                    setSelectedOutputOption(Number(e.target.value));
+                    setTransformedOutput('{}');
+                  }}
+                />
+              )}
               <EuiSpacer size="s" />
               <EuiSmallButton
                 style={{ width: '100px' }}

diff --git a/public/pages/workflow_detail/workflow_inputs/processors_list.tsx b/public/pages/workflow_detail/workflow_inputs/processors_list.tsx
@@ -51,6 +51,10 @@ const PANEL_ID = 0;
 export function ProcessorsList(props: ProcessorsListProps) {
   const { values } = useFormikContext<WorkflowFormValues>();
 
+  // Processor added state. Used to automatically open accordion when a new
+  // processor is added, assuming users want to immediately configure it.
+  const [processorAdded, setProcessorAdded] = useState<boolean>(false);
+
   // Popover state when adding new processors
   const [isPopoverOpen, setPopover] = useState(false);
   const closePopover = () => {
@@ -75,6 +79,7 @@ export function ProcessorsList(props: ProcessorsListProps) {
   // (getting any updated/interim values along the way) and add to
   // the list of processors
   function addProcessor(processor: IProcessorConfig): void {
+    setProcessorAdded(true);
     const existingConfig = cloneDeep(props.uiConfig as WorkflowConfig);
     let newConfig = formikToUiConfig(values, existingConfig);
     switch (props.context) {
@@ -139,6 +144,9 @@ export function ProcessorsList(props: ProcessorsListProps) {
         return (
           <EuiFlexItem key={processorIndex}>
             <EuiAccordion
+              initialIsOpen={
+                processorAdded && processorIndex === processors.length - 1
+              }
               id={`accordion${processor.id}`}
               buttonContent={`${processor.name || 'Processor'}`}
               extraAction={