From c03da10e985202d6decec30799bf05f420e3bead Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Wed, 24 Jan 2024 23:15:15 +0100
Subject: [PATCH 1/7] current progress with diagram and project fixes

---
 pkgs/ui/src/app/client/client.tsx             |   2 +-
 pkgs/ui/src/app/home/page.tsx                 |   1 -
 pkgs/ui/src/app/layout.tsx                    |   1 -
 .../components/copy_to_clipboard/index.tsx    |  42 ++-
 .../components/copy_to_clipboard/readme.md    |  73 +++++
 pkgs/ui/src/components/hooks/useFetch.tsx     |   4 +-
 .../components/sequence_diagram/helpers.ts    | 302 +++++++++++++-----
 .../src/components/sequence_diagram/index.tsx | 250 ++++++++++++---
 pkgs/ui/src/components/summary_card/index.tsx |  18 +-
 pkgs/ui/src/components/summary_card/readme.md |  52 +++
 pkgs/ui/src/components/table/index.tsx        |   9 +-
 pkgs/ui/src/components/table/readme.md        |  75 +++++
 pkgs/ui/src/components/table/style.tsx        |   1 -
 pkgs/ui/src/config/access_point/index.tsx     |  26 +-
 pkgs/ui/src/config/config.tsx                 | 112 +++++++
 pkgs/ui/src/config/dlg/index.ts               |   2 +-
 pkgs/ui/src/constants/index.ts                |   9 -
 pkgs/ui/src/types/index.ts                    |   1 -
 pkgs/ui/src/utils/helpers.ts                  |   5 +-
 19 files changed, 788 insertions(+), 197 deletions(-)
 create mode 100644 pkgs/ui/src/components/copy_to_clipboard/readme.md
 create mode 100644 pkgs/ui/src/components/summary_card/readme.md
 create mode 100644 pkgs/ui/src/components/table/readme.md
 create mode 100644 pkgs/ui/src/config/config.tsx
 delete mode 100644 pkgs/ui/src/constants/index.ts

diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx
index c412d73..8871887 100644
--- a/pkgs/ui/src/app/client/client.tsx
+++ b/pkgs/ui/src/app/client/client.tsx
@@ -139,7 +139,7 @@ export default function Client({ params }: { params: { name: string } }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const cardContentRef = useRef(null);
+  const cardContentRef = useRef<HTMLDivElement>(null);
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [snackbarMessage, setSnackbarMessage] = useState<
     SnackMessage | undefined
diff --git a/pkgs/ui/src/app/home/page.tsx b/pkgs/ui/src/app/home/page.tsx
index 121ed7e..7b31e65 100644
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -42,7 +42,6 @@ export default function Home() {
         entity={{ name: "Home", details: [] }}
         hasRefreshButton={true}
         onRefresh={onRefresh}
-        hasAttachDetach={false}
       />
 
       <div>
diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx
index 019c8d6..cc270a2 100644
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -51,7 +51,6 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Service Aware Networks" />
         <link rel="icon" href="tub-favicon.ico" sizes="any" />
-        {/* <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> */}
         <script
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
diff --git a/pkgs/ui/src/components/copy_to_clipboard/index.tsx b/pkgs/ui/src/components/copy_to_clipboard/index.tsx
index f380dbd..df577cb 100644
--- a/pkgs/ui/src/components/copy_to_clipboard/index.tsx
+++ b/pkgs/ui/src/components/copy_to_clipboard/index.tsx
@@ -1,26 +1,50 @@
-import { useState } from "react";
-import { Button, Snackbar } from "@mui/material";
+import { useState, RefObject } from "react";
+import { Tooltip, Snackbar } from "@mui/material";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
-const CopyToClipboard = ({ contentRef }: { contentRef: any }) => {
+const CopyToClipboard = ({
+  contentRef,
+  textToCopy,
+}: {
+  contentRef?: RefObject<HTMLDivElement>;
+  textToCopy?: string;
+}) => {
   const [open, setOpen] = useState(false);
+
   const handleClick = () => {
-    if (contentRef.current) {
-      const text = contentRef.current.textContent;
-      navigator.clipboard.writeText(text);
-      setOpen(true);
+    // Prioritize direct text copy if 'textToCopy' is provided
+    const text = textToCopy || contentRef?.current?.textContent || "";
+    const copiedText = textToCopy ? JSON.stringify(text, null, 2) : text;
+
+    if (text) {
+      navigator.clipboard.writeText(copiedText).then(
+        () => {
+          setOpen(true);
+        },
+        (err) => {
+          console.error("Could not copy text: ", err);
+        },
+      );
     }
   };
 
   return (
     <>
-      <Button onClick={handleClick}>Copy</Button>
+      <Tooltip placement="left" title="Copy to Clipboard">
+        <ContentCopyIcon onClick={handleClick} className="cursor-pointer" />
+      </Tooltip>
       <Snackbar
         open={open}
         onClose={() => setOpen(false)}
         autoHideDuration={2000}
-        message="Copied to clipboard"
+        message="Copied to clipboard!"
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
       />
     </>
   );
 };
+
 export default CopyToClipboard;
diff --git a/pkgs/ui/src/components/copy_to_clipboard/readme.md b/pkgs/ui/src/components/copy_to_clipboard/readme.md
new file mode 100644
index 0000000..646611c
--- /dev/null
+++ b/pkgs/ui/src/components/copy_to_clipboard/readme.md
@@ -0,0 +1,73 @@
+# CopyToClipboard Component
+
+## Overview
+
+The `CopyToClipboard` component is a versatile UI component designed to facilitate copying text to the user's clipboard. It can copy text from two sources: directly from a passed text string prop (`textToCopy`) or from the text content of a referenced div element (`contentRef`). The component includes a clickable icon and displays a confirmation snackbar notification once the copy action is successful.
+
+## Props
+
+The component accepts the following props:
+
+1. `textToCopy` (optional): A string representing the direct text you want to copy. If provided, this text is copied to the clipboard when the icon is clicked.
+
+2. `contentRef` (optional): A `RefObject<HTMLDivElement>` that references a div element. The text content of this div is copied to the clipboard if `textToCopy` is not provided.
+
+## Behavior
+
+- Copy Action: When the copy icon is clicked, the component:
+
+  - Prioritizes copying the text from the textToCopy prop if it's provided and not an empty string.
+  - If textToCopy is not provided or is empty, it then attempts to copy the text content of the element referenced by contentRef.
+  - Uses the Clipboard API (`navigator.clipboard.writeText`) to copy the text to the user's clipboard.
+  - Displays a snackbar notification confirming the copy action if successful.
+
+- Snackbar Notification: A temporary notification that:
+  - Appears after the text is successfully copied.
+  - Displays the message "Copied to clipboard!".
+  - Disappears automatically after 2000 milliseconds and is positioned at the bottom left of the screen.
+
+## How to Use
+
+1. Import the `CopyToClipboard` component.
+2. Use the component in one of the following ways:
+3. Pass a `textToCopy` prop with the text you want to copy, OR
+4. Pass a `contentRef` prop pointing to a div element containing the text you want to copy.
+5. Render the `CopyToClipboard` component where you want the copy icon to appear.
+
+## Example
+
+Using `textToCopy` prop:
+
+```javascript
+import CopyToClipboard from "./CopyToClipboard";
+
+const SomeComponent = () => {
+  return (
+    <div>
+      <CopyToClipboard textToCopy="Text to be copied" />
+    </div>
+  );
+};
+
+export default SomeComponent;
+```
+
+Using `contentRef` prop:
+
+```javascript
+import React, { useRef } from "react";
+import CopyToClipboard from "./CopyToClipboard";
+
+const SomeComponent = () => {
+  const textRef = useRef(null);
+
+  return (
+    <div>
+      <div ref={textRef}>Text to copy from ref</div>
+      <CopyToClipboard contentRef={textRef} />
+    </div>
+  );
+};
+
+export default SomeComponent;
+```
diff --git a/pkgs/ui/src/components/hooks/useFetch.tsx b/pkgs/ui/src/components/hooks/useFetch.tsx
index 5a138e8..8eae13c 100644
--- a/pkgs/ui/src/components/hooks/useFetch.tsx
+++ b/pkgs/ui/src/components/hooks/useFetch.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
-import { BASE_URL } from "@/constants";
+import { projectConfig } from "@/config/config";
 
 const useFetch = (url: string) => {
   const [data, setData] = useState([]);
@@ -10,7 +10,7 @@ const useFetch = (url: string) => {
   const fetch = () => {
     setLoading(true);
     axios
-      .get(BASE_URL + url)
+      .get(projectConfig.BASE_URL + url)
       .then((response) => {
         setData(response.data);
       })
diff --git a/pkgs/ui/src/components/sequence_diagram/helpers.ts b/pkgs/ui/src/components/sequence_diagram/helpers.ts
index b4fb4c8..19a01a6 100644
--- a/pkgs/ui/src/components/sequence_diagram/helpers.ts
+++ b/pkgs/ui/src/components/sequence_diagram/helpers.ts
@@ -1,136 +1,276 @@
 import { Eventmessage } from "@/api/model";
 
 export const generateMermaidString = (data: Eventmessage[] | undefined) => {
-  if (!data || data.length === 0) return "";
+  if (!data) return "";
 
-  const participants = Array.from(
-    new Set(data.flatMap((item) => [item.src_did, item.des_did])),
-  );
+  let mermaidString = "";
 
-  let mermaidString = "sequenceDiagram\n";
+  // We'll use a Set to ensure participant uniqueness
+  const participants: Set<string> = new Set();
 
-  participants.forEach((participant, index) => {
-    mermaidString += `  participant ${String.fromCharCode(
-      65 + index,
-    )} as ${participant}\n`;
-  });
+  // Define colors for groups (if you have more groups, add more colors)
+  const groupColors: Record<number, string> = {
+    0: "rgb(191, 223, 255)",
+    1: "rgb(200, 150, 255)",
+    // Add more group colors if needed
+  };
 
-  let currentGroupId: number | null = null;
+  // Loop through the groups and group_ids to build the string
+  Object.entries(data).forEach(([group, groupData]) => {
+    // Add a rectangle for each group with a note
+    mermaidString += `  rect ${
+      groupColors[parseInt(group)] || "rgb(128, 128, 128)"
+    }\n`; // Fallback color if not defined
+    mermaidString += `  Note over ${Object.values(groupData)
+      .flatMap((gd) => gd.map((msg: any) => msg.src_name))
+      .join(",")}: Group ${group}\n`;
 
-  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();
-    const message = item.msg.text || `Event message ${index + 1}`;
+    Object.entries(groupData).forEach(([groupId, messages]) => {
+      // Add a rectangle for each group_id with a note
+      mermaidString += `  alt Group ID ${groupId}\n`;
 
-    if (item.group_id !== currentGroupId) {
-      if (currentGroupId !== null) {
-        mermaidString += `  end\n`;
-      }
-      mermaidString += `  alt Group ${item.group_id}\n`;
-      currentGroupId = item.group_id;
-    }
+      messages.forEach((msg: any) => {
+        // Ensure we include each participant
+        participants.add(msg.src_name);
+        participants.add(msg.des_name);
 
-    mermaidString += `    ${srcParticipant}->>${desParticipant}: [${timestamp}] ${message}\n`;
-  });
+        // Add each message
+        mermaidString += `  ${msg.src_name}->>${msg.des_name}: [${msg.msg_type_name}]: Event Message ${msg.id}\n`;
+      });
+
+      mermaidString += `  end\n`;
+    });
 
-  if (currentGroupId !== null) {
     mermaidString += `  end\n`;
-  }
+  });
+
+  // Add participants at the start of the string
+  const participantString = Array.from(participants)
+    .map((participant) => {
+      return `  participant ${participant}\n`;
+    })
+    .join("");
+
+  // Prepend participants to the mermaidString
+  mermaidString = `sequenceDiagram\n${participantString}` + mermaidString;
 
   return mermaidString;
 };
 
-// Dummy Data
+export const mermaidSample = `
+sequenceDiagram
+    participant C0 as C0 <br/>did:sov:test:120
+    participant C1 as C1 <br/>did:sov:test:121
+    participant C2 as C2 <br/>did:sov:test:122
 
-export const dataFromBE = [
+    rect rgb(255, 154, 162)
+    Note over C0,C1 : Group 0
+    alt Group Id 16
+    C1->>C0: [Presentation]: Event Message 1
+    C1->>C0: [DID Resolution]: Event Message 2
+    end
+
+    alt Group Id 51
+    C0->>C1: [Attachement]: Event Message 3
+    C0->>C1: [Connection Setup]: Event Message 4
+    end
+    end
+
+    rect rgb(254, 183, 177)
+    Note over C1,C2 : Group 1
+    alt Group Id 13
+    C2->>C1: [Presentation]: Event Message 5
+    C2->>C1: [DID Resolution]: Event Message 6
+    end
+
+    alt Group Id 21
+    C1->>C2: [Attachement]: Event Message 7
+    C1->>C2: [Connection Setup]: Event Message 8
+    end
+    end
+
+    rect rgb(255, 218, 192)
+    Note over C0,C1 : Group 0
+    alt Group Id 16
+    C1->>C0: [Presentation]: Event Message 1
+    C1->>C0: [DID Resolution]: Event Message 2
+    end
+
+    alt Group Id 51
+    C0->>C1: [Attachement]: Event Message 3
+    C0->>C1: [Connection Setup]: Event Message 4
+    end
+    end
+
+    rect rgb(255, 236, 196)
+    Note over C1,C2 : Group 1
+    alt Group Id 13
+    C2->>C1: [Presentation]: Event Message 5
+    C2->>C1: [DID Resolution]: Event Message 6
+    end
+
+    alt Group Id 21
+    C1->>C2: [Attachement]: Event Message 7
+    C1->>C2: [Connection Setup]: Event Message 8
+    end
+    end
+
+    rect rgb(226, 240, 204)
+    Note over C0,C1 : Group 0
+    alt Group Id 16
+    C1->>C0: [Presentation]: Event Message 1
+    C1->>C0: [DID Resolution]: Event Message 2
+    end
+
+    alt Group Id 51
+    C0->>C1: [Attachement]: Event Message 3
+    C0->>C1: [Connection Setup]: Event Message 4
+    end
+    end
+
+    rect rgb(181, 234, 214)
+    Note over C1,C2 : Group 1
+    alt Group Id 13
+    C2->>C1: [Presentation]: Event Message 5
+    C2->>C1: [DID Resolution]: Event Message 6
+    end
+
+    alt Group Id 21
+    C1->>C2: [Attachement]: Event Message 7
+    C1->>C2: [Connection Setup]: Event Message 8
+    end
+    end
+
+    rect rgb(183, 219, 235)
+    Note over C0,C1 : Group 0
+    alt Group Id 16
+    C1->>C0: [Presentation]: Event Message 1
+    C1->>C0: [DID Resolution]: Event Message 2
+    end
+
+    alt Group Id 51
+    C0->>C1: [Attachement]: Event Message 3
+    C0->>C1: [Connection Setup]: Event Message 4
+    end
+    end
+
+    rect rgb(199, 206, 234)
+    Note over C1,C2 : Group 1
+    alt Group Id 13
+    C2->>C1: [Presentation]: Event Message 5
+    C2->>C1: [DID Resolution]: Event Message 6
+    end
+
+    alt Group Id 21
+    C1->>C2: [Attachement]: Event Message 7
+    C1->>C2: [Connection Setup]: Event Message 8
+    end
+    end
+`;
+
+export const eventMessages = [
   {
-    id: 12,
-    timestamp: 1704892813,
+    timestamp: 1706034368,
     group: 0,
-    group_id: 12,
-    // "group_name": "Data",
-    msg_type: 4,
-    src_did: "did:sov:test:121",
-    // "src_name": "Entity A",
-    des_did: "did:sov:test:120",
-    // "des_name": "Entity B",
-    msg: {
-      text: "Hello World",
-    },
-  },
-  {
-    id: 60,
-    timestamp: 1704892823,
-    group: 1,
-    group_id: 19,
-    msg_type: 4,
-    src_did: "did:sov:test:122",
-    des_did: "did:sov:test:121",
-    msg: {},
-  },
-  {
-    id: 30162,
-    timestamp: 1704892817,
-    group: 1,
-    group_id: 53,
-    msg_type: 2,
-    src_did: "did:sov:test:121",
-    des_did: "did:sov:test:122",
-    msg: {},
-  },
-  {
-    id: 63043,
-    timestamp: 1704892809,
-    group: 0,
-    group_id: 12,
+    group_id: 16,
     msg_type: 3,
     src_did: "did:sov:test:121",
     des_did: "did:sov:test:120",
     msg: {},
+    id: 3,
+    des_name: "C0",
+    src_name: "C1",
+    msg_type_name: "Presentation",
   },
   {
-    id: 66251,
-    timestamp: 1704892805,
+    timestamp: 1706034372,
+    group: 0,
+    group_id: 16,
+    msg_type: 4,
+    src_did: "did:sov:test:121",
+    des_did: "did:sov:test:120",
+    msg: {},
+    id: 4,
+    des_name: "C0",
+    src_name: "C1",
+    msg_type_name: "DID Resolution",
+  },
+  {
+    timestamp: 1706034364,
     group: 0,
     group_id: 51,
     msg_type: 1,
     src_did: "did:sov:test:120",
     des_did: "did:sov:test:121",
     msg: {},
+    id: 1,
+    des_name: "C1",
+    src_name: "C0",
+    msg_type_name: "Attachement",
   },
   {
-    id: 85434,
-    timestamp: 1704892807,
+    timestamp: 1706034366,
     group: 0,
     group_id: 51,
     msg_type: 2,
     src_did: "did:sov:test:120",
     des_did: "did:sov:test:121",
     msg: {},
+    id: 2,
+    des_name: "C1",
+    src_name: "C0",
+    msg_type_name: "Connection Setup",
   },
   {
-    id: 124842,
-    timestamp: 1704892819,
+    timestamp: 1706034378,
     group: 1,
-    group_id: 19,
+    group_id: 13,
     msg_type: 3,
     src_did: "did:sov:test:122",
     des_did: "did:sov:test:121",
     msg: {},
+    id: 7,
+    des_name: "C1",
+    src_name: "C2",
+    msg_type_name: "Presentation",
   },
   {
-    id: 246326,
-    timestamp: 1704892815,
+    timestamp: 1706034382,
     group: 1,
-    group_id: 53,
+    group_id: 13,
+    msg_type: 4,
+    src_did: "did:sov:test:122",
+    des_did: "did:sov:test:121",
+    msg: {},
+    id: 8,
+    des_name: "C1",
+    src_name: "C2",
+    msg_type_name: "DID Resolution",
+  },
+  {
+    timestamp: 1706034374,
+    group: 1,
+    group_id: 21,
     msg_type: 1,
     src_did: "did:sov:test:121",
     des_did: "did:sov:test:122",
     msg: {},
+    id: 5,
+    des_name: "C2",
+    src_name: "C1",
+    msg_type_name: "Attachement",
+  },
+  {
+    timestamp: 1706034376,
+    group: 1,
+    group_id: 21,
+    msg_type: 2,
+    src_did: "did:sov:test:121",
+    des_did: "did:sov:test:122",
+    msg: {},
+    id: 6,
+    des_name: "C2",
+    src_name: "C1",
+    msg_type_name: "Connection Setup",
   },
 ];
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index b921e66..66a112c 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -2,32 +2,59 @@
 
 import { useRef, useEffect, useState } from "react";
 import mermaid from "mermaid";
-import { IconButton } from "@mui/material";
+import {
+  Button,
+  Card,
+  Chip,
+  Dialog,
+  DialogActions,
+  Tooltip,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  List,
+  TextField,
+} from "@mui/material";
+//Icons
 import RefreshIcon from "@mui/icons-material/Refresh";
 import ZoomInIcon from "@mui/icons-material/ZoomIn";
 import ZoomOutIcon from "@mui/icons-material/ZoomOut";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import DownloadIcon from "@mui/icons-material/Download";
 import ResetIcon from "@mui/icons-material/Autorenew";
-import Tooltip from "@mui/material/Tooltip";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+
+// Custom Components
 import { NoDataOverlay } from "../noDataOverlay";
+import { LoadingOverlay } from "../join/loadingOverlay";
+
 import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
 import { mutate } from "swr";
-import { LoadingOverlay } from "../join/loadingOverlay";
-//import { generateMermaidString } from "./helpers";
+
+import { eventMessages, generateMermaidString, mermaidSample } from "./helpers";
+import { iconMatch } from "@/config/config";
+import CopyToClipboard from "../copy_to_clipboard";
+import { formatDateTime } from "@/utils/helpers";
 
 const SequenceDiagram = () => {
   const {
-    //    data: eventMessagesData,
+    data: eventMessagesData,
     isLoading: loadingEventMessages,
     swrKey: eventMessagesKeyFunc,
   } = useGetAllEventmessages();
 
   const mermaidRef: any = useRef(null);
   const [scale, setScale] = useState(1);
-  const hasData = false; // TODO: Readd this, right now it's always false
+  const [openFilters, setOpenFilters] = useState(false);
 
-  const mermaidString = ""; //generateMermaidString(eventMessagesData?.data);
+  const [sequenceNr, setSequenceNr] = useState("");
+  const hasData = eventMessagesData?.data;
+
+  // const mermaidString = generateMermaidString(eventMessagesData?.data);
+
+  const mermaidString = mermaidSample;
 
   useEffect(() => {
     if (!loadingEventMessages && hasData)
@@ -35,7 +62,8 @@ const SequenceDiagram = () => {
         startOnLoad: false,
         securityLevel: "loose",
         sequence: {
-          mirrorActors: false,
+          mirrorActors: true,
+          showSequenceNumbers: true,
         },
       });
 
@@ -126,55 +154,177 @@ const SequenceDiagram = () => {
     }
   };
 
+  const toggleFilters = () => {
+    setOpenFilters((prevState) => !prevState);
+  };
+
+  const onSearchBySeqNumber = (e: any) => {
+    setSequenceNr(e.target.value);
+  };
+
+  const copyToClipboard = (data: any) => {
+    navigator.clipboard.writeText(JSON.stringify(data, null, 2)).then(() => {
+      alert("JSON copied to clipboard!");
+    });
+  };
+
+  const isFilterMatch = (index: number) => {
+    if (!sequenceNr) return true;
+
+    const filterSeqNrInt = parseInt(sequenceNr, 10);
+    return index + 1 === filterSeqNrInt;
+  };
+
   if (loadingEventMessages)
     return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />;
 
   return (
-    <div className="flex flex-col items-end">
-      {hasData ? (
+    <>
+      <div className="flex flex-col items-end">
+        {hasData ? (
+          <>
+            <div className="flex justify-end">
+              <Tooltip placement="top" title="Filter Messages">
+                <IconButton color="primary" onClick={toggleFilters}>
+                  <FilterAltIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip placement="top" title="Refresh Diagram">
+                <IconButton color="primary" onClick={onRefresh}>
+                  <RefreshIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Zoom In" placement="top">
+                <IconButton color="primary" onClick={zoomIn}>
+                  <ZoomInIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Zoom Out" placement="top">
+                <IconButton color="primary" onClick={zoomOut}>
+                  <ZoomOutIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Reset" placement="top">
+                <IconButton color="primary" onClick={resetZoom}>
+                  <ResetIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="View in Fullscreen" placement="top">
+                <IconButton color="primary" onClick={viewInFullScreen}>
+                  <FullscreenIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Download as PNG" placement="top">
+                <IconButton color="primary" onClick={downloadAsPng}>
+                  <DownloadIcon />
+                </IconButton>
+              </Tooltip>
+            </div>
+            <div className="w-full p-2.5">
+              <div className="mermaid" ref={mermaidRef}></div>
+            </div>
+          </>
+        ) : (
+          <div className="flex w-full justify-center">
+            <NoDataOverlay label="No Activity yet" />
+          </div>
+        )}
+      </div>
+
+      {openFilters && (
         <>
-          <div className="flex justify-end">
-            <Tooltip placement="top" title="Refresh Diagram">
-              <IconButton color="default" onClick={onRefresh}>
-                <RefreshIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Zoom In" placement="top">
-              <IconButton color="primary" onClick={zoomIn}>
-                <ZoomInIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Zoom Out" placement="top">
-              <IconButton color="primary" onClick={zoomOut}>
-                <ZoomOutIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Reset" placement="top">
-              <IconButton color="primary" onClick={resetZoom}>
-                <ResetIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="View in Fullscreen" placement="top">
-              <IconButton color="primary" onClick={viewInFullScreen}>
-                <FullscreenIcon />
-              </IconButton>
-            </Tooltip>
-            <Tooltip title="Download as PNG" placement="top">
-              <IconButton color="primary" onClick={downloadAsPng}>
-                <DownloadIcon />
-              </IconButton>
-            </Tooltip>
-          </div>
-          <div className="w-full p-2.5">
-            <div className="mermaid" ref={mermaidRef}></div>
-          </div>
+          <Dialog
+            open={openFilters}
+            keepMounted
+            fullWidth
+            maxWidth="lg"
+            onClose={toggleFilters}
+          >
+            <DialogTitle>All Event Messages</DialogTitle>
+            <DialogContent>
+              <DialogContentText>
+                <div className="flex items-center gap-2.5">
+                  <label>Search by Sequence # </label>
+                  <TextField
+                    onChange={onSearchBySeqNumber}
+                    size="small"
+                    variant="outlined"
+                  />
+                </div>
+                <List className="w-full" component="nav">
+                  {eventMessages
+                    .filter((_: any, index: number) => {
+                      return isFilterMatch(index);
+                    })
+                    .map((message: any, index: number) => {
+                      const {
+                        msg_type_name: msgType,
+                        des_name,
+                        src_name,
+                        group,
+                        group_id,
+                        timestamp,
+                        src_did,
+                        des_did,
+                        msg,
+                      } = message;
+
+                      const formattedTimeStamp = formatDateTime(timestamp);
+                      const IconComponent = iconMatch[msgType];
+                      return (
+                        <div className="flex items-center gap-5 mb-7">
+                          <Chip label={sequenceNr ? sequenceNr : ++index} />
+                          <Card className="w-full p-2">
+                            <div className="flex justify-between">
+                              <div>
+                                <span className="font-bold flex gap-2">
+                                  {IconComponent} {message.msg_type_name}
+                                </span>
+                                <span>
+                                  Sender: {src_name} <Chip label={src_did} /> |{" "}
+                                </span>
+                                <span>
+                                  Receiver: {des_name} <Chip label={des_did} />{" "}
+                                  |{" "}
+                                </span>
+                                <span>Group: {group} | </span>
+                                <span>Group ID: {group_id}</span>
+                              </div>
+                              <span>{formattedTimeStamp}</span>
+                            </div>
+                            <span className="font-bold">
+                              Event Message {sequenceNr ? sequenceNr : index++}
+                            </span>
+                            <div
+                              className="flex"
+                              style={{
+                                border: "1px solid #f1f1f1",
+                                borderRadius: 5,
+                              }}
+                            >
+                              <pre className="flex-1 p-2">
+                                {JSON.stringify(message, null, 2)}
+                              </pre>
+                              <div className="flex-shrink-0 p-2">
+                                <CopyToClipboard textToCopy={message} />
+                              </div>
+                            </div>
+                          </Card>
+                        </div>
+                      );
+                    })}
+                </List>
+              </DialogContentText>
+            </DialogContent>
+            <DialogActions>
+              <Button variant="contained" onClick={toggleFilters}>
+                Close
+              </Button>
+            </DialogActions>
+          </Dialog>
         </>
-      ) : (
-        <div className="flex w-full justify-center">
-          <NoDataOverlay label="No Activity yet" />
-        </div>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/pkgs/ui/src/components/summary_card/index.tsx b/pkgs/ui/src/components/summary_card/index.tsx
index 0a6c016..d12b708 100644
--- a/pkgs/ui/src/components/summary_card/index.tsx
+++ b/pkgs/ui/src/components/summary_card/index.tsx
@@ -13,29 +13,17 @@ import { EntityDetails, ISummaryDetails } from "@/types";
 const SummaryDetails = ({
   entity,
   hasRefreshButton,
-  hasAttachDetach,
   fake,
   onRefresh,
 }: ISummaryDetails) => {
-  const cardContentRef = useRef(null);
+  const cardContentRef = useRef<HTMLDivElement>(null);
   const hasDetails = entity.details && entity.details.length > 0;
 
   return (
     <>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
+      <div className="flex items-center justify-between">
         <h2>{entity.name}</h2>
         <div>
-          {hasAttachDetach && (
-            <Button className="mr-6" variant="contained">
-              Attach / Detach
-            </Button>
-          )}
           {hasRefreshButton && (
             <Button onClick={onRefresh} variant="contained">
               Refresh
@@ -46,7 +34,7 @@ const SummaryDetails = ({
       {hasDetails && (
         <Card variant="outlined">
           <CardHeader
-            subheader={fake ? "Summary (Fake Data)" : "Summary"}
+            subheader={`Summary ${fake ? "(Fake Data)" : ""}`}
             action={<CopyToClipboard contentRef={cardContentRef} />}
           />
           <CardContent ref={cardContentRef}>
diff --git a/pkgs/ui/src/components/summary_card/readme.md b/pkgs/ui/src/components/summary_card/readme.md
new file mode 100644
index 0000000..6a3e302
--- /dev/null
+++ b/pkgs/ui/src/components/summary_card/readme.md
@@ -0,0 +1,52 @@
+# SummaryDetails Component
+
+## Overview
+
+The `SummaryDetails` component is a flexible UI component designed to display a summary of details related to a specific entity in a card format. It is equipped with optional functionalities such as refreshing the data.
+
+## Props
+
+The component accepts the following props:
+
+1. `entity`: An object representing the entity whose details are to be displayed. It should have a name and details, where details is an array of `EntityDetails` objects.
+
+2. `hasRefreshButton` (optional): A boolean indicating if a Refresh button should be displayed. If true, the button is shown, allowing the user to refresh the entity details.
+
+3. `fake` (optional): A boolean indicating if the displayed data is fake. If true, a label '(Fake Data)' is displayed in the card's header.
+
+4. `onRefresh` (optional): A function to be called when the Refresh button is clicked. It should handle the logic for refreshing the entity details.
+
+## UI Structure
+
+- The component starts with a flex container displaying the entity's name and optional button (Refresh) based on the props.
+- If the entity has details (checked by `hasDetails`), it displays a card containing:
+  - A `CardHeader` with a subheader indicating it's a summary and whether the data is fake.
+  - A `CopyToClipboard` component attached to the card's action, allowing the user to copy the details.
+  - A `CardContent` section listing all the details. Each detail is displayed as a `Typography` component, showing the label and value of each `EntityDetails` item.
+
+## How to Use
+
+1. Import the `SummaryDetails` component.
+2. Create an entity object with a name and details, where details is an array of objects with label and value.
+3. Optionally, decide if you want the Refresh functionality by setting `hasRefreshButton` to `true`.
+4. If using the `Refresh` functionality, provide an `onRefresh` function to handle the logic.
+5. Render the `SummaryDetails` component with the desired props.
+
+## Example
+
+```javascript
+<SummaryDetails
+  entity={{
+    name: "Sample Entity",
+    details: [
+      { label: "Detail 1", value: "Value 1" },
+      { label: "Detail 2", value: "Value 2" },
+      // ... more details
+    ],
+  }}
+  hasRefreshButton={true}
+  onRefresh={() => {
+    // handle refresh button logic/callback
+  }}
+/>
+```
diff --git a/pkgs/ui/src/components/table/index.tsx b/pkgs/ui/src/components/table/index.tsx
index 53796ca..635fbe4 100644
--- a/pkgs/ui/src/components/table/index.tsx
+++ b/pkgs/ui/src/components/table/index.tsx
@@ -36,9 +36,16 @@ const CustomTable = ({ configuration, data, loading, tkey }: ICustomTable) => {
 
     // cover use case if we want to render a component
     if (render) renderedValue = render(value);
-    if (typeof renderedValue === "object" && render === undefined) {
+
+    // catch use case where the value is an object but the render function is not provided in the table config
+    if (
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      render === undefined
+    ) {
       console.warn("Missing render function for column " + cellKey);
     }
+
     return (
       <ErrorBoundary>
         <StyledTableCell key={cellKey} align="left">
diff --git a/pkgs/ui/src/components/table/readme.md b/pkgs/ui/src/components/table/readme.md
new file mode 100644
index 0000000..1f2f563
--- /dev/null
+++ b/pkgs/ui/src/components/table/readme.md
@@ -0,0 +1,75 @@
+# CustomTable Component
+
+## Overview
+
+The `CustomTable` component is a dynamic and flexible table designed to display data in a structured tabular format. It is highly customizable, allowing specific rendering for different data types and providing a user-friendly display for loading and empty data states.
+
+## Props
+
+The component accepts the following props:
+
+1. `configuration`: An array of `CustomTableConfiguration` objects defining the structure and customization options for table columns, including:
+
+- `key`: Corresponds to the key in the data objects for the column.
+- `label`: Text label for the column header.
+- `render` (optional): A function for custom rendering of the cell's content.
+- `data`: An array of data objects, each representing a row in the table.
+- `loading` (optional): If `true`, displays a loading state (skeleton screen).
+- `tkey`: A unique key for the table, used for constructing unique cell keys.
+
+## Behavior
+
+- **Loading State**: Displays a `Skeleton` loader when `loading` is `true`.
+- **Empty Data State**: Displays a `NoDataOverlay` component with a message if no data is available.
+- **Data Rendering**:
+  - Dynamically renders cells based on `configuration`.
+  - Handles different data types:
+    - Joins array elements with a comma.
+    - Shows a disabled checkbox for boolean values.
+    - Uses the provided `render` function for custom rendering.
+  - Logs a warning if a cell's value is an object (not an array), and no `render` function is provided.
+- **Error Handling**: Each cell is wrapped in an `ErrorBoundary` component for graceful error handling.
+
+## How to Use
+
+1. Import the `CustomTable` component.
+2. Define the `configuration` for table columns.
+3. Provide `data` as an array of objects corresponding to the configuration.
+4. Optionally, control the loading state with the `loading` prop.
+5. Provide a unique `tkey` for the table.
+
+## Example
+
+```javascript
+import CustomTable from "./CustomTable";
+
+const tableConfig = [
+  { key: "name", label: "Name" },
+  { key: "age", label: "Age" },
+  {
+    key: "isActive",
+    label: "Active",
+    render: (isActive) => (isActive ? "Yes" : "No"),
+  },
+];
+
+const tableData = [
+  { name: "John Doe", age: 30, isActive: true },
+  { name: "Jane Smith", age: 25, isActive: false },
+];
+
+const SomeComponent = () => {
+  return (
+    <div>
+      <CustomTable
+        configuration={tableConfig}
+        data={tableData}
+        loading={false}
+        tkey="unique-table-key"
+      />
+    </div>
+  );
+};
+
+export default SomeComponent;
+```
diff --git a/pkgs/ui/src/components/table/style.tsx b/pkgs/ui/src/components/table/style.tsx
index 59f1887..e3d2df4 100644
--- a/pkgs/ui/src/components/table/style.tsx
+++ b/pkgs/ui/src/components/table/style.tsx
@@ -4,7 +4,6 @@ import TableRow from "@mui/material/TableRow";
 
 export const StyledTableCell = styled(TableCell)(({ theme }) => ({
   [`&.${tableCellClasses.head}`]: {
-    // backgroundColor: theme.palette.common.black,
     backgroundColor: "#003258",
     color: theme.palette.common.white,
   },
diff --git a/pkgs/ui/src/config/access_point/index.tsx b/pkgs/ui/src/config/access_point/index.tsx
index 98405b6..8fae746 100644
--- a/pkgs/ui/src/config/access_point/index.tsx
+++ b/pkgs/ui/src/config/access_point/index.tsx
@@ -15,6 +15,8 @@ export const APSummaryDetails = [
   },
 ];
 
+// AP - 2 Tables Configurations to display labels
+
 export const APAttachmentsTableConfig = [
   {
     key: "name",
@@ -61,29 +63,9 @@ export const APServiceRepositoryTableConfig = [
     label: "Status",
     render: (value: any) => {
       let renderedValue: any = "";
-      if (Array.isArray(value.data)) {
-        renderedValue = value.data.join(", ");
-      } else {
-        console.error("Status is not an array", value);
-      }
+      if (Array.isArray(value.data)) renderedValue = value.data.join(", ");
+      else console.error("Status is not an array", value);
       return renderedValue;
     },
   },
-  // {
-  //   key: "other",
-  //   label: "Type",
-  //   render: (value: any) => {
-  //     let renderedValue: any = "";
-  //     if (typeof value === "object") {
-  //       const label = Object.keys(value)[0];
-  //       const info = value[label];
-  //       renderedValue = (
-  //         <code>
-  //           {label} {info}
-  //         </code>
-  //       );
-  //     }
-  //     return renderedValue;
-  //   },
-  // },
 ];
diff --git a/pkgs/ui/src/config/config.tsx b/pkgs/ui/src/config/config.tsx
new file mode 100644
index 0000000..cbbca1a
--- /dev/null
+++ b/pkgs/ui/src/config/config.tsx
@@ -0,0 +1,112 @@
+import AttachmentIcon from "@mui/icons-material/Attachment";
+import ArticleIcon from "@mui/icons-material/Article";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import AssignmentTurnedInIcon from "@mui/icons-material/AssignmentTurnedIn";
+import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import PageviewIcon from "@mui/icons-material/Pageview";
+import BuildIcon from "@mui/icons-material/Build";
+
+// Palette: https://coolors.co/palette/ff9aa2-feb7b1-ffdac0-ffecc4-e2f0cc-b5ead6-b7dbeb-c7ceea
+
+export const projectConfig = {
+  BASE_URL: "http://localhost:2979/api/v1",
+  GROUPS: {
+    1: {
+      groupName: "Attachment",
+      groupColor: "rgb(255, 154, 162)",
+      groupIcon: AttachmentIcon,
+      messageTypes: [
+        { id: 1, label: "Attachment Request Send" },
+        { id: 2, label: "Attachment Request Received" },
+        { id: 3, label: "Attachment Response Send" },
+        { id: 4, label: "Attachment Response Received" },
+      ],
+    },
+    2: {
+      groupName: "Connection Setup",
+      groupColor: "rgb(254, 183, 177)",
+      groupIcon: ConstructionIcon,
+      messageTypes: [
+        { id: 1, label: "Connection request send" },
+        { id: 2, label: "Connection request received" },
+        { id: 3, label: "Connection response send" },
+        { id: 4, label: "Connection response received" },
+      ],
+    },
+    3: {
+      groupName: "Presentation",
+      groupColor: "rgb(255, 218, 192)",
+      groupIcon: ArticleIcon,
+      messageTypes: [
+        { id: 1, label: "Request send" },
+        { id: 2, label: "Request received" },
+        { id: 3, label: "Presentation send" },
+        { id: 4, label: "Presentation received" },
+        { id: 5, label: "Presentation acknowledged" },
+      ],
+    },
+    4: {
+      groupName: "DID Resolution",
+      groupColor: "rgb(255, 236, 196)",
+      groupIcon: AssignmentTurnedInIcon,
+      messageTypes: [
+        { id: 1, label: "DID Resolution Request send" },
+        { id: 2, label: "DID Resolution Request received" },
+        { id: 3, label: "DID Resolution Response send" },
+        { id: 4, label: "DID Resolution Response received" },
+      ],
+    },
+    5: {
+      groupName: "Service De-registration",
+      groupColor: "rgb(226, 240, 204)",
+      groupIcon: RemoveCircleIcon,
+      messageTypes: [
+        { id: 1, label: "Service De-registration send" },
+        { id: 2, label: "Service De-registration received" },
+        { id: 3, label: "Service De-registration successful send" },
+        { id: 4, label: "Service De-registration successful received" },
+      ],
+    },
+    6: {
+      groupName: "Service Registration",
+      groupColor: "rgb(181, 234, 214)",
+      groupIcon: AddCircleIcon,
+      messageTypes: [
+        { id: 1, label: "Service Registration send" },
+        { id: 2, label: "Service Registration received" },
+        { id: 3, label: "Service Registration successful send" },
+        { id: 4, label: "Service Registration successful received" },
+      ],
+    },
+    7: {
+      groupName: "Service Discovery",
+      groupColor: "rgb(183, 219, 235)",
+      groupIcon: PageviewIcon,
+      messageTypes: [
+        { id: 1, label: "Service Discovery send" },
+        { id: 2, label: "Service Discovery received" },
+        { id: 3, label: "Service Discovery Result send" },
+        { id: 4, label: "Service Discovery Result received" },
+      ],
+    },
+    8: {
+      groupName: "Service Operation",
+      groupColor: "rgb(199, 206, 234)",
+      groupIcon: BuildIcon,
+      messageTypes: [
+        { id: 1, label: "Service Request Send" },
+        { id: 2, label: "Service Request Received" },
+        { id: 3, label: "Service Response Send" },
+        { id: 4, label: "Service Response Received" },
+      ],
+    },
+  },
+};
+
+export const iconMatch: any = {
+  Attachement: <AttachmentIcon />,
+  Presentation: <ArticleIcon />,
+  "DID Resolution": <AssignmentTurnedInIcon />,
+  "Connection Setup": <ConstructionIcon />,
+};
diff --git a/pkgs/ui/src/config/dlg/index.ts b/pkgs/ui/src/config/dlg/index.ts
index 0cc3109..1fdafde 100644
--- a/pkgs/ui/src/config/dlg/index.ts
+++ b/pkgs/ui/src/config/dlg/index.ts
@@ -13,7 +13,7 @@ export const DLGSummaryDetails = [
   },
 ];
 
-// DLG Resolution Table
+// DLG - 2 Tables Configurations to display labels
 
 export const DLGResolutionDummyData = [
   {
diff --git a/pkgs/ui/src/constants/index.ts b/pkgs/ui/src/constants/index.ts
deleted file mode 100644
index 449ac7f..0000000
--- a/pkgs/ui/src/constants/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-const BASE_URL = "http://localhost:2979/api/v1";
-
-// Home View
-const HOME_VIEW_TABLE = "/get_entities";
-
-// Access Point
-const SERVICE_REPOSITORY_URL = "/get_repositories";
-
-export { BASE_URL, HOME_VIEW_TABLE, SERVICE_REPOSITORY_URL };
diff --git a/pkgs/ui/src/types/index.ts b/pkgs/ui/src/types/index.ts
index 9a4808b..d1be251 100644
--- a/pkgs/ui/src/types/index.ts
+++ b/pkgs/ui/src/types/index.ts
@@ -25,6 +25,5 @@ export interface ISummaryDetails {
   entity: any;
   fake?: boolean;
   hasRefreshButton?: boolean;
-  hasAttachDetach?: boolean;
   onRefresh?: () => void;
 }
diff --git a/pkgs/ui/src/utils/helpers.ts b/pkgs/ui/src/utils/helpers.ts
index 8d6e3b2..c9ba915 100644
--- a/pkgs/ui/src/utils/helpers.ts
+++ b/pkgs/ui/src/utils/helpers.ts
@@ -1,5 +1,6 @@
-export const formatDateTime = (date: string) => {
-  const _date = new Date(date);
+export const formatDateTime = (date: string | number) => {
+  const dateToFormat = typeof date === "number" ? date * 1000 : date;
+  const _date = new Date(dateToFormat);
   return _date.toLocaleDateString("en-US", {
     year: "numeric",
     month: "long",

From 68e2f6d6834ca460eba49461da60a700963c210d Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Wed, 24 Jan 2024 23:23:04 +0100
Subject: [PATCH 2/7] removed warnings

---
 pkgs/ui/src/components/sequence_diagram/index.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 66a112c..5f1429d 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -24,7 +24,6 @@ import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import DownloadIcon from "@mui/icons-material/Download";
 import ResetIcon from "@mui/icons-material/Autorenew";
 import FilterAltIcon from "@mui/icons-material/FilterAlt";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 
 // Custom Components
 import { NoDataOverlay } from "../noDataOverlay";
@@ -33,7 +32,7 @@ import { LoadingOverlay } from "../join/loadingOverlay";
 import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
 import { mutate } from "swr";
 
-import { eventMessages, generateMermaidString, mermaidSample } from "./helpers";
+import { eventMessages, mermaidSample } from "./helpers";
 import { iconMatch } from "@/config/config";
 import CopyToClipboard from "../copy_to_clipboard";
 import { formatDateTime } from "@/utils/helpers";
@@ -162,12 +161,6 @@ const SequenceDiagram = () => {
     setSequenceNr(e.target.value);
   };
 
-  const copyToClipboard = (data: any) => {
-    navigator.clipboard.writeText(JSON.stringify(data, null, 2)).then(() => {
-      alert("JSON copied to clipboard!");
-    });
-  };
-
   const isFilterMatch = (index: number) => {
     if (!sequenceNr) return true;
 
@@ -266,7 +259,7 @@ const SequenceDiagram = () => {
                         timestamp,
                         src_did,
                         des_did,
-                        msg,
+                        // msg,
                       } = message;
 
                       const formattedTimeStamp = formatDateTime(timestamp);

From 8e92415c343fcf9c986cdbab12b55b481f8de837 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Wed, 24 Jan 2024 23:52:56 +0100
Subject: [PATCH 3/7] small change to readme

---
 pkgs/ui/src/components/copy_to_clipboard/readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkgs/ui/src/components/copy_to_clipboard/readme.md b/pkgs/ui/src/components/copy_to_clipboard/readme.md
index 646611c..9b8e4a4 100644
--- a/pkgs/ui/src/components/copy_to_clipboard/readme.md
+++ b/pkgs/ui/src/components/copy_to_clipboard/readme.md
@@ -16,8 +16,8 @@ The component accepts the following props:
 
 - Copy Action: When the copy icon is clicked, the component:
 
-  - Prioritizes copying the text from the textToCopy prop if it's provided and not an empty string.
-  - If textToCopy is not provided or is empty, it then attempts to copy the text content of the element referenced by contentRef.
+  - Prioritizes copying the text from the `textToCopy` prop if it's provided and not an empty string.
+  - If `textToCopy` is not provided or is empty, it then attempts to copy the text content of the element referenced by contentRef.
   - Uses the Clipboard API (`navigator.clipboard.writeText`) to copy the text to the user's clipboard.
   - Displays a snackbar notification confirming the copy action if successful.
 

From 7779441c87f155746339c6eac8a683532aab27b7 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Thu, 25 Jan 2024 01:35:36 +0100
Subject: [PATCH 4/7] final fixes for the diagram

---
 .../components/sequence_diagram/helpers.ts    | 339 ++++--------------
 .../src/components/sequence_diagram/index.tsx |  31 +-
 pkgs/ui/src/config/config.tsx                 |  73 ++--
 pkgs/ui/src/utils/helpers.ts                  |  18 +
 4 files changed, 148 insertions(+), 313 deletions(-)

diff --git a/pkgs/ui/src/components/sequence_diagram/helpers.ts b/pkgs/ui/src/components/sequence_diagram/helpers.ts
index 19a01a6..8e1b4a3 100644
--- a/pkgs/ui/src/components/sequence_diagram/helpers.ts
+++ b/pkgs/ui/src/components/sequence_diagram/helpers.ts
@@ -1,276 +1,93 @@
-import { Eventmessage } from "@/api/model";
+import { getGroupColor, sanitizeDID } from "@/utils/helpers";
 
-export const generateMermaidString = (data: Eventmessage[] | undefined) => {
+export const generateMermaidString = (data: any) => {
   if (!data) return "";
 
-  let mermaidString = "";
+  let mermaidString = "sequenceDiagram\n";
+  const participantDetails = new Map();
 
-  // We'll use a Set to ensure participant uniqueness
-  const participants: Set<string> = new Set();
+  // Collect all unique participants along with their sanitized DIDs
+  data.forEach((item: any) => {
+    Object.values(item.groups).forEach((group: any) => {
+      group.forEach((msg: any) => {
+        // Apply sanitization to src_name and des_name if they are in DID format
+        const sanitizedSrcName = msg.src_name.includes(":")
+          ? sanitizeDID(msg.src_name)
+          : msg.src_name;
+        const sanitizedDesName = msg.des_name.includes(":")
+          ? sanitizeDID(msg.des_name)
+          : msg.des_name;
 
-  // Define colors for groups (if you have more groups, add more colors)
-  const groupColors: Record<number, string> = {
-    0: "rgb(191, 223, 255)",
-    1: "rgb(200, 150, 255)",
-    // Add more group colors if needed
-  };
-
-  // Loop through the groups and group_ids to build the string
-  Object.entries(data).forEach(([group, groupData]) => {
-    // Add a rectangle for each group with a note
-    mermaidString += `  rect ${
-      groupColors[parseInt(group)] || "rgb(128, 128, 128)"
-    }\n`; // Fallback color if not defined
-    mermaidString += `  Note over ${Object.values(groupData)
-      .flatMap((gd) => gd.map((msg: any) => msg.src_name))
-      .join(",")}: Group ${group}\n`;
-
-    Object.entries(groupData).forEach(([groupId, messages]) => {
-      // Add a rectangle for each group_id with a note
-      mermaidString += `  alt Group ID ${groupId}\n`;
-
-      messages.forEach((msg: any) => {
-        // Ensure we include each participant
-        participants.add(msg.src_name);
-        participants.add(msg.des_name);
-
-        // Add each message
-        mermaidString += `  ${msg.src_name}->>${msg.des_name}: [${msg.msg_type_name}]: Event Message ${msg.id}\n`;
+        participantDetails.set(sanitizedSrcName, sanitizeDID(msg.src_did));
+        participantDetails.set(sanitizedDesName, sanitizeDID(msg.des_did));
       });
-
-      mermaidString += `  end\n`;
     });
-
-    mermaidString += `  end\n`;
   });
 
-  // Add participants at the start of the string
-  const participantString = Array.from(participants)
-    .map((participant) => {
-      return `  participant ${participant}\n`;
-    })
-    .join("");
+  // Add participants to the mermaid string with names and sanitized DIDs
+  participantDetails.forEach((sanitizedDID, name) => {
+    mermaidString += `    participant ${name} as ${name} <br/>${sanitizedDID}\n`;
+  });
 
-  // Prepend participants to the mermaidString
-  mermaidString = `sequenceDiagram\n${participantString}` + mermaidString;
+  // Iterate through each group
+  data.forEach((item: any) => {
+    let groupParticipants: any = new Set(); // This will collect participants for the current group
+
+    // Collect participants involved in each specific group
+    Object.values(item.groups).forEach((group: any) => {
+      group.forEach((msg: any) => {
+        const sanitizedSrcName = msg.src_name.includes(":")
+          ? sanitizeDID(msg.src_name)
+          : msg.src_name;
+        const sanitizedDesName = msg.des_name.includes(":")
+          ? sanitizeDID(msg.des_name)
+          : msg.des_name;
+
+        groupParticipants.add(sanitizedSrcName);
+        groupParticipants.add(sanitizedDesName);
+      });
+    });
+
+    // Convert the set of participants to a sorted array and then to a string
+    groupParticipants = Array.from(groupParticipants).sort().join(",");
+
+    // Get the group color from the config
+    const groupColor = getGroupColor(item.group_name);
+
+    // Add group note with only involved participants
+    mermaidString += `\n    rect ${groupColor}\n    Note over ${groupParticipants}: ${item.group_name}\n`;
+
+    Object.entries(item.groups).forEach(([groupId, messages]: any) => {
+      mermaidString += `    alt Group Id ${groupId}\n`;
+      messages.forEach((msg: any) => {
+        const sanitizedSrcName = msg.src_name.includes(":")
+          ? sanitizeDID(msg.src_name)
+          : msg.src_name;
+        const sanitizedDesName = msg.des_name.includes(":")
+          ? sanitizeDID(msg.des_name)
+          : msg.des_name;
+        const arrow = sanitizedSrcName > sanitizedDesName ? "-->>" : "->>";
+        mermaidString += `    ${sanitizedSrcName}${arrow}${sanitizedDesName}: [${msg.msg_type_name}]: Event Message ${msg.id}\n`;
+      });
+      mermaidString += "    end\n";
+    });
+    mermaidString += "    end\n";
+  });
 
   return mermaidString;
 };
 
-export const mermaidSample = `
-sequenceDiagram
-    participant C0 as C0 <br/>did:sov:test:120
-    participant C1 as C1 <br/>did:sov:test:121
-    participant C2 as C2 <br/>did:sov:test:122
+export function extractAllEventMessages(data: any) {
+  const allMessagesArray: any = [];
 
-    rect rgb(255, 154, 162)
-    Note over C0,C1 : Group 0
-    alt Group Id 16
-    C1->>C0: [Presentation]: Event Message 1
-    C1->>C0: [DID Resolution]: Event Message 2
-    end
-
-    alt Group Id 51
-    C0->>C1: [Attachement]: Event Message 3
-    C0->>C1: [Connection Setup]: Event Message 4
-    end
-    end
-
-    rect rgb(254, 183, 177)
-    Note over C1,C2 : Group 1
-    alt Group Id 13
-    C2->>C1: [Presentation]: Event Message 5
-    C2->>C1: [DID Resolution]: Event Message 6
-    end
-
-    alt Group Id 21
-    C1->>C2: [Attachement]: Event Message 7
-    C1->>C2: [Connection Setup]: Event Message 8
-    end
-    end
-
-    rect rgb(255, 218, 192)
-    Note over C0,C1 : Group 0
-    alt Group Id 16
-    C1->>C0: [Presentation]: Event Message 1
-    C1->>C0: [DID Resolution]: Event Message 2
-    end
-
-    alt Group Id 51
-    C0->>C1: [Attachement]: Event Message 3
-    C0->>C1: [Connection Setup]: Event Message 4
-    end
-    end
-
-    rect rgb(255, 236, 196)
-    Note over C1,C2 : Group 1
-    alt Group Id 13
-    C2->>C1: [Presentation]: Event Message 5
-    C2->>C1: [DID Resolution]: Event Message 6
-    end
-
-    alt Group Id 21
-    C1->>C2: [Attachement]: Event Message 7
-    C1->>C2: [Connection Setup]: Event Message 8
-    end
-    end
-
-    rect rgb(226, 240, 204)
-    Note over C0,C1 : Group 0
-    alt Group Id 16
-    C1->>C0: [Presentation]: Event Message 1
-    C1->>C0: [DID Resolution]: Event Message 2
-    end
-
-    alt Group Id 51
-    C0->>C1: [Attachement]: Event Message 3
-    C0->>C1: [Connection Setup]: Event Message 4
-    end
-    end
-
-    rect rgb(181, 234, 214)
-    Note over C1,C2 : Group 1
-    alt Group Id 13
-    C2->>C1: [Presentation]: Event Message 5
-    C2->>C1: [DID Resolution]: Event Message 6
-    end
-
-    alt Group Id 21
-    C1->>C2: [Attachement]: Event Message 7
-    C1->>C2: [Connection Setup]: Event Message 8
-    end
-    end
-
-    rect rgb(183, 219, 235)
-    Note over C0,C1 : Group 0
-    alt Group Id 16
-    C1->>C0: [Presentation]: Event Message 1
-    C1->>C0: [DID Resolution]: Event Message 2
-    end
-
-    alt Group Id 51
-    C0->>C1: [Attachement]: Event Message 3
-    C0->>C1: [Connection Setup]: Event Message 4
-    end
-    end
-
-    rect rgb(199, 206, 234)
-    Note over C1,C2 : Group 1
-    alt Group Id 13
-    C2->>C1: [Presentation]: Event Message 5
-    C2->>C1: [DID Resolution]: Event Message 6
-    end
-
-    alt Group Id 21
-    C1->>C2: [Attachement]: Event Message 7
-    C1->>C2: [Connection Setup]: Event Message 8
-    end
-    end
-`;
-
-export const eventMessages = [
-  {
-    timestamp: 1706034368,
-    group: 0,
-    group_id: 16,
-    msg_type: 3,
-    src_did: "did:sov:test:121",
-    des_did: "did:sov:test:120",
-    msg: {},
-    id: 3,
-    des_name: "C0",
-    src_name: "C1",
-    msg_type_name: "Presentation",
-  },
-  {
-    timestamp: 1706034372,
-    group: 0,
-    group_id: 16,
-    msg_type: 4,
-    src_did: "did:sov:test:121",
-    des_did: "did:sov:test:120",
-    msg: {},
-    id: 4,
-    des_name: "C0",
-    src_name: "C1",
-    msg_type_name: "DID Resolution",
-  },
-  {
-    timestamp: 1706034364,
-    group: 0,
-    group_id: 51,
-    msg_type: 1,
-    src_did: "did:sov:test:120",
-    des_did: "did:sov:test:121",
-    msg: {},
-    id: 1,
-    des_name: "C1",
-    src_name: "C0",
-    msg_type_name: "Attachement",
-  },
-  {
-    timestamp: 1706034366,
-    group: 0,
-    group_id: 51,
-    msg_type: 2,
-    src_did: "did:sov:test:120",
-    des_did: "did:sov:test:121",
-    msg: {},
-    id: 2,
-    des_name: "C1",
-    src_name: "C0",
-    msg_type_name: "Connection Setup",
-  },
-  {
-    timestamp: 1706034378,
-    group: 1,
-    group_id: 13,
-    msg_type: 3,
-    src_did: "did:sov:test:122",
-    des_did: "did:sov:test:121",
-    msg: {},
-    id: 7,
-    des_name: "C1",
-    src_name: "C2",
-    msg_type_name: "Presentation",
-  },
-  {
-    timestamp: 1706034382,
-    group: 1,
-    group_id: 13,
-    msg_type: 4,
-    src_did: "did:sov:test:122",
-    des_did: "did:sov:test:121",
-    msg: {},
-    id: 8,
-    des_name: "C1",
-    src_name: "C2",
-    msg_type_name: "DID Resolution",
-  },
-  {
-    timestamp: 1706034374,
-    group: 1,
-    group_id: 21,
-    msg_type: 1,
-    src_did: "did:sov:test:121",
-    des_did: "did:sov:test:122",
-    msg: {},
-    id: 5,
-    des_name: "C2",
-    src_name: "C1",
-    msg_type_name: "Attachement",
-  },
-  {
-    timestamp: 1706034376,
-    group: 1,
-    group_id: 21,
-    msg_type: 2,
-    src_did: "did:sov:test:121",
-    des_did: "did:sov:test:122",
-    msg: {},
-    id: 6,
-    des_name: "C2",
-    src_name: "C1",
-    msg_type_name: "Connection Setup",
-  },
-];
+  if (!data || data.length === 0) return allMessagesArray;
+  else
+    data.forEach((groupData: any) => {
+      Object.values(groupData.groups).forEach((messages: any) => {
+        messages.forEach((message: any) => {
+          allMessagesArray.push(message);
+        });
+      });
+    });
+  return allMessagesArray;
+}
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 5f1429d..95e9017 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -32,10 +32,9 @@ import { LoadingOverlay } from "../join/loadingOverlay";
 import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
 import { mutate } from "swr";
 
-import { eventMessages, mermaidSample } from "./helpers";
-import { iconMatch } from "@/config/config";
+import { extractAllEventMessages, generateMermaidString } from "./helpers";
 import CopyToClipboard from "../copy_to_clipboard";
-import { formatDateTime } from "@/utils/helpers";
+import { formatDateTime, getGroupById } from "@/utils/helpers";
 
 const SequenceDiagram = () => {
   const {
@@ -51,9 +50,8 @@ const SequenceDiagram = () => {
   const [sequenceNr, setSequenceNr] = useState("");
   const hasData = eventMessagesData?.data;
 
-  // const mermaidString = generateMermaidString(eventMessagesData?.data);
-
-  const mermaidString = mermaidSample;
+  const mermaidString = generateMermaidString(eventMessagesData?.data);
+  const allEventMessages = extractAllEventMessages(eventMessagesData?.data);
 
   useEffect(() => {
     if (!loadingEventMessages && hasData)
@@ -245,7 +243,7 @@ const SequenceDiagram = () => {
                   />
                 </div>
                 <List className="w-full" component="nav">
-                  {eventMessages
+                  {allEventMessages
                     .filter((_: any, index: number) => {
                       return isFilterMatch(index);
                     })
@@ -259,19 +257,22 @@ const SequenceDiagram = () => {
                         timestamp,
                         src_did,
                         des_did,
-                        // msg,
+                        msg,
                       } = message;
 
                       const formattedTimeStamp = formatDateTime(timestamp);
-                      const IconComponent = iconMatch[msgType];
+                      const { groupIcon: IconComponent, groupName } =
+                        getGroupById(group);
+
                       return (
-                        <div className="flex items-center gap-5 mb-7">
+                        <div className="flex items-center gap-5 mb-8">
                           <Chip label={sequenceNr ? sequenceNr : ++index} />
                           <Card className="w-full p-2">
-                            <div className="flex justify-between">
+                            <div className="flex justify-between mb-4">
                               <div>
-                                <span className="font-bold flex gap-2">
-                                  {IconComponent} {message.msg_type_name}
+                                <span className="font-bold flex gap-2 items-center mb-4">
+                                  {IconComponent} {groupName}{" "}
+                                  <Chip label={msgType} />
                                 </span>
                                 <span>
                                   Sender: {src_name} <Chip label={src_did} /> |{" "}
@@ -289,7 +290,7 @@ const SequenceDiagram = () => {
                               Event Message {sequenceNr ? sequenceNr : index++}
                             </span>
                             <div
-                              className="flex"
+                              className="flex mt-4"
                               style={{
                                 border: "1px solid #f1f1f1",
                                 borderRadius: 5,
@@ -309,7 +310,7 @@ const SequenceDiagram = () => {
                 </List>
               </DialogContentText>
             </DialogContent>
-            <DialogActions>
+            <DialogActions className="p-4">
               <Button variant="contained" onClick={toggleFilters}>
                 Close
               </Button>
diff --git a/pkgs/ui/src/config/config.tsx b/pkgs/ui/src/config/config.tsx
index cbbca1a..a42175e 100644
--- a/pkgs/ui/src/config/config.tsx
+++ b/pkgs/ui/src/config/config.tsx
@@ -7,15 +7,14 @@ import AddCircleIcon from "@mui/icons-material/AddCircle";
 import PageviewIcon from "@mui/icons-material/Pageview";
 import BuildIcon from "@mui/icons-material/Build";
 
-// Palette: https://coolors.co/palette/ff9aa2-feb7b1-ffdac0-ffecc4-e2f0cc-b5ead6-b7dbeb-c7ceea
-
-export const projectConfig = {
+export const projectConfig: any = {
   BASE_URL: "http://localhost:2979/api/v1",
-  GROUPS: {
-    1: {
-      groupName: "Attachment",
-      groupColor: "rgb(255, 154, 162)",
-      groupIcon: AttachmentIcon,
+  GROUPS: [
+    {
+      groupName: "Attachement",
+      groupId: 1,
+      groupColor: "rgb(230, 230, 250)",
+      groupIcon: <AttachmentIcon />,
       messageTypes: [
         { id: 1, label: "Attachment Request Send" },
         { id: 2, label: "Attachment Request Received" },
@@ -23,10 +22,11 @@ export const projectConfig = {
         { id: 4, label: "Attachment Response Received" },
       ],
     },
-    2: {
+    {
       groupName: "Connection Setup",
-      groupColor: "rgb(254, 183, 177)",
-      groupIcon: ConstructionIcon,
+      groupId: 2,
+      groupColor: "rgb(245, 222, 179)",
+      groupIcon: <ConstructionIcon />,
       messageTypes: [
         { id: 1, label: "Connection request send" },
         { id: 2, label: "Connection request received" },
@@ -34,10 +34,11 @@ export const projectConfig = {
         { id: 4, label: "Connection response received" },
       ],
     },
-    3: {
+    {
       groupName: "Presentation",
-      groupColor: "rgb(255, 218, 192)",
-      groupIcon: ArticleIcon,
+      groupId: 3,
+      groupColor: "rgb(255, 209, 220)",
+      groupIcon: <ArticleIcon />,
       messageTypes: [
         { id: 1, label: "Request send" },
         { id: 2, label: "Request received" },
@@ -46,10 +47,11 @@ export const projectConfig = {
         { id: 5, label: "Presentation acknowledged" },
       ],
     },
-    4: {
+    {
       groupName: "DID Resolution",
-      groupColor: "rgb(255, 236, 196)",
-      groupIcon: AssignmentTurnedInIcon,
+      groupId: 4,
+      groupColor: "rgb(189, 255, 243)",
+      groupIcon: <AssignmentTurnedInIcon />,
       messageTypes: [
         { id: 1, label: "DID Resolution Request send" },
         { id: 2, label: "DID Resolution Request received" },
@@ -57,10 +59,11 @@ export const projectConfig = {
         { id: 4, label: "DID Resolution Response received" },
       ],
     },
-    5: {
+    {
       groupName: "Service De-registration",
-      groupColor: "rgb(226, 240, 204)",
-      groupIcon: RemoveCircleIcon,
+      groupId: 5,
+      groupColor: "rgb(255, 218, 185)",
+      groupIcon: <RemoveCircleIcon />,
       messageTypes: [
         { id: 1, label: "Service De-registration send" },
         { id: 2, label: "Service De-registration received" },
@@ -68,10 +71,11 @@ export const projectConfig = {
         { id: 4, label: "Service De-registration successful received" },
       ],
     },
-    6: {
+    {
       groupName: "Service Registration",
-      groupColor: "rgb(181, 234, 214)",
-      groupIcon: AddCircleIcon,
+      groupId: 6,
+      groupColor: "rgb(200, 162, 200)",
+      groupIcon: <AddCircleIcon />,
       messageTypes: [
         { id: 1, label: "Service Registration send" },
         { id: 2, label: "Service Registration received" },
@@ -79,10 +83,11 @@ export const projectConfig = {
         { id: 4, label: "Service Registration successful received" },
       ],
     },
-    7: {
+    {
       groupName: "Service Discovery",
-      groupColor: "rgb(183, 219, 235)",
-      groupIcon: PageviewIcon,
+      groupId: 7,
+      groupColor: "rgb(255, 250, 205)",
+      groupIcon: <PageviewIcon />,
       messageTypes: [
         { id: 1, label: "Service Discovery send" },
         { id: 2, label: "Service Discovery received" },
@@ -90,10 +95,11 @@ export const projectConfig = {
         { id: 4, label: "Service Discovery Result received" },
       ],
     },
-    8: {
+    {
       groupName: "Service Operation",
-      groupColor: "rgb(199, 206, 234)",
-      groupIcon: BuildIcon,
+      groupId: 8,
+      groupColor: "rgb(135, 206, 235)",
+      groupIcon: <BuildIcon />,
       messageTypes: [
         { id: 1, label: "Service Request Send" },
         { id: 2, label: "Service Request Received" },
@@ -101,12 +107,5 @@ export const projectConfig = {
         { id: 4, label: "Service Response Received" },
       ],
     },
-  },
-};
-
-export const iconMatch: any = {
-  Attachement: <AttachmentIcon />,
-  Presentation: <ArticleIcon />,
-  "DID Resolution": <AssignmentTurnedInIcon />,
-  "Connection Setup": <ConstructionIcon />,
+  ],
 };
diff --git a/pkgs/ui/src/utils/helpers.ts b/pkgs/ui/src/utils/helpers.ts
index c9ba915..82f4f22 100644
--- a/pkgs/ui/src/utils/helpers.ts
+++ b/pkgs/ui/src/utils/helpers.ts
@@ -1,3 +1,5 @@
+import { projectConfig } from "@/config/config";
+
 export const formatDateTime = (date: string | number) => {
   const dateToFormat = typeof date === "number" ? date * 1000 : date;
   const _date = new Date(dateToFormat);
@@ -11,3 +13,19 @@ export const formatDateTime = (date: string | number) => {
     hour12: true,
   });
 };
+
+export function sanitizeDID(did: string) {
+  return did.replace(/:/g, "_");
+}
+
+export function getGroupColor(groupName: string) {
+  const group = projectConfig.GROUPS.find(
+    (g: any) => g.groupName === groupName,
+  );
+  return group ? group.groupColor : "rgb(211, 211, 211)"; // Light gray if not found
+}
+
+export function getGroupById(groupId: string | number) {
+  const group = projectConfig.GROUPS.find((g: any) => g.groupId === groupId);
+  return group ? group : {};
+}

From 711ade486668e0450627fb6ad76ee44db53fe5fe Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Thu, 25 Jan 2024 01:46:59 +0100
Subject: [PATCH 5/7] fixing some failuers on build

---
 pkgs/ui/src/components/sequence_diagram/index.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 95e9017..3bed9bd 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -257,7 +257,7 @@ const SequenceDiagram = () => {
                         timestamp,
                         src_did,
                         des_did,
-                        msg,
+                        // msg, TODO: Need to use the content inside the msg to display in the diagram
                       } = message;
 
                       const formattedTimeStamp = formatDateTime(timestamp);
@@ -265,12 +265,15 @@ const SequenceDiagram = () => {
                         getGroupById(group);
 
                       return (
-                        <div className="flex items-center gap-5 mb-8">
+                        <div
+                          key={index}
+                          className="flex items-center gap-5 mb-8"
+                        >
                           <Chip label={sequenceNr ? sequenceNr : ++index} />
-                          <Card className="w-full p-2">
+                          <Card className="p-2 w-full">
                             <div className="flex justify-between mb-4">
                               <div>
-                                <span className="font-bold flex gap-2 items-center mb-4">
+                                <span className="flex items-center gap-2 font-bold mb-4">
                                   {IconComponent} {groupName}{" "}
                                   <Chip label={msgType} />
                                 </span>
@@ -290,7 +293,7 @@ const SequenceDiagram = () => {
                               Event Message {sequenceNr ? sequenceNr : index++}
                             </span>
                             <div
-                              className="flex mt-4"
+                              className="mt-4 flex"
                               style={{
                                 border: "1px solid #f1f1f1",
                                 borderRadius: 5,
@@ -299,7 +302,7 @@ const SequenceDiagram = () => {
                               <pre className="flex-1 p-2">
                                 {JSON.stringify(message, null, 2)}
                               </pre>
-                              <div className="flex-shrink-0 p-2">
+                              <div className="shrink-0 p-2">
                                 <CopyToClipboard textToCopy={message} />
                               </div>
                             </div>

From 1d6ea0ef0c3557c79604adc68413893d2a520196 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Thu, 25 Jan 2024 01:53:02 +0100
Subject: [PATCH 6/7] afain fixed tailwind classes

---
 pkgs/ui/src/components/sequence_diagram/index.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 3bed9bd..4f4b55e 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -270,10 +270,19 @@ const SequenceDiagram = () => {
                           className="flex items-center gap-5 mb-8"
                         >
                           <Chip label={sequenceNr ? sequenceNr : ++index} />
-                          <Card className="p-2 w-full">
-                            <div className="flex justify-between mb-4">
+                          <Card style={{ padding: 10 }} className="w-full">
+                            <div
+                              style={{ marginBottom: 12 }}
+                              className="flex justify-between"
+                            >
                               <div>
-                                <span className="flex items-center gap-2 font-bold mb-4">
+                                <span
+                                  style={{
+                                    marginBottom: 12,
+                                    fontWeight: "bold",
+                                  }}
+                                  className="flex items-center gap-2"
+                                >
                                   {IconComponent} {groupName}{" "}
                                   <Chip label={msgType} />
                                 </span>

From db1591a76eff1c3ee4ca97b0309241fb8c2e4057 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Thu, 25 Jan 2024 01:57:06 +0100
Subject: [PATCH 7/7] final final tailwind fixes

---
 pkgs/ui/src/components/sequence_diagram/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 4f4b55e..6d9e7b8 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -267,7 +267,8 @@ const SequenceDiagram = () => {
                       return (
                         <div
                           key={index}
-                          className="flex items-center gap-5 mb-8"
+                          style={{ marginBottom: 12 }}
+                          className="flex items-center gap-5"
                         >
                           <Chip label={sequenceNr ? sequenceNr : ++index} />
                           <Card style={{ padding: 10 }} className="w-full">