From f3ab6e1b45cfe760230bef428160ca13e3b42eb0 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Fri, 26 Jan 2024 01:11:55 +0100
Subject: [PATCH 1/2] removed warnings

---
 pkgs/ui/src/app/client/client.tsx                 | 2 +-
 pkgs/ui/src/components/sequence_diagram/index.tsx | 1 +
 pkgs/ui/src/config/client_1/index.tsx             | 5 +----
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/pkgs/ui/src/app/client/client.tsx b/pkgs/ui/src/app/client/client.tsx
index 7994702..155ed18 100644
--- a/pkgs/ui/src/app/client/client.tsx
+++ b/pkgs/ui/src/app/client/client.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ClientTableConfig, ServiceTableConfig } from "@/config/client_1";
 import CustomTable from "@/components/table";
 import {
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 32a932d..f050cbb 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -82,6 +82,7 @@ const SequenceDiagram = () => {
         mermaidRef.current.innerHTML = "";
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataDependency]);
 
   useEffect(() => {
diff --git a/pkgs/ui/src/config/client_1/index.tsx b/pkgs/ui/src/config/client_1/index.tsx
index 64a9e2d..d8190f2 100644
--- a/pkgs/ui/src/config/client_1/index.tsx
+++ b/pkgs/ui/src/config/client_1/index.tsx
@@ -1,7 +1,4 @@
-import { Button, IconButton, Tooltip } from "@mui/material";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
-import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
-import DeleteIcon from "@mui/icons-material/Delete";
+import { Button } from "@mui/material";
 import EntityActions from "@/components/entity_actions";
 
 export const ClientTableConfig = [

From eaec0feb9601f54ffff366f27e0cbe0e57e4b24a Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Fri, 26 Jan 2024 01:19:32 +0100
Subject: [PATCH 2/2] warning fix

---
 .../src/components/sequence_diagram/index.tsx | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index f050cbb..4c5754b 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -55,9 +55,13 @@ const SequenceDiagram = () => {
   const dataDependency = JSON.stringify(hasData ? eventMessagesData?.data : "");
 
   useEffect(() => {
+    const currentMermaidRef = mermaidRef?.current;
+
     if (!loadingEventMessages && hasData) {
-      // check for the absence of this attribute to render the diagram
-      if (!mermaidRef.current.getAttribute("data-processed")) {
+      if (
+        currentMermaidRef &&
+        !currentMermaidRef.getAttribute("data-processed")
+      ) {
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: "loose",
@@ -67,19 +71,16 @@ const SequenceDiagram = () => {
           },
         });
       }
-    }
 
-    if (mermaidRef.current) {
-      mermaidRef.current.innerHTML = mermaidString;
-      mermaid.init(undefined, mermaidRef.current);
+      if (currentMermaidRef) {
+        currentMermaidRef.innerHTML = mermaidString;
+        mermaid.init(undefined, currentMermaidRef);
+      }
     }
-
     return () => {
-      if (mermaidRef.current) {
-        // By removing the 'data-processed' attribute, we ensure Mermaid will process the diagram again
-        mermaidRef.current.removeAttribute("data-processed");
-        // Reset the innerHTML to clear the diagram
-        mermaidRef.current.innerHTML = "";
+      if (currentMermaidRef) {
+        currentMermaidRef.removeAttribute("data-processed");
+        currentMermaidRef.innerHTML = "";
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps