[Backport 2.x] Support different input transform types

common/constants.ts

@@ -4,6 +4,7 @@
  */
 
 import {
+  InputMapEntry,
   MapEntry,
   PromptPreset,
   QueryPreset,
@@ -468,6 +469,12 @@ export enum TRANSFORM_CONTEXT {
   INPUT = 'input',
   OUTPUT = 'output',
 }
+export enum TRANSFORM_TYPE {
+  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';
 export const DEFAULT_NEW_WORKFLOW_DESCRIPTION = 'My new workflow';
@@ -490,9 +497,17 @@ export enum SORT_ORDER {
 export const MAX_DOCS = 1000;
 export const MAX_STRING_LENGTH = 100;
 export const MAX_JSON_STRING_LENGTH = 10000;
+export const MAX_TEMPLATE_STRING_LENGTH = 10000;
 export const MAX_WORKFLOW_NAME_TO_DISPLAY = 40;
 export const WORKFLOW_NAME_REGEXP = RegExp('^[a-zA-Z0-9_-]*$');
 export const EMPTY_MAP_ENTRY = { key: '', value: '' } as MapEntry;
+export const EMPTY_INPUT_MAP_ENTRY = {
+  key: '',
+  value: {
+    transformType: '' as TRANSFORM_TYPE,
+    value: '',
+  },
+} as InputMapEntry;
 export const MODEL_OUTPUT_SCHEMA_NESTED_PATH =
   'output.properties.inference_results.items.properties.output.items.properties.dataAsMap.properties';
 export const MODEL_OUTPUT_SCHEMA_FULL_PATH = 'output.properties';

common/interfaces.ts

@@ -10,6 +10,7 @@ import {
   COMPONENT_CLASS,
   PROCESSOR_TYPE,
   PROMPT_FIELD,
+  TRANSFORM_TYPE,
   WORKFLOW_TYPE,
 } from './constants';
 
@@ -35,7 +36,8 @@ export type ConfigFieldType =
   | 'map'
   | 'mapArray'
   | 'boolean'
-  | 'number';
+  | 'number'
+  | 'inputMapArray';
 
 export type ConfigFieldValue = string | {};
 
@@ -100,6 +102,28 @@ export type MapFormValue = MapEntry[];
 
 export type MapArrayFormValue = MapFormValue[];
 
+export type TemplateVar = {
+  name: string;
+  transform: string;
+};
+
+export type Transform = {
+  transformType: TRANSFORM_TYPE;
+  value: string;
+  // Templates may persist their own set of nested transforms
+  // to be dynamically injected into the template
+  nestedVars?: TemplateVar[];
+};
+
+export type InputMapEntry = {
+  key: string;
+  value: Transform;
+};
+
+export type InputMapFormValue = InputMapEntry[];
+
+export type InputMapArrayFormValue = InputMapFormValue[];
+
 export type WorkflowFormValues = {
   ingest: FormikValues;
   search: FormikValues;
@@ -124,7 +148,7 @@ export type RequestSchema = WorkflowSchema;
 
 // Form / schema interfaces for the input transform sub-form
 export type InputTransformFormValues = {
-  input_map: MapArrayFormValue;
+  input_map: InputMapArrayFormValue;
   one_to_one: ConfigFieldValue;
 };
 export type InputTransformSchema = WorkflowSchema;
@@ -136,6 +160,16 @@ export type OutputTransformFormValues = {
 };
 export type OutputTransformSchema = WorkflowSchema;
 
+// Form / schema interfaces for the template sub-form
+export type TemplateFormValues = Omit<Transform, 'transformType'>;
+export type TemplateSchema = WorkflowSchema;
+
+// Form / schema interfaces for the expression/transform sub-form
+export type ExpressionFormValues = {
+  expression: string;
+};
+export type ExpressionSchema = WorkflowSchema;
+
 /**
  ********** WORKSPACE TYPES/INTERFACES **********
  */

public/configs/ml_processor.ts

@@ -22,7 +22,7 @@ export abstract class MLProcessor extends Processor {
       },
       {
         id: 'input_map',
-        type: 'mapArray',
+        type: 'inputMapArray',
       },
       {
         id: 'output_map',

public/pages/workflow_detail/workflow_inputs/input_fields/index.ts

@@ -11,3 +11,4 @@ export { MapArrayField } from './map_array_field';
 export { BooleanField } from './boolean_field';
 export { SelectField } from './select_field';
 export { NumberField } from './number_field';
+export { SelectWithCustomOptions } from './select_with_custom_options';

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

public/pages/workflow_detail/workflow_inputs/input_fields/select_with_custom_options.tsx

@@ -13,6 +13,8 @@ interface SelectWithCustomOptionsProps {
   fieldPath: string;
   placeholder: string;
   options: { label: string }[];
+  allowCreate?: boolean;
+  onChange?: () => void;
 }
 
 /**
@@ -31,6 +33,8 @@ export function SelectWithCustomOptions(props: SelectWithCustomOptionsProps) {
     const formValue = getIn(values, props.fieldPath);
     if (!isEmpty(formValue)) {
       setSelectedOption([{ label: formValue }]);
+    } else {
+      setSelectedOption([]);
     }
   }, [getIn(values, props.fieldPath)]);
 
@@ -76,9 +80,14 @@ export function SelectWithCustomOptions(props: SelectWithCustomOptionsProps) {
       onChange={(options) => {
         setFieldTouched(props.fieldPath, true);
         setFieldValue(props.fieldPath, get(options, '0.label'));
+        if (props.onChange) {
+          props.onChange();
+        }
       }}
-      onCreateOption={onCreateOption}
-      customOptionText="Add {searchValue} as a custom option"
+      onCreateOption={props.allowCreate ? onCreateOption : undefined}
+      customOptionText={
+        props.allowCreate ? 'Add {searchValue} as a custom option' : undefined
+      }
     />
   );
 }

public/pages/workflow_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,8 +32,15 @@ import {
   MapArrayFormValue,
   MapEntry,
   MapFormValue,
+  EMPTY_INPUT_MAP_ENTRY,
+  REQUEST_PREFIX,
+  REQUEST_PREFIX_WITH_JSONPATH_ROOT_SELECTOR,
 } from '../../../../../../common';
 import { ModelField } from '../../input_fields';
+import {
+  InputMapFormValue,
+  InputMapArrayFormValue,
+} from '../../../../../../common';
 import {
   ConfigurePromptModal,
   InputTransformModal,
@@ -138,11 +146,11 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
     const modelInputsAsForm = [
       parseModelInputs(newModelInterface).map((modelInput) => {
         return {
+          ...EMPTY_INPUT_MAP_ENTRY,
           key: modelInput.label,
-          value: '',
-        } as MapEntry;
-      }) as MapFormValue,
-    ] as MapArrayFormValue;
+        };
+      }) as InputMapFormValue,
+    ] as InputMapArrayFormValue;
     const modelOutputsAsForm = [
       parseModelOutputs(newModelInterface).map((modelOutput) => {
         return {
@@ -360,10 +368,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
@@ -389,6 +416,7 @@ export function MLProcessorInputs(props: MLProcessorInputsProps) {
           <ModelInputs
             config={props.config}
             baseConfigPath={props.baseConfigPath}
+            uiConfig={props.uiConfig}
             context={props.context}
           />
           <EuiSpacer size="l" />