Make all object path points clickable (#17367)

web/src/components/overlay/detail/ObjectLifecycle.tsx

@@ -285,9 +285,16 @@ export default function ObjectLifecycle({
 
   useEffect(() => {
     if (eventSequence && eventSequence.length > 0) {
-      setTimeIndex(eventSequence?.[current].timestamp);
+      if (current == -1) {
-      handleSetBox(eventSequence?.[current].data.box ?? []);
+        // normal path point
-      setLifecycleZones(eventSequence?.[current].data.zones);
+        setBoxStyle(null);
+        setLifecycleZones([]);
+      } else {
+        // lifecycle point
+        setTimeIndex(eventSequence?.[current].timestamp);
+        handleSetBox(eventSequence?.[current].data.box ?? []);
+        setLifecycleZones(eventSequence?.[current].data.zones);
+      }
       setSelectedZone("");
     }
   }, [current, imgLoaded, handleSetBox, eventSequence]);
@@ -322,6 +329,10 @@ export default function ObjectLifecycle({
         mainApi.scrollTo(sequenceIndex);
         thumbnailApi.scrollTo(sequenceIndex);
         setCurrent(sequenceIndex);
+      } else {
+        // click on a normal path point, not a lifecycle point
+        setCurrent(-1);
+        setTimeIndex(pathPoints[index].timestamp);
       }
     },
     [mainApi, thumbnailApi, eventSequence, pathPoints],

web/src/components/overlay/detail/ObjectPath.tsx

@@ -95,10 +95,8 @@ export function ObjectPath({
               fill={getPointColor(color, pos.lifecycle_item?.class_type)}
               stroke="white"
               strokeWidth={width / 2}
-              onClick={() =>
+              onClick={() => onPointClick && onPointClick(index)}
-                pos.lifecycle_item && onPointClick && onPointClick(index)
+              style={{ cursor: "pointer" }}
-              }
-              style={{ cursor: pos.lifecycle_item ? "pointer" : "default" }}
             />
           </TooltipTrigger>
           <TooltipPortal>