DSE-45878: Add Mute Checkbox for the Welcome Page

Fix Examples Table for Remote Templates
Fix mute checkbox margin top
Modify Examples
Fix rendering examples based on the selected use case

Author: Keivan Vosoughi

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

@@ -59,7 +59,6 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
   const [showModal, setShowModal] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const custom_prompt_instructions = Form.useWatch('custom_prompt_instructions', { form, preserve: true });
-  console.log('custom_prompt_instructions', custom_prompt_instructions);
 
   const mutation = useMutation({
     mutationFn: fetchCustomPrompt

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

@@ -9,14 +9,14 @@ import { useMutation } from "@tanstack/react-query";
 import { useFetchExamples } from '../../api/api';
 import TooltipIcon from '../../components/TooltipIcon';
 import PCModalContent from './PCModalContent';
-import { File, QuestionSolution, WorkflowType } from './types';
+import { ExampleType, File, QuestionSolution, WorkflowType } from './types';
 import FileSelectorButton from './FileSelectorButton';
 
-import { fetchFileContent } from './hooks';
+import { fetchFileContent, getExampleType, useGetExamplesByUseCase } from './hooks';
 import { useState } from 'react';
 import FreeFormExampleTable from './FreeFormExampleTable';
 
-const { Title } = Typography;
+const { Title, Text } = Typography;
 const Container = styled.div`
     padding-bottom: 10px
 `
@@ -48,10 +48,7 @@ const StyledContainer = styled.div`
 
 const MAX_EXAMPLES = 5;
 
-enum ExampleType {
-  FREE_FORM = 'freeform',
-  PROMPT_COMPLETION = 'promptcompletion'
-}
+
 
 const Examples: React.FC = () => {
     const form = Form.useFormInstance();
@@ -90,13 +87,13 @@ const Examples: React.FC = () => {
             title: 'Prompts',
             dataIndex: 'question',
             ellipsis: true,
-            render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.question}</>
+            render: (_text: QuestionSolution, record: QuestionSolution) => <Text>{record.question}</Text>
         },
         {
             title: 'Completions',
             dataIndex: 'solution',
             ellipsis: true,
-            render: (_text: QuestionSolution, record: QuestionSolution) => <>{record.solution}</>
+            render: (_text: QuestionSolution, record: QuestionSolution) => <Text>{record.solution}</Text>
         },
         {
             title: 'Actions',
@@ -178,13 +175,24 @@ const Examples: React.FC = () => {
                         />
                     </Flex>
             )
-        }},
+        }
+    },
     ];
     const dataSource = Form.useWatch('examples', form);
-    const { data: examples, loading: examplesLoading } = useFetchExamples(form.getFieldValue('use_case'));
+    const { examples, exmpleFormat, isLoading: examplesLoading } = 
+        useGetExamplesByUseCase(form.getFieldValue('use_case'));
+    
+    // update examples
     if (!dataSource && examples) {
-        form.setFieldValue('examples', examples.examples)
+        form.setFieldValue('examples', examples)
     }
+    useEffect(() => {
+        if (!isEmpty(examples) && !isEmpty(exmpleFormat)) {
+            setExampleType(exmpleFormat as ExampleType);
+            form.setFieldValue('examples', examples || []);
+        }
+    }, [examples, exmpleFormat]);
+    
     const rowLimitReached = form.getFieldValue('examples')?.length === MAX_EXAMPLES;
     const workflowType = form.getFieldValue('workflow_type');
 
@@ -299,6 +307,8 @@ const Examples: React.FC = () => {
             </Header>
             {exampleType === ExampleType.FREE_FORM && !isEmpty(mutation.data) && 
               <FreeFormExampleTable  data={mutation.data}/>}
+            {exampleType === ExampleType.FREE_FORM && form.getFieldValue('use_case') === 'lending_data' && 
+              <FreeFormExampleTable  data={form.getFieldValue('examples')}/>}  
             {exampleType === ExampleType.FREE_FORM && isEmpty(mutation.data) && !isEmpty(values.examples) && 
               <FreeFormExampleTable  data={values.examples}/>}  
             {exampleType === ExampleType.FREE_FORM && isEmpty(mutation.data) && isEmpty(values.examples) &&

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

@@ -10,18 +10,15 @@ interface Props {}
 const UseCaseSelector: FunctionComponent<Props> = () => {
   const [useCases, setUseCases] = useState<UseCase[]>([]);
   const useCasesReq = useGetUseCases();  
-  console.log('useCasesReq', useCasesReq);
 
   useEffect(() => {
     if (useCasesReq.data) {
-        console.log('useCasesReq.data', useCasesReq.data);
         let _useCases = get(useCasesReq, 'data.usecases', []);
         _useCases = _useCases.map((useCase: any) => ({ 
             ...useCase,
             label: useCase.name, 
             value: useCase.id 
         }));
-        console.log('_useCases', _useCases);
         setUseCases(_useCases);
     }
   }, [useCasesReq.data]);
@@ -34,7 +31,7 @@ const UseCaseSelector: FunctionComponent<Props> = () => {
         rules={[
             { required: true }
         ]}
-        tooltip='A specialize template for generating your dataset'
+        tooltip='A specialized template for generating your dataset'
         labelCol={{
             span: 8
         }}

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

@@ -4,7 +4,8 @@ import toNumber from 'lodash/toNumber';
 import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { WorkflowType } from './types';
+import { ExampleType, WorkflowType } from './types';
+import { first } from 'lodash';
 
 const BASE_API_URL = import.meta.env.VITE_AMP_URL;
 
@@ -257,7 +258,7 @@ export const useDatasetSize = (
 export const useGetUseCases = () => {
     const { data, isLoading, isError, error, isFetching } = useQuery(
         {
-            queryKey: ['fetchUseCases', fetchUseCases],
+            queryKey: ['useCases'],
             queryFn: () => fetchUseCases(),
             refetchOnWindowFocus: false,
         }
@@ -268,4 +269,59 @@ export const useGetUseCases = () => {
       isError,
       error    
     };
-}
+}
+
+export const fetchExamplesByUseCase = async (use_case: string) => {
+    const resp = await fetch(`${BASE_API_URL}/${isEmpty(use_case) ? 'custom' : use_case}/gen_examples`, {
+        method: 'GET'
+    });
+    const body = await resp.json();
+    return body;
+}
+
+export const useGetExamplesByUseCase = (use_case: string) => {
+    const { data, isLoading, isError, error, isFetching } = useQuery(
+        {
+            queryKey: ['fetchUseCaseTopics', fetchExamplesByUseCase],
+            queryFn: () => fetchExamplesByUseCase(use_case),
+            refetchOnWindowFocus: false,
+        }
+    );
+
+    if (isError) {
+        notification.error({
+          message: 'Error',
+          description: `An error occurred while fetching the use case examples.\n ${error?.message}`
+        });
+    }
+    
+    
+    let examples = [];
+    let exmpleFormat: ExampleType | null = null;
+    if (!isEmpty(data) && !isEmpty(data?.examples)) {
+        examples = get(data, 'examples', []);
+        exmpleFormat = getExampleType(examples);
+    }
+
+    return {
+      data,
+      isLoading: isLoading || isFetching,
+      isError,
+      error,
+      examples,
+      exmpleFormat
+    };
+} 
+
+export const getExampleType = (data: object[]) => {
+    if (!isEmpty(data)) {
+        const row = first(data);
+        const keys = Object.keys(row as object);
+        if (keys.length === 2) {
+            return ExampleType.PROMPT_COMPLETION;
+        }
+        return ExampleType.FREE_FORM;
+    }
+    return null;    
+}
+

app/client/src/pages/DataGenerator/types.ts

@@ -119,4 +119,9 @@ export enum TechniqueType {
     SFT = 'sft',
     CUSTOME_WORKFLOW = 'custom_workflow',
     FREE_FORM = 'freeform'
+}
+
+export enum ExampleType {
+    FREE_FORM = 'freeform',
+    PROMPT_COMPLETION = 'promptcompletion'
 }

app/client/src/pages/Home/WelcomePage.tsx

@@ -1,10 +1,12 @@
-import { Button, Col, Flex, Layout, Row, Image } from 'antd';
+import toString from 'lodash/toString';
+import { Button, Col, Flex, Layout, Row, Image, Checkbox } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 import SDGIcon from '../../assets/sdg-landing.svg';
 import LightBulbIcon from '../../assets/ic-lightbulb.svg';
 import QueryPromptIcon from '../../assets/ic-query-prompt.svg';
 import NumbersIcon from '../../assets/ic-numbers.svg';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
 
 const { Content } = Layout;
 
@@ -107,6 +109,11 @@ const InfoSection = styled.div`
 
 const WelcomePage: React.FC = () => {
 
+    const onChange = (e: CheckboxChangeEvent) => {
+        const checked = e.target.checked;
+        window.localStorage.setItem('sds_mute_welcome_page', toString(checked));
+    }
+
     return (
         <Layout>
             <StyledContent>
@@ -148,6 +155,10 @@ const WelcomePage: React.FC = () => {
                         <br/>
                         <Flex style={{ marginTop: '32px' }}>
                             <Button type="primary" href="/home">Get Started</Button>
+
+                            <div style={{ marginLeft: '24px', marginTop: '8px' }}>
+                                <Checkbox onChange={onChange}>{`Don't show me this again`}</Checkbox>
+                            </div>
                         </Flex>
                     </LeftSection>
                     </Col>

app/client/src/routes.tsx

@@ -12,14 +12,20 @@ import EvaluationDetailsPage from "./pages/EvaluationDetails/EvaluationDetailsPa
 //import TelemetryDashboard from "./components/TelemetryDashboard";
 
 
+const isWelcomePageMuted = () => {
+  return  window.localStorage.getItem('sds_mute_welcome_page') === 'true';
+}
+
 const router = createBrowserRouter([
   {
     path: '/',
     element: <Layout/>,
     children: [
       {
         path: '/', // Redirect root to Pages.WELCOME
-        element: <Navigate to={Pages.WELCOME} replace />,
+        element: isWelcomePageMuted() ? <HomePage key={Pages.HOME}/> :
+        <Navigate to={Pages.WELCOME} replace />,
+        errorElement: <ErrorPage />
       },
       { 
         path: Pages.HOME,