From 602a20cfc17caac1d3883fd48d21a722ac06cdc1 Mon Sep 17 00:00:00 2001
From: Daniel Pupius <dan@pupi.us>
Date: Sun, 15 Mar 2026 20:37:50 +0000
Subject: [PATCH] Fix several UI issues in packet stream and maps

- Fix __publicField runtime error from pre-compiled npm packages by
  defining the helper in vite optimizeDeps esbuildOptions
- Compact attribution control on LocationMap thumbnails so it doesn't
  dominate small maps
- Remove duplicate accuracy overlay in MapReportPacket (caption +
  accuracy div both at bottom-0 overlapping); accuracy still shown
  in the KeyValuePair section below
- Fix NodeLocationMap height: min-h-[300px] doesn't give ReactMap a
  resolved height, changed to h-[300px]
- Add short name lookup to TraceroutePacket hops (same pattern as
  NeighborInfoPacket)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/components/Map.tsx                      | 2 +-
 web/src/components/dashboard/GoogleMap.tsx      | 2 +-
 web/src/components/packets/MapReportPacket.tsx  | 8 --------
 web/src/components/packets/TraceroutePacket.tsx | 9 ++++++++-
 web/vite.config.ts                              | 7 +++++++
 5 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/web/src/components/Map.tsx b/web/src/components/Map.tsx
index ee734cc..4b1cdf3 100644
--- a/web/src/components/Map.tsx
+++ b/web/src/components/Map.tsx
@@ -78,7 +78,7 @@ export const LocationMap: React.FC<LocationMapProps> = ({
           mapStyle={CARTO_DARK_STYLE}
           initialViewState={{ longitude, latitude, zoom: effectiveZoom }}
           style={{ width: "100%", height: "100%" }}
-          attributionControl={{}}
+          attributionControl={{ compact: true }}
         >
           {showAccuracyCircle && (
             <Source id="circle" type="geojson" data={circleGeoJSON}>
diff --git a/web/src/components/dashboard/GoogleMap.tsx b/web/src/components/dashboard/GoogleMap.tsx
index abbcaa9..7386dac 100644
--- a/web/src/components/dashboard/GoogleMap.tsx
+++ b/web/src/components/dashboard/GoogleMap.tsx
@@ -50,7 +50,7 @@ export const NodeLocationMap: React.FC<NodeLocationMapProps> = ({
     ],
   }), [lat, lng, accuracyMeters]);
 
-  const containerClassName = `w-full ${fullHeight ? "h-full flex-1" : "min-h-[300px]"} rounded-lg overflow-hidden effect-inset`;
+  const containerClassName = `w-full ${fullHeight ? "h-full flex-1" : "h-[300px]"} rounded-lg overflow-hidden effect-inset`;
 
   return (
     <div className={containerClassName}>
diff --git a/web/src/components/packets/MapReportPacket.tsx b/web/src/components/packets/MapReportPacket.tsx
index f3ee09c..4bcd8b4 100644
--- a/web/src/components/packets/MapReportPacket.tsx
+++ b/web/src/components/packets/MapReportPacket.tsx
@@ -279,16 +279,8 @@ export const MapReportPacket: React.FC<MapReportPacketProps> = ({ packet }) => {
                 latitude={center.latitude}
                 longitude={center.longitude}
                 flush={true}
-                caption="Gateway Location"
                 precisionBits={precisionBits}
               />
-              {precisionBits !== undefined && (
-                <div className="bg-black/60 px-3 py-1 text-xs text-white absolute bottom-0 left-0 right-0">
-                  {positionAccuracy < 1000 
-                    ? `Location Accuracy: ±${positionAccuracy.toFixed(0)}m`
-                    : `Location Accuracy: ±${(positionAccuracy / 1000).toFixed(1)}km`}
-                </div>
-              )}
             </div>
             {/* Position information */}
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-3 text-sm">
diff --git a/web/src/components/packets/TraceroutePacket.tsx b/web/src/components/packets/TraceroutePacket.tsx
index 35524de..d235165 100644
--- a/web/src/components/packets/TraceroutePacket.tsx
+++ b/web/src/components/packets/TraceroutePacket.tsx
@@ -3,6 +3,7 @@ import { Packet } from "../../lib/types";
 import { PacketCard } from "./PacketCard";
 import { RouteIcon } from "lucide-react";
 import { Link } from "@tanstack/react-router";
+import { useAppSelector } from "../../hooks";
 
 interface TraceroutePacketProps {
   packet: Packet;
@@ -11,6 +12,7 @@ interface TraceroutePacketProps {
 export const TraceroutePacket: React.FC<TraceroutePacketProps> = ({ packet }) => {
   const { data } = packet;
   const routeDiscovery = data.routeDiscovery;
+  const { nodes } = useAppSelector((state) => state.aggregator);
 
   if (!routeDiscovery) {
     return null;
@@ -21,6 +23,11 @@ export const TraceroutePacket: React.FC<TraceroutePacketProps> = ({ packet }) =>
     return nodeNum.toString(16).toLowerCase();
   };
 
+  const getNodeName = (nodeNum: number): string => {
+    const node = nodes[nodeNum];
+    return node?.shortName || node?.longName || `!${formatNodeId(nodeNum)}`;
+  };
+
   // Renders a node hop with SNR info if available
   const renderHop = (nodeNum: number, index: number, snrValues?: number[]) => {
     const nodeHex = formatNodeId(nodeNum);
@@ -33,7 +40,7 @@ export const TraceroutePacket: React.FC<TraceroutePacketProps> = ({ packet }) =>
           params={{ nodeId: nodeHex }}
           className="text-blue-400 hover:underline"
         >
-          !{nodeHex}
+          {getNodeName(nodeNum)}
         </Link>
         {snr !== undefined && (
           <span className="text-neutral-400 text-xs ml-1">
diff --git a/web/vite.config.ts b/web/vite.config.ts
index fac8819..969507f 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -20,6 +20,13 @@ export default defineConfig({
     setupFiles: ['./src/test/setup.ts'],
     css: true,
   },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        '__publicField': '(a,b,c)=>(a[b]=c,c)',
+      },
+    },
+  },
   server: {
     port: 5747,
     proxy: {