pipeline template

web/app/components/rag-pipeline/hooks/use-pipeline-refresh-draft.ts

@@ -3,6 +3,7 @@ import { useWorkflowStore } from '@/app/components/workflow/store'
 import { fetchWorkflowDraft } from '@/service/workflow'
 import type { WorkflowDataUpdater } from '@/app/components/workflow/types'
 import { useWorkflowUpdate } from '@/app/components/workflow/hooks'
+import { processNodesWithoutDataSource } from '../utils'
 
 export const usePipelineRefreshDraft = () => {
   const workflowStore = useWorkflowStore()
@@ -18,7 +19,10 @@ export const usePipelineRefreshDraft = () => {
     } = workflowStore.getState()
     setIsSyncingWorkflowDraft(true)
     fetchWorkflowDraft(`/rag/pipelines/${pipelineId}/workflows/draft`).then((response) => {
-      handleUpdateWorkflowCanvas(response.graph as WorkflowDataUpdater)
+      handleUpdateWorkflowCanvas({
+        ...response.graph,
+        nodes: processNodesWithoutDataSource(response.graph.nodes),
+      } as WorkflowDataUpdater)
       setSyncWorkflowDraftHash(response.hash)
       setEnvSecrets((response.environment_variables || []).filter(env => env.value_type === 'secret').reduce((acc, env) => {
         acc[env.id] = env.value

web/app/components/rag-pipeline/hooks/use-pipeline-template.ts

@@ -15,7 +15,10 @@ export const usePipelineTemplate = () => {
       type: knowledgeBaseDefault.metaData.type,
       title: t(`workflow.blocks.${knowledgeBaseDefault.metaData.type}`),
     },
-    position: START_INITIAL_POSITION,
+    position: {
+      x: START_INITIAL_POSITION.x + 500,
+      y: START_INITIAL_POSITION.y,
+    },
   })
 
   return {

web/app/components/rag-pipeline/index.tsx

@@ -14,7 +14,6 @@ import RagPipelineMain from './components/rag-pipeline-main'
 import { usePipelineInit } from './hooks'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import Conversion from './components/conversion'
-import type { Node } from '@/app/components/workflow/types'
 import { processNodesWithoutDataSource } from './utils'
 
 const RagPipeline = () => {
@@ -23,11 +22,10 @@ const RagPipeline = () => {
     isLoading,
   } = usePipelineInit()
   const nodesData = useMemo(() => {
-    let result: Node[] = []
     if (data)
-      result = initialNodes(data.graph.nodes, data.graph.edges)
+      return processNodesWithoutDataSource(initialNodes(data.graph.nodes, data.graph.edges))
 
-    return processNodesWithoutDataSource(result)
+    return []
   }, [data])
   const edgesData = useMemo(() => {
     if (data)

web/app/components/rag-pipeline/utils/nodes.ts

@@ -8,8 +8,6 @@ import type { NoteNodeType } from '@/app/components/workflow/note-node/types'
 import { CUSTOM_NODE } from '@/app/components/workflow/constants'
 
 export const processNodesWithoutDataSource = (nodes: Node[]) => {
-  if (!nodes || nodes.length === 0) return []
-
   let leftNode
   let hasNoteBySystem
   for (let i = 0; i < nodes.length; i++) {
@@ -17,16 +15,13 @@ export const processNodesWithoutDataSource = (nodes: Node[]) => {
     if (node.type === CUSTOM_NOTE_NODE && node.data.noteBySystem)
       hasNoteBySystem = true
 
-    if (node.type !== CUSTOM_NODE)
-      continue
-
     if (node.data.type === BlockEnum.DataSource)
       return nodes
 
-    if (!leftNode)
+    if (node.type === CUSTOM_NODE && !leftNode)
       leftNode = node
 
-    if (node.position.x < leftNode.position.x)
+    if (node.type === CUSTOM_NODE && leftNode && node.position.x < leftNode.position.x)
       leftNode = node
   }
 

web/app/components/workflow/nodes/data-source-empty/index.tsx

@@ -10,7 +10,7 @@ import Button from '@/app/components/base/button'
 import BlockSelector from '@/app/components/workflow/block-selector'
 import { useReplaceDataSourceNode } from './hooks'
 
-const DataSourceEmptyNode = ({ id }: NodeProps) => {
+const DataSourceEmptyNode = ({ id, data }: NodeProps) => {
   const { t } = useTranslation()
   const { handleReplaceNode } = useReplaceDataSourceNode(id)
 
@@ -32,6 +32,10 @@ const DataSourceEmptyNode = ({ id }: NodeProps) => {
         'relative flex rounded-2xl border',
         'border-transparent',
       )}
+      style={{
+        width: data.width,
+        height: data.height,
+      }}
     >
       <div className='absolute inset-[-2px] top-[-22px] z-[-1] rounded-[18px] bg-node-data-source-bg p-0.5 backdrop-blur-[6px]'>
         <div className='system-2xs-semibold-uppercase flex h-5 items-center px-2.5 text-text-tertiary'>