From cbfc32b11fcabb950cf82f5a1a89ba9ab3ac6bb9 Mon Sep 17 00:00:00 2001 From: sayThQ199 <18852951350@163.com> Date: Sun, 25 May 2025 18:05:41 +0800 Subject: [PATCH 01/37] fix(echarts): Resolve chart flickering and animation loop in Markdown (#20161) --- web/app/components/base/markdown.tsx | 49 ++++++++++++++-------------- 1 file changed, 24 insertions(+), 25 deletions(-) diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx index b28bf2bc8f..a47d93268c 100644 --- a/web/app/components/base/markdown.tsx +++ b/web/app/components/base/markdown.tsx @@ -134,6 +134,24 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any const languageShowName = getCorrectCapitalizationLanguageName(language || '') const isDarkMode = theme === Theme.dark + const echartsStyle = useMemo(() => ({ + height: '350px', + width: '100%', + }), []) + + const echartsOpts = useMemo(() => ({ + renderer: 'canvas', + width: 'auto', + }) as any, []) + + const echartsOnEvents = useMemo(() => ({ + finished: () => { + const instance = echartsRef.current?.getEchartsInstance?.() + if (instance) + instance.resize() + }, + }), [echartsRef]) // echartsRef is stable, so this effectively runs once. + // Handle container resize for echarts useEffect(() => { if (language !== 'echarts' || !echartsRef.current) return @@ -329,24 +347,11 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any { - const instance = echartsRef.current?.getEchartsInstance?.() - if (instance) - instance.resize() - }, - }} + onEvents={echartsOnEvents} /> @@ -374,15 +379,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any @@ -423,7 +422,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any ) } - }, [children, language, isSVG, finalChartOption, props, theme, match]) + }, [children, language, isSVG, finalChartOption, props, theme, match, chartState, isDarkMode, echartsStyle, echartsOpts, echartsOnEvents]) if (inline || !match) return {children} From 3995f55cbcdd2b09ea4a8d7ce511bef0dcbcdf15 Mon Sep 17 00:00:00 2001 From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com> Date: Mon, 26 May 2025 10:42:54 +0800 Subject: [PATCH 02/37] =?UTF-8?q?fix:=20update=20Line=20component=20for=20?= =?UTF-8?q?dark=20mode=20support=20and=20improve=20Empty=20co=E2=80=A6=20(?= =?UTF-8?q?#20196)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../plugins/marketplace/empty/line.tsx | 34 +++++++++++++++---- .../plugins/plugin-page/empty/index.tsx | 20 +++++------ 2 files changed, 38 insertions(+), 16 deletions(-) diff --git a/web/app/components/plugins/marketplace/empty/line.tsx b/web/app/components/plugins/marketplace/empty/line.tsx index 19837aa862..35afcc0d03 100644 --- a/web/app/components/plugins/marketplace/empty/line.tsx +++ b/web/app/components/plugins/marketplace/empty/line.tsx @@ -1,17 +1,39 @@ +'use client' +import useTheme from '@/hooks/use-theme' + type LineProps = { className?: string } + const Line = ({ className, }: LineProps) => { + const { theme } = useTheme() + const isDarkMode = theme === 'dark' + + if (isDarkMode) { + return ( + + + + + + + + + + + ) + } + return ( - - + + - - - - + + + + diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx index 139567a1b5..d17c4f420b 100644 --- a/web/app/components/plugins/plugin-page/empty/index.tsx +++ b/web/app/components/plugins/plugin-page/empty/index.tsx @@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next' import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config' import { noop } from 'lodash-es' import { useGlobalPublicStore } from '@/context/global-public-context' +import Button from '@/app/components/base/button' const Empty = () => { const { t } = useTranslation() @@ -43,14 +44,14 @@ const Empty = () => { {/* skeleton */}
{Array.from({ length: 20 }).fill(0).map((_, i) => ( -
+
))}
{/* mask */}
-
@@ -58,10 +59,10 @@ const Empty = () => {
-
+
{text}
-
+
{ { icon: Github, text: t('plugin.list.source.github'), action: 'github' }, { icon: FileZip, text: t('plugin.list.source.local'), action: 'local' }, ].map(({ icon: Icon, text, action }) => ( -
{ if (action === 'local') fileInputRef.current?.click() @@ -92,9 +92,9 @@ const Empty = () => { setSelectedAction(action) }} > - - {text} -
+ + {text} + ))}
From ba7a2fd1352fb8843344d25b878ffd4e136ff5a5 Mon Sep 17 00:00:00 2001 From: Joel Date: Mon, 26 May 2025 14:23:11 +0800 Subject: [PATCH 03/37] 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 04/37] 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}>
-