trentuna/candle-annotator
8
0
Fork 0
Code Issues Pull requests Releases Packages Activity Actions

feat: add keyboard shortcuts R/S/L/D/T/? with shortcuts modal

Browse source
This commit is contained in:
Marko Djordjevic 2026-02-17 20:19:25 +01:00
parent 028a3382d6
commit 2faa8879f3
2 changed files with 113 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/app/page.tsx
View file

@ -10,6 +10,8 @@ import SpanAnnotationList from '@/components/SpanAnnotationList';
import TalibPatternPanel from '@/components/TalibPatternPanel';
import TrainingPanel from '@/components/TrainingPanel';
import { ThemeToggle } from '@/components/ThemeToggle';
import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
import { useTheme } from 'next-themes';
import { Settings, Tag, Layers } from 'lucide-react';
import type { PredictionState, PredictionSpan, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions';
@ -159,7 +161,9 @@ interface SpanLabelType {
}
export default function Home() {
const { theme, setTheme } = useTheme();
const [settingsOpen, setSettingsOpen] = useState(false);
const [shortcutsOpen, setShortcutsOpen] = useState(false);
const [activeTool, setActiveTool] = useState<Tool | 'span'>(null);
const [selectedColor, setSelectedColor] = useState('#3b82f6');
const [selectedLabelId, setSelectedLabelId] = useState<number | null>(null);
@ -698,9 +702,14 @@ export default function Home() {
}
}, [predictionState.visible, predictionState.spans, spanAnnotations]);
// Keyboard handler for Delete/Backspace key
// Keyboard handler for Delete/Backspace key and tool shortcuts
useEffect(() => {
const handleKeyDown = async (e: KeyboardEvent) => {
// Ignore shortcuts when typing in an input/textarea/select
const tag = (e.target as HTMLElement).tagName;
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
// Delete selected marker annotation
if ((e.key === 'Delete' || e.key === 'Backspace') && selectedLabelId !== null) {
try {
const response = await fetch(`/api/annotations/${selectedLabelId}`, {
@ -713,17 +722,41 @@ export default function Home() {
} catch (error) {
console.error('Failed to delete label:', error);
}
return;
}
// Tool shortcuts (only when not in a modal)
switch (e.key.toLowerCase()) {
case 'r':
setActiveTool((prev) => (prev === 'rectangle' ? null : 'rectangle'));
break;
case 's':
setActiveTool((prev) => (prev === 'span' ? null : 'span'));
break;
case 'l':
setActiveTool((prev) => (prev === 'line' ? null : 'line'));
break;
case 'd':
setActiveTool((prev) => (prev === 'delete' ? null : 'delete'));
break;
case 't':
setTheme(theme === 'dark' ? 'light' : 'dark');
break;
case '?':
setShortcutsOpen((prev) => !prev);
break;
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedLabelId]);
}, [selectedLabelId, theme, setTheme]);
const activeChart = charts.find((c) => c.id === activeChartId);
return (
<div className="flex h-screen w-full overflow-hidden bg-background">
<KeyboardShortcutsModal open={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
{/* Sidebar */}
<div className="flex flex-col bg-sidebar border-r border-sidebar-border w-60 flex-shrink-0 animate-fade-in">
{/* Sidebar Header */}