update the parallel workflow log for iteration and chatflow preview

web/app/components/base/chat/chat/answer/workflow-process.tsx

@@ -11,10 +11,10 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { ChatItem, WorkflowProcess } from '../../types'
+import TracingPanel from '@/app/components/workflow/run/tracing-panel'
 import cn from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import { WorkflowRunningStatus } from '@/app/components/workflow/types'
-import NodePanel from '@/app/components/workflow/run/node'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
 type WorkflowProcessProps = {
@@ -31,7 +31,6 @@ const WorkflowProcessItem = ({
   grayBg,
   expand = false,
   hideInfo = false,
-  hideProcessDetail = false,
 }: WorkflowProcessProps) => {
   const { t } = useTranslation()
   const [collapse, setCollapse] = useState(!expand)
@@ -107,16 +106,9 @@ const WorkflowProcessItem = ({
         !collapse && (
           <div className='mt-1.5'>
             {
-              data.tracing.map(node => (
-                <div key={node.id} className='mb-1 last-of-type:mb-0'>
-                  <NodePanel
-                    nodeInfo={node}
-                    hideInfo={hideInfo}
-                    hideProcessDetail={hideProcessDetail}
-                    onShowIterationDetail={showIterationDetail}
-                  />
-                </div>
-              ))
+              <TracingPanel
+                list={data.tracing}
+              />
             }
           </div>
         )

web/app/components/workflow/run/iteration-result-panel.tsx

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiCloseLine } from '@remixicon/react'
 import { ArrowNarrowLeft } from '../../base/icons/src/vender/line/arrows'
-import NodePanel from './node'
+import TracingPanel from './tracing-panel'
 import cn from '@/utils/classnames'
 import type { NodeTracing } from '@/types/workflow'
 const i18nPrefix = 'workflow.singleRun'
@@ -32,10 +32,10 @@ const IterationResultPanel: FC<Props> = ({
             {t(`${i18nPrefix}.testRunIteration`)}
           </div>
           <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
-            <RiCloseLine className='w-4 h-4 text-gray-500 ' />
+            <RiCloseLine className='w-4 h-4 text-text-tertiary ' />
           </div>
         </div>
-        <div className='flex items-center py-2 space-x-1 text-primary-600 cursor-pointer' onClick={onBack}>
+        <div className='flex items-center py-2 space-x-1 text-text-accent cursor-pointer' onClick={onBack}>
           <ArrowNarrowLeft className='w-4 h-4' />
           <div className='leading-[18px] text-[13px] font-medium'>{t(`${i18nPrefix}.back`)}</div>
         </div>
@@ -43,25 +43,10 @@ const IterationResultPanel: FC<Props> = ({
       {/* List */}
       <div className={cn(!noWrap ? 'h-0 grow' : 'max-h-full', 'overflow-y-auto px-4 pb-4 bg-gray-50')}>
         {list.map((iteration, index) => (
-          <div key={index} className={cn('my-4', index === 0 && 'mt-2')}>
-            <div className='flex items-center'>
-              <div className='shrink-0 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{t(`${i18nPrefix}.iteration`)} {index + 1}</div>
-              <div
-                className='ml-3 grow w-0 h-px'
-                style={{ background: 'linear-gradient(to right, #F3F4F6, rgba(243, 244, 246, 0))' }}
-              ></div>
-            </div>
-            <div className='mt-0.5 space-y-1'>
-              {iteration.map(node => (
-                <NodePanel
-                  key={node.id}
-                  className='!px-0 !py-0'
-                  nodeInfo={node}
-                  notShowIterationNav
-                />
-              ))}
-            </div>
-          </div>
+          <TracingPanel
+            list={iteration}
+            key={index}
+          />
         ))}
       </div>
     </>

web/app/components/workflow/run/tracing-panel.tsx

@@ -12,11 +12,14 @@ import {
   RiMenu4Line,
 } from '@remixicon/react'
 import NodePanel from './node'
+import {
+  BlockEnum,
+} from '@/app/components/workflow/types'
 import type { NodeTracing } from '@/types/workflow'
 
 type TracingPanelProps = {
   list: NodeTracing[]
-  onShowIterationDetail: (detail: NodeTracing[][]) => void
+  onShowIterationDetail?: (detail: NodeTracing[][]) => void
 }
 
 type TracingNodeProps = {
@@ -72,9 +75,14 @@ function buildLogTree(nodes: NodeTracing[]): TracingNodeProps[] {
   }
 
   for (const node of nodes) {
-    const parallel_id = node.execution_metadata?.parallel_id ?? null
+    let parallel_id = node.execution_metadata?.parallel_id ?? null
     const parent_parallel_id = node.execution_metadata?.parent_parallel_id ?? null
-    const parallel_start_node_id = node.execution_metadata?.parallel_start_node_id ?? null
+    let parallel_start_node_id = node.execution_metadata?.parallel_start_node_id ?? null
+
+    if (node.node_type === BlockEnum.Iteration) {
+      parallel_id = node.parallel_id ?? null
+      parallel_start_node_id = node.parallel_start_node_id ?? null
+    }
 
     if (!parallel_id) {
       rootNodes.push({
@@ -173,7 +181,10 @@ const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail }) =>
             <div className="system-xs-semibold-uppercase text-text-secondary flex items-center">
               <span>{node.parallelTitle}</span>
             </div>
-            <div className="mx-2 flex-grow h-px bg-divider-subtle"></div>
+            <div
+              className="mx-2 flex-grow h-px bg-divider-subtle"
+              style={{ background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0)' }}
+            ></div>
           </div>
           <div className={`pl-2 relative ${isCollapsed ? 'hidden' : ''}`}>
             <div className={cn(

web/types/workflow.ts

@@ -44,6 +44,8 @@ export type NodeTracing = {
   extras?: any
   expand?: boolean // for UI
   details?: NodeTracing[][] // iteration detail
+  parallel_id?: string
+  parallel_start_node_id?: string
 }
 
 export type FetchWorkflowDraftResponse = {