Improve annotation offset UX (#22310)

* keep nav buttons visible

nav buttons would be hidden when closing and reopening dialog after selecting the tracking details pane

* better ux in tracking details

actually pause the video and seek when annotation offset changes to make it easier to visually line up the bounding box

* improve detail stream ux

* update dummy camera docs

* fix docs link

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

@@ -7,10 +7,16 @@ import axios from "axios";
 import { useSWRConfig } from "swr";
 import { toast } from "sonner";
 import { Trans, useTranslation } from "react-i18next";
-import { LuInfo } from "react-icons/lu";
+import { LuExternalLink, LuInfo, LuMinus, LuPlus } from "react-icons/lu";
 import { cn } from "@/lib/utils";
 import { isMobile } from "react-device-detect";
 import { useIsAdmin } from "@/hooks/use-is-admin";
+import { useDocDomain } from "@/hooks/use-doc-domain";
+import { Link } from "react-router-dom";
+
+const OFFSET_MIN = -2500;
+const OFFSET_MAX = 2500;
+const OFFSET_STEP = 50;
 
 type Props = {
   className?: string;
@@ -19,6 +25,7 @@ type Props = {
 export default function AnnotationOffsetSlider({ className }: Props) {
   const { annotationOffset, setAnnotationOffset, camera } = useDetailStream();
   const isAdmin = useIsAdmin();
+  const { getLocaleDocUrl } = useDocDomain();
   const { mutate } = useSWRConfig();
   const { t } = useTranslation(["views/explore"]);
   const [isSaving, setIsSaving] = useState(false);
@@ -32,6 +39,16 @@ export default function AnnotationOffsetSlider({ className }: Props) {
     [setAnnotationOffset],
   );
 
+  const stepOffset = useCallback(
+    (delta: number) => {
+      setAnnotationOffset((prev) => {
+        const next = prev + delta;
+        return Math.max(OFFSET_MIN, Math.min(OFFSET_MAX, next));
+      });
+    },
+    [setAnnotationOffset],
+  );
+
   const reset = useCallback(() => {
     setAnnotationOffset(0);
   }, [setAnnotationOffset]);
@@ -72,11 +89,18 @@ export default function AnnotationOffsetSlider({ className }: Props) {
   return (
     <div
       className={cn(
-        "flex flex-col gap-0.5",
+        "flex flex-col gap-1.5",
         isMobile && "landscape:gap-3",
         className,
       )}
     >
+      <div className="flex items-center gap-2 text-sm">
+        <span>{t("trackingDetails.annotationSettings.offset.label")}:</span>
+        <span className="font-mono tabular-nums text-primary-variant">
+          {annotationOffset > 0 ? "+" : ""}
+          {annotationOffset}ms
+        </span>
+      </div>
       <div
         className={cn(
           "flex items-center gap-3",
@@ -84,57 +108,81 @@ export default function AnnotationOffsetSlider({ className }: Props) {
             "landscape:flex-col landscape:items-start landscape:gap-4",
         )}
       >
-        <div className="flex max-w-28 flex-row items-center gap-2 text-sm md:max-w-48">
-          <span className="max-w-24 md:max-w-44">
-            {t("trackingDetails.annotationSettings.offset.label")}:
-          </span>
-          <span className="text-primary-variant">{annotationOffset}</span>
-        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-8 shrink-0"
+          aria-label="-50ms"
+          onClick={() => stepOffset(-OFFSET_STEP)}
+          disabled={annotationOffset <= OFFSET_MIN}
+        >
+          <LuMinus className="size-4" />
+        </Button>
         <div className="w-full flex-1 landscape:flex">
           <Slider
             value={[annotationOffset]}
-            min={-2500}
-            max={2500}
-            step={50}
+            min={OFFSET_MIN}
+            max={OFFSET_MAX}
+            step={OFFSET_STEP}
             onValueChange={handleChange}
           />
         </div>
-        <div className="flex items-center gap-2">
-          <Button size="sm" variant="ghost" onClick={reset}>
-            {t("button.reset", { ns: "common" })}
-          </Button>
-          {isAdmin && (
-            <Button size="sm" onClick={save} disabled={isSaving}>
-              {isSaving
-                ? t("button.saving", { ns: "common" })
-                : t("button.save", { ns: "common" })}
-            </Button>
-          )}
-        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          className="size-8 shrink-0"
+          aria-label="+50ms"
+          onClick={() => stepOffset(OFFSET_STEP)}
+          disabled={annotationOffset >= OFFSET_MAX}
+        >
+          <LuPlus className="size-4" />
+        </Button>
       </div>
-      <div
-        className={cn(
-          "flex items-center gap-2 text-xs text-muted-foreground",
-          isMobile && "landscape:flex-col landscape:items-start",
-        )}
-      >
+      <div className="flex items-start gap-1.5 text-xs text-muted-foreground">
         <Trans ns="views/explore">
           trackingDetails.annotationSettings.offset.millisecondsToOffset
         </Trans>
         <Popover>
           <PopoverTrigger asChild>
             <button
-              className="focus:outline-none"
+              className="mt-px shrink-0 focus:outline-none"
               aria-label={t("trackingDetails.annotationSettings.offset.tips")}
             >
-              <LuInfo className="size-4" />
+              <LuInfo className="size-3.5" />
             </button>
           </PopoverTrigger>
           <PopoverContent className="w-80 text-sm">
             {t("trackingDetails.annotationSettings.offset.tips")}
+            <div className="mt-2 flex items-center text-primary-variant">
+              <Link
+                to={getLocaleDocUrl(
+                  "troubleshooting/dummy-camera#annotation-offset",
+                )}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline"
+              >
+                {t("readTheDocumentation", { ns: "common" })}
+                <LuExternalLink className="ml-2 inline-flex size-3" />
+              </Link>
+            </div>
           </PopoverContent>
         </Popover>
       </div>
+      <div className="flex items-center justify-end gap-2">
+        <Button size="sm" variant="ghost" onClick={reset}>
+          {t("button.reset", { ns: "common" })}
+        </Button>
+        {isAdmin && (
+          <Button size="sm" onClick={save} disabled={isSaving}>
+            {isSaving
+              ? t("button.saving", { ns: "common" })
+              : t("button.save", { ns: "common" })}
+          </Button>
+        )}
+      </div>
     </div>
   );
 }