refactor: refactor zones_friendly_names

web/src/components/overlay/ObjectTrackOverlay.tsx

@@ -71,8 +71,11 @@ export default function ObjectTrackOverlay({
     { revalidateOnFocus: false },
   );
 
+  const getZonesFriendlyNames = (zones: string[], config: FrigateConfig) => {
+    return zones?.map((zone) => resolveZoneName(config, zone)) ?? [];
+  };
+
   const timelineResults = useMemo(() => {
-    // Group timeline entries by source_id
     if (!timelineData) return selectedObjectIds.map(() => []);
 
     const grouped: Record<string, ObjectLifecycleSequence[]> = {};
@@ -83,9 +86,19 @@ export default function ObjectTrackOverlay({
       grouped[entry.source_id].push(entry);
     }
 
-    // Return timeline arrays in the same order as selectedObjectIds
+    return selectedObjectIds.map((id) => {
-    return selectedObjectIds.map((id) => grouped[id] || []);
+      const entries = grouped[id] || [];
-  }, [selectedObjectIds, timelineData]);
+      return entries.map((event) => ({
+        ...event,
+        data: {
+          ...event.data,
+          zones_friendly_names: config
+            ? getZonesFriendlyNames(event.data?.zones, config)
+            : [],
+        },
+      }));
+    });
+  }, [selectedObjectIds, timelineData, config]);
 
   const typeColorMap = useMemo(
     () => ({
@@ -157,11 +170,6 @@ export default function ObjectTrackOverlay({
             )
             .map((event: ObjectLifecycleSequence) => {
               const [left, top, width, height] = event.data.box!;
-              event.data.zones_friendly_names = event?.data?.zones?.map(
-                (zone) => {
-                  return resolveZoneName(config, zone);
-                },
-              );
               return {
                 x: left + width / 2, // Center x
                 y: top + height, // Bottom y

web/src/components/overlay/detail/ObjectPath.tsx

@@ -51,10 +51,15 @@ export function ObjectPath({
     const imgRect = imgRef.current.getBoundingClientRect();
     return positions.map((pos) => {
       if (config && pos.lifecycle_item?.data?.zones) {
-        pos.lifecycle_item.data.zones_friendly_names =
+        pos.lifecycle_item = {
-          pos.lifecycle_item.data.zones.map((zone) => {
+          ...pos.lifecycle_item,
-            return resolveZoneName(config, zone);
+          data: {
-          });
+            ...pos.lifecycle_item.data,
+            zones_friendly_names: pos.lifecycle_item.data.zones.map((zone) => {
+              return resolveZoneName(config, zone);
+            }),
+          },
+        };
       }
       return {
         x: pos.x * imgRect.width,

web/src/components/timeline/DetailStream.tsx

@@ -558,9 +558,15 @@ function LifecycleItem({
   const { t } = useTranslation("views/events");
   const { data: config } = useSWR<FrigateConfig>("config");
 
-  item.data.zones_friendly_names = item?.data?.zones?.map((zone) => {
+  item = {
-    return resolveZoneName(config, zone);
+    ...item,
-  });
+    data: {
+      ...item.data,
+      zones_friendly_names: item?.data?.zones?.map((zone) => {
+        return resolveZoneName(config, zone);
+      }),
+    },
+  };
 
   const aspectRatio = useMemo(() => {
     if (!config || !item?.camera) {