- setShowSidebar((c) => !c)}
- >
- {!showSidebar && }
-
+
+ setShowSidebar((c) => !c)}
+ >
+ {!showSidebar && }
+
+
diff --git a/pkgs/ui/src/components/sequence_diagram/helpers.ts b/pkgs/ui/src/components/sequence_diagram/helpers.ts
new file mode 100644
index 0000000..b4fb4c8
--- /dev/null
+++ b/pkgs/ui/src/components/sequence_diagram/helpers.ts
@@ -0,0 +1,136 @@
+import { Eventmessage } from "@/api/model";
+
+export const generateMermaidString = (data: Eventmessage[] | undefined) => {
+ if (!data || data.length === 0) return "";
+
+ const participants = Array.from(
+ new Set(data.flatMap((item) => [item.src_did, item.des_did])),
+ );
+
+ let mermaidString = "sequenceDiagram\n";
+
+ participants.forEach((participant, index) => {
+ mermaidString += ` participant ${String.fromCharCode(
+ 65 + index,
+ )} as ${participant}\n`;
+ });
+
+ let currentGroupId: number | null = null;
+
+ data.forEach((item, index) => {
+ const srcParticipant = String.fromCharCode(
+ 65 + participants.indexOf(item.src_did),
+ );
+ const desParticipant = String.fromCharCode(
+ 65 + participants.indexOf(item.des_did),
+ );
+ const timestamp = new Date(item.timestamp * 1000).toLocaleString();
+ const message = item.msg.text || `Event message ${index + 1}`;
+
+ if (item.group_id !== currentGroupId) {
+ if (currentGroupId !== null) {
+ mermaidString += ` end\n`;
+ }
+ mermaidString += ` alt Group ${item.group_id}\n`;
+ currentGroupId = item.group_id;
+ }
+
+ mermaidString += ` ${srcParticipant}->>${desParticipant}: [${timestamp}] ${message}\n`;
+ });
+
+ if (currentGroupId !== null) {
+ mermaidString += ` end\n`;
+ }
+
+ return mermaidString;
+};
+
+// Dummy Data
+
+export const dataFromBE = [
+ {
+ id: 12,
+ timestamp: 1704892813,
+ 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,
+ msg_type: 3,
+ src_did: "did:sov:test:121",
+ des_did: "did:sov:test:120",
+ msg: {},
+ },
+ {
+ id: 66251,
+ timestamp: 1704892805,
+ group: 0,
+ group_id: 51,
+ msg_type: 1,
+ src_did: "did:sov:test:120",
+ des_did: "did:sov:test:121",
+ msg: {},
+ },
+ {
+ id: 85434,
+ timestamp: 1704892807,
+ group: 0,
+ group_id: 51,
+ msg_type: 2,
+ src_did: "did:sov:test:120",
+ des_did: "did:sov:test:121",
+ msg: {},
+ },
+ {
+ id: 124842,
+ timestamp: 1704892819,
+ group: 1,
+ group_id: 19,
+ msg_type: 3,
+ src_did: "did:sov:test:122",
+ des_did: "did:sov:test:121",
+ msg: {},
+ },
+ {
+ id: 246326,
+ timestamp: 1704892815,
+ group: 1,
+ group_id: 53,
+ msg_type: 1,
+ src_did: "did:sov:test:121",
+ des_did: "did:sov:test:122",
+ msg: {},
+ },
+];
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
new file mode 100644
index 0000000..43d29f3
--- /dev/null
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import mermaid from "mermaid";
+import { IconButton } from "@mui/material";
+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 { NoDataOverlay } from "../noDataOverlay";
+import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
+import { mutate } from "swr";
+import { LoadingOverlay } from "../join/loadingOverlay";
+import { generateMermaidString } from "./helpers";
+
+const SequenceDiagram = () => {
+ const {
+ data: eventMessagesData,
+ isLoading: loadingEventMessages,
+ swrKey: eventMessagesKeyFunc,
+ } = useGetAllEventmessages();
+
+ const mermaidRef: any = useRef(null);
+ const [scale, setScale] = useState(1);
+ const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0;
+
+ const mermaidString = generateMermaidString(eventMessagesData?.data);
+
+ useEffect(() => {
+ if (!loadingEventMessages && hasData)
+ mermaid.initialize({
+ startOnLoad: false,
+ securityLevel: "loose",
+ sequence: {
+ mirrorActors: false,
+ },
+ });
+
+ if (mermaidRef.current) {
+ mermaidRef.current.innerHTML = mermaidString;
+ mermaid.init(undefined, mermaidRef.current);
+ }
+ }, [loadingEventMessages, hasData, mermaidString]);
+
+ useEffect(() => {
+ if (mermaidRef.current) {
+ const svg = mermaidRef.current.querySelector("svg");
+ if (svg) {
+ svg.style.transform = `scale(${scale})`;
+ svg.style.transformOrigin = "top left";
+ mermaidRef.current.style.width = `${
+ svg.getBoundingClientRect().width * scale
+ }px`;
+ mermaidRef.current.style.height = `${
+ svg.getBoundingClientRect().height * scale
+ }px`;
+ }
+ }
+ }, [scale]);
+
+ const onRefresh = () => {
+ const eventMessagesKey =
+ typeof eventMessagesKeyFunc === "function"
+ ? eventMessagesKeyFunc()
+ : eventMessagesKeyFunc;
+
+ if (eventMessagesKey) {
+ mutate(eventMessagesKey);
+ }
+ };
+
+ const zoomIn = () => {
+ setScale((scale) => scale * 1.1);
+ };
+
+ const zoomOut = () => {
+ setScale((scale) => scale / 1.1);
+ };
+
+ const resetZoom = () => {
+ setScale(1);
+ };
+
+ const viewInFullScreen = () => {
+ if (mermaidRef.current) {
+ const svg = mermaidRef.current.querySelector("svg");
+ const serializer = new XMLSerializer();
+ const svgBlob = new Blob([serializer.serializeToString(svg)], {
+ type: "image/svg+xml",
+ });
+ const url = URL.createObjectURL(svgBlob);
+ window.open(url, "_blank");
+ }
+ };
+
+ const downloadAsPng = () => {
+ if (mermaidRef.current) {
+ const svg = mermaidRef.current.querySelector("svg");
+ const svgData = new XMLSerializer().serializeToString(svg);
+
+ // Create a canvas element to convert SVG to PNG
+ const canvas = document.createElement("canvas");
+ const svgSize = svg.getBoundingClientRect();
+ canvas.width = svgSize.width;
+ canvas.height = svgSize.height;
+ const ctx = canvas.getContext("2d");
+ const img = document.createElement("img");
+
+ img.onload = () => {
+ ctx?.drawImage(img, 0, 0);
+ const pngData = canvas.toDataURL("image/png");
+
+ // Trigger download
+ const link = document.createElement("a");
+ link.download = "sequence-diagram.png";
+ link.href = pngData;
+ link.click();
+ };
+
+ img.src =
+ "data:image/svg+xml;base64," +
+ btoa(unescape(encodeURIComponent(svgData)));
+ }
+ };
+
+ if (loadingEventMessages)
+ return