Avoid reloading Tx view (#21)

* Fix Tx routes params * Extract TxSheet as client component * Use shallow routing for spans
confio · Oct 23, 2024 · 9319a24 · 9319a24
1 parent 53327df
commit 9319a24
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 19 deletions.
diff --git a/app/@span/(.)[...span]/page.tsx b/app/@span/(.)[...span]/page.tsx
@@ -1,17 +1,24 @@
 import TxData from "@/components/tx-data";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import TxSheet from "@/components/tx-data/tx-sheet";
 
-export default function Tx({ params }: { params: { span: string[] } }) {
-  const [txId, spanId] = params.span;
+const traceIdLength = 32;
+
+export default function Tx({ params }: { params: { span: [string] } }) {
+  //NOTE - the params are parsed because this catch-all route merges both traceId and spanId
+  const [txId, spanId] =
+    params.span[0].length > traceIdLength
+      ? [
+          params.span[0].slice(0, traceIdLength),
+          params.span[0].slice(traceIdLength),
+        ]
+      : [params.span[0]];
 
   return (
-    <Sheet defaultOpen>
-      <SheetContent className="min-w-[80%]">
-        <div>
-          <div>Transaction {txId}</div>
-          <TxData txId={txId} spanId={spanId} />
-        </div>
-      </SheetContent>
-    </Sheet>
+    <TxSheet>
+      <div>
+        <div>Transaction {txId}</div>
+        <TxData txId={txId} spanId={spanId} />
+      </div>
+    </TxSheet>
   );
 }
diff --git a/app/[...span]/page.tsx b/app/[...span]/page.tsx
@@ -1,6 +1,10 @@
 import TxData from "@/components/tx-data";
 
-export default function Tx({ params }: { params: { span: string[] } }) {
+export default function Tx({
+  params,
+}: {
+  params: { span: [string, string | undefined] };
+}) {
   const [txId, spanId] = params.span;
 
   return (

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(

diff --git a/components/tx-data/tx-sheet.tsx b/components/tx-data/tx-sheet.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { useRouter } from "next/navigation";
+import { PropsWithChildren } from "react";
+
+export default function TxSheet({ children }: PropsWithChildren) {
+  const router = useRouter();
+
+  return (
+    <Sheet
+      defaultOpen
+      onOpenChange={(open) => {
+        if (!open) {
+          router.back();
+        }
+      }}
+    >
+      <SheetContent className="min-w-[80%]">{children}</SheetContent>
+    </Sheet>
+  );
+}