fix(monitor/frontend): globe snapshot seed + pushPoint dedup-by-id (instant eq+iss dots, single moving iss)
This commit is contained in:
parent
a6dcaed7dc
commit
0a41102e75
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
import { type QueryClient, useQueryClient } from '@tanstack/react-query'
|
import { type QueryClient, useQueryClient } from '@tanstack/react-query'
|
||||||
import { useEffect, useRef } from 'react'
|
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 { browserDriver, createDashboardWS, type WSEvent } from '@/api/ws'
|
||||||
import { unlockOnFirstGesture } from '@/lib/audio'
|
import { unlockOnFirstGesture } from '@/lib/audio'
|
||||||
import { type CveEvent, useCveStore } from '@/stores/cve'
|
import { type CveEvent, useCveStore } from '@/stores/cve'
|
||||||
|
|
@ -71,11 +71,18 @@ export function useDashboardLifecycle(): void {
|
||||||
const { data: snapshot, isSuccess } = useSnapshot()
|
const { data: snapshot, isSuccess } = useSnapshot()
|
||||||
const queryClient = useQueryClient()
|
const queryClient = useQueryClient()
|
||||||
const wsRef = useRef<ReturnType<typeof createDashboardWS> | null>(null)
|
const wsRef = useRef<ReturnType<typeof createDashboardWS> | null>(null)
|
||||||
|
const globeSeededRef = useRef(false)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
unlockOnFirstGesture()
|
unlockOnFirstGesture()
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!snapshot || globeSeededRef.current) return
|
||||||
|
globeSeededRef.current = true
|
||||||
|
seedGlobeFromSnapshot(snapshot)
|
||||||
|
}, [snapshot])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isSuccess) return
|
if (!isSuccess) return
|
||||||
|
|
||||||
|
|
@ -236,3 +243,39 @@ function mergeIntoSnapshot(
|
||||||
[topic]: data,
|
[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(),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -46,9 +46,10 @@ export const useGlobeEvents = create<GlobeStore>((set) => ({
|
||||||
rings: [],
|
rings: [],
|
||||||
focusEvent: null,
|
focusEvent: null,
|
||||||
pushPoint: (p) =>
|
pushPoint: (p) =>
|
||||||
set((s) => ({
|
set((s) => {
|
||||||
points: [...s.points.slice(-POINT_CAP + 1), p],
|
const filtered = s.points.filter((existing) => existing.id !== p.id)
|
||||||
})),
|
return { points: [p, ...filtered].slice(0, POINT_CAP) }
|
||||||
|
}),
|
||||||
pushRing: (r) =>
|
pushRing: (r) =>
|
||||||
set((s) => ({
|
set((s) => ({
|
||||||
rings: [...s.rings, r],
|
rings: [...s.rings, r],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue