Add Data Augmentation Icon

Author: Keivan Vosoughi

app/client/src/assets/ic-data-augmentation.svg

@@ -8,9 +8,12 @@ import { File, WorkflowType } from './types';
 import { useFetchModels } from '../../api/api';
 import { MODEL_PROVIDER_LABELS } from './constants';
 import { ModelProviders, ModelProvidersDropdownOpts } from './types';
-import { useWizardCtx } from './utils';
+import { getWizardModel, getWizardModeType, useWizardCtx } from './utils';
 import FileSelectorButton from './FileSelectorButton';
 import UseCaseSelector from './UseCaseSelector';
+import { useLocation } from 'react-router-dom';
+import { WizardModeType } from '../../types';
+import { get } from 'lodash';
 
 
 const StepContainer = styled(Flex)`
@@ -39,7 +42,7 @@ export const USECASE_OPTIONS = [
 export const WORKFLOW_OPTIONS = [
     { label: 'Supervised Fine-Tuning', value: 'supervised-fine-tuning' },
     { label: 'Custom Data Generation', value: 'custom' },
-    { label: 'Freeform Data Generation', value: 'freeform' }
+    // { label: 'Freeform Data Generation', value: 'freeform' }
 ];
 
 export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
@@ -48,6 +51,21 @@ export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
 ];
 
 const Configure = () => {
+    const location = useLocation();
+    const [wizardModeType, setWizardModeType] = useState(getWizardModeType(location));
+    // const wizardModeType = getWizardModeType(location);
+    console.log('location', location);
+    console.log('wizardModeType', wizardModeType);
+
+    useEffect(() => {
+        if (wizardModeType === WizardModeType.DATA_AUGMENTATION) {
+            setWizardModeType(WizardModeType.DATA_AUGMENTATION);
+            form.setFieldValue('workflow_type', 'freeform');
+        } else {
+            setWizardModeType(WizardModeType.DATA_GENERATION);
+        }
+    }, [location, wizardModeType]);
+
     const form = Form.useFormInstance();
     const formData = Form.useWatch((values) => values, form);
     const { setIsStepValid } = useWizardCtx();
@@ -121,6 +139,8 @@ const Configure = () => {
             setSelectedFiles([]);    
         }
     }
+    console.log('formData', formData);
+    console.log(wizardModeType === WizardModeType.DATA_AUGMENTATION);
 
     return (
         <StepContainer justify='center'>
@@ -141,8 +161,10 @@ const Configure = () => {
                     label='Model Provider'
                     rules={[{ required: true }]}
                     labelCol={labelCol}
+                    shouldUpdate
                 >
                     <Select
+                       
                         onChange={() => form.setFieldValue('model_id', undefined)}
                         placeholder={'Select a model provider'}
                     >
@@ -210,6 +232,7 @@ const Configure = () => {
                     label='Workflow'
                     tooltip='A specialized workflow for your dataset'
                     labelCol={labelCol}
+                    hidden={wizardModeType === WizardModeType.DATA_AUGMENTATION}
                     shouldUpdate
                     rules={[
                             { required: true }

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

@@ -108,6 +108,7 @@ const DataGenerator: FunctionComponent<Props> = ({ mode }) => {
 
     // Data passed from listing table to prepopulate form
     const location = useLocation();
+    console.log('DataGenerator location: ', location);
     const { generate_file_name } = useParams();
     const initialData = location?.state?.data;
     const mutation = useMutation({

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

@@ -3,6 +3,7 @@ import { WizardCtxObj } from './types';
 import moment from 'moment';
 import toString from 'lodash/toString';
 import { File } from './types';
+import { WizardModeType } from '../../types';
 
 export const WizardCtx = createContext<WizardCtxObj | null>(null);
 export const useWizardCtx = (): WizardCtxObj => {
@@ -105,3 +106,15 @@ export const getHttpStatusCodeVerb = (statusCode: number) => {
       return null;
   }
 };
+
+export const getWizardModeType = (location: any) => {
+  const pathname = location?.pathname || '';
+  switch (pathname) {
+    case '/data-augmentation':
+      return WizardModeType.DATA_AUGMENTATION;
+    case '/data-generator':
+      return WizardModeType.DATA_GENERATION;
+    default:
+      return null;
+  }
+}

app/client/src/pages/DataGenerator/utils.ts

@@ -117,8 +117,8 @@ const HomePage: React.FC = () => {
                             </div>
                         </div>
                     </HeaderSection>
-                    <HeaderSection>
-                        <div className="left-section">
+                    <HeaderSection style={{ marginLeft: '1rem' }}>
+                        <div className="left-section" style={{ padding: '5px' }}>
                             <img src={DataAugmentationIcon} alt="Datasets" />
                         </div>
                         <div className="middle-section">

app/client/src/pages/Home/HomePage.tsx

@@ -40,7 +40,7 @@ const router = createBrowserRouter([
         loader: async () => null
       },
       { 
-        path: Pages.GENERATOR, 
+        path: Pages.DATA_AUGMENTATION, 
         element: <DataGenerator key={Pages.DATA_AUGMENTATION} mode={WizardModeType.DATA_AUGMENTATION}/>, 
         errorElement: <ErrorPage />,
         loader: async () => null