From 9106881448d259b1cab6e743dfaebf049526c867 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Sun, 18 May 2025 21:17:19 +0800
Subject: [PATCH] fix: clean up globe arcs and prevent empty stats display

- Adds cleanup timer for globe arcs to prevent accumulation
- Conditionally renders chart header when stats are available
- Improves event handling in AnimatedList by passing props
- Fixes traffic event animation by clearing previous timeouts

These changes improve visualization performance and user experience by preventing memory leaks from accumulated arcs and ensuring smoother animations.
---
 app/components/dashboard/realtime/Chart.vue | 2 +-
 app/components/dashboard/realtime/Globe.vue | 9 ++++++++-
 app/components/dashboard/realtime/Logs.vue  | 4 ++--
 app/components/spark-ui/AnimatedList.vue    | 2 +-
 server/api/logs/events.ts                   | 1 +
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app/components/dashboard/realtime/Chart.vue b/app/components/dashboard/realtime/Chart.vue
index 6c9d126..ece50c3 100644
--- a/app/components/dashboard/realtime/Chart.vue
+++ b/app/components/dashboard/realtime/Chart.vue
@@ -32,7 +32,7 @@ onMounted(async () => {
 <template>
   <Card class="md:w-80 h-72 flex flex-col p-4 md:m-2">
     <div class="h-24">
-      <CardHeader class="flex flex-row justify-between items-center pb-2 space-y-0 px-0 pt-2">
+      <CardHeader v-if="stats.visits" class="flex flex-row justify-between items-center pb-2 space-y-0 px-0 pt-2">
         <CardTitle class="text-sm font-medium flex items-center gap-2">
           <span class="size-1.5 inline-flex animate-ping rounded-full bg-green-400 opacity-75" />
           {{ $t('dashboard.visits') }}
diff --git a/app/components/dashboard/realtime/Globe.vue b/app/components/dashboard/realtime/Globe.vue
index b84922b..f3df4ee 100644
--- a/app/components/dashboard/realtime/Globe.vue
+++ b/app/components/dashboard/realtime/Globe.vue
@@ -66,7 +66,9 @@ async function getLiveLocations() {
   }))
 }
 
-function trafficEvent({ props }) {
+let cleanArcsDataTimer = null
+
+function trafficEvent({ props }, { delay = 0 }) {
   const arc = {
     startLat: props.item.latitude,
     startLng: props.item.longitude,
@@ -82,6 +84,11 @@ function trafficEvent({ props }) {
     .arcDashLength(() => random + 0.2)
     .arcDashGap(() => random - 0.2)
     .arcDashAnimateTime(2000)
+
+  clearTimeout(cleanArcsDataTimer)
+  cleanArcsDataTimer = setTimeout(() => {
+    globe.arcsData([])
+  }, delay + 100)
 }
 
 const normalized = 5 / props.minutes
diff --git a/app/components/dashboard/realtime/Logs.vue b/app/components/dashboard/realtime/Logs.vue
index 67c5c93..eeb8429 100644
--- a/app/components/dashboard/realtime/Logs.vue
+++ b/app/components/dashboard/realtime/Logs.vue
@@ -27,8 +27,8 @@ onMounted(async () => {
   getEvents()
 })
 
-function onUpdateItems(items) {
-  globalTrafficEvent.emit(items)
+function onUpdateItems(...args) {
+  globalTrafficEvent.emit(...args)
 }
 </script>
 
diff --git a/app/components/spark-ui/AnimatedList.vue b/app/components/spark-ui/AnimatedList.vue
index c59176b..8eb3d32 100644
--- a/app/components/spark-ui/AnimatedList.vue
+++ b/app/components/spark-ui/AnimatedList.vue
@@ -22,7 +22,7 @@ const itemsToShow = computed(() => {
 })
 
 watch([itemsToShow], () => {
-  emit('update:items', itemsToShow.value.at(-1))
+  emit('update:items', itemsToShow.value.at(-1), props)
 })
 
 async function loadComponents() {
diff --git a/server/api/logs/events.ts b/server/api/logs/events.ts
index ed9c5ea..13d8a0e 100644
--- a/server/api/logs/events.ts
+++ b/server/api/logs/events.ts
@@ -29,6 +29,7 @@ function events2logs(events: WAEEvents[]) {
     return {
       ...blobs2logs(blobs),
       ...doubles2logs(doubles),
+      ip: undefined,
       id: crypto.randomUUID(),
       timestamp: date2unix(new Date(`${event.timestamp}Z`)),
     }