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
+  // Collect all unique participants along with their sanitized DIDs
-  const participants: Set<string> = new Set();
+  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)
+        participantDetails.set(sanitizedSrcName, sanitizeDID(msg.src_did));
-  const groupColors: Record<number, string> = {
+        participantDetails.set(sanitizedDesName, sanitizeDID(msg.des_did));
-    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`;
       });
-
-      mermaidString += `  end\n`;
     });
-
-    mermaidString += `  end\n`;
   });
 
-  // Add participants at the start of the string
+  // Add participants to the mermaid string with names and sanitized DIDs
-  const participantString = Array.from(participants)
+  participantDetails.forEach((sanitizedDID, name) => {
-    .map((participant) => {
+    mermaidString += `    participant ${name} as ${name} <br/>${sanitizedDID}\n`;
-      return `  participant ${participant}\n`;
+  });
-    })
-    .join("");
 
-  // Prepend participants to the mermaidString
+  // Iterate through each group
-  mermaidString = `sequenceDiagram\n${participantString}` + mermaidString;
+  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 = `
+export function extractAllEventMessages(data: any) {
-sequenceDiagram
+  const allMessagesArray: any = [];
-    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
 
-    rect rgb(255, 154, 162)
+  if (!data || data.length === 0) return allMessagesArray;
-    Note over C0,C1 : Group 0
+  else
-    alt Group Id 16
+    data.forEach((groupData: any) => {
-    C1->>C0: [Presentation]: Event Message 1
+      Object.values(groupData.groups).forEach((messages: any) => {
-    C1->>C0: [DID Resolution]: Event Message 2
+        messages.forEach((message: any) => {
-    end
+          allMessagesArray.push(message);
-
+        });
-    alt Group Id 51
+      });
-    C0->>C1: [Attachement]: Event Message 3
+    });
-    C0->>C1: [Connection Setup]: Event Message 4
+  return allMessagesArray;
-    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",
-  },
-];

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 { extractAllEventMessages, generateMermaidString } from "./helpers";
-import { iconMatch } from "@/config/config";
 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 = generateMermaidString(eventMessagesData?.data);
-
+  const allEventMessages = extractAllEventMessages(eventMessagesData?.data);
-  const mermaidString = mermaidSample;
 
   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">
+                                <span className="font-bold flex gap-2 items-center mb-4">
-                                  {IconComponent} {message.msg_type_name}
+                                  {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>

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: any = {
-
-export const projectConfig = {
   BASE_URL: "http://localhost:2979/api/v1",
-  GROUPS: {
+  GROUPS: [
-    1: {
+    {
-      groupName: "Attachment",
+      groupName: "Attachement",
-      groupColor: "rgb(255, 154, 162)",
+      groupId: 1,
-      groupIcon: AttachmentIcon,
+      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)",
+      groupId: 2,
-      groupIcon: ConstructionIcon,
+      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)",
+      groupId: 3,
-      groupIcon: ArticleIcon,
+      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)",
+      groupId: 4,
-      groupIcon: AssignmentTurnedInIcon,
+      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)",
+      groupId: 5,
-      groupIcon: RemoveCircleIcon,
+      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)",
+      groupId: 6,
-      groupIcon: AddCircleIcon,
+      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)",
+      groupId: 7,
-      groupIcon: PageviewIcon,
+      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)",
+      groupId: 8,
-      groupIcon: BuildIcon,
+      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 />,
 };

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 : {};
+}