Skip to content

fix: minor update to DataGenerator Configure component for consistenc… #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vkeivan merged 1 commit into from
Jul 25, 2025
Merged

fix: minor update to DataGenerator Configure component for consistenc… #103

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions app/client/src/pages/DataGenerator/Configure.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import FileSelectorButton from './FileSelectorButton';
import UseCaseSelector from './UseCaseSelector';
import { useLocation, useParams } from 'react-router-dom';
import { WizardModeType } from '../../types';
import { get } from 'lodash';


const StepContainer = styled(Flex)`
Expand Down Expand Up @@ -96,10 +95,13 @@ const Configure = () => {
validateForm()
}, [form, formData])

// keivan

useEffect(() => {
if (formData && formData?.inference_type === undefined && isEmpty(generate_file_name)) {
form.setFieldValue('inference_type', ModelProviders.CAII);
setTimeout(() => {
form.setFieldValue('use_case','custom');
}, 1000);
}
}, [formData]);

Expand Down Expand Up @@ -251,18 +253,19 @@ const Configure = () => {
</Form.Item>
{(formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING ||
formData?.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION) &&
<UseCaseSelector />}
<UseCaseSelector form={form} />}

{(
formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING ||
formData?.workflow_type === WorkflowType.CUSTOM_DATA_GENERATION) &&
<Form.Item
name='doc_paths'
label='Context'
label='Input File'
labelCol={labelCol}
dependencies={['workflow_type']}
shouldUpdate
validateTrigger="['onBlur','onChange']"
tooltip='Select a file from your project that contains the initial data to be augmented.'
validateFirst
rules={[
() => ({
Expand Down Expand Up @@ -307,6 +310,7 @@ const Configure = () => {
label='Input Key'
labelCol={labelCol}
validateTrigger={['workflow_type', 'onChange']}
tooltip='Choose the key or column from your uploaded file that will be used as the input for data generation.'
shouldUpdate
rules={[
() => ({
Expand All @@ -330,6 +334,7 @@ const Configure = () => {
name='output_key'
label='Output Key'
labelCol={labelCol}
tooltip='Name the value or column where the prompts will be saved. If left blank, this will default to “Prompt".'
shouldUpdate
>
<Input />
Expand All @@ -338,6 +343,7 @@ const Configure = () => {
name='output_value'
label='Output Value'
labelCol={labelCol}
tooltip='Enter the name for the generated values corresponding to each input. If left blank, this will default to “Completion”.'
shouldUpdate
>
<Input />
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/DataGenerator/CustomPromptButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
disabled={mutation.isPending}
rows={15}
autoSize
placeholder={'Enter instructions for a custom prompt'}
placeholder={'Generate prompt from the example data'}
/>
</Form.Item>
</Form>
Expand Down
45 changes: 30 additions & 15 deletions app/client/src/pages/DataGenerator/Examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import PCModalContent from './PCModalContent';
import { ExampleType, File, QuestionSolution, WorkflowType } from './types';
import FileSelectorButton from './FileSelectorButton';

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

const mutation = useMutation({
mutationFn: fetchFileContent
});

const restore_mutation = useMutation({
mutationFn: fetchExamplesByUseCase
});

useEffect(() => {
const useCase = form.getFieldValue('use_case');
restore_mutation.mutate(useCase);
}, [form.getFieldValue('use_case')]);


useEffect(() => {
const example_path = form.getFieldValue('example_path');
if (!isEmpty(example_path)) {
Expand All @@ -70,21 +78,28 @@ const Examples: FunctionComponent = () => {
}
}, [form.getFieldValue('example_path'), form.getFieldValue('workflow_type')]);

useEffect(() => {
console.log('------------------> useEffect')
useEffect(() => {
if (!isEmpty(mutation.data)) {
form.setFieldValue('examples', mutation.data);
if (!isEqual(mutation.data, records)) {
setRecords(mutation.data);
}

} else if (Array.isArray(examples) && !isEqual(examples, records)) {
}
}, [mutation.data]);

useEffect(() => {
if (!isEmpty(restore_mutation.data)) {
const examples = get(restore_mutation.data, 'examples', []);
form.setFieldValue('examples', examples);
setRecords(examples);
}
}, [mutation.data, examples]);

}, [restore_mutation.data]);

const onRestoreDefaults = async() => {
const useCase = form.getFieldValue('use_case');
restore_mutation.mutate(useCase);
}

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

const showEmptyState = workflowType === WorkflowType.FREE_FORM_DATA_GENERATION &&
const showEmptyState = (workflowType === WorkflowType.FREE_FORM_DATA_GENERATION &&
isEmpty(mutation.data) &&
records.length === 0;
records.length === 0) ||
(form.getFieldValue('use_case') === 'custom' &&
isEmpty(form.getFieldValue('examples')));

console.log('examples', form.getFieldValue('examples'));
console.log('records', records);

return (
<Container>
{examplesLoading && <Loading />}
{mutation?.isPending || restore_mutation.isPending && <Loading />}
<Header align='center' justify='space-between'>
<StyledTitle level={3}>
<Space>
Expand Down Expand Up @@ -149,8 +164,8 @@ const Examples: FunctionComponent = () => {
<ModalButtonGroup gap={8} justify='end'>
<Button onClick={() => Modal.destroyAll()}>{'Cancel'}</Button>
<Button
onClick={() => {
refetch();
onClick={async () => {
await onRestoreDefaults();
Modal.destroyAll();
}}
type='primary'
Expand Down
1 change: 1 addition & 0 deletions app/client/src/pages/DataGenerator/hooks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,7 @@ export const fetchExamplesByUseCase = async (use_case: string) => {
}

export const useGetExamplesByUseCase = (use_case: string) => {
console.log('------------------> useGetExamplesByUseCase', use_case);
const { data, isLoading, isError, error, isFetching, refetch } = useQuery(
{
queryKey: ['fetchUseCaseTopics', fetchExamplesByUseCase],
Expand Down
25 changes: 18 additions & 7 deletions app/client/src/pages/Home/EvaluateSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Form, Modal, Select } from "antd";
import { Button, Form, Modal, Select } from "antd";
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from "react";
import { useDatasets } from "./hooks";
Expand All @@ -8,6 +8,7 @@ import { HeaderSection } from "./HomePage";
import { Dataset } from "../Evaluator/types";
import { Pages } from "../../types";
import EvaluateIcon from '../../assets/ic-brand-inventory-ordering.svg';
import ArrowRightIcon from '../../assets/ic-arrow-right.svg';


const EvaluateSection: React.FC = () => {
Expand Down Expand Up @@ -57,13 +58,23 @@ const EvaluateSection: React.FC = () => {
return (
<>
<HeaderSection style={{ marginLeft: '1rem' }} onClick={onClick}>
<div className="left-section evaluate-icon">
<img src={EvaluateIcon} alt="evaluation" />
<div className="top-section">
<div className="left-section evaluate-icon">
<img src={EvaluateIcon} alt="evaluation" />
</div>
<div className="middle-section">
<div className="section-title">Evaluation</div>
<div className="section-description">
Use LLMs to score and filter your synthetic data. Keep only high-quality results.
</div>
</div>
</div>
<div className="middle-section">
<div className="section-title">Evaluation</div>
<div className="section-description">
Use LLMs to score and filter your synthetic data. Keep only high-quality results.
<div className="bottom-section">
<div>
<Button onClick={onClick}>
Get Started
<img src={ArrowRightIcon} alt="Get Started" />
</Button>
</div>
</div>
</HeaderSection>
Expand Down
51 changes: 43 additions & 8 deletions app/client/src/pages/Home/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import styled from 'styled-components';
import { Card, Col, Flex, Layout, Row, Tabs } from 'antd'
import { Button, Card, Col, Flex, Layout, Row, Tabs } from 'antd'
import type { TabsProps } from 'antd';
import DatasetsTab from './DatasetsTab';
import EvaluationsTab from './EvaluationsTab';
Expand All @@ -10,6 +10,7 @@ import ExportsTab from './ExportsTab';
import TemplatesSection from './TemplatesSection';
import { useNavigate } from 'react-router-dom';
import EvaluateSection from './EvaluateSection';
import ArrowRightIcon from '../../assets/ic-arrow-right.svg';


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

export const HeaderSection = styled.div`
display: flex;
flex-direction: column;
margin-bottom: 1rem;
height: 100px;
height: 150px;
width: 50%;
padding: 16px;
background-color: #ffffff;
cursor: pointer;
.top-section {
display: flex;
flex-direction: row;
}
.bottom-section {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 8px;
}
.left-section {
width: 66px;
height: 46px;
Expand Down Expand Up @@ -66,6 +78,7 @@ export const HeaderSection = styled.div`
letter-spacing: normal;
text-align: left;
color: #1b2329;
min-height: 50px;
}
}
.right-section {
Expand Down Expand Up @@ -114,6 +127,7 @@ const HomePage: React.FC = () => {
<StyledContent>
<Flex>
<HeaderSection onClick={() => navigate('/data-generator')}>
<div className="top-section">
<div className="left-section">
<img src={DatasetIcon} alt="Datasets" />
</div>
Expand All @@ -123,16 +137,37 @@ const HomePage: React.FC = () => {
Create synthetic data from scratch using examples, documents, seed instructions and AI assisted prompts.
</div>
</div>
</div>

<div className="bottom-section">
<div>
<Button href="/data-generator">
Get Started
<img src={ArrowRightIcon} alt="Get Started" />
</Button>
</div>
</div>
</HeaderSection>

<HeaderSection style={{ marginLeft: '1rem' }} onClick={() => navigate('/data-augmentation')}>
<div className="left-section" style={{ padding: '5px' }}>
<img src={DataAugmentationIcon} alt="augmentation" />
<div className="top-section">
<div className="left-section" style={{ padding: '5px' }}>
<img src={DataAugmentationIcon} alt="augmentation" />
</div>
<div className="middle-section">
<div className="section-title">Augmentation</div>
<div className="section-description">
Add synthetic rows or field to existing data to fill gaps or balance datasets such as language translations.
</div>
</div>
</div>
<div className="middle-section">
<div className="section-title">Augmentation</div>
<div className="section-description">
Add synthetic rows or field to existing data to fill gaps or balance datasets such as language translations.

<div className="bottom-section">
<div>
<Button href="/data-augmentation">
Get Started
<img src={ArrowRightIcon} alt="Get Started" />
</Button>
</div>
</div>
</HeaderSection>
Expand Down