Add new input type selector

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Nov 20, 2024 · 8d2303d · 8d2303d
1 parent 1baaa5b
commit 8d2303d
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 95 deletions.
diff --git a/common/constants.ts b/common/constants.ts
@@ -470,10 +470,10 @@ export enum TRANSFORM_CONTEXT {
   OUTPUT = 'output',
 }
 export enum TRANSFORM_TYPE {
-  STRING = 'string',
-  FIELD = 'field',
-  EXPRESSION = 'expression',
-  TEMPLATE = 'template',
+  STRING = 'String',
+  FIELD = 'Field',
+  EXPRESSION = 'Expression',
+  TEMPLATE = 'Template',
 }
 export const START_FROM_SCRATCH_WORKFLOW_NAME = 'Start From Scratch';
 export const DEFAULT_NEW_WORKFLOW_NAME = 'new_workflow';
@@ -503,7 +503,7 @@ export const EMPTY_MAP_ENTRY = { key: '', value: '' } as MapEntry;
 export const EMPTY_INPUT_MAP_ENTRY = {
   key: '',
   value: {
-    transformType: TRANSFORM_TYPE.FIELD,
+    transformType: '' as TRANSFORM_TYPE,
     value: '',
   },
 } as InputMapEntry;

diff --git a/common/interfaces.ts b/common/interfaces.ts
@@ -37,20 +37,9 @@ export type ConfigFieldType =
   | 'mapArray'
   | 'boolean'
   | 'number'
-  | 'transform'
-  | 'transformArray';
+  | 'inputMapArray';
 
