Merge pull request #48 from hriday330/improvement/add-keyboard-navigation-for-annotations-view

Improvement/add keyboard navigation & autoplay

Author: hriday330

dataset_explorer/app/DashboardContent.tsx

@@ -21,6 +21,7 @@ import { Button } from "@components/ui/button";
 
 import type { User } from "@supabase/supabase-js";
 import type { Dataset, Label, BoundingBox, ImageThumbnail } from "@lib/types";
+import { useLabelKeyboardNavigation } from "@components/General/hooks/useLabelKeyboardNavigation";
 
 // TODO - make page size configurable
 const PAGE_SIZE = 12;
@@ -69,6 +70,10 @@ export function DashboardContent({
   const { labels, createLabel, updateLabel, reorderLabels, deleteLabel } =
     useLabelClasses(datasetId);
 
+  useLabelKeyboardNavigation(labels, selectedLabelId, (newId) => {
+    setSelectedLabelId(newId);
+  });
+
   const {
     data: analytics,
     loading,

dataset_explorer/components/General/DatasetPicker.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Check, ChevronDown, FolderOpen, Plus } from "lucide-react";
+import { Check, ChevronDown, File, FolderOpen, Plus } from "lucide-react";
 
 import { cn } from "@components/ui/utils";
 import { useDataset } from "@contexts/DatasetContext";
@@ -73,10 +73,7 @@ export function DatasetPicker() {
               No datasets found.
             </CommandEmpty>
 
-            <CommandGroup
-              heading="Datasets"
-              className="max-h-[220px] overflow-y-auto"
-            >
+            <CommandGroup className="max-h-[220px] overflow-y-auto">
               {datasets.map((d) => (
                 <CommandItem
                   key={d.id}
@@ -112,7 +109,7 @@ export function DatasetPicker() {
                 onSelect={() => router.push("/datasets")}
                 className="flex items-center gap-2 px-3 py-2 text-[#D4D4D4] hover:bg-[#1A1A1A]"
               >
-                <Plus className="w-4 h-4" />
+                <File className="w-4 h-4" />
                 <span>Manage your dataset</span>
               </CommandItem>
             </CommandGroup>

dataset_explorer/components/General/ImageViewer/hooks/useAutoplayFrames.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+
+export function useAutoplayFrames(
+  isPlaying: boolean,
+  intervalMs: number,
+  onNextFrame: () => void,
+  disableDrawing: (disabled: boolean) => void,
+) {
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (!isPlaying) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      disableDrawing(false);
+      return;
+    }
+    disableDrawing(true);
+
+    intervalRef.current = setInterval(() => {
+      onNextFrame();
+    }, intervalMs);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      disableDrawing(false);
+    };
+  }, [isPlaying, intervalMs, onNextFrame, disableDrawing]);
+}

dataset_explorer/components/General/ImageViewer/hooks/useSelectFrame.tsx

@@ -7,11 +7,32 @@ export function useSelectFrame(
 ) {
   const [frameInput, setFrameInput] = useState(frameNumber.toString());
 
-  // Keep input in sync with external frame changes
   useEffect(() => {
     setFrameInput(frameNumber.toString());
   }, [frameNumber]);
 
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      const active = document.activeElement as HTMLElement | null;
+      if (
+        active &&
+        (["INPUT", "TEXTAREA", "SELECT"].includes(active.tagName) ||
+          active.isContentEditable)
+      ) {
+        return;
+      }
+
+      if (e.key === "ArrowLeft" && frameNumber > 1) {
+        onGoToFrame(frameNumber - 1);
+      } else if (e.key === "ArrowRight" && frameNumber < totalFrames) {
+        onGoToFrame(frameNumber + 1);
+      }
+    };
+
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [frameNumber, totalFrames, onGoToFrame]);
+
   const isValidFrame = useCallback(
     (value: string) => {
       const num = Number(value);

dataset_explorer/components/General/ImageViewer/index.tsx

@@ -6,6 +6,7 @@ import { useState, useRef, useEffect } from "react";
 import type { BoundingBox, Label } from "@lib/types";
 import { useBoundingBoxes } from "./hooks/useBoundingBoxes";
 import { useSelectFrame } from "./hooks/useSelectFrame";
+import { useAutoplayFrames } from "./hooks/useAutoplayFrames";
 
 interface Frame {
   id: string;
@@ -42,7 +43,7 @@ export function ImageViewer({
 }: ImageViewerProps) {
   const [isPlaying, setIsPlaying] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
-
+  const [drawingDisabled, setDrawingDisabled] = useState(false);
   const {
     getBoundingBoxLabelColor,
     getBoundingBoxLabelName,
@@ -70,21 +71,18 @@ export function ImageViewer({
     isValidFrame,
   } = useSelectFrame(frameNumber, totalFrames, onGoToFrame);
 
-  // TODO - work on autoplay logic
+  
   useEffect(() => {
     // Sync displayed number when frame changes externally
     setFrameInput(frameNumber.toString());
   }, [frameNumber]);
 
-  // Auto-play frames
-  useEffect(() => {
-    if (isPlaying) {
-      const interval = setInterval(() => {
-        onNextFrame();
-      }, 2000);
-      return () => clearInterval(interval);
-    }
-  }, [isPlaying, onNextFrame]);
+  useAutoplayFrames(
+    isPlaying,
+    500, 
+    onNextFrame,
+    setDrawingDisabled,
+  );
 
   return (
     <div className="flex-1 flex flex-col items-center justify-center p-6 gap-4">
@@ -174,7 +172,7 @@ export function ImageViewer({
         ))}
 
         {/* Current Drawing Box */}
-        {currentBox && (
+        {!drawingDisabled && currentBox && (
           <div
             className="absolute border-2 border-dashed rounded pointer-events-none"
             style={{

dataset_explorer/components/General/Sidebar.tsx

@@ -33,8 +33,6 @@ export function Sidebar({
   const shortcuts = [
     { keys: ["←", "→"], description: "Navigate frames" },
     { keys: ["↑", "↓"], description: "Select labels" },
-    { keys: ["1-9"], description: "Quick label" },
-    { keys: ["Space"], description: "Play/Pause" },
   ];
 
   const toggleLabel = (id: string) => {

dataset_explorer/components/General/hooks/useLabelKeyboardNavigation.ts

@@ -0,0 +1,52 @@
+import { useEffect, useCallback } from "react";
+import { Label } from "@lib/types";
+
+export function useLabelKeyboardNavigation(
+  labels: Label[],
+  selectedLabelId: string | null,
+  onSelectLabel: (id: string) => void,
+) {
+  const currentIndex = labels.findIndex((l) => l.id === selectedLabelId);
+
+  const selectPrev = useCallback(() => {
+    if (labels.length === 0) return;
+
+    const nextIndex = currentIndex <= 0 ? labels.length - 1 : currentIndex - 1;
+
+    onSelectLabel(labels[nextIndex].id);
+  }, [labels, currentIndex, onSelectLabel]);
+
+  const selectNext = useCallback(() => {
+    if (labels.length === 0) return;
+
+    const nextIndex = currentIndex >= labels.length - 1 ? 0 : currentIndex + 1;
+
+    onSelectLabel(labels[nextIndex].id);
+  }, [labels, currentIndex, onSelectLabel]);
+
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.repeat) return;
+      // block when typing in input/text areas
+      const active = document.activeElement as HTMLElement | null;
+      if (
+        active &&
+        (["INPUT", "TEXTAREA", "SELECT"].includes(active.tagName) ||
+          active.isContentEditable)
+      ) {
+        return;
+      }
+
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        selectPrev();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        selectNext();
+      }
+    };
+
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [selectPrev, selectNext]);
+}