Add snr to traceroute

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}