fix: udpate based on comments

Author: lyjeileen

src/components/types.ts

@@ -159,9 +159,9 @@ export interface VegaLiteFormat extends DataFormat {
 export type VegaLiteData = VegaLiteFormat & Updates<VegaLiteFormat>
 
 export interface MermaidFormat extends DataFormat {
-  /** Follow Mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string.  */
-  code: string
-  /** Follow Mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */
+  /** Diagram definition following [Mermaid's syntax](https://mermaid.js.org/intro/syntax-reference.html#syntax-structure). The use of [these](https://mermaid.js.org/intro/syntax-reference.html#diagram-breaking) words or symbols can break diagrams. */
+  diagram: string
+  /** Configuration for altering and customizing Mermaid Diagrams. Refer [Mermaid docs](https://mermaid.js.org/config/schema-docs/config.html) for details. */
   config?: MermaidConfig
 }
 

src/components/visualization/mermaidViz/mermaidViz.css

@@ -3,14 +3,18 @@
   width: 100%;
 }
 
-.rustic-mermaid-container div:last-of-type {
+.rustic-mermaid-container .rustic-mermaid {
   flex: 1;
   min-height: 0;
   display: flex;
   justify-content: center;
 }
 
-.rustic-mermaid-container div:last-of-type svg {
+.rustic-mermaid-container .rustic-mermaid svg {
   height: 100%;
   width: 100%;
 }
+
+.rustic-invisible {
+  visibility: hidden;
+}

src/components/visualization/mermaidViz/mermaidViz.cy.tsx

@@ -16,7 +16,7 @@ describe('MermaidViz', () => {
       cy.viewport(viewport)
       cy.mount(
         <MermaidViz
-          code={codeExample}
+          diagram={codeExample}
           title="Christmas Shopping"
           description="A flow chart"
         />

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

@@ -32,7 +32,7 @@ meta.argTypes = {
 
 export const ClassDiagram = {
   args: {
-    code: `classDiagram
+    diagram: `classDiagram
     Animal <|-- Duck
     Animal <|-- Fish
     Animal <|-- Zebra
@@ -58,7 +58,7 @@ export const ClassDiagram = {
 
 export const Flow = {
   args: {
-    code: `
+    diagram: `
     flowchart TD
     A[Christmas] -->|Get money| B(Go shopping)
     B --> C{Let me think}
@@ -73,7 +73,7 @@ export const ERDiagram = {
     title: 'Customer Order Management System ER Diagram',
     description:
       'This ER diagram illustrates the relationships in an ordering system where a customer has a delivery address, places orders, and is liable for invoices; delivery addresses receive orders, invoices cover orders, orders include order items, product categories contain products, and products are ordered in order items.',
-    code: `
+    diagram: `
       erDiagram
     CUSTOMER }|..|{ DELIVERY-ADDRESS : has
     CUSTOMER ||--o{ ORDER : places
@@ -88,6 +88,6 @@ export const ERDiagram = {
 
 export const Error = {
   args: {
-    code: '',
+    diagram: '',
   },
 }

src/components/visualization/mermaidViz/mermaidViz.tsx

@@ -4,45 +4,68 @@ import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import useTheme from '@mui/system/useTheme'
 import mermaid from 'mermaid'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import type { MermaidData } from '../../types'
 
 /** The `MermaidViz` component leverages [Mermaid.js](https://mermaid.js.org/) to create dynamic and interactive diagrams, including flowcharts, sequence diagrams, class diagrams, and more. It is ideal for visualizing complex data and processes in a clear and structured manner. */
 function MermaidViz(props: MermaidData) {
-  const chartRef = useRef(null)
+  const mermaidRef = useRef<HTMLDivElement>(null)
   const rusticTheme = useTheme()
   const mermaidTheme = rusticTheme.palette.mode === 'dark' ? 'dark' : 'neutral'
+  const [errorMessage, setErrorMessage] = useState<string>()
+  const [isProcessed, setIsProcessed] = useState<boolean>(false)
 
   useEffect(() => {
-    if (chartRef.current) {
+    if (mermaidRef.current) {
       mermaid.initialize({
         theme: mermaidTheme,
         themeVariables: { fontFamily: 'Inter' },
         ...props.config,
       })
 
-      mermaid.contentLoaded()
+      mermaid
+        .run({
+          querySelector: '.rustic-mermaid',
+        })
+        .then(() => {
+          setIsProcessed(true)
+          setErrorMessage('')
+        })
+        .catch(() => {
+          setIsProcessed(true)
+          setErrorMessage(
+            'An error occurred while rendering the diagram. Please check the syntax.'
+          )
+        })
     }
   }, [mermaidTheme])
 
-  return (
-    <Stack
-      direction="column"
-      className="rustic-mermaid-container"
-      data-cy="mermaid-container"
-    >
-      {props.title && (
-        <Typography variant="subtitle2">{props.title}</Typography>
-      )}
-      {props.description && (
-        <Typography variant="caption">{props.description}</Typography>
-      )}
-      <div ref={chartRef} className="mermaid" key={mermaidTheme}>
-        {props.code}
-      </div>
-    </Stack>
-  )
+  if (errorMessage) {
+    return (
+      <Typography variant="body2" className="rustic-error-message">
+        {errorMessage}
+      </Typography>
+    )
+  } else {
+    return (
+      <Stack
+        direction="column"
+        className={`${!isProcessed ? 'rustic-invisible ' : ''}rustic-mermaid-container`}
+        data-cy="mermaid-container"
+      >
+        {props.title && (
+          <Typography variant="subtitle2">{props.title}</Typography>
+        )}
+        {props.description && (
+          <Typography variant="caption">{props.description}</Typography>
+        )}
+        <div className="rustic-mermaid" ref={mermaidRef} key={mermaidTheme}>
+          {props.diagram}
+        </div>
+      </Stack>
+    )
+  }
 }
 
 export default MermaidViz