Skip to content

Commit 4f57d63

Browse files
vkeivanvkeivan
authored
Merge pull request #43 from cloudera/keivan-dev-18
Aggregated UI Fixes for Upgrade & Dataset Details
2 parents d9ab279 + d0a2392 commit 4f57d63

35 files changed

+1830
-48
lines changed

‎app/client/src/Container.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { Pages } from './types';
1010
import { QueryClient, QueryClientProvider } from 'react-query';
1111
import React, { useMemo } from 'react';
1212
import { GithubOutlined, MailOutlined } from '@ant-design/icons';
13+
import { Upgrade } from '@mui/icons-material';
14+
import UpgradeButton from './pages/Home/UpgradeButton';
1315

1416
const { Text } = Typography;
1517
const { Header, Content } = Layout;
@@ -38,7 +40,7 @@ const BrandingTitle = styled(Typography)`
3840
line-height: 0.75;
3941
letter-spacing: normal;
4042
text-align: left;
41-
color: #fff;
43+
color: rgba(255, 255, 255, 0.65);
4244
`
4345
const BrandingTextContainer = styled(Flex)`
4446
padding-top: 5px;
@@ -86,7 +88,12 @@ const pages: MenuItem[] = [
8688
<Button type="link" icon={<MailOutlined />}>
8789
<Text copyable={{ text: '[email protected]' }} style={{ color: '#1677ff' }}>[email protected]</Text>
8890
</Button>
89-
<Button type="link" icon={<GithubOutlined target = "_blank" />} href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">Join the discussion on GitHub</Button>
91+
<div style={{ margin: 'auto' }}>
92+
<a type="link" target="_blank" rel="noopener noreferrer" href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">
93+
<GithubOutlined />
94+
<span style={{ marginLeft: '4px' }}>Join the discussion on GitHub</span>
95+
</a>
96+
</div>
9097
</Flex>
9198
<br/>
9299
</div>
@@ -96,10 +103,17 @@ const pages: MenuItem[] = [
96103
<span style={{ color: 'rgba(255, 255, 255, 0.65)'}}>{LABELS[Pages.FEEDBACK]}</span>
97104
</Button>
98105
</Popover>
99-
),
106+
)
107+
},
108+
{
109+
key: Pages.UPGRADE,
110+
label: (
111+
<UpgradeButton />
112+
)
100113
}
101114
]
102115

116+
103117
const NotificationContext = React.createContext({messagePlacement: 'topRight'});
104118

105119
const Container = () => {
@@ -128,7 +142,6 @@ const Container = () => {
128142
disabledOverflow={true}
129143
items={pages}
130144
mode="horizontal"
131-
// onClick={handleMenuClick}
132145
selectable={false}
133146
selectedKeys={[location.pathname]}
134147
theme="dark"

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,10 @@ const Parameters = () => {
8484
form.setFieldsValue({ model_parameters: { [field]: value }});
8585
};
8686

87-
if (loadingDefaultParams) {
88-
return <Spin/>
89-
}
87+
// if (loadingDefaultParams) {
88+
// return <Spin/>
89+
// }
90+
9091
return (
9192
<>
9293
<Divider />

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Usecases, WorkflowType } from './types';
1414
import { useWizardCtx } from './utils';
1515
import { useDatasetSize, useGetPromptByUseCase } from './hooks';
1616
import CustomPromptButton from './CustomPromptButton';
17+
import get from 'lodash/get';
1718

1819
const { Title } = Typography;
1920

@@ -81,14 +82,24 @@ const Prompt = () => {
8182
// Page Bootstrap requests and useEffect
8283
const { data: defaultTopics, loading: topicsLoading } = usefetchTopics(useCase);
8384
const { data: defaultSchema, loading: schemaLoading } = useFetchDefaultSchema();
84-
const { data: dataset_size, isLoading: datasetSizeLoading } = useDatasetSize(
85+
const { data: dataset_size, isLoading: datasetSizeLoadin, isError, error } = useDatasetSize(
8586
workflow_type,
8687
doc_paths,
8788
input_key,
8889
input_value,
8990
output_key
9091
);
9192

93+
useEffect(() => {
94+
if (isError) {
95+
notification.error({
96+
message: 'Error fetching the dataset size',
97+
description: get(error, 'error'),
98+
});
99+
}
100+
101+
}, [error, isError]);
102+
92103
useEffect(() => {
93104
if (defaultTopics) {
94105
// customTopics is a client-side only fieldValue that persists custom topics added

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

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ModelProviders } from './types';
1+
import { ModelProviders, ModelProvidersDropdownOpts } from './types';
22

33
export const MODEL_PROVIDER_LABELS = {
44
[ModelProviders.BEDROCK]: 'AWS Bedrock',
@@ -8,4 +8,35 @@ export const MODEL_PROVIDER_LABELS = {
88
export const MIN_SEED_INSTRUCTIONS = 1
99
export const MAX_SEED_INSTRUCTIONS = 500;
1010
export const MAX_NUM_QUESTION = 100;
11-
export const DEMO_MODE_THRESHOLD = 25
11+
export const DEMO_MODE_THRESHOLD = 25;
12+
13+
14+
export const USECASE_OPTIONS = [
15+
{ label: 'Code Generation', value: 'code_generation' },
16+
{ label: 'Text to SQL', value: 'text2sql' },
17+
{ label: 'Custom', value: 'custom' }
18+
];
19+
20+
export const WORKFLOW_OPTIONS = [
21+
{ label: 'Supervised Fine-Tuning', value: 'sft' },
22+
{ label: 'Custom Data Generation', value: 'custom' }
23+
];
24+
25+
export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
26+
{ label: MODEL_PROVIDER_LABELS[ModelProviders.BEDROCK], value: ModelProviders.BEDROCK},
27+
{ label: MODEL_PROVIDER_LABELS[ModelProviders.CAII], value: ModelProviders.CAII },
28+
];
29+
30+
31+
export const getModelProvider = (provider: ModelProviders) => {
32+
return MODEL_PROVIDER_LABELS[provider];
33+
};
34+
35+
export const getWorkflowType = (value: string) => {
36+
return WORKFLOW_OPTIONS.find((option) => option.value === value)?.label;
37+
};
38+
39+
export const getUsecaseType = (value: string) => {
40+
return USECASE_OPTIONS.find((option) => option.value === value)?.label;
41+
};
42+

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,10 @@ export const useGetProjectFiles = (paths: string[]) => {
166166
},
167167
body: JSON.stringify(params),
168168
});
169+
if (resp.status !== 200) {
170+
const body_error = await resp.json();
171+
throw new Error('Error fetching dataset size' + get(body_error, 'error'));
172+
}
169173
const body = await resp.json();
170174
return get(body, 'dataset_size');
171175
}
@@ -197,6 +201,7 @@ export const useDatasetSize = (
197201
},
198202
);
199203

204+
console.log('--------------error', error);
200205
if (isError) {
201206
console.log('data', error);
202207
notification.error({

‎app/client/src/pages/DatasetDetails/ConfigurationTab.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import get from 'lodash/get';
2+
import isEmpty from 'lodash/isEmpty';
3+
import React from 'react';
4+
import { Dataset } from '../Evaluator/types';
5+
import { Col, Flex, Modal, Row, Space, Table, Tag, Typography } from 'antd';
6+
import ExampleModal from './ExampleModal';
7+
import { QuestionSolution } from '../DataGenerator/types';
8+
import styled from 'styled-components';
9+
10+
const { Text } = Typography;
11+
12+
interface Props {
13+
dataset: Dataset;
14+
}
15+
16+
const StyledTable = styled(Table)`
17+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
18+
color: #5a656d;
19+
.ant-table-thead > tr > th {
20+
color: #5a656d;
21+
border-bottom: 1px solid #eaebec;
22+
font-weight: 500;
23+
text-align: left;
24+
// background: #ffffff;
25+
border-bottom: 1px solid #eaebec;
26+
transition: background 0.3s ease;
27+
}
28+
.ant-table-row {
29+
cursor: pointer;
30+
}
31+
.ant-table-row > td.ant-table-cell {
32+
padding: 8px;
33+
padding-left: 16px;
34+
font-size: 13px;
35+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
36+
color: #5a656d;
37+
.ant-typography {
38+
font-size: 13px;
39+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
40+
}
41+
}
42+
`;
43+
44+
const StyledTitle = styled.div`
45+
margin-bottom: 4px;
46+
font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
47+
font-size: 16px;
48+
font-weight: 500;
49+
margin-left: 4px;
50+
51+
`;
52+
53+
const Container = styled.div`
54+
padding: 16px;
55+
background-color: #ffffff;
56+
`;
57+
58+
export const TagsContainer = styled.div`
59+
min-height: 30px;
60+
display: block;
61+
margin-bottom: 4px;
62+
margin-top: 4px;
63+
.ant-tag {
64+
max-width: 150px;
65+
}
66+
.tag-title {
67+
overflow: hidden;
68+
white-space: nowrap;
69+
text-overflow: ellipsis;
70+
}
71+
`;
72+
73+
74+
const ConfigurationTab: React.FC<Props> = ({ dataset }) => {
75+
const topics = get(dataset, 'topics', []);
76+
77+
const exampleColummns = [
78+
{
79+
title: 'Prompts',
80+
dataIndex: 'prompts',
81+
ellipsis: true,
82+
render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.question}</>
83+
},
84+
{
85+
title: 'Completions',
86+
dataIndex: 'completions',
87+
ellipsis: true,
88+
render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.solution}</>
89+
},
90+
]
91+
92+
const parameterColummns = [
93+
{
94+
title: 'Temperature',
95+
dataIndex: 'temperature',
96+
ellipsis: true,
97+
render: (temperature: number) => <>{temperature}</>
98+
},
99+
{
100+
title: 'Top K',
101+
dataIndex: 'top_k',
102+
ellipsis: true,
103+
render: (top_k: number) => <>{top_k}</>
104+
},
105+
{
106+
title: 'Top P',
107+
dataIndex: 'top_p',
108+
ellipsis: true,
109+
render: (top_p: number) => <>{top_p}</>
110+
},
111+
112+
];
113+
console.log('topics:', topics);
114+
console.log('dataset:', dataset);
115+
console.log('examples:', dataset.examples);
116+
117+
return (
118+
<Container>
119+
<Row style={{ marginBottom: '16px', marginTop: '8px' }}>
120+
<Col sm={24}>
121+
<Flex vertical>
122+
<StyledTitle>Custom Prompt</StyledTitle>
123+
<Text copyable={{
124+
text: dataset?.custom_prompt,
125+
tooltips: ['Copy Prompt', 'Copied!'],
126+
}}>
127+
{dataset?.custom_prompt}
128+
</Text>
129+
</Flex>
130+
</Col>
131+
</Row>
132+
{!isEmpty(topics) &&
133+
<Row style={{ marginTop: '8px', marginBottom: '8px' }}>
134+
<Col sm={24}>
135+
<Flex vertical>
136+
<StyledTitle>Seed Instructions</StyledTitle>
137+
<TagsContainer>
138+
<Space size={[0, 'middle']} wrap>
139+
{topics.map((tag: string) => (
140+
<Tag key={tag}>
141+
<div className="tag-title" title={tag}>
142+
{tag}
143+
</div>
144+
</Tag>
145+
))}
146+
</Space>
147+
</TagsContainer>
148+
</Flex>
149+
</Col>
150+
</Row>}
151+
<Row style={{ marginTop: '16px', marginBottom: '8px' }}>
152+
<Col sm={24}>
153+
<Flex vertical>
154+
<StyledTitle>Examples</StyledTitle>
155+
<StyledTable
156+
bordered
157+
columns={exampleColummns}
158+
dataSource={dataset.examples || []}
159+
pagination={false}
160+
onRow={(record: { question: string, solution: string}) => ({
161+
onClick: () => Modal.info({
162+
title: 'View Details',
163+
content: <ExampleModal {...record} />,
164+
icon: undefined,
165+
maskClosable: false,
166+
width: 1000
167+
})
168+
})}
169+
rowKey={(_record, index) => `summary-examples-table-${index}`}
170+
/>
171+
</Flex>
172+
</Col>
173+
</Row>
174+
<Row style={{ marginTop: '16px' }}>
175+
<Col sm={24}>
176+
<Flex vertical>
177+
<StyledTitle>Parameters</StyledTitle>
178+
<StyledTable
179+
bordered
180+
columns={parameterColummns}
181+
dataSource={[dataset?.model_parameters]}
182+
pagination={false}
183+
rowKey={(_record, index) => `parameters-table-${index}`}
184+
/>
185+
</Flex>
186+
</Col>
187+
</Row>
188+
</Container>
189+
190+
);
191+
};
192+
193+
export default ConfigurationTab;
194+
195+

0 commit comments

Comments
 (0)