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

@@ -4,6 +4,7 @@ import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import ActivityIndicator from "@/components/ui/activity-indicator";
 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";
@@ -43,6 +44,7 @@ export default function DesktopEventView({
 }: DesktopEventViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const contentRef = useRef<HTMLDivElement | null>(null);
+  const segmentDuration = 60;
 
   // review paging
 
@@ -78,6 +80,11 @@ export default function DesktopEventView({
     };
   }, [reviewPages]);
 
+  const { alignDateToTimeline } = useEventUtils(
+    reviewItems.all,
+    segmentDuration
+  );
+
   const currentItems = useMemo(() => {
     const current = reviewItems[severity];
 
@@ -245,7 +252,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;
@@ -263,6 +273,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
@@ -283,7 +296,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}