Skip to content

Commit 1ca2961

Browse files
tristanbuddtristanbudd
authored
Merge pull request #116 from tristanbudd/more-polishes
More polishes
2 parents 1a5fbb5 + 86cdfc6 commit 1ca2961

4 files changed

Lines changed: 57 additions & 13 deletions

File tree

‎resources/js/Components/HeaderBar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -738,7 +738,7 @@ export default function HeaderBar({
738738
</div>
739739

740740
{error && (
741-
<div className="absolute top-full left-0 right-0 bg-red-500/10 border border-red-500/50 px-4 py-2 mt-px shadow-2xl">
741+
<div className="absolute top-full left-0 right-0 bg-red-500/10 border border-red-500/50 px-4 py-2 mt-px shadow-2xl flex items-center">
742742
<span className="text-[10px] text-red-400 font-bold uppercase tracking-wider">
743743
{error}
744744
</span>
@@ -1057,7 +1057,7 @@ export default function HeaderBar({
10571057
</div>
10581058

10591059
{showClusterZoomNotice && (
1060-
<div className="px-4 py-2 border-t border-white/10 bg-zinc-900/80">
1060+
<div className="px-4 py-2 border-t border-white/10 bg-zinc-900/80 flex items-center">
10611061
<span className="text-[10px] text-zinc-300 font-semibold uppercase tracking-wider">
10621062
Grouped ships detected, zooming in...
10631063
</span>
@@ -1067,7 +1067,7 @@ export default function HeaderBar({
10671067
)}
10681068

10691069
{showClusterZoomNotice && !showSuggestionsPanel && (
1070-
<div className="absolute top-full left-0 right-0 bg-zinc-900/90 border border-white/20 px-4 py-2 mt-px shadow-2xl">
1070+
<div className="absolute top-full left-0 right-0 bg-zinc-900/90 border border-white/20 px-4 py-2 mt-px shadow-2xl flex items-center">
10711071
<span className="text-[10px] text-zinc-300 font-semibold uppercase tracking-wider">
10721072
Grouped ships detected, zooming in...
10731073
</span>

‎resources/js/Components/InfractionsPanel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export default function InfractionsPanel({
149149
onVesselSelect({
150150
mmsi: vessel.mmsi,
151151
imo: vessel.imo || undefined,
152-
name: vessel.name,
152+
name: vessel.name?.toUpperCase(),
153153
lat: vessel.lat,
154154
lng: vessel.lng,
155155
course: vessel.course,
@@ -315,7 +315,7 @@ export default function InfractionsPanel({
315315
>
316316
<div className="flex-1 min-w-0">
317317
<div className="flex items-center gap-2 mb-1">
318-
<span className="text-xs font-bold text-white truncate">
318+
<span className="text-xs font-bold text-white truncate uppercase">
319319
{vessel.name?.trim() || 'UNKNOWN VESSEL'}
320320
</span>
321321
{isOnline ? (

‎resources/js/Components/MapDisplay.tsx‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ interface ClusteredVessel extends Vessel {
7676
clusterCount: number;
7777
sumLat: number;
7878
sumLng: number;
79+
minLat: number;
80+
maxLat: number;
81+
minLng: number;
82+
maxLng: number;
7983
}
8084

8185
const IGNORED_VESSEL_NAMES = ['--'];
@@ -348,6 +352,10 @@ function FleetLayer({
348352
clusterCount: 1,
349353
sumLat: v.lat,
350354
sumLng: v.lng,
355+
minLat: v.lat,
356+
maxLat: v.lat,
357+
minLng: v.lng,
358+
maxLng: v.lng,
351359
}));
352360
}
353361

@@ -360,6 +368,10 @@ function FleetLayer({
360368
clusterCount: 1,
361369
sumLat: vessel.lat,
362370
sumLng: vessel.lng,
371+
minLat: vessel.lat,
372+
maxLat: vessel.lat,
373+
minLng: vessel.lng,
374+
maxLng: vessel.lng,
363375
});
364376
return;
365377
}
@@ -377,13 +389,21 @@ function FleetLayer({
377389
filtered[clusterIndex].clusterCount++;
378390
filtered[clusterIndex].sumLat += vessel.lat;
379391
filtered[clusterIndex].sumLng += vessel.lng;
392+
filtered[clusterIndex].minLat = Math.min(filtered[clusterIndex].minLat, vessel.lat);
393+
filtered[clusterIndex].maxLat = Math.max(filtered[clusterIndex].maxLat, vessel.lat);
394+
filtered[clusterIndex].minLng = Math.min(filtered[clusterIndex].minLng, vessel.lng);
395+
filtered[clusterIndex].maxLng = Math.max(filtered[clusterIndex].maxLng, vessel.lng);
380396
} else {
381397
filtered.push({
382398
...vessel,
383399
isCluster: false,
384400
clusterCount: 1,
385401
sumLat: vessel.lat,
386402
sumLng: vessel.lng,
403+
minLat: vessel.lat,
404+
maxLat: vessel.lat,
405+
minLng: vessel.lng,
406+
maxLng: vessel.lng,
387407
});
388408
}
389409
});
@@ -568,11 +588,27 @@ function FleetLayer({
568588
suppressNextMapClickRef.current = true;
569589
if (onVesselSelect) onVesselSelect(null);
570590
if (onClusterZoomNotice) onClusterZoomNotice();
571-
const nextZoom = Math.min(Math.max(map.getZoom() + 2, 11), 16);
572-
map.flyTo([vessel.lat, vessel.lng], nextZoom, {
573-
duration: 0.7,
574-
easeLinearity: 0.25,
575-
});
591+
592+
// Zoom to the bounds of the vessels in the cluster for better precision
593+
if (vessel.minLat !== vessel.maxLat || vessel.minLng !== vessel.maxLng) {
594+
const bounds = L.latLngBounds(
595+
[vessel.minLat, vessel.minLng],
596+
[vessel.maxLat, vessel.maxLng]
597+
);
598+
map.fitBounds(bounds, {
599+
padding: [50, 50],
600+
maxZoom: 16,
601+
animate: true,
602+
duration: 1.5,
603+
});
604+
} else {
605+
// Fallback for overlapping vessels at the same location
606+
const nextZoom = Math.min(Math.max(map.getZoom() + 4, 13), 16);
607+
map.flyTo([vessel.lat, vessel.lng], nextZoom, {
608+
duration: 1.5,
609+
easeLinearity: 0.25,
610+
});
611+
}
576612
},
577613
[map, onVesselSelect, onClusterZoomNotice]
578614
);
@@ -657,6 +693,10 @@ function FleetLayer({
657693
clusterCount: 1,
658694
sumLat: selectedVessel.lat,
659695
sumLng: selectedVessel.lng,
696+
minLat: selectedVessel.lat,
697+
maxLat: selectedVessel.lat,
698+
minLng: selectedVessel.lng,
699+
maxLng: selectedVessel.lng,
660700
} as ClusteredVessel,
661701
e
662702
),
@@ -668,6 +708,10 @@ function FleetLayer({
668708
clusterCount: 1,
669709
sumLat: selectedVessel.lat,
670710
sumLng: selectedVessel.lng,
711+
minLat: selectedVessel.lat,
712+
maxLat: selectedVessel.lat,
713+
minLng: selectedVessel.lng,
714+
maxLng: selectedVessel.lng,
671715
} as ClusteredVessel,
672716
e
673717
),

‎resources/js/Components/SanctionedShipsPanel.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ export default function SanctionedShipsPanel({
287287
onVesselSelect({
288288
mmsi: mmsiToUse,
289289
imo: vessel.imo || undefined,
290-
name: vessel.name,
290+
name: vessel.name?.toUpperCase(),
291291
lat: vessel.lat,
292292
lng: vessel.lng,
293293
course: vessel.course,
@@ -411,7 +411,7 @@ export default function SanctionedShipsPanel({
411411
<span className="text-[10px] font-bold text-red-500 uppercase tracking-wider leading-tight">
412412
Vessel Not Found in SIST Database
413413
</span>
414-
<span className="text-[9px] font-semibold text-red-400/80 mt-0.5">
414+
<span className="text-[9px] font-semibold text-red-400/80 mt-0.5 uppercase">
415415
{databaseError.name} (IMO: {databaseError.imo || 'N/A'})
416416
</span>
417417
</div>
@@ -444,7 +444,7 @@ export default function SanctionedShipsPanel({
444444
>
445445
<div className="flex-1 min-w-0">
446446
<div className="flex items-center gap-2 mb-1">
447-
<span className="text-xs font-bold text-white truncate">
447+
<span className="text-xs font-bold text-white truncate uppercase">
448448
{vessel.name?.trim() || 'UNKNOWN VESSEL'}
449449
</span>
450450
{offline ? (

0 commit comments

Comments
 (0)