Dataset Details Page

Add Generation Table Add Dataset Details Page Add Upgrade Button & Check Status Mechanism Add Custom Prompt to the Deatils Page Add Evaluation Details Fix for brand title color Testing Upgrade Fix Custom Prompt for Evaluator Fix for Fetch Model Parameters Adding Error Messages for Evaluate & Re-evaluate Adjust Upgrade Look & Feel Upgrade Loading Fix for Upgrade Message
cloudera · vkeivan · Feb 11, 2025 · Feb 11, 2025 · Feb 11, 2025 · Feb 11, 2025
commit 85bb2cde8f1d615824d4a8431ac792df3a96205f
diff --git a/app/client/src/Container.tsx b/app/client/src/Container.tsx
@@ -10,6 +10,8 @@ import { Pages } from './types';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import React, { useMemo } from 'react';
 import { GithubOutlined, MailOutlined } from '@ant-design/icons';
+import { Upgrade } from '@mui/icons-material';
+import UpgradeButton from './pages/Home/UpgradeButton';
 
 const { Text } = Typography;
 const { Header, Content } = Layout;
@@ -38,7 +40,7 @@ const BrandingTitle = styled(Typography)`
     line-height: 0.75;
     letter-spacing: normal;
     text-align: left;
-    color: #fff;
+    color: rgba(255, 255, 255, 0.65);
 `
 const BrandingTextContainer = styled(Flex)`
   padding-top: 5px;
@@ -86,7 +88,12 @@ const pages: MenuItem[] = [
           <Button type="link" icon={<MailOutlined />}>
           <Text copyable={{ text: '[email protected]' }} style={{ color: '#1677ff' }}>[email protected]</Text>         
           </Button>
-          <Button type="link" icon={<GithubOutlined target = "_blank" />} href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">Join the discussion on GitHub</Button>
+          <div style={{ margin: 'auto' }}>
+            <a type="link" target="_blank" rel="noopener noreferrer" href="https://github.com/cloudera/CAI_AMP_Synthetic_Data_Studio/discussions">
+              <GithubOutlined />
+              <span style={{ marginLeft: '4px' }}>Join the discussion on GitHub</span>
+            </a>
+          </div>
           </Flex>
           <br/>
         </div>
@@ -96,10 +103,17 @@ const pages: MenuItem[] = [
           <span style={{ color: 'rgba(255, 255, 255, 0.65)'}}>{LABELS[Pages.FEEDBACK]}</span>
         </Button>
       </Popover>
-    ),
+    )
+  }, 
+  {
+    key: Pages.UPGRADE,
+    label: (
+      <UpgradeButton />
+    )
   }
 ]
 
+
 const NotificationContext = React.createContext({messagePlacement: 'topRight'});
 
 const Container = () => {
@@ -128,7 +142,6 @@ const Container = () => {
                   disabledOverflow={true}
                   items={pages}
                   mode="horizontal"
-                  // onClick={handleMenuClick}
                   selectable={false}
                   selectedKeys={[location.pathname]}
                   theme="dark"

diff --git a/app/client/src/pages/DataGenerator/Parameters.tsx b/app/client/src/pages/DataGenerator/Parameters.tsx
@@ -84,9 +84,10 @@ const Parameters = () => {
         form.setFieldsValue({ model_parameters: { [field]: value }});
     };
 
-    if (loadingDefaultParams) {
-        return <Spin/>
-    }
+    // if (loadingDefaultParams) {
+    //     return <Spin/>
+    // }
+
     return (
         <>
             <Divider />

diff --git a/app/client/src/pages/DataGenerator/Prompt.tsx b/app/client/src/pages/DataGenerator/Prompt.tsx
@@ -14,6 +14,7 @@ import { Usecases, WorkflowType } from './types';
 import { useWizardCtx } from './utils';
 import { useDatasetSize, useGetPromptByUseCase } from './hooks';
 import CustomPromptButton from './CustomPromptButton';
+import get from 'lodash/get';
 
 const { Title } = Typography;
 
@@ -81,14 +82,24 @@ const Prompt = () => {
     // Page Bootstrap requests and useEffect
     const { data: defaultTopics, loading: topicsLoading } = usefetchTopics(useCase);
     const { data: defaultSchema, loading: schemaLoading } = useFetchDefaultSchema();
-    const { data: dataset_size, isLoading: datasetSizeLoading } = useDatasetSize(
+    const { data: dataset_size, isLoading: datasetSizeLoadin, isError, error } = useDatasetSize(
         workflow_type,
         doc_paths,
         input_key,
         input_value,
         output_key
     );
 
+    useEffect(() => {  
+        if (isError) {
+            notification.error({
+                message: 'Error fetching the dataset size',
+                description: get(error, 'error'),
+            });
+        } 
+
+    }, [error, isError]);
+
     useEffect(() => {
         if (defaultTopics) {
             // customTopics is a client-side only fieldValue that persists custom topics added

diff --git a/app/client/src/pages/DataGenerator/constants.ts b/app/client/src/pages/DataGenerator/constants.ts
@@ -1,4 +1,4 @@
-import { ModelProviders } from './types';
+import { ModelProviders, ModelProvidersDropdownOpts } from './types';
 
 export const MODEL_PROVIDER_LABELS = {
   [ModelProviders.BEDROCK]: 'AWS Bedrock',
@@ -8,4 +8,35 @@ export const MODEL_PROVIDER_LABELS = {
 export const MIN_SEED_INSTRUCTIONS = 1
 export const MAX_SEED_INSTRUCTIONS = 500;
 export const MAX_NUM_QUESTION = 100; 
-export const DEMO_MODE_THRESHOLD = 25
+export const DEMO_MODE_THRESHOLD = 25;
+
+
+export const USECASE_OPTIONS = [
+    { label: 'Code Generation', value: 'code_generation' },
+    { label: 'Text to SQL', value: 'text2sql' },
+    { label: 'Custom', value: 'custom' }
+];
+
+export const WORKFLOW_OPTIONS = [
+    { label: 'Supervised Fine-Tuning', value: 'sft' },
+    { label: 'Custom Data Generation', value: 'custom' }
+];
+
+export const MODEL_TYPE_OPTIONS: ModelProvidersDropdownOpts = [
+    { label: MODEL_PROVIDER_LABELS[ModelProviders.BEDROCK], value: ModelProviders.BEDROCK},
+    { label: MODEL_PROVIDER_LABELS[ModelProviders.CAII], value: ModelProviders.CAII },
+];
+
+
+export const getModelProvider = (provider: ModelProviders) => {
+    return MODEL_PROVIDER_LABELS[provider];
+};
+
+export const getWorkflowType = (value: string) => {
+    return WORKFLOW_OPTIONS.find((option) => option.value === value)?.label;
+};
+
+export const getUsecaseType = (value: string) => {
+    return USECASE_OPTIONS.find((option) => option.value === value)?.label;
+};
+
diff --git a/app/client/src/pages/DataGenerator/hooks.ts b/app/client/src/pages/DataGenerator/hooks.ts
@@ -166,6 +166,10 @@ export const useGetProjectFiles = (paths: string[]) => {
         },
         body: JSON.stringify(params),
     });
+    if (resp.status !== 200) {
+        const body_error = await resp.json();
+        throw new Error('Error fetching dataset size' + get(body_error, 'error'));
+    }
     const body = await resp.json();
     return get(body, 'dataset_size');
 }
@@ -197,6 +201,7 @@ export const useDatasetSize = (
         },
     );
 
+    console.log('--------------error', error);
     if (isError) {
         console.log('data', error);
         notification.error({

diff --git a/app/client/src/pages/DatasetDetails/ConfigurationTab.tsx b/app/client/src/pages/DatasetDetails/ConfigurationTab.tsx
@@ -0,0 +1,195 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import React from 'react';
+import { Dataset } from '../Evaluator/types';
+import { Col, Flex, Modal, Row, Space, Table, Tag, Typography } from 'antd';
+import ExampleModal from './ExampleModal';
+import { QuestionSolution } from '../DataGenerator/types';
+import styled from 'styled-components';
+
+const { Text } = Typography;
+
+interface Props {
+    dataset: Dataset;
+}
+
+const StyledTable = styled(Table)`
+  font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+  color:  #5a656d;
+  .ant-table-thead > tr > th {
+    color: #5a656d;
+    border-bottom: 1px solid #eaebec;
+    font-weight: 500;
+    text-align: left;
+    // background: #ffffff;
+    border-bottom: 1px solid #eaebec;
+    transition: background 0.3s ease; 
+  }
+    .ant-table-row {
+        cursor: pointer;
+    }
+  .ant-table-row > td.ant-table-cell {
+    padding: 8px;
+    padding-left: 16px;
+    font-size: 13px;
+    font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+    color:  #5a656d;
+    .ant-typography {
+      font-size: 13px;
+      font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+    }
+  }
+`;
+
+const StyledTitle = styled.div`
+    margin-bottom: 4px;
+    font-family: Roboto, -apple-system, 'Segoe UI', sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    margin-left: 4px;
+
+`;
+
+const Container = styled.div`  
+   padding: 16px;
+   background-color: #ffffff;
+`;
+
+export const TagsContainer = styled.div`
+  min-height: 30px;
+  display: block;
+  margin-bottom: 4px;
+  margin-top: 4px;
+  .ant-tag {
+    max-width: 150px;
+  }
+  .tag-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+`;
+
+
+const ConfigurationTab: React.FC<Props> = ({ dataset }) => {
+    const topics = get(dataset, 'topics', []);
+
+    const exampleColummns = [
+        {
+            title: 'Prompts',
+            dataIndex: 'prompts',
+            ellipsis: true,
+            render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.question}</>
+        },
+        {
+            title: 'Completions',
+            dataIndex: 'completions',
+            ellipsis: true,
+            render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.solution}</>
+        },
+    ]
+
+    const parameterColummns = [ 
+        {
+            title: 'Temperature',
+            dataIndex: 'temperature',
+            ellipsis: true,
+            render: (temperature: number) => <>{temperature}</>
+        },
+        {
+            title: 'Top K',
+            dataIndex: 'top_k',
+            ellipsis: true,
+            render: (top_k: number) => <>{top_k}</>
+        },
+        {
+            title: 'Top P',
+            dataIndex: 'top_p',
+            ellipsis: true,
+            render: (top_p: number) => <>{top_p}</>
+        },
+
+    ];
+    console.log('topics:', topics);
+    console.log('dataset:', dataset);
+    console.log('examples:', dataset.examples);
+
+    return (
+        <Container>
+            <Row style={{ marginBottom: '16px', marginTop: '8px'  }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Custom Prompt</StyledTitle>
+                        <Text copyable={{
+                            text: dataset?.custom_prompt,
+                            tooltips: ['Copy Prompt', 'Copied!'],
+                        }}>
+                            {dataset?.custom_prompt}
+                        </Text>
+                    </Flex>
+                </Col>
+            </Row>    
+            {!isEmpty(topics) && 
+            <Row style={{ marginTop: '8px', marginBottom: '8px' }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Seed Instructions</StyledTitle>
+                        <TagsContainer>
+                            <Space size={[0, 'middle']} wrap>
+                                {topics.map((tag: string) => (
+                                    <Tag key={tag}>
+                                        <div className="tag-title" title={tag}>
+                                            {tag}
+                                        </div>
+                                    </Tag>
+                                ))}
+                            </Space>
+                        </TagsContainer>        
+                    </Flex>
+                </Col>
+            </Row>}            
+            <Row style={{ marginTop: '16px', marginBottom: '8px' }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Examples</StyledTitle>
+                        <StyledTable
+                            bordered
+                            columns={exampleColummns}
+                            dataSource={dataset.examples || []}
+                            pagination={false}
+                            onRow={(record: { question: string, solution: string}) => ({
+                                onClick: () => Modal.info({
+                                    title: 'View Details',
+                                    content: <ExampleModal {...record} />,
+                                    icon: undefined,
+                                    maskClosable: false,
+                                    width: 1000
+                                })
+                             })}
+                            rowKey={(_record, index) => `summary-examples-table-${index}`}
+                        />
+                    </Flex>
+                </Col>
+            </Row>
+            <Row style={{ marginTop: '16px' }}>
+                <Col sm={24}>
+                    <Flex vertical>
+                        <StyledTitle>Parameters</StyledTitle>
+                        <StyledTable
+                            bordered
+                            columns={parameterColummns}
+                            dataSource={[dataset?.model_parameters]}
+                            pagination={false}
+                            rowKey={(_record, index) => `parameters-table-${index}`}
+                        />
+                    </Flex>
+                </Col>
+            </Row>
+        </Container>
+
+    );
+};
+
+export default ConfigurationTab;
+
+