-export type ConfigFieldTransformValue = {
-  transformType: TRANSFORM_TYPE;
-  value: string;
-};
-export type ConfigFieldTransformArrayValue = ConfigFieldTransformValue[];
-
-export type ConfigFieldValue =
-  | string
-  | ConfigFieldTransformValue
-  | ConfigFieldTransformArrayValue
-  | {};
+export type ConfigFieldValue = string | {};
 
 export interface IConfigField {
   type: ConfigFieldType;
@@ -113,9 +102,14 @@ export type MapFormValue = MapEntry[];
 
 export type MapArrayFormValue = MapFormValue[];
 
+export type Transform = {
+  transformType: TRANSFORM_TYPE;
+  value: string;
+};
+
 export type InputMapEntry = {
   key: string;
-  value: ConfigFieldTransformValue;
+  value: Transform;
 };
 
 export type InputMapFormValue = InputMapEntry[];

diff --git a/public/configs/ml_processor.ts b/public/configs/ml_processor.ts
@@ -22,7 +22,7 @@ export abstract class MLProcessor extends Processor {
       },
       {
         id: 'input_map',
-        type: 'transformArray',
+        type: 'inputMapArray',
       },
       {
         id: 'output_map',

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
@@ -185,6 +185,7 @@ export function MapField(props: MapFieldProps) {
                                     placeholder={
                                       props.keyPlaceholder || 'Input'
                                     }
+                                    allowCreate={true}
                                   />
                                 ) : (
                                   <TextField
@@ -221,6 +222,7 @@ export function MapField(props: MapFieldProps) {
                                     placeholder={
                                       props.valuePlaceholder || 'Output'
                                     }
+                                    allowCreate={true}
                                   />
                                 ) : (
                                   <TextField

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,6 +13,7 @@ interface SelectWithCustomOptionsProps {
   fieldPath: string;
   placeholder: string;
   options: { label: string }[];
+  allowCreate?: boolean;
 }
 
 /**
@@ -31,6 +32,8 @@ export function SelectWithCustomOptions(props: SelectWithCustomOptionsProps) {
     const formValue = getIn(values, props.fieldPath);
     if (!isEmpty(formValue)) {
       setSelectedOption([{ label: formValue }]);
+    } else {
+      setSelectedOption([]);
     }
   }, [getIn(values, props.fieldPath)]);
 
@@ -77,8 +80,10 @@ export function SelectWithCustomOptions(props: SelectWithCustomOptionsProps) {
         setFieldTouched(props.fieldPath, true);
         setFieldValue(props.fieldPath, get(options, '0.label'));
       }}
-      onCreateOption={onCreateOption}
-      customOptionText="Add {searchValue} as a custom option"
+      onCreateOption={props.allowCreate ? onCreateOption : undefined}
+      customOptionText={
+        props.allowCreate ? 'Add {searchValue} as a custom option' : undefined
+      }
     />
   );
 }
diff --git a/...kflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/ml_processor_inputs.tsx b/...kflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/ml_processor_inputs.tsx
@@ -18,6 +18,7 @@ import {
   EuiText,
   EuiToolTip,
   EuiSmallButton,
+  EuiIconTip,
 } from '@elastic/eui';
 import {
   IProcessorConfig,
@@ -31,11 +32,10 @@ import {
   MapArrayFormValue,
   MapEntry,
   MapFormValue,
+  EMPTY_INPUT_MAP_ENTRY,
 } from '../../../../../../common';
 import { ModelField } from '../../input_fields';
 import {
-  TRANSFORM_TYPE,
-  InputMapEntry,
   InputMapFormValue,
   InputMapArrayFormValue,
 } from '../../../../../../common';
@@ -142,15 +142,9 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
     const newModelInterface = models[modelId]?.interface;
     setModelInterface(newModelInterface);
     const modelInputsAsForm = [
-      parseModelInputs(newModelInterface).map((modelInput) => {
-        return {
-          key: modelInput.label,
-          value: {
-            transformType: TRANSFORM_TYPE.FIELD,
-            value: '',
-          },
-        } as InputMapEntry;
-      }) as InputMapFormValue,
+      parseModelInputs(newModelInterface).map(
+        (modelInput) => EMPTY_INPUT_MAP_ENTRY
+      ) as InputMapFormValue,
     ] as InputMapArrayFormValue;
     const modelOutputsAsForm = [
       parseModelOutputs(newModelInterface).map((modelOutput) => {
@@ -369,10 +363,29 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
           )}
           <EuiFlexGroup direction="row" justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
-              <EuiText
-                size="m"
-                style={{ marginTop: '4px' }}
-              >{`Inputs`}</EuiText>
+              <EuiFlexGroup direction="row" gutterSize="xs">
+                <EuiFlexItem grow={false}>
+                  <EuiText size="m">Inputs</EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiIconTip
+                    content={`Specify a ${
+                      props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST
+                        ? 'query'
+                        : 'document'
+                    } field or define JSONPath to transform the ${
+                      props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST
+                        ? 'query'
+                        : 'document'
+                    } to map to a model input field.${
+                      props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE
+                        ? ` Or, if you'd like to include data from the the original query request, prefix your mapping with "${REQUEST_PREFIX}" or "${REQUEST_PREFIX_WITH_JSONPATH_ROOT_SELECTOR}" - for example, "_request.query.match.my_field"`
+                        : ''
+                    }`}
+                    position="right"
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiToolTip

diff --git a/...ges/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/model_inputs.tsx b/...ges/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/model_inputs.tsx
@@ -15,8 +15,6 @@ import {
   WorkflowFormValues,
   ModelInterface,
   IndexMappings,
-  REQUEST_PREFIX,
-  REQUEST_PREFIX_WITH_JSONPATH_ROOT_SELECTOR,
   InputMapEntry,
   InputMapFormValue,
   TRANSFORM_TYPE,
@@ -34,7 +32,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiIconTip,
   EuiPanel,
   EuiSmallButton,
   EuiSmallButtonEmpty,
@@ -49,10 +46,16 @@ interface ModelInputsProps {
   context: PROCESSOR_CONTEXT;
 }
 
-// The keys will be more static in general. Give more space for values where users
-// will typically be writing out more complex transforms/configuration (in the case of ML inference processors).
-const KEY_FLEX_RATIO = 4;
-const VALUE_FLEX_RATIO = 6;
+// Determining spacing between the input field columns
+const KEY_FLEX_RATIO = 3;
+const TYPE_FLEX_RATIO = 2;
+const VALUE_FLEX_RATIO = 5;
+
+const TRANSFORM_OPTIONS = Object.values(TRANSFORM_TYPE).map((type) => {
+  return {
+    label: type,
+  };
+});
 
 /**
  * Base component to configure ML inputs.
@@ -75,7 +78,6 @@ export function ModelInputs(props: ModelInputsProps) {
   ) as IConfigField;
   const modelFieldPath = `${props.baseConfigPath}.${props.config.id}.${modelField.id}`;
   // Assuming no more than one set of input map entries.
-  // TODO: confirm the above.
   const inputMapFieldPath = `${props.baseConfigPath}.${props.config.id}.input_map.0`;
 
   // model interface state
@@ -177,7 +179,7 @@ export function ModelInputs(props: ModelInputsProps) {
       {
         key: '',
         value: {
-          transformType: TRANSFORM_TYPE.FIELD,
+          transformType: '' as TRANSFORM_TYPE,
           value: '',
         },
       } as InputMapEntry,
@@ -198,26 +200,12 @@ export function ModelInputs(props: ModelInputsProps) {
   }
 
   // Defining constants for the key/value text vars, typically dependent on the different processor contexts.
-  const keyTitle = 'Name';
   const keyPlaceholder = 'Name';
   const keyOptions = parseModelInputs(modelInterface);
-  const valueTitle =
-    props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST
-      ? 'Query field'
-      : 'Document field';
   const valuePlaceholder =
     props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST
       ? 'Specify a query field'
       : 'Define a document field';
-  const valueHelpText = `Specify a ${
-    props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST ? 'query' : 'document'
-  } field or define JSONPath to transform the ${
-    props.context === PROCESSOR_CONTEXT.SEARCH_REQUEST ? 'query' : 'document'
-  } to map to a model input field.${
-    props.context === PROCESSOR_CONTEXT.SEARCH_RESPONSE
-      ? ` Or, if you'd like to include data from the the original query request, prefix your mapping with "${REQUEST_PREFIX}" or "${REQUEST_PREFIX_WITH_JSONPATH_ROOT_SELECTOR}" - for example, "_request.query.match.my_field"`
-      : ''
-  }`;
   const valueOptions =
     props.context === PROCESSOR_CONTEXT.INGEST
       ? docFields
@@ -256,23 +244,26 @@ export function ModelInputs(props: ModelInputsProps) {
                           <EuiFlexGroup direction="row" gutterSize="xs">
                             <EuiFlexItem grow={false}>
                               <EuiText size="s" color="subdued">
-                                {keyTitle}
+                                {`Name`}
                               </EuiText>
                             </EuiFlexItem>
                           </EuiFlexGroup>
                         </EuiFlexItem>
-                        <EuiFlexItem grow={VALUE_FLEX_RATIO}>
+                        <EuiFlexItem grow={TYPE_FLEX_RATIO}>
                           <EuiFlexGroup direction="row" gutterSize="xs">
                             <EuiFlexItem grow={false}>
                               <EuiText size="s" color="subdued">
-                                {valueTitle}
+                                {`Input type`}
                               </EuiText>
                             </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={VALUE_FLEX_RATIO}>
+                          <EuiFlexGroup direction="row" gutterSize="xs">
                             <EuiFlexItem grow={false}>
-                              <EuiIconTip
-                                content={valueHelpText}
-                                position="right"
-                              />
+                              <EuiText size="s" color="subdued">
+                                Value
+                              </EuiText>
                             </EuiFlexItem>
                           </EuiFlexGroup>
                         </EuiFlexItem>
@@ -317,6 +308,7 @@ export function ModelInputs(props: ModelInputsProps) {
                                             fieldPath={`${inputMapFieldPath}.${idx}.key`}
                                             options={keyOptions as any[]}
                                             placeholder={keyPlaceholder}
+                                            allowCreate={true}
                                           />
                                         ) : (
                                           <TextField
@@ -337,6 +329,16 @@ export function ModelInputs(props: ModelInputsProps) {
                                   </>
                                 </EuiFlexGroup>
                               </EuiFlexItem>
+                              <EuiFlexItem grow={TYPE_FLEX_RATIO}>
+                                <EuiFlexItem>
+                                  <SelectWithCustomOptions
+                                    fieldPath={`${inputMapFieldPath}.${idx}.value.transformType`}
+                                    options={TRANSFORM_OPTIONS}
+                                    placeholder={`Input type`}
+                                    allowCreate={false}
+                                  />
+                                </EuiFlexItem>
+                              </EuiFlexItem>
                               <EuiFlexItem grow={VALUE_FLEX_RATIO}>
                                 <EuiFlexGroup direction="row" gutterSize="xs">
                                   <>
@@ -349,6 +351,7 @@ export function ModelInputs(props: ModelInputsProps) {
                                             placeholder={
                                               valuePlaceholder || 'Output'
                                             }
+                                            allowCreate={true}
                                           />
                                         ) : (
                                           <TextField

diff --git a/public/utils/config_to_form_utils.ts b/public/utils/config_to_form_utils.ts
@@ -16,7 +16,6 @@ import {
   ConfigFieldValue,
   ModelFormValue,
   SearchIndexConfig,
-  TRANSFORM_TYPE,
 } from '../../common';
 
 /*
@@ -148,7 +147,7 @@ export function getInitialValue(fieldType: ConfigFieldType): ConfigFieldValue {
       return '[]';
     }
     case 'mapArray':
-    case 'transformArray': {
+    case 'inputMapArray': {
       return [];
     }
     case 'boolean': {
@@ -157,11 +156,5 @@ export function getInitialValue(fieldType: ConfigFieldType): ConfigFieldValue {
     case 'number': {
       return 0;
     }
-    case 'transform': {
-      return {
-        transformType: TRANSFORM_TYPE.FIELD,
-        value: '',
-      };
-    }
   }
 }