fixed height issue, fixed code for grouping in diagram

pkgs/ui/src/app/client/[client_name]/page.tsx

@@ -154,6 +154,8 @@ 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>;
 
@@ -193,7 +195,7 @@ export default function Client({
             IP: <code>{entity?.ip}</code>
           </Typography>
           <Typography color="text.primary" gutterBottom>
-            Network: <code>{entity?.other?.network}</code>
+            Network: <code>{entity?.network}</code>
           </Typography>
         </CardContent>
       </Card>

pkgs/ui/src/app/layout.tsx

@@ -6,6 +6,7 @@ import {
   CssBaseline,
   IconButton,
   ThemeProvider,
+  Tooltip,
   useMediaQuery,
 } from "@mui/material";
 import { StyledEngineProvider } from "@mui/material/styles";
@@ -84,13 +85,15 @@ export default function RootLayout({
                         >
                           <div className="grid grid-cols-3">
                             <div className="col-span-1">
-                              <IconButton
-                                style={{ padding: "12px" }}
-                                hidden={true}
-                                onClick={() => setShowSidebar((c) => !c)}
-                              >
-                                {!showSidebar && <MenuIcon />}
-                              </IconButton>
+                              <Tooltip placement="right" title="Expand Sidebar">
+                                <IconButton
+                                  style={{ padding: "12px" }}
+                                  hidden={true}
+                                  onClick={() => setShowSidebar((c) => !c)}
+                                >
+                                  {!showSidebar && <MenuIcon />}
+                                </IconButton>
+                              </Tooltip>
                             </div>
                           </div>
 

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

pkgs/ui/src/config/home/index.ts

@@ -10,10 +10,6 @@ export const HomeTableConfig = [
   {
     key: "network",
     label: "Network",
-    render: (value: any) => {
-      const renderedValue = typeof value === "object" ? value?.network : "-";
-      return renderedValue;
-    },
   },
   {
     key: "ip",
@@ -22,11 +18,6 @@ export const HomeTableConfig = [
   {
     key: "roles",
     label: "Roles",
-    render: (value: any) => {
-      const renderedValue =
-        typeof value === "object" ? value?.roles?.join(", ") : "-";
-      return renderedValue;
-    },
   },
   {
     key: "attached",