Improve scaling of graph motion activity

frigate/http.py

@@ -784,10 +784,11 @@ def hourly_timeline_activity(camera_name: str):
             )
 
         data_type = recording.objects > 0
+        count = recording.motion + recording.objects
         hours[int(key.timestamp())].append(
             [
                 recording.start_time + (recording.duration / 2),
-                max(recording.motion, recording.objects),
+                0 if count == 0 else np.log2(count),
                 data_type,
             ]
         )
@@ -801,7 +802,6 @@ def hourly_timeline_activity(camera_name: str):
         df.set_index(["date"], inplace=True)
 
         # normalize data
-        df["count"] = np.clip(np.log10(df["count"], where=df["count"] > 0), None, 10)
         df = df.resample("T").mean().fillna(0)
 
         # change types for output

frigate/timeline.py

@@ -108,6 +108,15 @@ class TimelineProcessor(threading.Thread):
             },
         }
 
+        # update sub labels for existing entries that haven't been added yet
+        if (
+            prev_event_data != None
+            and prev_event_data["sub_label"] != event_data["sub_label"]
+            and event_id in self.pre_event_cache.keys()
+        ):
+            for e in self.pre_event_cache[event_id]:
+                e[Timeline.data]["sub_label"] = event_data["sub_label"]
+
         if event_type == "start":
             timeline_entry[Timeline.class_type] = "visible"
             save = True

web/src/components/graph/TimelineGraph.tsx

@@ -48,7 +48,7 @@ export default function TimelineGraph({
         grid: {
           show: false,
           padding: {
-            bottom: 20,
+            bottom: 2,
             top: -12,
             left: -20,
             right: 0,

web/src/components/scrubber/ActivityScrubber.tsx

@@ -143,8 +143,8 @@ function ActivityScrubber({
 
     const timelineInstance = new VisTimeline(
       divElement,
-      items as DataItem[],
+      (items || []) as DataItem[],
-      groups as DataGroup[],
+      (groups || []) as DataGroup[],
       timelineOptions
     );
 

web/src/utils/historyUtil.ts

@@ -6,8 +6,23 @@ export function getHourlyTimelineData(
   detailLevel: string
 ): CardsData {
   const cards: CardsData = {};
+  const allHours: { [key: string]: Timeline[] } = {};
+
   timelinePages.forEach((hourlyTimeline) => {
-    Object.keys(hourlyTimeline["hours"])
+    Object.entries(hourlyTimeline.hours).forEach(([key, values]) => {
+      if (key in allHours) {
+        // only occurs when multiple pages contain elements in the same hour
+        allHours[key] = allHours[key]
+          .concat(values)
+          .sort((a, b) => a.timestamp - b.timestamp);
+      } else {
+        allHours[key] = values;
+      }
+    });
+  });
+
+  Object.keys(allHours)
+    .sort((a, b) => a.localeCompare(b))
     .reverse()
     .forEach((hour) => {
       const day = new Date(parseInt(hour) * 1000);
@@ -18,7 +33,7 @@ export function getHourlyTimelineData(
       // which allows us to know what items to keep depending on detail level
       const sourceToTypes: { [key: string]: string[] } = {};
       let cardTypeStart: { [camera: string]: number } = {};
-        Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
+      Object.values(allHours[hour]).forEach((i) => {
         if (i.timestamp > (cardTypeStart[i.camera] ?? 0) + GROUP_SECONDS) {
           cardTypeStart[i.camera] = i.timestamp;
         }
@@ -41,7 +56,7 @@ export function getHourlyTimelineData(
       }
 
       let cardStart: { [camera: string]: number } = {};
-        Object.values(hourlyTimeline["hours"][hour]).forEach((i) => {
+      Object.values(allHours[hour]).forEach((i) => {
         if (i.timestamp > (cardStart[i.camera] ?? 0) + GROUP_SECONDS) {
           cardStart[i.camera] = i.timestamp;
         }
@@ -109,7 +124,6 @@ export function getHourlyTimelineData(
         }
       });
     });
-  });
 
   return cards;
 }

web/src/views/history/DesktopTimelineView.tsx

@@ -162,7 +162,6 @@ export default function DesktopTimelineView({
               {isSelected ? (
                 <div className="p-2 relative bg-secondary bg-opacity-30 rounded-md">
                   <ActivityScrubber
-                    items={[]}
                     timeBars={
                       isSelected
                         ? [
@@ -180,7 +179,10 @@ export default function DesktopTimelineView({
                       snap: null,
                       min: new Date(timeline.range.start * 1000),
                       max: new Date(timeline.range.end * 1000),
+                      start: new Date(timeline.range.start * 1000),
+                      end: new Date(timeline.range.end * 1000),
                       zoomable: false,
+                      height: "120px",
                     }}
                     timechangeHandler={(data) => {
                       controllerRef.current?.scrubToTimestamp(