Skip to content

Commit 033d9ba

Browse files
vkeivanvkeivan
authored
Merge pull request #103 from cloudera/mode-text-changes
fix: minor update to DataGenerator Configure component for consistenc…
2 parents 1a1a92a + 6462dfb commit 033d9ba

File tree

6 files changed

+103
-35
lines changed

6 files changed

+103
-35
lines changed

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import FileSelectorButton from './FileSelectorButton';
1313
import UseCaseSelector from './UseCaseSelector';
1414
import { useLocation, useParams } from 'react-router-dom';
1515
import { WizardModeType } from '../../types';
16-
import { get } from 'lodash';
1716

1817

1918
const StepContainer = styled(Flex)`
@@ -96,10 +95,13 @@ const Configure = () => {
9695
validateForm()
9796
}, [form, formData])
9897

99-
// keivan
98+
10099
useEffect(() => {
101100
if (formData && formData?.inference_type === undefined && isEmpty(generate_file_name)) {
102101
form.setFieldValue('inference_type', ModelProviders.CAII);
102+
setTimeout(() => {
103+
form.setFieldValue('use_case','custom');
104+
}, 1000);
103105
}
104106
}, [formData]);
105107

@@ -251,18 +253,19 @@ const Configure = () => {
251253
</Form.Item>
252254
{(formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING ||
253255
formData?.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION) &&
254-
<UseCaseSelector />}
256+
<UseCaseSelector form={form} />}
255257

256258
{(
257259
formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING ||
258260
formData?.workflow_type === WorkflowType.CUSTOM_DATA_GENERATION) &&
259261
<Form.Item
260262
name='doc_paths'
261-
label='Context'
263+
label='Input File'
262264
labelCol={labelCol}
263265
dependencies={['workflow_type']}
264266
shouldUpdate
265267
validateTrigger="['onBlur','onChange']"
268+
tooltip='Select a file from your project that contains the initial data to be augmented.'
266269
validateFirst
267270
rules={[
268271
() => ({
@@ -307,6 +310,7 @@ const Configure = () => {
307310
label='Input Key'
308311
labelCol={labelCol}
309312
validateTrigger={['workflow_type', 'onChange']}
313+
tooltip='Choose the key or column from your uploaded file that will be used as the input for data generation.'
310314
shouldUpdate
311315
rules={[
312316
() => ({
@@ -330,6 +334,7 @@ const Configure = () => {
330334
name='output_key'
331335
label='Output Key'
332336
labelCol={labelCol}
337+
tooltip='Name the value or column where the prompts will be saved. If left blank, this will default to “Prompt".'
333338
shouldUpdate
334339
>
335340
<Input />
@@ -338,6 +343,7 @@ const Configure = () => {
338343
name='output_value'
339344
label='Output Value'
340345
labelCol={labelCol}
346+
tooltip='Enter the name for the generated values corresponding to each input. If left blank, this will default to “Completion”.'
341347
shouldUpdate
342348
>
343349
<Input />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
157157
disabled={mutation.isPending}
158158
rows={15}
159159
autoSize
160-
placeholder={'Enter instructions for a custom prompt'}
160+
placeholder={'Generate prompt from the example data'}
161161
/>
162162
</Form.Item>
163163
</Form>

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

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import PCModalContent from './PCModalContent';
1212
import { ExampleType, File, QuestionSolution, WorkflowType } from './types';
1313
import FileSelectorButton from './FileSelectorButton';
1414

15-
import { fetchFileContent, getExampleType, useGetExamplesByUseCase } from './hooks';
15+
import { fetchExamplesByUseCase, fetchFileContent, getExampleType, useGetExamplesByUseCase } from './hooks';
1616
import { useState } from 'react';
1717
import FreeFormExampleTable from './FreeFormExampleTable';
1818
import { L } from 'vitest/dist/chunks/reporters.DTtkbAtP.js';
@@ -54,13 +54,21 @@ const Examples: FunctionComponent = () => {
5454
const form = Form.useFormInstance();
5555
const [records, setRecords] = useState<Record<string, string>[]>([]);
5656
const workflowType = form.getFieldValue('workflow_type');
57-
const { examples, isLoading: examplesLoading, refetch } =
58-
useGetExamplesByUseCase(form.getFieldValue('use_case'));
5957

6058
const mutation = useMutation({
6159
mutationFn: fetchFileContent
6260
});
6361

62+
const restore_mutation = useMutation({
63+
mutationFn: fetchExamplesByUseCase
64+
});
65+
66+
useEffect(() => {
67+
const useCase = form.getFieldValue('use_case');
68+
restore_mutation.mutate(useCase);
69+
}, [form.getFieldValue('use_case')]);
70+
71+
6472
useEffect(() => {
6573
const example_path = form.getFieldValue('example_path');
6674
if (!isEmpty(example_path)) {
@@ -70,21 +78,28 @@ const Examples: FunctionComponent = () => {
7078
}
7179
}, [form.getFieldValue('example_path'), form.getFieldValue('workflow_type')]);
7280

73-
useEffect(() => {
74-
console.log('------------------> useEffect')
81+
useEffect(() => {
7582
if (!isEmpty(mutation.data)) {
7683
form.setFieldValue('examples', mutation.data);
7784
if (!isEqual(mutation.data, records)) {
7885
setRecords(mutation.data);
7986
}
8087

81-
} else if (Array.isArray(examples) && !isEqual(examples, records)) {
88+
}
89+
}, [mutation.data]);
90+
91+
useEffect(() => {
92+
if (!isEmpty(restore_mutation.data)) {
93+
const examples = get(restore_mutation.data, 'examples', []);
8294
form.setFieldValue('examples', examples);
8395
setRecords(examples);
8496
}
85-
}, [mutation.data, examples]);
86-
97+
}, [restore_mutation.data]);
8798

99+
const onRestoreDefaults = async() => {
100+
const useCase = form.getFieldValue('use_case');
101+
restore_mutation.mutate(useCase);
102+
}
88103

89104
const onAddFiles = (files: File[]) => {
90105
if (!isEmpty (files)) {
@@ -104,16 +119,16 @@ const Examples: FunctionComponent = () => {
104119
span: 10
105120
};
106121

107-
const showEmptyState = workflowType === WorkflowType.FREE_FORM_DATA_GENERATION &&
122+
const showEmptyState = (workflowType === WorkflowType.FREE_FORM_DATA_GENERATION &&
108123
isEmpty(mutation.data) &&
109-
records.length === 0;
124+
records.length === 0) ||
125+
(form.getFieldValue('use_case') === 'custom' &&
126+
isEmpty(form.getFieldValue('examples')));
110127

111-
console.log('examples', form.getFieldValue('examples'));
112-
console.log('records', records);
113128

114129
return (
115130
<Container>
116-
{examplesLoading && <Loading />}
131+
{mutation?.isPending || restore_mutation.isPending && <Loading />}
117132
<Header align='center' justify='space-between'>
118133
<StyledTitle level={3}>
119134
<Space>
@@ -149,8 +164,8 @@ const Examples: FunctionComponent = () => {
149164
<ModalButtonGroup gap={8} justify='end'>
150165
<Button onClick={() => Modal.destroyAll()}>{'Cancel'}</Button>
151166
<Button
152-
onClick={() => {
153-
refetch();
167+
onClick={async () => {
168+
await onRestoreDefaults();
154169
Modal.destroyAll();
155170
}}
156171
type='primary'

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,7 @@ export const fetchExamplesByUseCase = async (use_case: string) => {
280280
}
281281

282282
export const useGetExamplesByUseCase = (use_case: string) => {
283+
console.log('------------------> useGetExamplesByUseCase', use_case);
283284
const { data, isLoading, isError, error, isFetching, refetch } = useQuery(
284285
{
285286
queryKey: ['fetchUseCaseTopics', fetchExamplesByUseCase],

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Form, Modal, Select } from "antd";
1+
import { Button, Form, Modal, Select } from "antd";
22
import { useNavigate } from 'react-router-dom';
33
import { useEffect, useState } from "react";
44
import { useDatasets } from "./hooks";
@@ -8,6 +8,7 @@ import { HeaderSection } from "./HomePage";
88
import { Dataset } from "../Evaluator/types";
99
import { Pages } from "../../types";
1010
import EvaluateIcon from '../../assets/ic-brand-inventory-ordering.svg';
11+
import ArrowRightIcon from '../../assets/ic-arrow-right.svg';
1112

1213

1314
const EvaluateSection: React.FC = () => {
@@ -57,13 +58,23 @@ const EvaluateSection: React.FC = () => {
5758
return (
5859
<>
5960
<HeaderSection style={{ marginLeft: '1rem' }} onClick={onClick}>
60-
<div className="left-section evaluate-icon">
61-
<img src={EvaluateIcon} alt="evaluation" />
61+
<div className="top-section">
62+
<div className="left-section evaluate-icon">
63+
<img src={EvaluateIcon} alt="evaluation" />
64+
</div>
65+
<div className="middle-section">
66+
<div className="section-title">Evaluation</div>
67+
<div className="section-description">
68+
Use LLMs to score and filter your synthetic data. Keep only high-quality results.
69+
</div>
70+
</div>
6271
</div>
63-
<div className="middle-section">
64-
<div className="section-title">Evaluation</div>
65-
<div className="section-description">
66-
Use LLMs to score and filter your synthetic data. Keep only high-quality results.
72+
<div className="bottom-section">
73+
<div>
74+
<Button onClick={onClick}>
75+
Get Started
76+
<img src={ArrowRightIcon} alt="Get Started" />
77+
</Button>
6778
</div>
6879
</div>
6980
</HeaderSection>

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

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
22
import styled from 'styled-components';
3-
import { Card, Col, Flex, Layout, Row, Tabs } from 'antd'
3+
import { Button, Card, Col, Flex, Layout, Row, Tabs } from 'antd'
44
import type { TabsProps } from 'antd';
55
import DatasetsTab from './DatasetsTab';
66
import EvaluationsTab from './EvaluationsTab';
@@ -10,6 +10,7 @@ import ExportsTab from './ExportsTab';
1010
import TemplatesSection from './TemplatesSection';
1111
import { useNavigate } from 'react-router-dom';
1212
import EvaluateSection from './EvaluateSection';
13+
import ArrowRightIcon from '../../assets/ic-arrow-right.svg';
1314

1415

1516
const { Content } = Layout;
@@ -21,12 +22,23 @@ const StyledContent = styled(Content)`
2122

