Austin/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2024-11-16 11:42:29 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

mermaid front-end rendering initialization exception handling logic o… (#1407)

Browse Source
This commit is contained in:
Charlie.Wei 2023-10-26 10:19:04 +08:00 committed by GitHub
parent 48b4249790
commit 985253197f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/app/components/app/chat/mermaid/index.tsx
View File

@ -1,6 +1,5 @@
import React, { useEffect, useRef, useState } from 'react' import React, { useEffect, useRef, useState } from 'react'
import mermaid from 'mermaid' import mermaid from 'mermaid'
import { t } from 'i18next'
import CryptoJS from 'crypto-js' import CryptoJS from 'crypto-js'
let mermaidAPI: any let mermaidAPI: any
@ -32,6 +31,14 @@ const Flowchart = React.forwardRef((props: {
const chartId = useRef(`flowchart_${CryptoJS.MD5(props.PrimitiveCode).toString()}`) const chartId = useRef(`flowchart_${CryptoJS.MD5(props.PrimitiveCode).toString()}`)
const [isRender, setIsRender] = useState(true) const [isRender, setIsRender] = useState(true)
const clearFlowchartCache = () => {
for (let i = localStorage.length - 1; i >= 0; --i) {
const key = localStorage.key(i)
if (key && key.startsWith('flowchart_'))
localStorage.removeItem(key)
}
}
const renderFlowchart = async (PrimitiveCode: string) => { const renderFlowchart = async (PrimitiveCode: string) => {
try { try {
const cachedSvg: any = localStorage.getItem(chartId.current) const cachedSvg: any = localStorage.getItem(chartId.current)
@ -44,15 +51,15 @@ const Flowchart = React.forwardRef((props: {
const svgGraph = await mermaidAPI.render(chartId.current, PrimitiveCode) const svgGraph = await mermaidAPI.render(chartId.current, PrimitiveCode)
// eslint-disable-next-line @typescript-eslint/no-use-before-define // eslint-disable-next-line @typescript-eslint/no-use-before-define
const base64Svg: any = await svgToBase64(svgGraph.svg) const base64Svg: any = await svgToBase64(svgGraph.svg)
localStorage.setItem(chartId.current, base64Svg)
setSvgCode(base64Svg) setSvgCode(base64Svg)
if (chartId.current && base64Svg)
localStorage.setItem(chartId.current, base64Svg)
} }
} }
catch (error) { catch (error) {
localStorage.clear() clearFlowchartCache()
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/no-use-before-define
// @ts-expect-error handleReRender()
console.error(error.toString())
} }
} }
@ -70,7 +77,9 @@ const Flowchart = React.forwardRef((props: {
const handleReRender = () => { const handleReRender = () => {
setIsRender(false) setIsRender(false)
setSvgCode(null) setSvgCode(null)
if (chartId.current)
localStorage.removeItem(chartId.current) localStorage.removeItem(chartId.current)
setTimeout(() => { setTimeout(() => {
setIsRender(true) setIsRender(true)
renderFlowchart(props.PrimitiveCode) renderFlowchart(props.PrimitiveCode)
@ -90,9 +99,11 @@ const Flowchart = React.forwardRef((props: {
// @ts-expect-error // @ts-expect-error
<div ref={ref}> <div ref={ref}>
{ {
isRender && <div id={chartId.current} className="mermaid" style={style}>{svgCode && (<img src={svgCode} style={{ width: '100%', height: 'auto' }} alt="Mermaid chart" />)}</div> isRender
&& <div id={chartId.current} className="mermaid" style={style}>
{svgCode && <img src={svgCode} style={{ width: '100%', height: 'auto' }} alt="Mermaid chart" />}
</div>
} }
<button onClick={handleReRender}>{t('appApi.merMaind.rerender')}</button>
</div> </div>
) )
}) })