make event bars clickable

web/src/components/timeline/EventReviewTimeline.tsx

@@ -102,7 +102,7 @@ export function EventReviewTimeline({
 
       return (
         <EventSegment
-          key={segmentTime}
+          key={segmentTime + severityType}
           events={events}
           segmentDuration={segmentDuration}
           segmentTime={segmentTime}
@@ -111,6 +111,7 @@ export function EventReviewTimeline({
           minimapStartTime={minimapStartTime}
           minimapEndTime={minimapEndTime}
           severityType={severityType}
+          contentRef={contentRef}
         />
       );
     });
@@ -122,6 +123,7 @@ export function EventReviewTimeline({
     showMinimap,
     minimapStartTime,
     minimapEndTime,
+    events,
   ]);
 
   const segments = useMemo(

web/src/components/timeline/EventSegment.tsx

@@ -1,7 +1,7 @@
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useSegmentUtils } from "@/hooks/use-segment-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
-import React, { useEffect, useMemo, useRef } from "react";
+import React, { RefObject, useEffect, useMemo, useRef } from "react";
 
 type EventSegmentProps = {
   events: ReviewSegment[];
@@ -12,6 +12,7 @@ type EventSegmentProps = {
   minimapStartTime?: number;
   minimapEndTime?: number;
   severityType: ReviewSeverity;
+  contentRef: RefObject<HTMLDivElement>;
 };
 
 type MinimapSegmentProps = {
@@ -131,6 +132,7 @@ export function EventSegment({
   minimapStartTime,
   minimapEndTime,
   severityType,
+  contentRef,
 }: EventSegmentProps) {
   const {
     getSeverity,
@@ -269,6 +271,16 @@ export function EventSegment({
             ${roundTop ? "rounded-tl-full rounded-tr-full" : ""}
             ${severityColors[severityValue]}
           `}
+                onClick={() => {
+                  if (contentRef.current) {
+                    const element = contentRef.current.querySelector(
+                      `[data-segment-start="${segmentTime}"]`
+                    );
+                    if (element instanceof HTMLElement) {
+                      debounceScrollIntoView(element);
+                    }
+                  }
+                }}
               ></div>
             </div>
           )}

web/src/views/events/DesktopEventView.tsx

@@ -5,6 +5,7 @@ import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 import { Button } from "@/components/ui/button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useEventUtils } from "@/hooks/use-event-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -41,6 +42,7 @@ export default function DesktopEventView({
   const { data: config } = useSWR<FrigateConfig>("config");
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const segmentDuration = 60;
 
   // review paging
 
@@ -76,6 +78,11 @@ export default function DesktopEventView({
     };
   }, [reviewPages]);
 
+  const { alignDateToTimeline } = useEventUtils(
+    reviewItems.all,
+    segmentDuration
+  );
+
   const currentItems = useMemo(() => {
     const current = reviewItems[severity];
 
@@ -91,8 +98,8 @@ export default function DesktopEventView({
       return false;
     }
 
-    return contentRef.current.scrollHeight > contentRef.current.clientHeight
-  }, [contentRef.current?.scrollHeight])
+    return contentRef.current.scrollHeight > contentRef.current.clientHeight;
+  }, [contentRef.current?.scrollHeight]);
 
   // review interaction
 
@@ -244,10 +251,7 @@ export default function DesktopEventView({
       </div>
 
       <div className="flex h-full overflow-hidden">
-        <div
-          ref={contentRef}
-          className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
-        >
+        <div className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar">
           {hasUpdate && (
             <div className="absolute w-full z-30">
               <div className="flex justify-center items-center mr-[100px]">
@@ -276,7 +280,10 @@ export default function DesktopEventView({
             </div>
           )}
 
-          <div className="w-full mr-4 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4">
+          <div
+            className="w-full mr-4 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4"
+            ref={contentRef}
+          >
             {currentItems ? (
               currentItems.map((value, segIdx) => {
                 const lastRow = segIdx == reviewItems[severity].length - 1;
@@ -294,6 +301,9 @@ export default function DesktopEventView({
                     key={value.id}
                     ref={lastRow ? lastReviewRef : minimapRef}
                     data-start={value.start_time}
+                    data-segment-start={
+                      alignDateToTimeline(value.start_time) - segmentDuration
+                    }
                   >
                     <div className="aspect-video rounded-lg overflow-hidden">
                       <PreviewThumbnailPlayer
@@ -314,7 +324,7 @@ export default function DesktopEventView({
         </div>
         <div className="md:w-[100px] overflow-y-auto no-scrollbar">
           <EventReviewTimeline
-            segmentDuration={60}
+            segmentDuration={segmentDuration}
             timestampSpread={15}
             timelineStart={timeRange.before}
             timelineEnd={timeRange.after}