Merge pull request #103 from cloudera/mode-text-changes

fix: minor update to DataGenerator Configure component for consistenc…

Author: vkeivan

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

@@ -13,7 +13,6 @@ import FileSelectorButton from './FileSelectorButton';
 import UseCaseSelector from './UseCaseSelector';
 import { useLocation, useParams } from 'react-router-dom';
 import { WizardModeType } from '../../types';
-import { get } from 'lodash';
 
 
 const StepContainer = styled(Flex)`
@@ -96,10 +95,13 @@ const Configure = () => {
         validateForm()
     }, [form, formData])
 
-    // keivan
+    
     useEffect(() => {
         if (formData && formData?.inference_type === undefined && isEmpty(generate_file_name)) {
             form.setFieldValue('inference_type', ModelProviders.CAII);
+            setTimeout(() => {
+                form.setFieldValue('use_case','custom');
+            }, 1000);
         }
     }, [formData]);
 
@@ -251,18 +253,19 @@ const Configure = () => {
                 </Form.Item>
                 {(formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING || 
                  formData?.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION) && 
-                 <UseCaseSelector />}
+                 <UseCaseSelector form={form} />}
 
                 {(
                     formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING || 
                     formData?.workflow_type === WorkflowType.CUSTOM_DATA_GENERATION) && 
                 <Form.Item
                     name='doc_paths'
-                    label='Context'
+                    label='Input File'
                     labelCol={labelCol}
                     dependencies={['workflow_type']}
                     shouldUpdate
                     validateTrigger="['onBlur','onChange']"
+                    tooltip='Select a file from your project that contains the initial data to be augmented.'
                     validateFirst
                     rules={[
                         () => ({
@@ -307,6 +310,7 @@ const Configure = () => {
                         label='Input Key'
                         labelCol={labelCol}
                         validateTrigger={['workflow_type', 'onChange']}
+                        tooltip='Choose the key or column from your uploaded file that will be used as the input for data generation.'
                         shouldUpdate
                         rules={[
                             () => ({
@@ -330,6 +334,7 @@ const Configure = () => {
                         name='output_key'
                         label='Output Key'
                         labelCol={labelCol}
+                        tooltip='Name the value or column where the prompts will be saved. If left blank, this will default to “Prompt".'
                         shouldUpdate
                     >
                         <Input />
@@ -338,6 +343,7 @@ const Configure = () => {
                         name='output_value'
                         label='Output Value'
                         labelCol={labelCol}
+                        tooltip='Enter the name for the generated values corresponding to each input. If left blank, this will default to “Completion”.'
                         shouldUpdate
                     >
                         <Input />

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

@@ -157,7 +157,7 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
                             disabled={mutation.isPending} 
                             rows={15}
                             autoSize 
-                            placeholder={'Enter instructions for a custom prompt'}
+                            placeholder={'Generate prompt from the example data'}
                         />
                     </Form.Item>
                 </Form>

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

@@ -12,7 +12,7 @@ import PCModalContent from './PCModalContent';
 import { ExampleType, File, QuestionSolution, WorkflowType } from './types';
 import FileSelectorButton from './FileSelectorButton';
 
-import { fetchFileContent, getExampleType, useGetExamplesByUseCase } from './hooks';
+import { fetchExamplesByUseCase, fetchFileContent, getExampleType, useGetExamplesByUseCase } from './hooks';
 import { useState } from 'react';
 import FreeFormExampleTable from './FreeFormExampleTable';
 import { L } from 'vitest/dist/chunks/reporters.DTtkbAtP.js';
@@ -54,13 +54,21 @@ const Examples: FunctionComponent = () => {
     const form = Form.useFormInstance();
     const [records, setRecords] = useState<Record<string, string>[]>([]);
     const workflowType = form.getFieldValue('workflow_type');
-    const { examples, isLoading: examplesLoading, refetch } = 
-        useGetExamplesByUseCase(form.getFieldValue('use_case'));
 
     const mutation = useMutation({
         mutationFn: fetchFileContent
     });
 
+    const restore_mutation = useMutation({
+        mutationFn: fetchExamplesByUseCase
+    });
+
+    useEffect(() => {
+        const useCase = form.getFieldValue('use_case');
+        restore_mutation.mutate(useCase);
+    }, [form.getFieldValue('use_case')]);
+
+
     useEffect(() => {
         const example_path = form.getFieldValue('example_path');
         if (!isEmpty(example_path)) {
@@ -70,21 +78,28 @@ const Examples: FunctionComponent = () => {
         }
      }, [form.getFieldValue('example_path'), form.getFieldValue('workflow_type')]);
 
-    useEffect(() => {  
-        console.log('------------------> useEffect')
+    useEffect(() => {
         if (!isEmpty(mutation.data)) {
             form.setFieldValue('examples', mutation.data);
             if (!isEqual(mutation.data, records)) {
                setRecords(mutation.data);
             }
 
-        } else if (Array.isArray(examples) && !isEqual(examples, records)) {
+        }
+    }, [mutation.data]);
+
+    useEffect(() => {
+        if (!isEmpty(restore_mutation.data)) {
+            const examples = get(restore_mutation.data, 'examples', []);
             form.setFieldValue('examples', examples);
             setRecords(examples);
         }
-    }, [mutation.data, examples]);
-    
+    }, [restore_mutation.data]);
 
+    const onRestoreDefaults = async() => {
+        const useCase = form.getFieldValue('use_case');
+        restore_mutation.mutate(useCase);
+    }
 
     const onAddFiles = (files: File[]) => {
       if (!isEmpty (files)) {
@@ -104,16 +119,16 @@ const Examples: FunctionComponent = () => {
         span: 10
     };
 
-    const showEmptyState = workflowType === WorkflowType.FREE_FORM_DATA_GENERATION && 
+    const showEmptyState = (workflowType === WorkflowType.FREE_FORM_DATA_GENERATION && 
         isEmpty(mutation.data) &&
-        records.length === 0;
+        records.length === 0) || 
+        (form.getFieldValue('use_case') === 'custom' && 
+        isEmpty(form.getFieldValue('examples')));
 
-    console.log('examples', form.getFieldValue('examples'));
-    console.log('records', records);
 
     return (
         <Container>
-            {examplesLoading && <Loading />}
+            {mutation?.isPending || restore_mutation.isPending && <Loading />}
             <Header align='center' justify='space-between'>
                 <StyledTitle level={3}>
                     <Space>
@@ -149,8 +164,8 @@ const Examples: FunctionComponent = () => {
                                     <ModalButtonGroup gap={8} justify='end'>
                                         <Button onClick={() => Modal.destroyAll()}>{'Cancel'}</Button>
                                         <Button
-                                            onClick={() => {
-                                                refetch();
+                                            onClick={async () => {
+                                                await onRestoreDefaults();
                                                 Modal.destroyAll();
                                             }}
                                             type='primary'

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

@@ -280,6 +280,7 @@ export const fetchExamplesByUseCase = async (use_case: string) => {
 }
 
 export const useGetExamplesByUseCase = (use_case: string) => {
+    console.log('------------------> useGetExamplesByUseCase', use_case);
     const { data, isLoading, isError, error, isFetching, refetch } = useQuery(
         {
             queryKey: ['fetchUseCaseTopics', fetchExamplesByUseCase],

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

@@ -1,4 +1,4 @@
-import { Form, Modal, Select } from "antd";
+import { Button, Form, Modal, Select } from "antd";
 import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from "react";
 import { useDatasets } from "./hooks";
@@ -8,6 +8,7 @@ import { HeaderSection } from "./HomePage";
 import { Dataset } from "../Evaluator/types";
 import { Pages } from "../../types";
 import EvaluateIcon from '../../assets/ic-brand-inventory-ordering.svg';
+import ArrowRightIcon from '../../assets/ic-arrow-right.svg';
 
 
 const EvaluateSection: React.FC = () => {
@@ -57,13 +58,23 @@ const EvaluateSection: React.FC = () => {
     return (
         <>
             <HeaderSection style={{ marginLeft: '1rem' }} onClick={onClick}>
-                <div className="left-section evaluate-icon">
-                    <img src={EvaluateIcon} alt="evaluation" />
+                <div className="top-section">
+                    <div className="left-section evaluate-icon">
+                        <img src={EvaluateIcon} alt="evaluation" />
+                    </div>
+                    <div className="middle-section">
+                        <div className="section-title">Evaluation</div>
+                        <div className="section-description">
+                            Use LLMs to score and filter your synthetic data. Keep only high-quality results.
+                        </div>
+                    </div>
                 </div>
-                <div className="middle-section">
-                    <div className="section-title">Evaluation</div>
-                    <div className="section-description">
-                    Use LLMs to score and filter your synthetic data. Keep only high-quality results.
+                <div className="bottom-section">
+                    <div>
+                        <Button onClick={onClick}>
+                            Get Started
+                            <img src={ArrowRightIcon} alt="Get Started" />
+                        </Button>
                     </div>
                 </div>
             </HeaderSection>

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Card, Col, Flex, Layout, Row, Tabs } from 'antd'
+import { Button, Card, Col, Flex, Layout, Row, Tabs } from 'antd'
 import type { TabsProps } from 'antd';
 import DatasetsTab from './DatasetsTab';
 import EvaluationsTab from './EvaluationsTab';
@@ -10,6 +10,7 @@ import ExportsTab from './ExportsTab';
 import TemplatesSection from './TemplatesSection';
 import { useNavigate } from 'react-router-dom';
 import EvaluateSection from './EvaluateSection';
+import ArrowRightIcon from '../../assets/ic-arrow-right.svg';
 
 
 const { Content } = Layout;
@@ -21,12 +22,23 @@ const StyledContent = styled(Content)`
 
 export const HeaderSection = styled.div`
   display: flex;
+  flex-direction: column;
   margin-bottom: 1rem;
-  height: 100px;
+  height: 150px;
   width: 50%;
   padding: 16px;
   background-color: #ffffff;
   cursor: pointer;
+  .top-section {
+    display: flex;
+    flex-direction: row;
+  }
+  .bottom-section {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 8px;
+  }
   .left-section {
     width: 66px;
     height: 46px;
@@ -66,6 +78,7 @@ export const HeaderSection = styled.div`
         letter-spacing: normal;
         text-align: left;
         color: #1b2329;
