From 7d325bd41c96a55f10a4faa6b226872877f91d98 Mon Sep 17 00:00:00 2001
From: xuzijie1995 <18852951350@163.com>
Date: Sat, 24 May 2025 10:08:09 +0800
Subject: [PATCH] fix(echarts): Resolve chart flickering and animation loop in
 Markdown

Addresses the ECharts flickering issue observed during streaming output.
This is achieved by:
1. Memoizing  props (, , ) to prevent re-renders from new object references.
2. Refining the  hook for resize handling to use  dependencies, ensuring it only runs when necessary.
3. Applying type assertions to  to resolve TypeScript errors (e.g.,  and  properties).
---
 web/app/components/base/markdown.tsx | 50 ++++++++++++++--------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index b28bf2bc8f..45003deff1 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -134,6 +134,25 @@ 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 +348,11 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
                 <ReactEcharts
                   ref={echartsRef}
                   option={finalChartOption}
-                  style={{
-                    height: '350px',
-                    width: '100%',
-                  }}
+                  style={echartsStyle}
                   theme={isDarkMode ? 'dark' : undefined}
-                  opts={{
-                    renderer: 'canvas',
-                    width: 'auto',
-                  }}
+                  opts={echartsOpts}
                   notMerge={true}
-                  onEvents={{
-                    // Force resize when chart is finished rendering
-                    finished: () => {
-                      const instance = echartsRef.current?.getEchartsInstance?.()
-                      if (instance)
-                        instance.resize()
-                    },
-                  }}
+                  onEvents={echartsOnEvents}
                 />
               </ErrorBoundary>
             </div>
@@ -374,15 +380,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
               <ReactEcharts
                 ref={echartsRef}
                 option={errorOption}
-                style={{
-                  height: '350px',
-                  width: '100%',
-                }}
+                style={echartsStyle}
                 theme={isDarkMode ? 'dark' : undefined}
-                opts={{
-                  renderer: 'canvas',
-                  width: 'auto',
-                }}
+                opts={echartsOpts}
                 notMerge={true}
               />
             </ErrorBoundary>
@@ -423,7 +423,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
           </SyntaxHighlighter>
         )
     }
-  }, [children, language, isSVG, finalChartOption, props, theme, match])
+  }, [children, language, isSVG, finalChartOption, props, theme, match, chartState, isDarkMode, echartsStyle, echartsOpts, echartsOnEvents]);
 
   if (inline || !match)
     return <code {...props} className={className}>{children}</code>