pipeline preview

web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx

@@ -13,6 +13,7 @@ const BuiltInPipelineList = () => {
       {list.map((pipeline, index) => (
         <TemplateCard
           key={index}
+          type='built-in'
           pipeline={pipeline}
           showMoreOperations={false}
         />

web/app/components/datasets/create-from-pipeline/list/customized-list.tsx

@@ -13,6 +13,7 @@ const CustomizedList = () => {
       {list.map((pipeline, index) => (
         <TemplateCard
           key={index}
+          type='customized'
           pipeline={pipeline}
         />
       ))}

web/app/components/datasets/create-from-pipeline/list/template-card/details.tsx

@@ -11,17 +11,19 @@ import WorkflowPreview from '@/app/components/workflow/workflow-preview'
 
 type DetailsProps = {
   id: string
+  type: 'customized' | 'built-in'
   onApplyTemplate: () => void
   onClose: () => void
 }
 
 const Details = ({
   id,
+  type,
   onApplyTemplate,
   onClose,
 }: DetailsProps) => {
   const { t } = useTranslation()
-  const { data: pipelineTemplateInfo } = usePipelineTemplateById(id, true)
+  const { data: pipelineTemplateInfo } = usePipelineTemplateById(id, type, true)
   const appIcon = React.useMemo(() => {
     if (!pipelineTemplateInfo)
       return { type: 'emoji', icon: '📙', background: '#FFF4ED' }
@@ -41,7 +43,7 @@ const Details = ({
     <div className='flex h-full'>
       <div className='flex grow items-center justify-center p-3 pr-0'>
         <WorkflowPreview
-          {...pipelineTemplateInfo.graph}
+          {...pipelineTemplateInfo.export_data.workflow.graph}
         />
       </div>
       <div className='relative flex w-[360px] shrink-0 flex-col'>

web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx

@@ -23,11 +23,13 @@ import CreateModal from './create-modal'
 type TemplateCardProps = {
   pipeline: PipelineTemplate
   showMoreOperations?: boolean
+  type: 'customized' | 'built-in'
 }
 
 const TemplateCard = ({
   pipeline,
   showMoreOperations = true,
+  type,
 }: TemplateCardProps) => {
   const { t } = useTranslation()
   const { push } = useRouter()
@@ -36,7 +38,7 @@ const TemplateCard = ({
   const [showDetailModal, setShowDetailModal] = useState(false)
   const [showCreateModal, setShowCreateModal] = useState(false)
 
-  const { refetch: getPipelineTemplateInfo } = usePipelineTemplateById(pipeline.id, false)
+  const { refetch: getPipelineTemplateInfo } = usePipelineTemplateById(pipeline.id, type, false)
   const { mutateAsync: createEmptyDataset } = useCreatePipelineDataset()
   const { handleCheckPluginDependencies } = usePluginDependencies()
 
@@ -179,6 +181,7 @@ const TemplateCard = ({
         >
           <Details
             id={pipeline.id}
+            type={type}
             onClose={closeDetailsModal}
             onApplyTemplate={openCreateModal}
           />

web/models/pipeline.ts

@@ -30,17 +30,23 @@ export type PipelineTemplateListResponse = {
 }
 
 export type PipelineTemplateByIdResponse = {
+  id: string
   name: string
   icon: IconInfo
   description: string
   author: string // todo: TBD
   structure: string // todo: TBD
-  graph: {
-    nodes: Node[]
-    edges: Edge[]
-    viewport: Viewport
+  export_data: {
+    workflow: {
+      graph: {
+        nodes: Node[]
+        edges: Edge[]
+        viewport: Viewport
+      }
+      environment_variables?: EnvironmentVariable[]
+      rag_pipeline_variables?: RAGPipelineVariables
+    }
   }
-  export_data: string
 }
 
 export type CreateFormData = {

web/service/use-pipeline.ts

@@ -42,11 +42,11 @@ export const usePipelineTemplateList = (params: PipelineTemplateListParams) => {
   })
 }
 
-export const usePipelineTemplateById = (templateId: string, enabled: boolean) => {
+export const usePipelineTemplateById = (templateId: string, type: string, enabled: boolean) => {
   return useQuery<PipelineTemplateByIdResponse>({
     queryKey: [NAME_SPACE, 'template', templateId],
     queryFn: () => {
-      return get<PipelineTemplateByIdResponse>(`/rag/pipeline/templates/${templateId}`)
+      return get<PipelineTemplateByIdResponse>(`/rag/pipeline/templates/${templateId}?type=${type}`)
     },
     enabled,
   })