removed unnecessary style file and ran nix fmt

2024-01-14 14:49:01 +01:00
parent 7b2b675c2c
commit 1db032e932
8 changed files with 150 additions and 157 deletions
--- a/pkgs/ui/_document.js
+++ b/pkgs/ui/_document.js
@@ -1 +1 @@
-          <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>;
--- a/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
+++ b/pkgs/ui/src/app/distributed-ledger-gateway/page.tsx
@@ -8,7 +8,6 @@ import { useGetAllResolutions } from "@/api/resolution/resolution";
 import { mutate } from "swr";

 export default function DLG() {
-
  const {
    data: resolutionData,
    isLoading: loadingResolutions,
--- a/pkgs/ui/src/app/home/page.tsx
+++ b/pkgs/ui/src/app/home/page.tsx
@@ -8,8 +8,10 @@ import dynamic from "next/dynamic";
 import { useEffect } from "react";
 import { mutate } from "swr";

-const NoSSRSequenceDiagram = dynamic(() => import('../../components/sequence_diagram'), { ssr: false })
-
+const NoSSRSequenceDiagram = dynamic(
+  () => import("../../components/sequence_diagram"),
+  { ssr: false },
+);

 export default function Home() {
  const { data } = useAppState();
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -51,7 +51,8 @@ export default function RootLayout({
        <meta name="description" content="Service Aware Networks" />
        <link rel="icon" href="tub-favicon.ico" sizes="any" />
        <script type="module">
-          import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+          import mermaid from
+          'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        </script>
        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
        <script
@@ -81,7 +82,8 @@ export default function RootLayout({
                          onClose={() => setShowSidebar(false)}
                        />
                        <div
-                          className={tw`${!showSidebarDerived && translate
+                          className={tw`${
+                            !showSidebarDerived && translate
                          } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
                        >
                          <div className="grid grid-cols-3">
--- a/pkgs/ui/src/components/sequence_diagram/helpers.ts
+++ b/pkgs/ui/src/components/sequence_diagram/helpers.ts
@@ -1,23 +1,33 @@
 export const generateMermaidString = (data: any) => {
-
-  if (!data || data.length === 0)
-    return '';
+  if (!data || data.length === 0) return "";

  // Extract unique participants
-  const participants = Array.from(new Set(data.map((item: any) => item.src_did).concat(data.map((item: any) => item.des_did))));
+  const participants = Array.from(
+    new Set(
+      data
+        .map((item: any) => item.src_did)
+        .concat(data.map((item: any) => item.des_did)),
+    ),
+  );

  // Begin the sequence diagram definition
  let mermaidString = "sequenceDiagram\n";

  // Add participants to the diagram
  participants.forEach((participant, index) => {
-    mermaidString += `  participant ${String.fromCharCode(65 + index)} as ${participant}\n`;
+    mermaidString += `  participant ${String.fromCharCode(
+      65 + index,
+    )} as ${participant}\n`;
  });

  // Add messages to the diagram
  data.forEach((item: any, index: number) => {
-    const srcParticipant = String.fromCharCode(65 + participants.indexOf(item.src_did));
-    const desParticipant = String.fromCharCode(65 + participants.indexOf(item.des_did));
+    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(); // Convert Unix timestamp to readable date
    const message = item.msg.text || `Event message ${index + 1}`;

@@ -40,94 +50,92 @@ export const generateMermaidString = (data: any) => {
  return mermaidString;
 };

-
-
 // Dummy Data

 export const dataFromBE = [
  {
-    "id": 12,
-    "timestamp": 1704892813,
-    "group": 0,
-    "group_id": 12,
+    id: 12,
+    timestamp: 1704892813,
+    group: 0,
+    group_id: 12,
    // "group_name": "Data",
-    "msg_type": 4,
-    "src_did": "did:sov:test:121",
+    msg_type: 4,
+    src_did: "did:sov:test:121",
    // "src_name": "Entity A",
-    "des_did": "did:sov:test:120",
+    des_did: "did:sov:test:120",
    // "des_name": "Entity B",
-    "msg": {
-      text: 'Hello World'
-    }
+    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: 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: 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: 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: 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: 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: 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": {}
-  }
-]
+    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: {},
+  },
+];
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -1,23 +1,22 @@
-'use client';
+"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, dataFromBE } from './helpers';
+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, dataFromBE } from "./helpers";

 const SequenceDiagram = () => {
-
  const {
    data: eventMessagesData,
    isLoading: loadingEventMessages,
@@ -31,11 +30,10 @@ const SequenceDiagram = () => {
  const mermaidString = generateMermaidString(eventMessagesData?.data);

  useEffect(() => {
-
    if (!loadingEventMessages && hasData)
      mermaid.initialize({
        startOnLoad: false,
-        securityLevel: 'loose',
+        securityLevel: "loose",
        sequence: {
          mirrorActors: false,
        },
@@ -49,17 +47,20 @@ const SequenceDiagram = () => {

  useEffect(() => {
    if (mermaidRef.current) {
-      const svg = mermaidRef.current.querySelector('svg');
+      const svg = mermaidRef.current.querySelector("svg");
      if (svg) {
        svg.style.transform = `scale(${scale})`;
-        svg.style.transformOrigin = 'top left'; // Set transform origin to top left
-        mermaidRef.current.style.width = `${svg.getBoundingClientRect().width * scale}px`;
-        mermaidRef.current.style.height = `${svg.getBoundingClientRect().height * scale}px`;
+        svg.style.transformOrigin = "top left"; // Set transform origin to 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"
@@ -85,94 +86,96 @@ const SequenceDiagram = () => {

  const viewInFullScreen = () => {
    if (mermaidRef.current) {
-      const svg = mermaidRef.current.querySelector('svg');
+      const svg = mermaidRef.current.querySelector("svg");
      const serializer = new XMLSerializer();
      const svgBlob = new Blob([serializer.serializeToString(svg)], {
-        type: 'image/svg+xml',
+        type: "image/svg+xml",
      });
      const url = URL.createObjectURL(svgBlob);
-      window.open(url, '_blank');
+      window.open(url, "_blank");
    }
  };

  const downloadAsPng = () => {
    if (mermaidRef.current) {
-      const svg = mermaidRef.current.querySelector('svg');
+      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 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');
+      const ctx = canvas.getContext("2d");
+      const img = document.createElement("img");

      img.onload = () => {
        ctx?.drawImage(img, 0, 0);
-        const pngData = canvas.toDataURL('image/png');
+        const pngData = canvas.toDataURL("image/png");

        // Trigger download
-        const link = document.createElement('a');
-        link.download = 'sequence-diagram.png';
+        const link = document.createElement("a");
+        link.download = "sequence-diagram.png";
        link.href = pngData;
        link.click();
      };

      img.src =
-        'data:image/svg+xml;base64,' +
+        "data:image/svg+xml;base64," +
        btoa(unescape(encodeURIComponent(svgData)));
    }
  };

  if (loadingEventMessages)
-    return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />
+    return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />;

  return (
    <div className="flex flex-col items-end w-full">
-      {
-        hasData ? <>
-          <div className='flex justify-end gap-2.5 mb-5 w-full'>
-            <Tooltip placement='top' title='Refresh Diagram'>
+      {hasData ? (
+        <>
+          <div className="flex justify-end gap-2.5 mb-5 w-full">
+            <Tooltip placement="top" title="Refresh Diagram">
              <IconButton color="default" onClick={onRefresh}>
                <RefreshIcon />
              </IconButton>
            </Tooltip>
-            <Tooltip title="Zoom In" placement='top'>
+            <Tooltip title="Zoom In" placement="top">
              <IconButton color="primary" onClick={zoomIn}>
                <ZoomInIcon />
              </IconButton>
            </Tooltip>
-            <Tooltip title="Zoom Out" placement='top'>
+            <Tooltip title="Zoom Out" placement="top">
              <IconButton color="primary" onClick={zoomOut}>
                <ZoomOutIcon />
              </IconButton>
            </Tooltip>
-            <Tooltip title="Reset" placement='top'>
+            <Tooltip title="Reset" placement="top">
              <IconButton color="primary" onClick={resetZoom}>
                <ResetIcon />
              </IconButton>
            </Tooltip>
-            <Tooltip title="View in Fullscreen" placement='top'>
+            <Tooltip title="View in Fullscreen" placement="top">
              <IconButton color="primary" onClick={viewInFullScreen}>
                <FullscreenIcon />
              </IconButton>
            </Tooltip>
-            <Tooltip title="Download as PNG" placement='top'>
+            <Tooltip title="Download as PNG" placement="top">
              <IconButton color="primary" onClick={downloadAsPng}>
                <DownloadIcon />
              </IconButton>
            </Tooltip>
          </div>
          <div className="w-full h-500 overflow-auto p-2.5 box-border h-full">
-            <div className='mermaid' ref={mermaidRef}></div>
+            <div className="mermaid" ref={mermaidRef}></div>
          </div>
-        </> : <div className="flex justify-center items-center w-full h-500">
+        </>
+      ) : (
+        <div className="flex justify-center items-center w-full h-500">
          <NoDataOverlay label="No Activity yet" />
        </div>
-      }
+      )}
    </div>
-  )
-}
+  );
+};

 export default SequenceDiagram;
--- a/pkgs/ui/src/components/sequence_diagram/style.css
+++ b/pkgs/ui/src/components/sequence_diagram/style.css
@@ -1,21 +0,0 @@
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.buttons-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-  margin-bottom: 20px;
-}
-
-.diagram-container {
-  width: 100%; 
-  height: 500px; 
-  overflow: auto; 
-  border: 1px solid #ddd; 
-  padding: 10px;
-  box-sizing: border-box;
-}