Feature/d3 graphviz (#564)

added graphviz diagrams via d3-graphviz
added craco and webpack-copy-plugin to copy wasm files

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/markdown-renderer/full-markdown-renderer.tsx

@@ -42,6 +42,7 @@ import { AsciinemaReplacer } from './replace-components/asciinema/asciinema-repl
 import { CsvReplacer } from './replace-components/csv/csv-replacer'
 import { FlowchartReplacer } from './replace-components/flow/flowchart-replacer'
 import { GistReplacer } from './replace-components/gist/gist-replacer'
+import { GraphvizReplacer } from './replace-components/graphviz/graphviz-replacer'
 import { HighlightedCodeReplacer } from './replace-components/highlighted-fence/highlighted-fence-replacer'
 import { ImageReplacer } from './replace-components/image/image-replacer'
 import { KatexReplacer } from './replace-components/katex/katex-replacer'
@@ -54,8 +55,8 @@ import { SequenceDiagramReplacer } from './replace-components/sequence-diagram/s
 import { TaskListReplacer } from './replace-components/task-list/task-list-replacer'
 import { VimeoReplacer } from './replace-components/vimeo/vimeo-replacer'
 import { YoutubeReplacer } from './replace-components/youtube/youtube-replacer'
-import { useCalculateLineMarkerPosition } from './utils/calculate-line-marker-positions'
 import { AdditionalMarkdownRendererProps, LineMarkerPosition } from './types'
+import { useCalculateLineMarkerPosition } from './utils/calculate-line-marker-positions'
 import { usePostMetaDataOnChange } from './utils/use-post-meta-data-on-change'
 import { usePostTocAstOnChange } from './utils/use-post-toc-ast-on-change'
 
@@ -92,6 +93,7 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
       new CsvReplacer(),
       new FlowchartReplacer(),
       new MermaidReplacer(),
+      new GraphvizReplacer(),
       new HighlightedCodeReplacer(),
       new QuoteOptionsReplacer(),
       new KatexReplacer(),

src/components/markdown-renderer/replace-components/graphviz/graphviz-frame.tsx

@@ -0,0 +1,44 @@
+import { graphviz } from 'd3-graphviz'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
+import { Alert } from 'react-bootstrap'
+import '@hpcc-js/wasm'
+import { ShowIf } from '../../../common/show-if/show-if'
+
+export interface GraphvizFrameProps {
+  code: string
+}
+
+export const GraphvizFrame: React.FC<GraphvizFrameProps> = ({ code }) => {
+  const container = useRef<HTMLDivElement>(null)
+  const [error, setError] = useState<string>()
+
+  const showError = useCallback((error: string) => {
+    if (!container.current) {
+      return
+    }
+    setError(error)
+    console.error(error)
+    container.current.querySelectorAll('svg').forEach(child => child.remove())
+  }, [])
+
+  useEffect(() => {
+    if (!container.current) {
+      return
+    }
+    try {
+      setError(undefined)
+      graphviz(container.current, { useWorker: false, zoom: false })
+        .onerror(showError)
+        .renderDot(code)
+    } catch (error) {
+      showError(error)
+    }
+  }, [code, error, showError])
+
+  return <Fragment>
+    <ShowIf condition={!!error}>
+      <Alert variant={'warning'}>{error}</Alert>
+    </ShowIf>
+    <div className={'text-center'} ref={container} />
+  </Fragment>
+}

src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx

@@ -0,0 +1,16 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { GraphvizFrame } from './graphviz-frame'
+
+export class GraphvizReplacer implements ComponentReplacer {
+  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+    if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'graphviz' || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const code = codeNode.children[0].data as string
+
+    return <GraphvizFrame code={code}/>
+  }
+}

src/components/markdown-renderer/replace-components/mermaid/mermaid-chart.tsx

@@ -1,8 +1,8 @@
 import mermaid from 'mermaid'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { v4 as uuid } from 'uuid'
+import { ShowIf } from '../../../common/show-if/show-if'
 
 export interface MermaidChartProps {
   code: string
@@ -15,7 +15,6 @@ interface MermaidParseError {
 let mermaidInitialized = false
 
 export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
-  const [diagramId] = useState(() => 'mermaid_' + uuid().replaceAll('-', '_'))
   const diagramContainer = useRef<HTMLDivElement>(null)
   const [error, setError] = useState<string>()
   const { t } = useTranslation()
@@ -27,27 +26,35 @@ export const MermaidChart: React.FC<MermaidChartProps> = ({ code }) => {
     }
   }, [])
 
+  const showError = useCallback((error: string) => {
+    if (!diagramContainer.current) {
+      return
+    }
+    setError(error)
+    console.error(error)
+    diagramContainer.current.querySelectorAll('svg').forEach(child => child.remove())
+  }, [])
+
   useEffect(() => {
+    if (!diagramContainer.current) {
+      return
+    }
     try {
-      if (!diagramContainer.current) {
-        return
-      }
       mermaid.parse(code)
       delete diagramContainer.current.dataset.processed
       diagramContainer.current.textContent = code
-      mermaid.init(`#${diagramId}`)
+      mermaid.init(diagramContainer.current)
+      setError(undefined)
     } catch (error) {
       const message = (error as MermaidParseError).str
-      if (message) {
-        setError(message)
-      } else {
-        setError(t('renderer.mermaid.unknownError'))
-        console.error(error)
-      }
+      showError(message || t('renderer.mermaid.unknownError'))
     }
-  }, [code, diagramId, t])
+  }, [code, showError, t])
 
-  return error
-    ? <Alert variant={'warning'}>{error}</Alert>
-    : <div className={'text-center mermaid'} ref={diagramContainer} id={diagramId}/>
+  return <Fragment>
+    <ShowIf condition={!!error}>
+      <Alert variant={'warning'}>{error}</Alert>
+    </ShowIf>
+    <div className={'text-center mermaid'} ref={diagramContainer}/>
+  </Fragment>
 }