From ba7a2fd1352fb8843344d25b878ffd4e136ff5a5 Mon Sep 17 00:00:00 2001 From: Joel Date: Mon, 26 May 2025 14:23:11 +0800 Subject: [PATCH 01/96] fix: can not show loop detail in one step run (#20215) --- .../run/iteration-log/iteration-log-trigger.tsx | 3 +-- .../workflow/run/loop-log/loop-log-trigger.tsx | 11 +++++------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx index 91bcaf9485..8c9b43916b 100644 --- a/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx +++ b/web/app/components/workflow/run/iteration-log/iteration-log-trigger.tsx @@ -28,7 +28,7 @@ const IterationLogTrigger = ({ if (parallelNodes.length > 0) return parallelNodes - const serialIndex = parseInt(key, 10) + const serialIndex = Number.parseInt(key, 10) if (!isNaN(serialIndex)) { const serialNodes = allExecutions.filter(exec => exec.execution_metadata?.iteration_id === nodeInfo.node_id @@ -49,7 +49,6 @@ const IterationLogTrigger = ({ const iterDurationMap = nodeInfo?.iterDurationMap || iterationNodeMeta?.iteration_duration_map || {} let structuredList: NodeTracing[][] = [] - if (iterationNodeMeta?.iteration_duration_map) { const instanceKeys = Object.keys(iterationNodeMeta.iteration_duration_map) structuredList = instanceKeys diff --git a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx index 76619ffdc1..b086312baf 100644 --- a/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx +++ b/web/app/components/workflow/run/loop-log/loop-log-trigger.tsx @@ -29,7 +29,7 @@ const LoopLogTrigger = ({ if (parallelNodes.length > 0) return parallelNodes - const serialIndex = parseInt(key, 10) + const serialIndex = Number.parseInt(key, 10) if (!isNaN(serialIndex)) { const serialNodes = allExecutions.filter(exec => exec.execution_metadata?.loop_id === nodeInfo.node_id @@ -51,16 +51,15 @@ const LoopLogTrigger = ({ const loopVarMap = loopNodeMeta?.loop_variable_map || {} let structuredList: NodeTracing[][] = [] - - if (loopNodeMeta?.loop_duration_map) { + if (nodeInfo.details?.length) { + structuredList = nodeInfo.details + } + else if (loopNodeMeta?.loop_duration_map) { const instanceKeys = Object.keys(loopNodeMeta.loop_duration_map) structuredList = instanceKeys .map(key => filterNodesForInstance(key)) .filter(branchNodes => branchNodes.length > 0) } - else if (nodeInfo.details?.length) { - structuredList = nodeInfo.details - } onShowLoopResultList( structuredList, From 4c7351176cafeddb0c7be2828f24b2282ca9f742 Mon Sep 17 00:00:00 2001 From: GonzaHM <122193788+GonzaHM@users.noreply.github.com> Date: Mon, 26 May 2025 17:26:56 +0900 Subject: [PATCH 02/96] fix: resolve Mermaid mindmap generation issue (#20227) --- web/app/components/base/mermaid/index.tsx | 33 +++++++++++++++-------- web/app/components/base/mermaid/utils.ts | 19 ++++++++++--- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/web/app/components/base/mermaid/index.tsx b/web/app/components/base/mermaid/index.tsx index a484261a51..a0332ce819 100644 --- a/web/app/components/base/mermaid/index.tsx +++ b/web/app/components/base/mermaid/index.tsx @@ -91,6 +91,11 @@ const initMermaid = () => { numberSectionStyles: 4, axisFormat: '%Y-%m-%d', }, + mindmap: { + useMaxWidth: true, + padding: 10, + diagramPadding: 20, + }, maxTextSize: 50000, }) isMermaidInitialized = true @@ -289,11 +294,12 @@ const Flowchart = React.forwardRef((props: { try { let finalCode: string - // Check if it's a gantt chart + // Check if it's a gantt chart or mindmap const isGanttChart = primitiveCode.trim().startsWith('gantt') + const isMindMap = primitiveCode.trim().startsWith('mindmap') - if (isGanttChart) { - // For gantt charts, ensure each task is on its own line + if (isGanttChart || isMindMap) { + // For gantt charts and mindmaps, ensure each task is on its own line // and preserve exact whitespace/format finalCode = primitiveCode.trim() } @@ -352,6 +358,11 @@ const Flowchart = React.forwardRef((props: { numberSectionStyles: 4, axisFormat: '%Y-%m-%d', }, + mindmap: { + useMaxWidth: true, + padding: 10, + diagramPadding: 20, + }, } if (look === 'classic') { @@ -476,15 +487,15 @@ const Flowchart = React.forwardRef((props: { 'bg-white': currentTheme === Theme.light, 'bg-slate-900': currentTheme === Theme.dark, }), - mermaidDiv: cn('mermaid relative h-auto w-full cursor-pointer', { + mermaidDiv: cn('mermaid cursor-pointer h-auto w-full relative', { 'bg-white': currentTheme === Theme.light, 'bg-slate-900': currentTheme === Theme.dark, }), - errorMessage: cn('px-[26px] py-4', { + errorMessage: cn('py-4 px-[26px]', { 'text-red-500': currentTheme === Theme.light, 'text-red-400': currentTheme === Theme.dark, }), - errorIcon: cn('h-6 w-6', { + errorIcon: cn('w-6 h-6', { 'text-red-500': currentTheme === Theme.light, 'text-red-400': currentTheme === Theme.dark, }), @@ -492,7 +503,7 @@ const Flowchart = React.forwardRef((props: { 'text-gray-700': currentTheme === Theme.light, 'text-gray-300': currentTheme === Theme.dark, }), - themeToggle: cn('flex h-10 w-10 items-center justify-center rounded-full shadow-md backdrop-blur-sm transition-all duration-300', { + themeToggle: cn('flex items-center justify-center w-10 h-10 rounded-full transition-all duration-300 shadow-md backdrop-blur-sm', { 'bg-white/80 hover:bg-white hover:shadow-lg text-gray-700 border border-gray-200': currentTheme === Theme.light, 'bg-slate-800/80 hover:bg-slate-700 hover:shadow-lg text-yellow-300 border border-slate-600': currentTheme === Theme.dark, }), @@ -501,7 +512,7 @@ const Flowchart = React.forwardRef((props: { // Style classes for look options const getLookButtonClass = (lookType: 'classic' | 'handDrawn') => { return cn( - 'system-sm-medium mb-4 flex h-8 w-[calc((100%-8px)/2)] cursor-pointer items-center justify-center rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg text-text-secondary', + 'flex items-center justify-center mb-4 w-[calc((100%-8px)/2)] h-8 rounded-lg border border-components-option-card-option-border bg-components-option-card-option-bg cursor-pointer system-sm-medium text-text-secondary', look === lookType && 'border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg text-text-primary', currentTheme === Theme.dark && 'border-slate-600 bg-slate-800 text-slate-300', look === lookType && currentTheme === Theme.dark && 'border-blue-500 bg-slate-700 text-white', @@ -512,7 +523,7 @@ const Flowchart = React.forwardRef((props: {
} className={themeClasses.container}>
-