Merge pull request #108 from cloudera/minor-ui-issues-final

Minor UI issues final

Author: vkeivan

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

@@ -55,7 +55,6 @@ const Configure: FunctionComponent = () => {
     const location = useLocation();
     const { template_name, generate_file_name } = useParams();
     const [wizardModeType, setWizardModeType] = useState(getWizardModeType(location));
-    console.log('wizardModeType', wizardModeType);
 
     useEffect(() => {
         if (wizardModeType === WizardModeType.DATA_AUGMENTATION) {
@@ -67,10 +66,8 @@ const Configure: FunctionComponent = () => {
         }
     }, [location, wizardModeType]);
 
-    console.log('wizardModeType', wizardModeType);
 
     useEffect(() => {
-        console.log('useEffect 2');
         if (template_name) {
             setTimeout(() => {
                 console.log('setting template name');
@@ -93,7 +90,6 @@ const Configure: FunctionComponent = () => {
         delete values.doc_paths;
         delete values.output_key;
         delete values.output_value;
-        console.log('validateForm', values);
 
         const allFieldsFilled = Object.values(values).every(value => Boolean(value));
         if (allFieldsFilled && isFunction(setIsStepValid)) {

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

@@ -21,6 +21,8 @@ import CustomResultTable from './CustomResultTable';
 import SeedResultTable from './SeedResultTable';
 import { getFilesURL } from '../Evaluator/util';
 import FreeFormTable from './FreeFormTable';
+import forEach from 'lodash/forEach';
+import isObject from 'lodash/isObject';
 
 const { Title } = Typography;
 
@@ -118,7 +120,7 @@ const isDemoMode = (numQuestions: number, topics: [], form: FormInstance) => {
         return true
     }
     // set dataset size for SFT & CDG
-    if (workflow_type === WorkflowType.SUPERVISED_FINE_TUNING && !isEmpty(doc_paths)) {
+    if (workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION && !isEmpty(doc_paths)) {
         const dataset_size = form.getFieldValue('num_questions');
         return dataset_size <= DEMO_MODE_THRESHOLD;
     }
@@ -137,10 +139,9 @@ const Finish = () => {
 
         const doc_paths = formValues.doc_paths;
         if (Array.isArray(doc_paths) && !isEmpty(doc_paths)) {
-            if (formValues.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING) {
+            if (formValues.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION && formValues.use_case === 'custom') {
                 formValues.doc_paths = doc_paths.map(item => item.value);
             } else if (formValues.workflow_type === WorkflowType.CUSTOM_DATA_GENERATION) {
-
                 formValues.input_path = doc_paths.map(item => item.value);
                 delete formValues.doc_paths;
                 // delete formValues.examples;
@@ -192,6 +193,23 @@ const Finish = () => {
         return !Array.isArray(genDatasetResp?.results)
     }
 
+    const getRawData = (genDatasetResp: unknown) => {
+        if (genDatasetResp === null || isEmpty(genDatasetResp)) {
+            return null;
+        }
+        if (Array.isArray(genDatasetResp?.results)) {
+            return genDatasetResp?.results;
+        } else if (!isEmpty(genDatasetResp?.results) && isObject(genDatasetResp?.results)) {
+            let data: any[] = [];
+            const values = Object.values(genDatasetResp?.results);
+            forEach(values, (value: any[]) => {
+                data = data.concat(value);
+            });
+            return data;
+        }
+        return null;
+    }
+
 
     const formValues = form.getFieldsValue(true);
     let hasDocSeeds = false;
@@ -298,11 +316,9 @@ const Finish = () => {
             </>
         )
     }
-    console.log('Finish >> ');
-    console.log('hasTopics', hasTopics(genDatasetResp));
-    console.log('formValues', formValues);
-    console.log('isDemo', isDemo);
-    console.log('topicTabs', topicTabs);
+
+    const rawData = genDatasetResp !== null && hasTopics(genDatasetResp) ?  
+        getRawData(genDatasetResp) : genDatasetResp?.results
 
     return (
         <div>
@@ -328,6 +344,9 @@ const Finish = () => {
                     </StyledButton>
                 </Flex>
             )}
+            {isDemo && !isEmpty(rawData) && formValues.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION && formValues.use_case === 'custom' && 
+              <FreeFormTable data={rawData} />}
+
             {(isDemo && formValues.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION && formValues.use_case !== 'custom' && hasTopics(genDatasetResp) && !hasDocSeeds) && (
                 <TabsContainer title={'Generated Dataset'}>
                     <Tabs tabPosition='left' items={topicTabs}/>

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

@@ -51,7 +51,6 @@ const FreeFormTable: FunctionComponent<Props> = ({ data }) => {
 
     useEffect(() => {
         if (!isEmpty(data)) {
-            console.log('data', data);
             const columnNames = Object.keys(first(data));
             const columnDefs = columnNames.map((colName) => ({
                 field: colName,

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

@@ -76,7 +76,6 @@ const SeedsFormItem = styled(StyledFormItem)`
 
 const Prompt = () => {
     const form = Form.useFormInstance();
-    console.log('form', form);
     const selectedTopics = Form.useWatch('topics');
     const numQuestions = Form.useWatch('num_questions');
     const datasetSize = Form.useWatch('num_questions');
@@ -110,12 +109,7 @@ const Prompt = () => {
         output_key,
         useCase
     );
-
-    console.log('values', form.getFieldsValue(true));
-    console.log('values', form);
-    console.log('workflow_type', workflow_type);
-    console.log('useCase', useCase);
-    console.log('dataset_size', dataset_size);
+    
     const mutation = useMutation({
         mutationFn: fetchSeedList
     });

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

@@ -52,9 +52,8 @@ const TopicsTable: FC<TopicsTableProps> = ({ formData, topic }) => {
             render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.solution}</>
         },
     ]
-    console.log('topic', topic);
     const dataSource = formData.results[topic];
-    console.log('dataSource', dataSource);
+    
     return (
         <StyledTable
             columns={cols}

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

@@ -24,7 +24,7 @@ export const HeaderSection = styled.div`
   display: flex;
   flex-direction: column;
   margin-bottom: 1rem;
-  height: 150px;
+  height: 130px;
   width: 50%;
   padding: 16px;
   background-color: #ffffff;
@@ -38,6 +38,8 @@ export const HeaderSection = styled.div`
     flex-direction: row;
     justify-content: flex-end;
     margin-top: 8px;
+    position: relative;
+    top: -20px;
   }
   .left-section {
     width: 66px;
@@ -137,6 +139,14 @@ const HomePage: React.FC = () => {
                               Create synthetic data from scratch using examples, documents, seed instructions and AI assisted prompts.
                             </div>
                         </div>
+                        {/* <div className="right-section">
+                        <div>
+                            <Button href="/data-generator">
+                                Get Started
+                                <img src={ArrowRightIcon} alt="Get Started" />
+                            </Button>
+                        </div>
+                        </div> */}
                         </div>
 
                         <div className="bottom-section">
@@ -149,7 +159,7 @@ const HomePage: React.FC = () => {
                         </div>    
                     </HeaderSection>
 
-                    <HeaderSection style={{ marginLeft: '1rem' }} onClick={() => navigate('/data-augmentation')}>
+                    {/* <HeaderSection style={{ marginLeft: '1rem' }} onClick={() => navigate('/data-augmentation')}>
                         <div className="top-section">
                             <div className="left-section" style={{ padding: '5px' }}>
                                 <img src={DataAugmentationIcon} alt="augmentation" />
@@ -170,7 +180,7 @@ const HomePage: React.FC = () => {
                                 </Button>
                             </div>
                         </div>
-                    </HeaderSection>
+                    </HeaderSection> */}
                     <EvaluateSection />
                 </Flex>
                 <Row>