Add snr to traceroute

src/components/Dialog/TracerouteResponseDialog.tsx

@@ -24,6 +24,8 @@ export const TracerouteResponseDialog = ({
   const { nodes } = useDevice();
   const route: number[] = traceroute?.data.route ?? [];
   const routeBack: number[] = traceroute?.data.routeBack ?? [];
+  const snrTowards = traceroute?.data.snrTowards ?? [];
+  const snrBack = traceroute?.data.snrBack ?? [];
   const from = nodes.get(traceroute?.from ?? 0);
   const longName =
     from?.user?.longName ??
@@ -39,7 +41,14 @@ export const TracerouteResponseDialog = ({
           <DialogTitle>{`Traceroute: ${longName} (${shortName})`}</DialogTitle>
         </DialogHeader>
         <DialogDescription>
-          <TraceRoute route={route} routeBack={routeBack} from={from} to={to} />
+          <TraceRoute
+            route={route}
+            routeBack={routeBack}
+            from={from}
+            to={to}
+            snrTowards={snrTowards}
+            snrBack={snrBack}
+          />
         </DialogDescription>
       </DialogContent>
     </Dialog>

src/components/PageComponents/Messages/TraceRoute.tsx

@@ -7,6 +7,8 @@ export interface TraceRouteProps {
   to?: Protobuf.Mesh.NodeInfo;
   route: Array<number>;
   routeBack?: Array<number>;
+  snrTowards?: Array<number>;
+  snrBack?: Array<number>;
 }
 
 export const TraceRoute = ({
@@ -14,6 +16,8 @@ export const TraceRoute = ({
   to,
   route,
   routeBack,
+  snrTowards,
+  snrBack,
 }: TraceRouteProps): JSX.Element => {
   const { nodes } = useDevice();
 
@@ -24,24 +28,37 @@ export const TraceRoute = ({
       </span>
     </div>
   ) : (
-    <div className="ml-5 flex flex-col">
+    <div className="ml-5 flex">
       <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-        <p className="font-semibold">Route traced towards destination:</p>
-        {to?.user?.longName} ↔{" "}
-        {route.map(
-          (hop) =>
-            `${nodes.get(hop)?.user?.longName ?? `!${numberToHexUnpadded(hop)}`} ↔ `,
-        )}
+        <p className="font-semibold">Route to destination:</p>
+        <p>{to?.user?.longName}</p>
+        <p>↓ {snrTowards ? snrTowards[0] : null}dB</p>
+        {route.map((hop, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+          <span key={i}>
+            <p>
+              {nodes.get(hop)?.user?.longName ?? `!${numberToHexUnpadded(hop)}`}
+            </p>
+            <p>↓ {snrTowards ? snrTowards[i + 1] : null}dB</p>
+          </span>
+        ))}
         {from?.user?.longName}
       </span>
       {routeBack ? (
-        <span className="ml-4 mt-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
-          <p className="font-semibold">Route traced back to us:</p>
-          {from?.user?.longName} ↔{" "}
-          {routeBack.map(
-            (hop) =>
-              `${nodes.get(hop)?.user?.longName ?? `!${numberToHexUnpadded(hop)}`} ↔ `,
-          )}
+        <span className="ml-4 border-l-2 border-l-backgroundPrimary pl-2 text-textPrimary">
+          <p className="font-semibold">Route back:</p>
+          <p>{from?.user?.longName}</p>
+          <p>↓ {snrBack ? snrBack[0] : null}dB</p>
+          {routeBack.map((hop, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            <span key={i}>
+              <p>
+                {nodes.get(hop)?.user?.longName ??
+                  `!${numberToHexUnpadded(hop)}`}
+              </p>
+              <p>↓ {snrBack ? snrBack[i + 1] : null}dB</p>
+            </span>
+          ))}
           {to?.user?.longName}
         </span>
       ) : null}