From 9f03c187f37fd394e0ba6ec7bc86e2cce266cf8c Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Sun, 14 Jan 2024 15:12:47 +0100
Subject: [PATCH] some changes for the tailwind classes and turned the rule for
 custom classes off

---
 pkgs/ui/.eslintrc.json                        | 19 ++++++++++++++-----
 pkgs/ui/src/app/layout.tsx                    |  6 +-----
 .../src/components/sequence_diagram/index.tsx | 11 ++++++-----
 pkgs/ui/tailwind.config.js                    |  1 +
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/pkgs/ui/.eslintrc.json b/pkgs/ui/.eslintrc.json
index 891a985..4dce0ed 100644
--- a/pkgs/ui/.eslintrc.json
+++ b/pkgs/ui/.eslintrc.json
@@ -1,10 +1,19 @@
 {
   "root": true,
-  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended",  "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:tailwindcss/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "ignorePatterns": ["**/src/api/*"],
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "ignorePatterns": [
+    "**/src/api/*"
+  ],
   "rules": {
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "tailwindcss/no-custom-classname": "off"
   }
-}
+}
\ No newline at end of file
diff --git a/pkgs/ui/src/app/layout.tsx b/pkgs/ui/src/app/layout.tsx
index 30ee67a..25c668f 100644
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@@ -50,11 +50,7 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <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';
-        </script>
-        <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> */}
         <script
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 1badf34..795d442 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -14,7 +14,7 @@ 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 { generateMermaidString } from "./helpers";
 
 const SequenceDiagram = () => {
   const {
@@ -26,6 +26,7 @@ const SequenceDiagram = () => {
   const mermaidRef: any = useRef(null);
   const [scale, setScale] = useState(1);
   const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0;
+  // const hasData = true;
 
   const mermaidString = generateMermaidString(eventMessagesData?.data);
 
@@ -130,10 +131,10 @@ const SequenceDiagram = () => {
     return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />;
 
   return (
-    <div className="flex flex-col items-end w-full">
+    <div className="flex w-full flex-col items-end">
       {hasData ? (
         <>
-          <div className="flex justify-end gap-2.5 mb-5 w-full">
+          <div className="flex w-full justify-end gap-2.5 mb-5">
             <Tooltip placement="top" title="Refresh Diagram">
               <IconButton color="default" onClick={onRefresh}>
                 <RefreshIcon />
@@ -165,12 +166,12 @@ const SequenceDiagram = () => {
               </IconButton>
             </Tooltip>
           </div>
-          <div className="w-full h-500 overflow-auto p-2.5 box-border h-full">
+          <div className="w-full h-full overflow-auto p-2.5 box-border">
             <div className="mermaid" ref={mermaidRef}></div>
           </div>
         </>
       ) : (
-        <div className="flex justify-center items-center w-full h-500">
+        <div className="flex w-full justify-center items-center">
           <NoDataOverlay label="No Activity yet" />
         </div>
       )}
diff --git a/pkgs/ui/tailwind.config.js b/pkgs/ui/tailwind.config.js
index 16f2026..ab723f6 100644
--- a/pkgs/ui/tailwind.config.js
+++ b/pkgs/ui/tailwind.config.js
@@ -30,6 +30,7 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  safelist: ["mermaid"],
   important: "#__next",
   theme: {
     colors: {