+        min-height: 50px;
       }
     }
     .right-section {
@@ -114,6 +127,7 @@ const HomePage: React.FC = () => {
             <StyledContent>
                 <Flex>
                     <HeaderSection onClick={() => navigate('/data-generator')}>
+                        <div className="top-section">
                         <div className="left-section">
                             <img src={DatasetIcon} alt="Datasets" />
                         </div>
@@ -123,16 +137,37 @@ const HomePage: React.FC = () => {
                               Create synthetic data from scratch using examples, documents, seed instructions and AI assisted prompts.
                             </div>
                         </div>
+                        </div>
+                        
+                        <div className="bottom-section">
+                            <div>
+                                <Button href="/data-generator">
+                                    Get Started
+                                    <img src={ArrowRightIcon} alt="Get Started" />
+                                </Button>
+                            </div>
+                        </div>    
                     </HeaderSection>
 
                     <HeaderSection style={{ marginLeft: '1rem' }} onClick={() => navigate('/data-augmentation')}>
-                        <div className="left-section" style={{ padding: '5px' }}>
-                            <img src={DataAugmentationIcon} alt="augmentation" />
+                        <div className="top-section">
+                            <div className="left-section" style={{ padding: '5px' }}>
+                                <img src={DataAugmentationIcon} alt="augmentation" />
+                            </div>
+                            <div className="middle-section">
+                                <div className="section-title">Augmentation</div>
+                                <div className="section-description">
+                                    Add synthetic rows or field to existing data to fill gaps or balance datasets such as language translations.
+                                </div>
+                            </div>
                         </div>
-                        <div className="middle-section">
-                            <div className="section-title">Augmentation</div>
-                            <div className="section-description">
-                            Add synthetic rows or field to existing data to fill gaps or balance datasets such as language translations.
+                        
+                        <div className="bottom-section">
+                            <div>
+                                <Button href="/data-augmentation">
+                                    Get Started
+                                    <img src={ArrowRightIcon} alt="Get Started" />
+                                </Button>
                             </div>
                         </div>
                     </HeaderSection>