Skip to content

Commit 011ee82

Browse files
Khauneesh-AIKhauneesh-AI
authored
Merge pull request #98 from cloudera/data-augmentation-final
This PR introduces a new Data Augmentation page/card in the Home screen, wires up routing and wizard mode for the augmentation workflow, and adjusts column widths and overflow behavior in various tables for better rendering. Add DATA_AUGMENTATION page to enum, routes, and wizard mode support Insert Data Augmentation card on HomePage Tune table column widths and enable horizontal scrolling in EvaluationsTab and DatasetsTab Provide getWizardModeType util and update Configure form to set workflow based on mode
2 parents b3807ea + 5370494 commit 011ee82

File tree

10 files changed

+108
-15
lines changed

10 files changed

+108
-15
lines changed

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

Lines changed: 13 additions & 0 deletions
Loading

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,12 @@ import { File, WorkflowType } from './types';
88
import { useFetchModels } from '../../api/api';
99
import { MODEL_PROVIDER_LABELS } from './constants';
1010
import { ModelProviders, ModelProvidersDropdownOpts } from './types';
11-
import { useWizardCtx } from './utils';
11+
import { getWizardModel, getWizardModeType, useWizardCtx } from './utils';
1212
import FileSelectorButton from './FileSelectorButton';
1313
import UseCaseSelector from './UseCaseSelector';
14+
import { useLocation } from 'react-router-dom';
15+
import { WizardModeType } from '../../types';
16+
import { get } from 'lodash';
1417

1518

