fix the issue of mermaid chart not rendering when changing routes

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) {