diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/lifecycle.ts b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/lifecycle.ts index df0b215e..20cc1092 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/lifecycle.ts +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/pages/dashboard/lifecycle.ts @@ -3,7 +3,7 @@ import { type QueryClient, useQueryClient } from '@tanstack/react-query' import { useEffect, useRef } from 'react' -import { SNAPSHOT_KEY, useSnapshot } from '@/api/snapshot' +import { SNAPSHOT_KEY, type Snapshot, useSnapshot } from '@/api/snapshot' import { browserDriver, createDashboardWS, type WSEvent } from '@/api/ws' import { unlockOnFirstGesture } from '@/lib/audio' import { type CveEvent, useCveStore } from '@/stores/cve' @@ -71,11 +71,18 @@ export function useDashboardLifecycle(): void { const { data: snapshot, isSuccess } = useSnapshot() const queryClient = useQueryClient() const wsRef = useRef | null>(null) + const globeSeededRef = useRef(false) useEffect(() => { unlockOnFirstGesture() }, []) + useEffect(() => { + if (!snapshot || globeSeededRef.current) return + globeSeededRef.current = true + seedGlobeFromSnapshot(snapshot) + }, [snapshot]) + useEffect(() => { if (!isSuccess) return @@ -236,3 +243,39 @@ function mergeIntoSnapshot( [topic]: data, })) } + +function seedGlobeFromSnapshot(snap: Snapshot): void { + const eq = snap.earthquake as EarthquakePayload | undefined + if (eq) { + const coords = eq.geometry?.coordinates + if (Array.isArray(coords)) { + const lng = coords[0] + const lat = coords[1] + if (typeof lat === 'number' && typeof lng === 'number') { + useGlobeEvents.getState().pushPoint({ + id: `eq-${eq.id}`, + type: 'earthquake', + lat, + lng, + emittedAt: Date.now(), + meta: eq.properties, + }) + } + } + } + + const iss = snap.iss_position as IssPositionPayload | undefined + if ( + iss && + typeof iss.latitude === 'number' && + typeof iss.longitude === 'number' + ) { + useGlobeEvents.getState().pushPoint({ + id: 'iss-current', + type: 'iss', + lat: iss.latitude, + lng: iss.longitude, + emittedAt: Date.now(), + }) + } +} diff --git a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/stores/globeEvents.ts b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/stores/globeEvents.ts index 807376a2..7dc5f16b 100644 --- a/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/stores/globeEvents.ts +++ b/PROJECTS/advanced/monitor-the-situation-dashboard/frontend/src/stores/globeEvents.ts @@ -46,9 +46,10 @@ export const useGlobeEvents = create((set) => ({ rings: [], focusEvent: null, pushPoint: (p) => - set((s) => ({ - points: [...s.points.slice(-POINT_CAP + 1), p], - })), + set((s) => { + const filtered = s.points.filter((existing) => existing.id !== p.id) + return { points: [p, ...filtered].slice(0, POINT_CAP) } + }), pushRing: (r) => set((s) => ({ rings: [...s.rings, r],