From c1c774c4afd34e8b52b7f12d048d136aef1b497e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?=
 <44572727+abefernan@users.noreply.github.com>
Date: Mon, 30 Sep 2024 09:55:29 +0200
Subject: [PATCH 1/3] Improve styles

---
 components/mermaid.tsx | 61 ++++++++++++------------------------------
 1 file changed, 17 insertions(+), 44 deletions(-)

diff --git a/components/mermaid.tsx b/components/mermaid.tsx
index dd6bc32..dbbd16d 100644
--- a/components/mermaid.tsx
+++ b/components/mermaid.tsx
@@ -1,58 +1,31 @@
 "use client";
 
+import { cn } from "@/lib/utils";
 import mermaid from "mermaid";
 import { useEffect, useState } from "react";
 
 mermaid.initialize({
   startOnLoad: true,
-  theme: "default",
   securityLevel: "loose",
+  sequence: { mirrorActors: false },
+  theme: "base",
+  themeVariables: {
+    background: "#fff",
+    mainBkg: "#fff",
+    primaryColor: "#fff",
+    textColor: "#171717",
+    lineColor: "#171717",
+    actorBorder: "#171717",
+  },
   themeCSS: `
-    g.classGroup rect {
-      fill: #282a36;
-      stroke: #6272a4;
-    } 
-    g.classGroup text {
-      fill: #f8f8f2;
+    .actor {
+      stroke-width: 2px;
     }
-    g.classGroup line {
-      stroke: #f8f8f2;
-      stroke-width: 0.5;
-    }
-    .classLabel .box {
-      stroke: #21222c;
-      stroke-width: 3;
-      fill: #21222c;
-      opacity: 1;
-    }
-    .classLabel .label {
-      fill: #f1fa8c;
-    }
-    .relation {
-      stroke: #ff79c6;
-      stroke-width: 1;
-    }
-    #compositionStart, #compositionEnd {
-      fill: #bd93f9;
-      stroke: #bd93f9;
-      stroke-width: 1;
-    }
-    #aggregationEnd, #aggregationStart {
-      fill: #21222c;
-      stroke: #50fa7b;
-      stroke-width: 1;
+
+    .messageText a {
+      text-decoration: underline;
     }
-    #dependencyStart, #dependencyEnd {
-      fill: #00bcd4;
-      stroke: #00bcd4;
-      stroke-width: 1;
-    } 
-    #extensionStart, #extensionEnd {
-      fill: #f8f8f2;
-      stroke: #f8f8f2;
-      stroke-width: 1;
-    }`,
-  fontFamily: "Fira Code",
+  `,
 });
 
 const replacer = (tag: string) =>

From 22df7cd54be9f7d9fa0820d47a9a3d3bf98b6ff1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?=
 <44572727+abefernan@users.noreply.github.com>
Date: Mon, 30 Sep 2024 09:56:40 +0200
Subject: [PATCH 2/3] Improve rendering logic

---
 components/mermaid.tsx | 73 ++++++++++++++++++++++++++----------------
 1 file changed, 45 insertions(+), 28 deletions(-)

diff --git a/components/mermaid.tsx b/components/mermaid.tsx
index dbbd16d..c13d40b 100644
--- a/components/mermaid.tsx
+++ b/components/mermaid.tsx
@@ -28,40 +28,57 @@ mermaid.initialize({
   `,
 });
 
-const replacer = (tag: string) =>
-  ({
-    "&lt;": "<",
-    "&gt;": ">",
-    "&amp;": "&",
-    "&#39;": "'",
-    "&quot;": '"',
-  })[tag] ?? "";
+const htmlReplacer = {
+  regex: /(&lt;|&gt;|&amp;|&#39;|&quot;)/g,
+  fn: (tag: string) =>
+    ({ "&lt;": "<", "&gt;": ">", "&amp;": "&", "&#39;": "'", "&quot;": '"' })[
+      tag
+    ] ?? "",
+};
 
 export default function Mermaid({ chart }: { chart: string }) {
-  const [isBrowserRendering, setIsBrowserRendering] = useState(false);
+  const [renderStage, setRenderStage] = useState<
+    "server" | "browser" | "mermaid"
+  >("server");
 
   useEffect(() => {
-    if (isBrowserRendering) {
-      mermaid.contentLoaded();
+    setRenderStage("browser");
+  }, []);
 
-      setTimeout(() => {
-        const elems = Array.from(
-          document.getElementsByClassName("messageText"),
-        ) as HTMLElement[];
+  useEffect(() => {
+    if (renderStage !== "browser") {
+      return;
+    }
+
+    mermaid.contentLoaded();
+
+    const interval = setInterval(() => {
+      const msgs = Array.from(
+        document.getElementsByClassName("messageText"),
+      ) as HTMLElement[];
 
-        for (const elem of elems) {
-          if (elem.textContent?.startsWith("<")) {
-            elem.innerHTML = elem.innerHTML.replace(
-              /(&lt;|&gt;|&amp;|&#39;|&quot;)/g,
-              replacer,
-            );
-          }
+      if (!msgs.length) {
+        return;
+      }
+
+      for (const msg of msgs) {
+        if (msg.textContent?.startsWith("<")) {
+          msg.innerHTML = msg.innerHTML.replace(
+            htmlReplacer.regex,
+            htmlReplacer.fn,
+          );
         }
-      }, 100);
-    } else {
-      setIsBrowserRendering(true);
-    }
-  }, [isBrowserRendering]);
+      }
+
+      setRenderStage("mermaid");
+    });
+
+    return () => clearInterval(interval);
+  }, [renderStage]);
 
-  return isBrowserRendering ? <div className="mermaid">{chart}</div> : null;
+  return renderStage !== "server" ? (
+    <div className={cn("mermaid", renderStage !== "mermaid" && "hidden")}>
+      {chart}
+    </div>
+  ) : null;
 }

From 0fa660cba1dea01adc06d3e073f168e81c68f037 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Abel=20Fern=C3=A1ndez?=
 <44572727+abefernan@users.noreply.github.com>
Date: Mon, 30 Sep 2024 10:11:45 +0200
Subject: [PATCH 3/3] Update tests with not mirrored actors

---
 tests/e2e/happy-paths.test.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/happy-paths.test.ts b/tests/e2e/happy-paths.test.ts
index 46fe4e6..8889220 100644
--- a/tests/e2e/happy-paths.test.ts
+++ b/tests/e2e/happy-paths.test.ts
@@ -28,11 +28,11 @@ test("navigates to a correctly rendered tx detail", async ({ page }) => {
   //TODO: use non-image snapshot testing (for svg)
   await expect(
     page.getByText("slay3r1pkptre7fdkl6gfrzlesjjvhxhlc3r4gmvk3r3j"),
-  ).toHaveCount(2);
+  ).toHaveCount(1);
 
   await expect(
     page.getByText("slay3r1fqg7raeca9peg0zkfp629m92qnjrpyggd2cfgj"),
-  ).toHaveCount(2);
+  ).toHaveCount(1);
 
   await expect(page.getByText("Send")).toBeVisible();
 });