mirror of
https://github.com/dpup/meshstream.git
synced 2026-03-28 17:42:37 +01:00
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:
@@ -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}>
|
||||
|
||||
@@ -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}>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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: {
|
||||
|
||||
Reference in New Issue
Block a user