Get partially working for input map only

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

public/pages/workflow_detail/workflow_inputs/processor_inputs/ml_processor_inputs/model_inputs.tsx

@@ -31,6 +31,7 @@ import {
   IndexMappings,
   InputMapEntry,
   InputMapFormValue,
+  Transform,
   TRANSFORM_TYPE,
   EMPTY_INPUT_MAP_ENTRY,
   WorkflowConfig,
@@ -98,6 +99,16 @@ export function ModelInputs(props: ModelInputsProps) {
     ModelInterface | undefined
   >(undefined);
 
+  // get the model interface based on the selected ID and list of known models
+  useEffect(() => {
+    if (!isEmpty(models)) {
+      const modelId = getIn(values, modelFieldPath)?.id;
+      if (modelId) {
+        setModelInterface(models[modelId]?.interface);
+      }
+    }
+  }, [models, getIn(values, modelFieldPath)?.id]);
+
   // various modal states
   const [templateModalIdx, setTemplateModalIdx] = useState<number | undefined>(
     undefined
@@ -106,15 +117,70 @@ export function ModelInputs(props: ModelInputsProps) {
     number | undefined
   >(undefined);
 
-  // get the model interface based on the selected ID and list of known models
+  const [debouncedInputMap, setDebouncedInputMap] = useState<any>();
   useEffect(() => {
-    if (!isEmpty(models)) {
-      const modelId = getIn(values, modelFieldPath)?.id;
-      if (modelId) {
-        setModelInterface(models[modelId]?.interface);
-      }
+    // Set a timeout to update debounced value after 500ms
+    const handler = setTimeout(() => {
+      setDebouncedInputMap(getIn(values, inputMapFieldPath));
+    }, 500);
+
+    // Cleanup the timeout if `query` changes before 500ms
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [getIn(values, inputMapFieldPath)]);
+
+  // TODO: this works ok, but does not allow clearing out any form value, or it resets to the last-known/cached value.
+  // need to filter out on this use case.
+
+  // Temporarily cache any configured transformations for different transform types.
+  // For example, if a user configures a prompt, swaps the transform
+  // type to "Data field", and swaps back to "Prompt", the prompt will be persisted.
+  const [inputMapCache, _] = useState<{
+    [idx: number]: Transform[];
+  }>({});
+  useEffect(() => {
+    const curFormValues = debouncedInputMap as InputMapFormValue | undefined;
+    if (curFormValues !== undefined && !isEmpty(curFormValues)) {
+      // for each form value: populate the cache with a non-empty value and/or populate the
+      // form value with its cached value, if found.
+      curFormValues.forEach((mapEntry, idx) => {
+        const curCacheForIdx = inputMapCache[idx];
+        if (curCacheForIdx === undefined || isEmpty(curCacheForIdx)) {
+          // case 1: there is no persisted state for this entry index. create a fresh arr
+          inputMapCache[idx] = [mapEntry.value];
+        } else if (
+          !curCacheForIdx.some(
+            (transform: Transform) =>
+              transform.transformType === mapEntry.value.transformType
+          )
+        ) {
+          // case 2: there is persisted state for this entry index, but not for the particular
+          // transform type. append to the arr
+          inputMapCache[idx] = [...inputMapCache[idx], mapEntry.value];
+        } else {
+          // case 3: there is persisted state for this entry index, and for the particular transform type.
+          // Either update the cache with the current form value(s) (if non-empty), or update the form
+          // with any value found in the cache
+          inputMapCache[idx] = inputMapCache[idx].map((cachedEntry) => {
+            if (cachedEntry.transformType === mapEntry.value.transformType) {
+              const formValue = mapEntry.value.value;
+              // form is non-empty. update the cache
+              if (formValue !== undefined && !isEmpty(formValue)) {
+                return mapEntry.value;
+                // form is empty. update the form with cached value(s)
+              } else {
+                setFieldValue(`${inputMapFieldPath}.${idx}.value`, cachedEntry);
+                return cachedEntry;
+              }
+            } else {
+              return cachedEntry;
+            }
+          });
+        }
+      });
     }
-  }, [models, getIn(values, modelFieldPath)?.id]);
+  }, [debouncedInputMap]);
 
   // persisting doc/query/index mapping fields to collect a list
   // of options to display in the dropdowns when configuring input / output maps