fix: stabilize hook order in RelationsPanel

This commit is contained in:
htlee 2026-02-15 15:33:42 +09:00
부모 ccf3f2361f
커밋 84a3ec2374

파일 보기

@ -62,6 +62,35 @@ export function RelationsPanel({
const isVesselHighlight = (mmsi: number, ownerKey: string | null) =>
hoveredFleetMmsis.has(mmsi) || isFleetHighlightByOwner(ownerKey);
const topFleets = useMemo(() => {
const group = new Map<string, DerivedLegacyVessel[]>();
for (const v of fleetVessels) {
if (!v.ownerKey) continue;
const list = group.get(v.ownerKey);
if (list) list.push(v);
else group.set(v.ownerKey, [v]);
}
return Array.from(group.entries())
.map(([ownerKey, vs]) => {
const lon = vs.reduce((sum, v) => sum + v.lon, 0) / vs.length;
const lat = vs.reduce((sum, v) => sum + v.lat, 0) / vs.length;
const radiusNm = vs.reduce((max, v) => {
const d = haversineNm(lat, lon, v.lat, v.lon);
return Math.max(max, d);
}, 0);
return { ownerKey, vs, radiusNm };
})
.filter((x) => x.vs.length >= 3)
.sort((a, b) => {
if (fleetSortMode === "range") {
return b.radiusNm - a.radiusNm || b.vs.length - a.vs.length;
}
return b.vs.length - a.vs.length || b.radiusNm - a.radiusNm;
});
}, [fleetVessels, fleetSortMode]);
if (selectedVessel) {
const v = selectedVessel;
const meta = VESSEL_TYPES[v.shipCode];
@ -238,36 +267,6 @@ export function RelationsPanel({
return <div style={{ fontSize: 11, color: "var(--muted)" }}>( )</div>;
}
const group = new Map<string, DerivedLegacyVessel[]>();
for (const v of fleetVessels) {
if (!v.ownerKey) continue;
const list = group.get(v.ownerKey);
if (list) list.push(v);
else group.set(v.ownerKey, [v]);
}
const topFleets = useMemo(() => {
const toFleetMeta = Array.from(group.entries())
.map(([ownerKey, vs]) => {
const lon = vs.reduce((sum, v) => sum + v.lon, 0) / vs.length;
const lat = vs.reduce((sum, v) => sum + v.lat, 0) / vs.length;
const radiusNm = vs.reduce((max, v) => {
const d = haversineNm(lat, lon, v.lat, v.lon);
return Math.max(max, d);
}, 0);
return { ownerKey, vs, radiusNm };
})
.filter((x) => x.vs.length >= 3);
return toFleetMeta.sort((a, b) => {
if (fleetSortMode === "range") {
return b.radiusNm - a.radiusNm || b.vs.length - a.vs.length;
}
return b.vs.length - a.vs.length || b.radiusNm - a.radiusNm;
});
}, [fleetSortMode, group]);
if (topFleets.length === 0) {
return <div style={{ fontSize: 11, color: "var(--muted)" }}>( (3 ) )</div>;
}