Add zoom icons to timeline (#20717)

* add icons to zoom timeline

* fix current zoom level handling

* ensure mobile buttons don't stay selected

* remove icons on event review timeline

* add tooltips

web/src/views/events/EventView.tsx

@@ -19,6 +19,7 @@ import {
   ReviewSeverity,
   ReviewSummary,
   SegmentedReviewData,
+  ZoomLevel,
 } from "@/types/review";
 import { getChunkedTimeRange } from "@/utils/timelineUtil";
 import axios from "axios";
@@ -501,7 +502,7 @@ function DetectionReview({
     timestampSpread: 15,
   });
 
-  const possibleZoomLevels = useMemo(
+  const possibleZoomLevels: ZoomLevel[] = useMemo(
     () => [
       { segmentDuration: 60, timestampSpread: 15 },
       { segmentDuration: 30, timestampSpread: 5 },
@@ -517,6 +518,14 @@ function DetectionReview({
     [possibleZoomLevels],
   );
 
+  const currentZoomLevel = useMemo(
+    () =>
+      possibleZoomLevels.findIndex(
+        (level) => level.segmentDuration === zoomSettings.segmentDuration,
+      ),
+    [possibleZoomLevels, zoomSettings.segmentDuration],
+  );
+
   const { isZooming, zoomDirection } = useTimelineZoom({
     zoomSettings,
     zoomLevels: possibleZoomLevels,
@@ -799,7 +808,7 @@ function DetectionReview({
         </div>
       </div>
       <div className="flex w-[65px] flex-row md:w-[110px]">
-        <div className="no-scrollbar w-[55px] md:w-[100px]">
+        <div className="no-scrollbar relative w-[55px] md:w-[100px]">
           {loading ? (
             <Skeleton className="size-full" />
           ) : (
@@ -821,6 +830,8 @@ function DetectionReview({
               dense={isMobile}
               isZooming={isZooming}
               zoomDirection={zoomDirection}
+              possibleZoomLevels={possibleZoomLevels}
+              currentZoomLevel={currentZoomLevel}
             />
           )}
         </div>

web/src/views/recording/RecordingView.tsx

@@ -22,6 +22,7 @@ import {
   ReviewFilter,
   ReviewSegment,
   ReviewSummary,
+  ZoomLevel,
 } from "@/types/review";
 import { getChunkedTimeDay } from "@/utils/timelineUtil";
 import {
@@ -884,7 +885,7 @@ function Timeline({
     timestampSpread: 15,
   });
 
-  const possibleZoomLevels = useMemo(
+  const possibleZoomLevels: ZoomLevel[] = useMemo(
     () => [
       { segmentDuration: 30, timestampSpread: 15 },
       { segmentDuration: 15, timestampSpread: 5 },
@@ -900,6 +901,14 @@ function Timeline({
     [possibleZoomLevels],
   );
 
+  const currentZoomLevel = useMemo(
+    () =>
+      possibleZoomLevels.findIndex(
+        (level) => level.segmentDuration === zoomSettings.segmentDuration,
+      ),
+    [possibleZoomLevels, zoomSettings.segmentDuration],
+  );
+
   const { isZooming, zoomDirection } = useTimelineZoom({
     zoomSettings,
     zoomLevels: possibleZoomLevels,
@@ -1010,6 +1019,9 @@ function Timeline({
             onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
             isZooming={isZooming}
             zoomDirection={zoomDirection}
+            onZoomChange={handleZoomChange}
+            possibleZoomLevels={possibleZoomLevels}
+            currentZoomLevel={currentZoomLevel}
           />
         ) : (
           <Skeleton className="size-full" />