From 2000c1444af10b77951c86529749207230c52660 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Thu, 25 Jan 2024 21:56:18 +0100
Subject: [PATCH] fix the issue of mermaid chart not rendering when changing
 routes

---
 pkgs/ui/src/app/client/client.tsx             |  2 -
 .../components/sequence_diagram/helpers.ts    |  2 +-
 .../src/components/sequence_diagram/index.tsx | 39 ++++++++++++-------
 pkgs/ui/src/components/sidebar/index.tsx      |  2 +-
 4 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx
index 2be8284..6772be4 100644
--- a/pkgs/ui/src/app/client/client.tsx
+++ b/pkgs/ui/src/app/client/client.tsx
@@ -153,8 +153,6 @@ export default function Client() {
     setSnackbarOpen(false);
   };
 
-  console.log("entity", entity);
-
   if (services_loading) return <Skeleton height={500} />;
   if (!services) return <Alert severity="error">Client not found</Alert>;
 
diff --git a/pkgs/ui/src/components/sequence_diagram/helpers.ts b/pkgs/ui/src/components/sequence_diagram/helpers.ts
index 8e1b4a3..2c83cce 100644
--- a/pkgs/ui/src/components/sequence_diagram/helpers.ts
+++ b/pkgs/ui/src/components/sequence_diagram/helpers.ts
@@ -1,7 +1,7 @@
 import { getGroupColor, sanitizeDID } from "@/utils/helpers";
 
 export const generateMermaidString = (data: any) => {
-  if (!data) return "";
+  if (!data || !data.length) return "";
 
   let mermaidString = "sequenceDiagram\n";
   const participantDetails = new Map();
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 6d9e7b8..4107d3b 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -43,32 +43,45 @@ const SequenceDiagram = () => {
     swrKey: eventMessagesKeyFunc,
   } = useGetAllEventmessages();
 
-  const mermaidRef: any = useRef(null);
   const [scale, setScale] = useState(1);
   const [openFilters, setOpenFilters] = useState(false);
-
   const [sequenceNr, setSequenceNr] = useState("");
-  const hasData = eventMessagesData?.data;
 
+  const mermaidRef: any = useRef(null);
+
+  const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0;
   const mermaidString = generateMermaidString(eventMessagesData?.data);
   const allEventMessages = extractAllEventMessages(eventMessagesData?.data);
+  const dataDependency = JSON.stringify(hasData ? eventMessagesData?.data : "");
 
   useEffect(() => {
-    if (!loadingEventMessages && hasData)
-      mermaid.initialize({
-        startOnLoad: false,
-        securityLevel: "loose",
-        sequence: {
-          mirrorActors: true,
-          showSequenceNumbers: true,
-        },
-      });
+    if (!loadingEventMessages && hasData) {
+      if (!mermaidRef.current.getAttribute("data-processed")) {
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "loose",
+          sequence: {
+            mirrorActors: true,
+            showSequenceNumbers: true,
+          },
+        });
+      }
+    }
 
     if (mermaidRef.current) {
       mermaidRef.current.innerHTML = mermaidString;
       mermaid.init(undefined, mermaidRef.current);
     }
-  }, [loadingEventMessages, hasData, mermaidString]);
+
+    return () => {
+      if (mermaidRef.current) {
+        // By removing the 'data-processed' attribute, we ensure Mermaid will process the diagram again
+        mermaidRef.current.removeAttribute("data-processed");
+        // Reset the innerHTML to clear the diagram
+        mermaidRef.current.innerHTML = "";
+      }
+    };
+  }, [dataDependency]);
 
   useEffect(() => {
     if (mermaidRef.current) {
diff --git a/pkgs/ui/src/components/sidebar/index.tsx b/pkgs/ui/src/components/sidebar/index.tsx
index 69ac216..79de3da 100644
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/pkgs/ui/src/components/sidebar/index.tsx
@@ -93,7 +93,7 @@ export function Sidebar(props: SidebarProps) {
   const menuEntityEntries: MenuEntry[] = React.useMemo(() => {
     if (entityData) {
       return Array.isArray(entityData.data)
-        ? entityData.data.map((entity) => ({
+        ? entityData.data.map((entity: any) => ({
             icon: <PersonIcon />,
             label: entity.name,
             to: entity.name,