2223
export const HeaderSection = styled.div`
2324
display: flex;
25+
flex-direction: column;
2426
margin-bottom: 1rem;
25-
height: 100px;
27+
height: 150px;
2628
width: 50%;
2729
padding: 16px;
2830
background-color: #ffffff;
2931
cursor: pointer;
32+
.top-section {
33+
display: flex;
34+
flex-direction: row;
35+
}
36+
.bottom-section {
37+
display: flex;
38+
flex-direction: row;
39+
justify-content: flex-end;
40+
margin-top: 8px;
41+
}
3042
.left-section {
3143
width: 66px;
3244
height: 46px;
@@ -66,6 +78,7 @@ export const HeaderSection = styled.div`
6678
letter-spacing: normal;
6779
text-align: left;
6880
color: #1b2329;
81+
min-height: 50px;
6982
}
7083
}
7184
.right-section {
@@ -114,6 +127,7 @@ const HomePage: React.FC = () => {
114127
<StyledContent>
115128
<Flex>
116129
<HeaderSection onClick={() => navigate('/data-generator')}>
130+
<div className="top-section">
117131
<div className="left-section">
118132
<img src={DatasetIcon} alt="Datasets" />
119133
</div>
@@ -123,16 +137,37 @@ const HomePage: React.FC = () => {
123137
Create synthetic data from scratch using examples, documents, seed instructions and AI assisted prompts.
124138
</div>
125139
</div>
140+
</div>
141+
142+
<div className="bottom-section">
143+
<div>
144+
<Button href="/data-generator">
145+
Get Started
146+
<img src={ArrowRightIcon} alt="Get Started" />
147+
</Button>
148+
</div>
149+
</div>
126150
</HeaderSection>
127151

128152
<HeaderSection style={{ marginLeft: '1rem' }} onClick={() => navigate('/data-augmentation')}>
129-
<div className="left-section" style={{ padding: '5px' }}>
130-
<img src={DataAugmentationIcon} alt="augmentation" />
153+
<div className="top-section">
154+
<div className="left-section" style={{ padding: '5px' }}>
155+
<img src={DataAugmentationIcon} alt="augmentation" />
156+
</div>
157+
<div className="middle-section">
158+
<div className="section-title">Augmentation</div>
159+
<div className="section-description">
160+
Add synthetic rows or field to existing data to fill gaps or balance datasets such as language translations.
161+
</div>
162+
</div>
131163
</div>
132-
<div className="middle-section">
133-
<div className="section-title">Augmentation</div>
134-
<div className="section-description">
135-
Add synthetic rows or field to existing data to fill gaps or balance datasets such as language translations.
164+
165+
<div className="bottom-section">
166+
<div>
167+
<Button href="/data-augmentation">
168+
Get Started
169+
<img src={ArrowRightIcon} alt="Get Started" />
170+
</Button>
136171
</div>
137172
</div>
138173
</HeaderSection>

0 commit comments

Comments
 (0)