generated from Luis/nextjs-python-web-template
final fixes for the diagram
This commit is contained in:
sara-pervana
committed by
Sara Pervana
Sara Pervana
parent
8e92415c34
commit
7779441c87
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user