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>
This commit is contained in:
Daniel Pupius
2026-03-15 20:37:50 +00:00
parent 8130158c1e
commit 602a20cfc1
5 changed files with 17 additions and 11 deletions

View File

@@ -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}>

View File

@@ -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}>

View File

@@ -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">

View File

@@ -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">

View File

@@ -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: {