From e67b7a6d5e6a23f5e722a3e817c6e650acb08143 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:28:17 -0500
Subject: [PATCH] Add ability to use carousel buttons to scroll through object
 lifecycle elements (#14662)

---
 .../overlay/detail/ObjectLifecycle.tsx        | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/web/src/components/overlay/detail/ObjectLifecycle.tsx b/web/src/components/overlay/detail/ObjectLifecycle.tsx
index bb80b5c7f..fee15af4a 100644
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@@ -203,6 +203,20 @@ export default function ObjectLifecycle({
     setCurrent(index);
   };
 
+  const handleThumbnailNavigation = useCallback(
+    (direction: "next" | "previous") => {
+      if (!mainApi || !thumbnailApi || !eventSequence) return;
+      const newIndex =
+        direction === "next"
+          ? Math.min(current + 1, eventSequence.length - 1)
+          : Math.max(current - 1, 0);
+      mainApi.scrollTo(newIndex);
+      thumbnailApi.scrollTo(newIndex);
+      setCurrent(newIndex);
+    },
+    [mainApi, thumbnailApi, current, eventSequence],
+  );
+
   useEffect(() => {
     if (eventSequence && eventSequence.length > 0) {
       setTimeIndex(eventSequence?.[current].timestamp);
@@ -545,8 +559,14 @@ export default function ObjectLifecycle({
               </CarouselItem>
             ))}
           </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
+          <CarouselPrevious
+            disabled={current === 0}
+            onClick={() => handleThumbnailNavigation("previous")}
+          />
+          <CarouselNext
+            disabled={current === eventSequence.length - 1}
+            onClick={() => handleThumbnailNavigation("next")}
+          />
         </Carousel>
       </div>
     </div>