github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-24 18:56:32 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(graphviz): extract lib loading into other async effect

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2022-11-06 20:53:12 +01:00 committed by David Mehren
parent d0e24175d7
commit 73f0a4e0a2
1 changed files with 34 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/extensions/extra-integrations/graphviz/graphviz-frame.tsx
View file

@ -11,6 +11,8 @@ import type { CodeProps } from '../../../components/markdown-renderer/replace-co
import { cypressId } from '../../../utils/cypress-attribute'
import { ShowIf } from '../../../components/common/show-if/show-if'
import { Logger } from '../../../utils/logger'
import { useAsync } from 'react-use'
import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary'
const log = new Logger('GraphvizFrame')
/**
@ -23,6 +25,22 @@ export const GraphvizFrame: React.FC<CodeProps> = ({ code }) => {
const container = useRef<HTMLDivElement>(null)
const [error, setError] = useState<string>()
const { basePath } = useRouter()
const {
value: graphvizImport,
error: libLoadingError,
loading: isLibLoading
} = useAsync(
async () =>
import(/* webpackChunkName: "d3-graphviz" */ '@hpcc-js/wasm')
.then((wasmPlugin) => {
wasmPlugin.wasmFolder(`${basePath}/_next/static/js`)
})
.then(() => import(/* webpackChunkName: "d3-graphviz" */ 'd3-graphviz')),
[]
)
const showError = useCallback((error: string) => {
if (!container.current) {
return
@ -32,45 +50,32 @@ export const GraphvizFrame: React.FC<CodeProps> = ({ code }) => {
container.current.querySelectorAll('svg').forEach((child) => child.remove())
}, [])
const { basePath } = useRouter()
useEffect(() => {
if (!container.current) {
if (!container.current || !graphvizImport) {
return
}
const actualContainer = container.current
import(/* webpackChunkName: "d3-graphviz" */ '@hpcc-js/wasm')
.then((wasmPlugin) => {
wasmPlugin.wasmFolder(`${basePath}/_next/static/js`)
})
.then(() => import(/* webpackChunkName: "d3-graphviz" */ 'd3-graphviz'))
.then((graphvizImport) => {
try {
setError(undefined)
graphvizImport
.graphviz(actualContainer, {
useWorker: false,
zoom: false
})
.onerror(showError)
.renderDot(code)
} catch (error) {
showError(error as string)
}
})
.catch((error: Error) => {
log.error('Error while loading graphviz', error)
})
}, [code, basePath, showError])
try {
setError(undefined)
graphvizImport
.graphviz(container.current, {
useWorker: false,
zoom: false
})
.onerror(showError)
.renderDot(code)
} catch (error) {
showError(error as string)
}
}, [code, basePath, showError, graphvizImport])
return (
<Fragment>
<AsyncLoadingBoundary loading={isLibLoading} componentName={'graphviz'} error={libLoadingError}>
<ShowIf condition={!!error}>
<Alert variant={'warning'}>{error}</Alert>
</ShowIf>
<div className={'svg-container'} {...cypressId('graphviz')} ref={container} />
</Fragment>
</AsyncLoadingBoundary>
)
}