DSE-45299: Fetching Templates from SDS API for SDS UI

Add UseCaseSlector

Author: Keivan Vosoughi

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

@@ -10,6 +10,7 @@ import { MODEL_PROVIDER_LABELS } from './constants';
 import { ModelProviders, ModelProvidersDropdownOpts } from './types';
 import { useWizardCtx } from './utils';
 import FileSelectorButton from './FileSelectorButton';
+import UseCaseSelector from './UseCaseSelector';
 
 
 const StepContainer = styled(Flex)`
@@ -224,24 +225,7 @@ const Configure = () => {
                 </Form.Item>
                 {(formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING || 
                  formData?.workflow_type === WorkflowType.FREE_FORM_DATA_GENERATION) && 
-                <Form.Item
-                    name='use_case'
-                    label='Template'
-                    rules={[
-                        { required: true }
-                    ]}
-                    tooltip='A specialize template for generating your dataset'
-                    labelCol={labelCol}
-                    shouldUpdate
-                >
-                    <Select placeholder={'Select a template'}>
-                        {USECASE_OPTIONS.map(option => 
-                            <Select.Option key={option.value} value={option.value}>
-                                {option.label}
-                            </Select.Option>
-                        )}
-                    </Select>
-                </Form.Item>}
+                 <UseCaseSelector />}
 
                 {(
                     formData?.workflow_type === WorkflowType.SUPERVISED_FINE_TUNING || 

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

@@ -0,0 +1,54 @@
+import { Form, Select } from "antd";
+import { FunctionComponent, useEffect, useState } from "react";
+import { useGetUseCases } from "./hooks";
+import { UseCase } from "../../types";
+import get from "lodash/get";
+
+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]);
+
+
+  return (
+    <Form.Item
+        name='use_case'
+        label='Template'
+        rules={[
+            { required: true }
+        ]}
+        tooltip='A specialize template for generating your dataset'
+        labelCol={{
+            span: 8
+        }}
+        shouldUpdate
+        >
+            <Select placeholder={'Select a template'}>
+                {useCases.map(option => 
+                    <Select.Option key={option.value} value={option.value}>
+                        {option.label}
+                    </Select.Option>
+                )}
+            </Select>
+    </Form.Item>
+  );
+}
+
+export default UseCaseSelector;

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

@@ -244,4 +244,28 @@ export const useDatasetSize = (
       isError,
       error    
     };
- }
+ }
+
+ export const fetchUseCases = async () => {
+    const resp = await fetch(`${BASE_API_URL}/use-cases`, {
+        method: 'GET'
+    });
+    const body = await resp.json();
+    return body;
+}
+
+export const useGetUseCases = () => {
+    const { data, isLoading, isError, error, isFetching } = useQuery(
+        {
+            queryKey: ['fetchUseCases', fetchUseCases],
+            queryFn: () => fetchUseCases(),
+            refetchOnWindowFocus: false,
+        }
+    );
+    return {
+      data,
+      isLoading: isLoading || isFetching,
+      isError,
+      error    
+    };
+}

app/client/src/types.ts

@@ -45,4 +45,11 @@ export const EXPORT_TYPE_LABELS: Record<ExportType, string> = {
 export type JobStatus = 'ENGINE_STOPPED' | 'ENGINE_SUCCEEDED' | 'ENGINE_TIMEDOUT' | 'ENGINE_SCHEDULING' | 'ENGINE_RUNNING' | 'null' | 'default';
 
 
-export const HuggingFaceIconUrl = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg";
+export const HuggingFaceIconUrl = "https://huggingface.co/front/assets/huggingface_logo-noborder.svg";
+
+export interface UseCase {
+    name: string;
+    id: string;
+    label: string;
+    value: string;
+}