From 7779441c87f155746339c6eac8a683532aab27b7 Mon Sep 17 00:00:00 2001 From: sara-pervana Date: Thu, 25 Jan 2024 01:35:36 +0100 Subject: [PATCH] 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 = 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 = { - 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}
${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
did:sov:test:120 - participant C1 as C1
did:sov:test:121 - participant C2 as C2
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 = () => { /> - {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 ( -
+
-
+
- - {IconComponent} {message.msg_type_name} + + {IconComponent} {groupName}{" "} + Sender: {src_name} |{" "} @@ -289,7 +290,7 @@ const SequenceDiagram = () => { Event Message {sequenceNr ? sequenceNr : index++}
{ - + 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: , 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: , 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: , 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: , 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: , 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: , 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: , 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: , 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: , - Presentation: , - "DID Resolution": , - "Connection Setup": , + ], }; 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 : {}; +}