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