fixed height issue, fixed code for grouping in diagram

pkgs/ui/src/components/sequence_diagram/helpers.ts

@@ -1,52 +1,47 @@
-export const generateMermaidString = (data: any) => {
+import { Eventmessage } from "@/api/model";
+
+export const generateMermaidString = (data: Eventmessage[] | undefined) => {
   if (!data || data.length === 0) return "";
 
-  // Extract unique participants
   const participants = Array.from(
-    new Set(
-      data
-        .map((item: any) => item.src_did)
-        .concat(data.map((item: any) => item.des_did)),
-    ),
+    new Set(data.flatMap((item) => [item.src_did, item.des_did])),
   );
 
-  // Begin the sequence diagram definition
   let mermaidString = "sequenceDiagram\n";
 
-  // Add participants to the diagram
   participants.forEach((participant, index) => {
     mermaidString += `  participant ${String.fromCharCode(
       65 + index,
     )} as ${participant}\n`;
   });
 
-  // Add messages to the diagram
-  data.forEach((item: any, index: number) => {
+  let currentGroupId: number | null = null;
+
+  data.forEach((item, index) => {
     const srcParticipant = String.fromCharCode(
       65 + participants.indexOf(item.src_did),
     );
     const desParticipant = String.fromCharCode(
       65 + participants.indexOf(item.des_did),
     );
-    const timestamp = new Date(item.timestamp * 1000).toLocaleString(); // Convert Unix timestamp to readable date
+    const timestamp = new Date(item.timestamp * 1000).toLocaleString();
     const message = item.msg.text || `Event message ${index + 1}`;
 
-    // If group_name or group_id exists, start an 'alt' block
-    if (item.group_id != null) {
-      mermaidString += `  alt ${item.group_name || item.group_id}\n`;
-      mermaidString += `    rect rgb(191, 223, 255)\n`;
+    if (item.group_id !== currentGroupId) {
+      if (currentGroupId !== null) {
+        mermaidString += `  end\n`;
+      }
+      mermaidString += `  alt Group ${item.group_id}\n`;
+      currentGroupId = item.group_id;
     }
 
-    // Add the message interaction
-    mermaidString += `  ${srcParticipant}->>${desParticipant}: [${timestamp}] ${message}\n`;
-
-    // If there was an 'alt' block, close it
-    if (item.group_id != null) {
-      mermaidString += `    end\n`;
-      mermaidString += `  end\n`;
-    }
+    mermaidString += `    ${srcParticipant}->>${desParticipant}: [${timestamp}] ${message}\n`;
   });
 
+  if (currentGroupId !== null) {
+    mermaidString += `  end\n`;
+  }
+
   return mermaidString;
 };
 

pkgs/ui/src/components/sequence_diagram/index.tsx

@@ -26,7 +26,6 @@ const SequenceDiagram = () => {
   const mermaidRef: any = useRef(null);
   const [scale, setScale] = useState(1);
   const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0;
-  // const hasData = true;
 
   const mermaidString = generateMermaidString(eventMessagesData?.data);
 
@@ -51,7 +50,7 @@ const SequenceDiagram = () => {
       const svg = mermaidRef.current.querySelector("svg");
       if (svg) {
         svg.style.transform = `scale(${scale})`;
-        svg.style.transformOrigin = "top left"; // Set transform origin to top left
+        svg.style.transformOrigin = "top left";
         mermaidRef.current.style.width = `${
           svg.getBoundingClientRect().width * scale
         }px`;
@@ -131,10 +130,10 @@ const SequenceDiagram = () => {
     return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />;
 
   return (
-    <div className="flex w-full flex-col items-end">
+    <div className="flex flex-col items-end">
       {hasData ? (
         <>
-          <div className="flex w-full justify-end gap-2.5 mb-5">
+          <div className="flex justify-end gap-2.5 mb-5">
             <Tooltip placement="top" title="Refresh Diagram">
               <IconButton color="default" onClick={onRefresh}>
                 <RefreshIcon />
@@ -166,7 +165,7 @@ const SequenceDiagram = () => {
               </IconButton>
             </Tooltip>
           </div>
-          <div className="w-full h-full overflow-auto p-2.5 box-border">
+          <div className="w-full p-2.5">
             <div className="mermaid" ref={mermaidRef}></div>
           </div>
         </>

pkgs/ui/src/components/sidebar/index.tsx

@@ -6,6 +6,7 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Tooltip,
   useMediaQuery,
 } from "@mui/material";
 import Image from "next/image";
@@ -137,9 +138,14 @@ export function Sidebar(props: SidebarProps) {
           />
         </div>
         <div className="lg:absolute lg:right-0 lg:top-0">
-          <IconButton size="large" className="text-white" onClick={onClose}>
-            <ChevronLeftIcon fontSize="inherit" />
-          </IconButton>
+          <Tooltip
+            placement="right"
+            title={collapseMenuOpen ? "Close Sidebar" : "Expand Sidebar"}
+          >
+            <IconButton size="large" className="text-white" onClick={onClose}>
+              <ChevronLeftIcon fontSize="inherit" />
+            </IconButton>
+          </Tooltip>
         </div>
       </div>
       <Divider