Test

Author: Keivan Vosoughi

app/client/src/pages/DataGenerator/Configure.tsx

@@ -1,8 +1,8 @@
 import endsWith from 'lodash/endsWith';
 import isEmpty from 'lodash/isEmpty';
 import isFunction from 'lodash/isFunction';
-import { useEffect, useState } from 'react';
-import { Flex, Form, Input, Select, Typography } from 'antd';
+import { FunctionComponent, useEffect, useState } from 'react';
+import { Flex, Form, FormInstance, Input, Select, Typography } from 'antd';
 import styled from 'styled-components';
 import { File, WorkflowType } from './types';
 import { useFetchModels } from '../../api/api';
@@ -49,7 +49,14 @@ export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
     { label: MODEL_PROVIDER_LABELS[ModelProviders.CAII], value: ModelProviders.CAII },
 ];
 
-const Configure = () => {
+interface Props {
+    form: FormInstance;
+    formData: FormInstance;
+}
+
+const Configure: FunctionComponent<Props> = ({ form, formData }) => {
+    console.log('Configure --> form', form);
+    console.log('Configure --> formData', formData);
     const location = useLocation();
     const { template_name, generate_file_name } = useParams();
     const [wizardModeType, setWizardModeType] = useState(getWizardModeType(location));
@@ -70,8 +77,8 @@ const Configure = () => {
         }
     }, [template_name]);
 
-    const form = Form.useFormInstance();
-    const formData = Form.useWatch((values) => values, form);
+    
+    // let formData = Form.useWatch((values) => values, form);
     const { setIsStepValid } = useWizardCtx();
     const { data } = useFetchModels();
     const [selectedFiles, setSelectedFiles] = useState(

app/client/src/pages/DataGenerator/DataGenerator.tsx

@@ -67,35 +67,7 @@ const WizardFooter = styled(Flex)`
 
 `;
 
-const steps: WizardStepConfig[] = [
-    {
-        title: 'Configure',
-        key: DataGenWizardSteps.CONFIGURE,
-        content: <Configure/>,
-        required: true,
-    },
-    {
-        title: 'Examples',
-        key: DataGenWizardSteps.EXAMPLES,
-        content: <Examples/>
-    },
-    {
-        title: 'Prompt',
-        key: DataGenWizardSteps.PROMPT,
-        content: <Prompt/>,
-    },
-    {
-        title: 'Summary',
-        key: DataGenWizardSteps.SUMMARY,
-        content: <Summary/>
-    },
-    {
-        title: 'Finish',
-        key: DataGenWizardSteps.FINISH,
-        content: <Finish/>
-    },
 
-];
 
 /**
  * Wizard component for Synthetic Data Generation workflow
@@ -104,11 +76,21 @@ const DataGenerator: FunctionComponent<Props> = () => {
     const [current, setCurrent] = useState(0);
     const [maxStep, setMaxStep] = useState(0);
     const [isStepValid, setIsStepValid] = useState<boolean>(false);
+    const [form] = Form.useForm<FormInstance>();
 
     // Data passed from listing table to prepopulate form
     const location = useLocation();
     const { generate_file_name } = useParams();
-    const initialData = location?.state?.data;
+    const initialData = {
+        examples: [],
+        example_path: null,
+        doc_paths: [],
+        input_paths: [],
+        num_questions: 20,
+        topics: [],
+        workflow_type: WorkflowType.FREE_FORM_DATA_GENERATION,
+    };
+    const formData = useRef(initialData || { num_questions: 20, topics: [] });
     const mutation = useMutation({
         mutationFn: fetchDatasetDetails
     });
@@ -146,6 +128,10 @@ const DataGenerator: FunctionComponent<Props> = () => {
                 ...initialData,
                 ...(mutation?.data?.dataset as any)
             });
+            formData.current = {
+                ...initialData,
+                ...(mutation?.data?.dataset as any)
+            };
             console.log('------> form', form.getFieldsValue());
         }
     }, [mutation.data]);
@@ -181,9 +167,38 @@ const DataGenerator: FunctionComponent<Props> = () => {
     }
 
 
-    const formData = useRef(initialData || { num_questions: 20, topics: [] });
 
-    const [form] = Form.useForm<FormInstance>();
+
+
+    const steps: WizardStepConfig[] = [
+        {
+            title: 'Configure',
+            key: DataGenWizardSteps.CONFIGURE,
+            content: <Configure form={form} formData={formData}/>,
+            required: true,
+        },
+        {
+            title: 'Examples',
+            key: DataGenWizardSteps.EXAMPLES,
+            content: <Examples form={form} formData={formData} />
+        },
+        {
+            title: 'Prompt',
+            key: DataGenWizardSteps.PROMPT,
+            content: <Prompt form={form} formData={formData}/>,
+        },
+        {
+            title: 'Summary',
+            key: DataGenWizardSteps.SUMMARY,
+            content: <Summary/>
+        },
+        {
+            title: 'Finish',
+            key: DataGenWizardSteps.FINISH,
+            content: <Finish/>
+        },
+    
+    ];
 
     const onStepChange = (value: number) => {
         setCurrent(value);

app/client/src/pages/DataGenerator/Examples.tsx

@@ -50,14 +50,20 @@ const StyledContainer = styled.div`
 
 `;
 
-
-const Examples: FunctionComponent = () => {
-    const form = Form.useFormInstance();
-    const { template_name, generate_file_name } = useParams();
+interface Props {
+    form: FormInstance;
+    formData: FormInstance;
+}
+
+const Examples: FunctionComponent<Props> = ({ form, formData }) => {
+    console.log('Examples --> form', form);
+    console.log('Examples --> formData', formData);
+    const { generate_file_name } = useParams();
     const [records, setRecords] = useState<Record<string, string>[]>([]);
     const workflowType = form.getFieldValue('workflow_type');
 
     console.log('Examples >>> form:', form.getFieldsValue());
+    console.log('examples:', form.getFieldValue('examples'));
 
     const mutation = useMutation({
         mutationFn: fetchFileContent
@@ -99,6 +105,12 @@ const Examples: FunctionComponent = () => {
             setRecords(examples);
         }
     }, [restore_mutation.data]);
+
+    useEffect(() => {
+        if (generate_file_name) {
+            setRecords(form.getFieldValue('examples'));
+        }
+    }, [generate_file_name]);
 
     const onRestoreDefaults = async() => {
         const useCase = form.getFieldValue('use_case');