fix the issue of mermaid chart not rendering when changing routes

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>;
 

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();

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)
+    if (!loadingEventMessages && hasData) {
-      mermaid.initialize({
+      if (!mermaidRef.current.getAttribute("data-processed")) {
-        startOnLoad: false,
+        mermaid.initialize({
-        securityLevel: "loose",
+          startOnLoad: false,
-        sequence: {
+          securityLevel: "loose",
-          mirrorActors: true,
+          sequence: {
-          showSequenceNumbers: true,
+            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) {

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,