1619
const StepContainer = styled(Flex)`
@@ -37,7 +40,7 @@ export const USECASE_OPTIONS = [
3740
];
3841

3942
export const WORKFLOW_OPTIONS = [
40-
{ label: 'Supervised Fine-Tuning', value: 'supervised-fine-tuning' },
43+
// { label: 'Supervised Fine-Tuning', value: 'supervised-fine-tuning' },
4144
{ label: 'Custom Data Generation', value: 'custom' },
4245
{ label: 'Freeform Data Generation', value: 'freeform' }
4346
];
@@ -48,6 +51,19 @@ export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
4851
];
4952

5053
const Configure = () => {
54+
const location = useLocation();
55+
const [wizardModeType, setWizardModeType] = useState(getWizardModeType(location));
56+
57+
useEffect(() => {
58+
if (wizardModeType === WizardModeType.DATA_AUGMENTATION) {
59+
setWizardModeType(WizardModeType.DATA_AUGMENTATION);
60+
form.setFieldValue('workflow_type', 'custom');
61+
} else {
62+
setWizardModeType(WizardModeType.DATA_GENERATION);
63+
form.setFieldValue('workflow_type', 'freeform');
64+
}
65+
}, [location, wizardModeType]);
66+
5167
const form = Form.useFormInstance();
5268
const formData = Form.useWatch((values) => values, form);
5369
const { setIsStepValid } = useWizardCtx();
@@ -141,8 +157,10 @@ const Configure = () => {
141157
label='Model Provider'
142158
rules={[{ required: true }]}
143159
labelCol={labelCol}
160+
shouldUpdate
144161
>
145162
<Select
163+
146164
onChange={() => form.setFieldValue('model_id', undefined)}
147165
placeholder={'Select a model provider'}
148166
>
@@ -210,6 +228,7 @@ const Configure = () => {
210228
label='Workflow'
211229
tooltip='A specialized workflow for your dataset'
212230
labelCol={labelCol}
231+
hidden={true}
213232
shouldUpdate
214233
rules={[
215234
{ required: true }

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import isEmpty from 'lodash/isEmpty';
22
import isString from 'lodash/isString';
3-
import { useEffect, useRef, useState } from 'react';
3+
import { FunctionComponent, useEffect, useRef, useState } from 'react';
44
import { useLocation, useParams } from 'react-router-dom';
55

66
import { Button, Flex, Form, Layout, Steps } from 'antd';
@@ -20,10 +20,15 @@ import { DataGenWizardSteps, WizardStepConfig, WorkflowType } from './types';
2020
import { WizardCtx } from './utils';
2121
import { fetchDatasetDetails, useGetDatasetDetails } from '../DatasetDetails/hooks';
2222
import { useMutation } from '@tanstack/react-query';
23+
import { WizardModeType } from '../../types';
2324

2425
const { Content } = Layout;
2526
// const { Title } = Typography;
2627

28+
interface Props {
29+
mode?: WizardModeType;
30+
}
31+
2732
const StyledTitle = styled.div`
2833
margin-top: 10px;
2934
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
@@ -95,7 +100,7 @@ const steps: WizardStepConfig[] = [
95100
/**
96101
* Wizard component for Synthetic Data Generation workflow
97102
*/
98-
const DataGenerator = () => {
103+
const DataGenerator: FunctionComponent<Props> = () => {
99104
const [current, setCurrent] = useState(0);
100105
const [maxStep, setMaxStep] = useState(0);
101106
const [isStepValid, setIsStepValid] = useState<boolean>(false);

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { WizardCtxObj } from './types';
33
import moment from 'moment';
44
import toString from 'lodash/toString';
55
import { File } from './types';
6+
import { WizardModeType } from '../../types';
67

78
export const WizardCtx = createContext<WizardCtxObj | null>(null);
89
export const useWizardCtx = (): WizardCtxObj => {
@@ -105,3 +106,15 @@ export const getHttpStatusCodeVerb = (statusCode: number) => {
105106
return null;
106107
}
107108
};
109+
110+
export const getWizardModeType = (location: any) => {
111+
const pathname = location?.pathname || '';
112+
switch (pathname) {
113+
case '/data-augmentation':
114+
return WizardModeType.DATA_AUGMENTATION;
115+
case '/data-generator':
116+
return WizardModeType.DATA_GENERATION;
117+
default:
118+
return null;
119+
}
120+
}

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const { Search } = Input;
2121
const Container = styled.div`
2222
background-color: #ffffff;
2323
padding: 1rem;
24+
overflow-x: auto;
2425
`;
2526

2627
const StyledTable = styled(Table)`
@@ -109,53 +110,56 @@ const DatasetsTab: React.FC = () => {
109110
key: 'display_name',
110111
title: 'Display Name',
111112
dataIndex: 'display_name',
112-
sorter: sortItemsByKey('display_name'),
113+
width: 140,
114+
sorter: sortItemsByKey('display_name')
113115
}, {
114116
key: 'generate_file_name',
115117
title: 'Dataset Name',
116118
dataIndex: 'generate_file_name',
117-
sorter: sortItemsByKey('generate_file_name'),
118119
width: 250,
120+
sorter: sortItemsByKey('generate_file_name'),
119121
render: (generate_file_name) => <Tooltip title={generate_file_name}><StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{generate_file_name}</StyledParagraph></Tooltip>
120122
}, {
121123
key: 'model_id',
122124
title: 'Model',
123125
dataIndex: 'model_id',
124-
sorter: sortItemsByKey('model_id'),
125126
width: 250,
127+
sorter: sortItemsByKey('model_id'),
126128
render: (modelId) => <Tooltip title={modelId}><StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{modelId}</StyledParagraph></Tooltip>
127129
}, {
128130
key: 'num_questions',
129131
title: 'Questions Per Topic',
130132
dataIndex: 'num_questions',
133+
width: 120,
131134
align: 'center',
132-
sorter: sortItemsByKey('num_questions'),
133-
width: 120
135+
sorter: sortItemsByKey('num_questions')
134136
},
135137
{
136138
key: 'total_count',
137139
title: 'Total Count',
138140
dataIndex: 'total_count',
141+
width: 80,
139142
align: 'center',
140-
sorter: sortItemsByKey('total_count'),
141-
width: 80
143+
sorter: sortItemsByKey('total_count')
142144
}, {
143145
key: 'use_case',
144146
title: 'Use Case',
145147
dataIndex: 'use_case',
148+
width: 120,
146149
sorter: sortItemsByKey('use_case'),
147150
render: (useCase) => TRANSLATIONS[useCase]
148151
}, {
149152
key: 'timestamp',
150153
title: 'Creation Time',
151154
dataIndex: 'timestamp',
152155
defaultSortOrder: 'descend',
156+
width: 120,
153157
sorter: sortItemsByKey('timestamp'),
154158
render: (timestamp) => <>{timestamp == null ? 'N/A' : <DateTime dateTime={timestamp}/>}</>
155159
}, {
156160
key: '7',
157161
title: 'Actions',
158-
width: 150,
162+
width: 100,
159163
render: (row: Dataset) => (
160164
<DatasetActions dataset={row} refetch={refetch} setToggleDatasetExportModal={setToggleDatasetExportModal}/>
161165
)

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const { Search } = Input;
2121
const Container = styled.div`
2222
background-color: #ffffff;
2323
padding: 1rem;
24+
overflow-x: auto;
2425
`;
2526

2627
const StyledTable = styled(Table)`
@@ -89,34 +90,40 @@ const EvaluationsTab: React.FC = () => {
8990
key: 'display_name',
9091
title: 'Display Name',
9192
dataIndex: 'display_name',
93+
width: 150,
9294
sorter: sortItemsByKey('display_name'),
9395
}, {
9496
key: 'model_id',
9597
title: 'Model ID',
9698
dataIndex: 'model_id',
99+
width: 150,
97100
sorter: sortItemsByKey('model_id'),
98101
}, {
99102
key: 'average_score',
100103
title: 'Average Score',
101104
dataIndex: 'average_score',
105+
width: 80,
102106
render: (average_score) => <Badge count={average_score} color={getColorCode(average_score)} showZero />,
103107
sorter: sortItemsByKey('average_score'),
104108
},{
105109
key: 'use_case',
106110
title: 'Use Case',
107111
dataIndex: 'use_case',
112+
width: 180,
108113
sorter: sortItemsByKey('use_case'),
109114
render: (useCase) => <StyledParagraph style={{ width: 200, marginBottom: 0 }} ellipsis={{ rows: 1 }}>{TRANSLATIONS[useCase]}</StyledParagraph>
110115
}, {
111116
key: 'timestamp',
112117
title: 'Create Time',
113118
dataIndex: 'timestamp',
119+
width: 140,
114120
sorter: sortItemsByKey('timestamp'),
115121
render: (timestamp) => <DateTime dateTime={timestamp}></DateTime>
116122

117123
}, {
118124
key: 'action',
119125
title: 'Actions',
126+
width: 100,
120127
render: (row: Evaluation) =>
121128
<EvaluateActions evaluation={row} refetch={refetch} />
122129

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import EvaluationsTab from './EvaluationsTab';
77
import DatasetIcon from '../../assets/ic-datasets.svg';
88
import ArrowRightIcon from '../../assets/ic-arrow-right.svg';
99
import EvaluateIcon from '../../assets/ic-evaluations.svg';
10+
import DataAugmentationIcon from '../../assets/ic-data-augmentation.svg';
1011
import EvaluateButton from './EvaluateButton';
1112
import ExportsTab from './ExportsTab';
1213

@@ -116,6 +117,25 @@ const HomePage: React.FC = () => {
116117
</div>
117118
</div>
118119
</HeaderSection>
120+
<HeaderSection style={{ marginLeft: '1rem' }}>
121+
<div className="left-section" style={{ padding: '5px' }}>
122+
<img src={DataAugmentationIcon} alt="Datasets" />
123+
</div>
124+
<div className="middle-section">
125+
<div className="section-title">Data Augmentation</div>
126+
<div className="section-description">
127+
<p>Generate multi-dimension datasets using LLM custom prompts</p>
128+
</div>
129+
</div>
130+
<div className="right-section">
131+
<div>
132+
<Button href="/data-augmentation">
133+
Get Started
134+
<img src={ArrowRightIcon} alt="Get Started" />
135+
</Button>
136+
</div>
137+
</div>
138+
</HeaderSection>
119139
<HeaderSection style={{ marginLeft: '1rem' }}>
120140
<div className="left-section evaluate-icon">
121141
<img src={EvaluateIcon} alt="Datasets" />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -242,4 +242,4 @@ export const useUpgradeSynthesisStudio = () => {
242242
isError: mutation.isError,
243243
data: mutation.data
244244
};
245-
}
245+
}

‎app/client/src/routes.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Navigate, createBrowserRouter } from "react-router-dom";
22
import Layout from "./Container";
33
import DataGenerator from "./pages/DataGenerator";
44
import HomePage from "./pages/Home";
5-
import { Pages } from "./types";
5+
import { Pages, WizardModeType } from "./types";
66
import EvaluatorPage from "./pages/Evaluator";
77
import ReevaluatorPage from "./pages/Evaluator/ReevaluatorPage";
88
import DatasetDetailsPage from "./pages/DatasetDetails/DatasetDetailsPage";
@@ -35,7 +35,13 @@ const router = createBrowserRouter([
3535
},
3636
{
3737
path: Pages.GENERATOR,
38-
element: <DataGenerator key={Pages.GENERATOR}/>,
38+
element: <DataGenerator key={Pages.GENERATOR} mode={WizardModeType.DATA_GENERATION}/>,
39+
errorElement: <ErrorPage />,
40+
loader: async () => null
41+
},
42+
{
43+
path: Pages.DATA_AUGMENTATION,
44+
element: <DataGenerator key={Pages.DATA_AUGMENTATION} mode={WizardModeType.DATA_AUGMENTATION}/>,
3945
errorElement: <ErrorPage />,
4046
loader: async () => null
4147
},

‎app/client/src/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export enum Pages {
22
GENERATOR = 'data-generator',
3+
DATA_AUGMENTATION = 'data-augmentation',
34
REGENERATE = 're-generate',
45
EVALUATOR = 'evaluator',
56
HISTORY = 'history',
@@ -52,4 +53,9 @@ export interface UseCase {
5253
id: string;
5354
label: string;
5455
value: string;
56+
}
57+
58+
export enum WizardModeType {
59+
DATA_GENERATION = 'data-generation',
60+
DATA_AUGMENTATION = 'data-augmentation'
5561
}

0 commit comments

Comments
 (0)