Use shallow routing for spans

confio · Oct 21, 2024 · 03d1746 · 03d1746
1 parent c71f859
commit 03d1746
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/components/mermaid.tsx b/components/mermaid.tsx
@@ -2,6 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import mermaid from "mermaid";
+import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
 mermaid.initialize({
@@ -36,7 +37,13 @@ const htmlReplacer = {
     ] ?? "",
 };
 
-export default function Mermaid({ chart }: { chart: string }) {
+type MermaidProps = {
+  chart: string;
+  setSpanId: (spanId: string | undefined) => void;
+};
+
+export default function Mermaid({ chart, setSpanId }: MermaidProps) {
+  const pathname = usePathname();
   const [renderStage, setRenderStage] = useState<
     "server" | "browser" | "mermaid"
   >("server");
@@ -67,14 +74,33 @@ export default function Mermaid({ chart }: { chart: string }) {
             htmlReplacer.regex,
             htmlReplacer.fn,
           );
+
+          const span = msg.firstElementChild;
+          if (!span) {
+            continue;
+          }
+
+          const linkToSpan = span.getAttribute("href");
+          if (!linkToSpan) {
+            continue;
+          }
+
+          span.addEventListener("click", (e) => {
+            e.preventDefault();
+
+            if (!pathname.endsWith(linkToSpan)) {
+              window.history.replaceState(null, "", linkToSpan);
+              setSpanId(linkToSpan.split("/").slice(-1)[0]);
+            }
+          });
         }
       }
 
       setRenderStage("mermaid");
     });
 
     return () => clearInterval(interval);
-  }, [renderStage]);
+  }, [pathname, renderStage, setSpanId]);
 
   return renderStage !== "server" ? (
     <div className={cn("mermaid", renderStage !== "mermaid" && "hidden")}>

diff --git a/components/tx-data.tsx → components/tx-data/index.tsx b/components/tx-data.tsx → components/tx-data/index.tsx
@@ -2,27 +2,30 @@
 
 import { useTx } from "@/hooks/api";
 import { sequenceDiagramFromSpans } from "@/lib/mermaid";
-import Mermaid from "./mermaid";
+import { useState } from "react";
+import Mermaid from "../mermaid";
 
 type TxDataProps = {
   txId: string;
-  spanId: string;
+  spanId: string | undefined;
 };
 
 export default function TxData({ txId, spanId }: TxDataProps) {
   const { isPending, isFetching, error, data: tx } = useTx(txId);
+  const [spanIdToFind, setSpanIdToFind] = useState(spanId);
 
   if (isPending) return "Loading...";
   if (error) return "An error has occurred: " + error.message;
   if (!tx) return "Couldn't find a Tx with id: " + txId;
 
   const mermaidChart = sequenceDiagramFromSpans(tx.spans);
-
-  const span = tx.spans.find((span) => span.spanId === spanId);
+  const span = tx.spans.find((span) => span.spanId === spanIdToFind);
 
   return (
     <div>
-      {!isFetching ? <Mermaid chart={mermaidChart} /> : null}
+      {!isFetching ? (
+        <Mermaid chart={mermaidChart} setSpanId={setSpanIdToFind} />
+      ) : null}
       {span ? (
         <pre>
           {JSON.stringify(