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

feat: redesign UI to match lovable compact sidebar layout

Browse source 
- Replace green hacker theme with professional blue-toned design
- Light theme default, manual toggle only (no system detection)
- Compact w-60 sidebar with collapsible sections
- New CSS tokens: sidebar, chart, candle, annotation colors
- Tools displayed as compact grid buttons
- Color swatches as inline bar
- Chart top bar with keyboard shortcut hints
- Inter + JetBrains Mono font pairing
- All components updated for compact styling
- Tailwind config extended with sidebar/chart tokens
This commit is contained in:
Marko Djordjevic 2026-02-16 20:50:30 +01:00
parent 2bde38d0bf
commit 4605283d2b
13 changed files with 976 additions and 740 deletions
Download patch file Download diff file Expand all files Collapse all files

0
candle_annotator.db Normal file
View file

254
lovable_design_html/candles_lovable_design.html Normal file
View file

File diff suppressed because one or more lines are too long

1
lovable_design_html/index-DRgIPKRu.css Normal file
View file

File diff suppressed because one or more lines are too long

216
src/app/globals.css
View file

@ -1,54 +1,103 @@
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* Light theme - off-white backgrounds, green-600 accents, near-black text, gray borders */
--background: 120 25% 97%; /* #f8faf8 */
--foreground: 240 15% 10%; /* #1a1a2e near-black */
--card: 0 0% 100%; /* #ffffff */
--card-foreground: 240 15% 10%;
--background: 0 0% 98%;
--foreground: 220 20% 10%;
--card: 0 0% 100%;
--card-foreground: 220 20% 10%;
--popover: 0 0% 100%;
--popover-foreground: 240 15% 10%;
--primary: 142 76% 36%; /* #16a34a green-600 */
--popover-foreground: 220 20% 10%;
--primary: 220 70% 45%;
--primary-foreground: 0 0% 100%;
--secondary: 120 10% 95%; /* #f0f4f0 */
--secondary-foreground: 240 15% 10%;
--muted: 120 10% 95%;
--muted-foreground: 220 9% 46%; /* #4a5568 gray-600 */
--accent: 142 76% 36%; /* green-600 */
--accent-foreground: 0 0% 100%;
--destructive: 348 100% 50%; /* #ff0040 neon red */
--secondary: 220 14% 92%;
--secondary-foreground: 220 20% 20%;
--muted: 220 14% 94%;
--muted-foreground: 215 12% 46%;
--accent: 220 14% 90%;
--accent-foreground: 220 20% 10%;
--destructive: 0 72% 51%;
--destructive-foreground: 0 0% 100%;
--border: 220 13% 84%; /* #d1d5db gray-300 */
--input: 220 13% 84%;
--ring: 142 76% 36%;
--radius: 0.5rem;
--border: 220 13% 87%;
--input: 220 13% 87%;
--ring: 220 70% 45%;
--radius: 0.375rem;
--candle-bull: 0 0% 100%;
--candle-bull-stroke: 0 0% 10%;
--candle-bear: 0 0% 10%;
--candle-bear-stroke: 0 0% 10%;
--annotation-blue: 217 91% 60%;
--annotation-red: 0 72% 51%;
--annotation-green: 152 69% 45%;
--annotation-orange: 38 92% 50%;
--annotation-purple: 263 70% 58%;
--sidebar-background: 0 0% 100%;
--sidebar-foreground: 220 20% 20%;
--sidebar-primary: 220 70% 45%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 220 14% 94%;
--sidebar-accent-foreground: 220 20% 10%;
--sidebar-border: 220 13% 90%;
--sidebar-ring: 220 70% 45%;
--chart-bg: 0 0% 100%;
--chart-grid: 220 13% 92%;
--chart-crosshair: 220 10% 60%;
--chart-text: 215 12% 46%;
}
.dark {
/* Dark hacker theme - terminal blacks, matrix green #00ff41 accents, neon text */
--background: 120 38% 3%; /* #0a0e0a near-black */
--foreground: 120 100% 63%; /* #00ff41 matrix green */
--card: 120 29% 5%; /* #0d110d */
--card-foreground: 120 100% 63%;
--popover: 120 29% 5%;
--popover-foreground: 120 100% 63%;
--primary: 120 100% 63%; /* #00ff41 matrix green */
--primary-foreground: 120 38% 3%;
--secondary: 120 100% 50%; /* #00cc33 */
--secondary-foreground: 120 100% 63%;
--muted: 120 82% 10%; /* #003311 */
--muted-foreground: 120 100% 50%;
--accent: 120 100% 63%; /* #00ff41 */
--accent-foreground: 120 38% 3%;
--destructive: 348 100% 50%; /* #ff0040 neon red */
--destructive-foreground: 120 100% 63%;
--border: 120 82% 10%; /* #003311 inactive */
--input: 120 82% 10%;
--ring: 120 100% 63%;
--radius: 0.5rem;
--background: 220 20% 7%;
--foreground: 210 20% 90%;
--card: 220 18% 10%;
--card-foreground: 210 20% 90%;
--popover: 220 18% 12%;
--popover-foreground: 210 20% 90%;
--primary: 217 91% 60%;
--primary-foreground: 220 20% 7%;
--secondary: 220 16% 16%;
--secondary-foreground: 210 20% 80%;
--muted: 220 14% 14%;
--muted-foreground: 215 12% 50%;
--accent: 220 16% 18%;
--accent-foreground: 210 20% 95%;
--destructive: 0 72% 51%;
--destructive-foreground: 210 20% 95%;
--border: 220 14% 18%;
--input: 220 14% 20%;
--ring: 217 91% 60%;
--candle-bull: 0 0% 100%;
--candle-bull-stroke: 0 0% 90%;
--candle-bear: 0 0% 10%;
--candle-bear-stroke: 0 0% 90%;
--annotation-blue: 217 91% 60%;
--annotation-red: 0 72% 51%;
--annotation-green: 152 69% 45%;
--annotation-orange: 38 92% 50%;
--annotation-purple: 263 70% 58%;
--sidebar-background: 220 20% 8%;
--sidebar-foreground: 210 20% 80%;
--sidebar-primary: 217 91% 60%;
--sidebar-primary-foreground: 220 20% 7%;
--sidebar-accent: 220 16% 14%;
--sidebar-accent-foreground: 210 20% 90%;
--sidebar-border: 220 14% 16%;
--sidebar-ring: 217 91% 60%;
--chart-bg: 220 20% 7%;
--chart-grid: 220 14% 14%;
--chart-crosshair: 210 20% 30%;
--chart-text: 215 12% 50%;
}
}
@ -60,6 +109,9 @@
@apply bg-background text-foreground antialiased;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
code, .font-mono {
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
}
@layer base {
@ -68,90 +120,44 @@
}
::-webkit-scrollbar {
width: 8px;
width: 6px;
}
/* Light mode scrollbar */
::-webkit-scrollbar-track {
background: hsl(var(--muted));
background: transparent;
}
::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 4px;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: hsl(var(--muted-foreground) / 0.5);
}
/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
background: hsl(var(--muted));
}
.dark ::-webkit-scrollbar-thumb {
background: hsl(var(--primary));
border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb:hover {
background: hsl(var(--secondary));
}
}
/* CRT effects - dark mode only */
@layer utilities {
.dark .crt-scanlines {
position: relative;
.scrollbar-thin {
scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background: hsl(var(--border));
border-radius: 2px;
}
.dark .crt-scanlines::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
rgba(0, 0, 0, 0) 50%,
rgba(0, 0, 0, 0.05) 50%
);
background-size: 100% 4px;
pointer-events: none;
z-index: 1;
.animate-fade-in {
animation: fadeIn 0.2s ease-in-out;
}
.dark .neon-glow {
text-shadow: 0 0 10px hsl(var(--primary)),
0 0 20px hsl(var(--primary) / 0.5),
0 0 30px hsl(var(--primary) / 0.3);
}
.dark .neon-glow-box {
box-shadow: 0 0 10px hsl(var(--primary)),
0 0 20px hsl(var(--primary) / 0.5);
}
.dark .neon-glow-box:hover {
box-shadow: 0 0 15px hsl(var(--primary)),
0 0 30px hsl(var(--primary) / 0.6),
0 0 45px hsl(var(--primary) / 0.4);
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 10px hsl(var(--primary)),
0 0 20px hsl(var(--primary) / 0.5);
}
50% {
box-shadow: 0 0 20px hsl(var(--primary)),
0 0 40px hsl(var(--primary) / 0.7),
0 0 60px hsl(var(--primary) / 0.5);
}
}
.dark .pulse-glow {
animation: pulse-glow 2s ease-in-out infinite;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
}

10
src/app/layout.tsx
View file

@ -14,17 +14,11 @@ export default function RootLayout({
}>) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body className="antialiased">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
defaultTheme="light"
enableSystem={false}
>
{children}
</ThemeProvider>

185
src/app/page.tsx
View file

@ -6,6 +6,8 @@ import FileUpload from '@/components/FileUpload';
import CandleChart, { CandleChartHandle } from '@/components/CandleChart';
import ChartSelector from '@/components/ChartSelector';
import PredictionPanel from '@/components/PredictionPanel';
import SpanAnnotationList from '@/components/SpanAnnotationList';
import { ThemeToggle } from '@/components/ThemeToggle';
import type { PredictionState, PredictionSpan, ModelInfoResponse, Disagreement, DisagreementType, PredictionSummary } from '@/types/predictions';
/**
@ -692,29 +694,25 @@ export default function Home() {
return () => window.removeEventListener('keydown', handleKeyDown);
}, [selectedLabelId]);
const activeChart = charts.find((c) => c.id === activeChartId);
return (
<div className="flex h-screen bg-background">
<div className="flex h-screen w-full overflow-hidden bg-background">
{/* Sidebar */}
<aside className="w-72 flex-shrink-0 flex flex-col border-r border-border bg-card">
<div className="p-6 border-b border-border">
<h1 className="text-2xl font-semibold text-foreground">Candle Annotator</h1>
<p className="text-sm text-muted-foreground mt-1">Chart annotation tool</p>
<div className="mt-3 flex flex-col gap-1">
<a
href="/annotation-types"
className="text-sm text-muted-foreground hover:text-foreground"
>
Manage Annotation Types
</a>
<a
href="/span-label-types"
className="text-sm text-muted-foreground hover:text-foreground"
>
Manage Span Label Types
</a>
<div className="flex flex-col bg-sidebar border-r border-sidebar-border w-60 flex-shrink-0 animate-fade-in">
{/* Sidebar Header */}
<div className="flex items-center justify-between px-4 py-3 border-b border-sidebar-border">
<div>
<h1 className="text-sm font-semibold text-foreground tracking-tight">Candle Annotator</h1>
<p className="text-[10px] text-muted-foreground">Chart annotation tool</p>
</div>
<div className="flex items-center gap-1">
<ThemeToggle />
</div>
</div>
<div className="p-6 pb-3">
{/* Chart Selector */}
<div className="px-3 py-2 border-b border-sidebar-border">
<ChartSelector
charts={charts}
activeChartId={activeChartId}
@ -722,10 +720,14 @@ export default function Home() {
onDeleteChart={handleDeleteChart}
/>
</div>
<div className="px-6 pb-3">
{/* File Upload */}
<div className="px-3 py-2 border-b border-sidebar-border">
<FileUpload onUploadSuccess={handleUploadSuccess} />
</div>
<div className="px-6 pb-6">
{/* Toolbox */}
<div className="px-3 py-2 border-b border-sidebar-border">
<Toolbox
activeTool={activeTool}
onToolChange={setActiveTool}
@ -744,58 +746,103 @@ export default function Home() {
onDeleteSpan={handleDeleteSpan}
/>
</div>
<PredictionPanel
predictionState={predictionState}
onToggleVisibility={togglePredictionVisibility}
onFetchPredictions={handleFetchVisiblePredictions}
onFetchBatchPredictions={handleFetchBatchPredictions}
onConfidenceChange={setConfidenceThreshold}
onToggleLabelSelection={toggleLabelSelection}
predictionSummary={predictionSummary}
isModelOnline={isModelOnline}
showOnlyDisagreements={showOnlyDisagreements}
onToggleShowOnlyDisagreements={toggleShowOnlyDisagreements}
/>
</aside>
{/* Annotations List - scrollable */}
<div className="flex-1 overflow-y-auto scrollbar-thin px-3 py-2 min-h-0">
<SpanAnnotationList
spanAnnotations={spanAnnotations}
spanLabelTypes={spanLabelTypes}
selectedSpanId={selectedSpanId}
onSelectSpan={handleSelectedSpanChange}
onDeleteSpan={handleDeleteSpan}
/>
</div>
{/* Predictions */}
<div className="px-3 py-2 border-t border-sidebar-border">
<PredictionPanel
predictionState={predictionState}
onToggleVisibility={togglePredictionVisibility}
onFetchPredictions={handleFetchVisiblePredictions}
onFetchBatchPredictions={handleFetchBatchPredictions}
onConfidenceChange={setConfidenceThreshold}
onToggleLabelSelection={toggleLabelSelection}
predictionSummary={predictionSummary}
isModelOnline={isModelOnline}
showOnlyDisagreements={showOnlyDisagreements}
onToggleShowOnlyDisagreements={toggleShowOnlyDisagreements}
/>
</div>
{/* Export */}
<div className="px-3 py-2 border-t border-sidebar-border">
<button
onClick={handleExport}
className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded bg-primary/10 hover:bg-primary/20 text-primary transition-colors"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
Export JSON
</button>
</div>
</div>
{/* Main chart area */}
<main className="flex-1 relative bg-background">
{/* Loading overlay for predictions */}
{predictionState.isLoading && (
<div className="absolute inset-0 bg-background/50 backdrop-blur-sm z-50 flex items-center justify-center">
<div className="bg-card border border-border rounded-lg p-6 shadow-lg">
<div className="flex items-center gap-3">
<div className="animate-spin rounded-full h-5 w-5 border-2 border-primary border-t-transparent" />
<span className="text-sm text-foreground">Loading predictions...</span>
<div className="flex-1 flex flex-col min-w-0">
{/* Chart top bar */}
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border bg-card/50">
<div className="flex items-center gap-3">
<span className="font-mono text-sm font-semibold text-foreground">
{activeChart?.name || 'No chart'}
</span>
</div>
<div className="flex items-center gap-2 text-[10px] text-muted-foreground font-mono">
<span className="px-1.5 py-0.5 rounded bg-secondary/50">R Rect</span>
<span className="px-1.5 py-0.5 rounded bg-secondary/50">S Span</span>
<span className="px-1.5 py-0.5 rounded bg-secondary/50">L Line</span>
<span className="px-1.5 py-0.5 rounded bg-secondary/50">D Del</span>
<span className="px-1.5 py-0.5 rounded bg-secondary/50">T Theme</span>
</div>
</div>
{/* Chart */}
<div className="flex-1 min-h-0 relative">
{/* Loading overlay for predictions */}
{predictionState.isLoading && (
<div className="absolute inset-0 bg-background/50 backdrop-blur-sm z-50 flex items-center justify-center">
<div className="bg-card border border-border rounded-lg p-6 shadow-lg">
<div className="flex items-center gap-3">
<div className="animate-spin rounded-full h-5 w-5 border-2 border-primary border-t-transparent" />
<span className="text-sm text-foreground">Loading predictions...</span>
</div>
</div>
</div>
</div>
)}
<CandleChart
ref={chartRef}
activeTool={activeTool}
onAnnotationChange={handleAnnotationChange}
selectedColor={selectedColor}
selectedLabelId={selectedLabelId}
onLabelSelect={handleLabelSelect}
activeChartId={activeChartId}
spanAnnotations={spanAnnotations}
spanLabelTypes={spanLabelTypes}
selectedSpanId={selectedSpanId}
onSpanAnnotationsChange={handleSpanAnnotationsChange}
onSelectedSpanChange={handleSelectedSpanChange}
predictionVisible={predictionState.visible}
perCandlePredictions={predictionState.perCandlePredictions}
predictionSpans={predictionState.spans}
confidenceThreshold={predictionState.confidenceThreshold}
selectedLabels={predictionState.selectedLabels}
modelInfo={predictionState.modelInfo}
predictionSummary={predictionSummary}
showOnlyDisagreements={showOnlyDisagreements}
onPredictionClick={handlePredictionClick}
onPredictionDismiss={handlePredictionDismiss}
/>
</main>
)}
<CandleChart
ref={chartRef}
activeTool={activeTool}
onAnnotationChange={handleAnnotationChange}
selectedColor={selectedColor}
selectedLabelId={selectedLabelId}
onLabelSelect={handleLabelSelect}
activeChartId={activeChartId}
spanAnnotations={spanAnnotations}
spanLabelTypes={spanLabelTypes}
selectedSpanId={selectedSpanId}
onSpanAnnotationsChange={handleSpanAnnotationsChange}
onSelectedSpanChange={handleSelectedSpanChange}
predictionVisible={predictionState.visible}
perCandlePredictions={predictionState.perCandlePredictions}
predictionSpans={predictionState.spans}
confidenceThreshold={predictionState.confidenceThreshold}
selectedLabels={predictionState.selectedLabels}
modelInfo={predictionState.modelInfo}
predictionSummary={predictionSummary}
showOnlyDisagreements={showOnlyDisagreements}
onPredictionClick={handlePredictionClick}
onPredictionDismiss={handlePredictionDismiss}
/>
</div>
</div>
</div>
);
}

42
src/components/ChartSelector.tsx
View file

@ -29,36 +29,28 @@ export default function ChartSelector({
if (charts.length === 0) {
return (
<div className="text-sm text-muted-foreground italic">
<p className="text-[10px] text-muted-foreground italic">
No charts — upload a CSV to get started
</div>
</p>
);
}
const formatDate = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleDateString(undefined, {
month: 'short',
day: 'numeric',
year: 'numeric',
});
};
return (
<div className="relative">
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full flex items-center justify-between px-3 py-2 text-sm rounded-md border border-border bg-background hover:bg-accent text-foreground"
className="w-full flex items-center justify-between px-2 py-1.5 text-xs rounded bg-secondary/50 hover:bg-secondary text-foreground transition-colors"
>
<span className="truncate">{activeChart?.name || 'Select chart'}</span>
<ChevronDown className={`h-4 w-4 ml-2 flex-shrink-0 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
<span className="font-mono font-medium truncate">{activeChart?.name || 'Select chart'}</span>
<ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
{isOpen && (
<div className="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md max-h-64 overflow-y-auto">
<div className="absolute z-50 mt-1 w-full rounded-md border border-border bg-popover shadow-md max-h-48 overflow-y-auto">
{charts.map((chart) => (
<div
key={chart.id}
className={`flex items-center justify-between px-3 py-2 text-sm hover:bg-accent cursor-pointer ${
className={`flex items-center justify-between px-2 py-1.5 text-xs hover:bg-accent cursor-pointer ${
chart.id === activeChartId ? 'bg-accent/50' : ''
}`}
>
@ -69,35 +61,33 @@ export default function ChartSelector({
setIsOpen(false);
}}
>
<div className="truncate text-foreground">{chart.name}</div>
<div className="text-xs text-muted-foreground">{formatDate(chart.created_at)}</div>
<div className="truncate font-mono text-foreground">{chart.name}</div>
</div>
<button
onClick={(e) => {
e.stopPropagation();
setConfirmDeleteId(chart.id);
}}
className="ml-2 p-1 text-muted-foreground hover:text-destructive flex-shrink-0"
className="ml-2 p-0.5 text-muted-foreground hover:text-destructive flex-shrink-0"
title="Delete chart"
>
<Trash2 className="h-3.5 w-3.5" />
<Trash2 className="h-3 w-3" />
</button>
</div>
))}
</div>
)}
{/* Confirmation dialog */}
{confirmDeleteId !== null && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="bg-popover border border-border rounded-lg p-6 max-w-sm mx-4 shadow-lg">
<p className="text-sm text-foreground">
Delete chart &ldquo;{charts.find((c) => c.id === confirmDeleteId)?.name}&rdquo; and all its candles and annotations? This cannot be undone.
<div className="bg-popover border border-border rounded-lg p-4 max-w-sm mx-4 shadow-lg">
<p className="text-xs text-foreground">
Delete &ldquo;{charts.find((c) => c.id === confirmDeleteId)?.name}&rdquo; and all its data? This cannot be undone.
</p>
<div className="flex justify-end gap-2 mt-4">
<div className="flex justify-end gap-2 mt-3">
<button
onClick={() => setConfirmDeleteId(null)}
className="px-3 py-1.5 text-sm rounded-md border border-border hover:bg-accent text-foreground"
className="px-3 py-1 text-xs rounded border border-border hover:bg-accent text-foreground"
>
Cancel
</button>
@ -107,7 +97,7 @@ export default function ChartSelector({
setConfirmDeleteId(null);
setIsOpen(false);
}}
className="px-3 py-1.5 text-sm rounded-md bg-destructive text-destructive-foreground hover:bg-destructive/90"
className="px-3 py-1 text-xs rounded bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
Delete
</button>

31
src/components/FileUpload.tsx
View file

@ -1,7 +1,6 @@
'use client';
import { useState, useRef } from 'react';
import { Button } from '@/components/ui/button';
import { Upload } from 'lucide-react';
interface FileUploadProps {
@ -34,7 +33,7 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
if (response.ok) {
setMessage({
type: 'success',
text: `Successfully uploaded ${data.count} candle records`,
text: `Uploaded ${data.count} candles`,
});
onUploadSuccess(data.chart);
} else {
@ -50,7 +49,6 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
});
} finally {
setIsUploading(false);
// Reset file input
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
@ -58,9 +56,7 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
};
return (
<div className="p-4 bg-muted rounded-lg border border-border">
<h3 className="text-sm font-medium mb-3 text-foreground">Upload CSV Data</h3>
<div>
<input
ref={fileInputRef}
type="file"
@ -68,29 +64,20 @@ export default function FileUpload({ onUploadSuccess }: FileUploadProps) {
onChange={handleFileChange}
disabled={isUploading}
className="hidden"
id="csv-upload"
/>
<Button
variant="outline"
className="w-full"
<button
onClick={() => fileInputRef.current?.click()}
disabled={isUploading}
className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 text-xs rounded border border-border bg-secondary/30 hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
>
<Upload className="w-4 h-4 mr-2" />
{isUploading ? 'Uploading...' : 'Choose CSV File'}
</Button>
<Upload className="w-3 h-3" />
{isUploading ? 'Uploading...' : 'Upload CSV'}
</button>
{message && (
<div
className={`mt-3 text-xs p-3 rounded-md ${
message.type === 'success'
? 'bg-emerald-50 text-emerald-700 border border-emerald-200'
: 'bg-red-50 text-red-700 border border-red-200'
}`}
>
<p className={`mt-1 text-[10px] ${message.type === 'success' ? 'text-green-600' : 'text-destructive'}`}>
{message.text}
</div>
</p>
)}
</div>
);

307
src/components/PredictionPanel.tsx
View file

@ -1,5 +1,7 @@
'use client';
import { useState } from 'react';
import { ChevronDown } from 'lucide-react';
import type { PredictionState, ModelInfoResponse, PredictionSummary } from '@/types/predictions';
interface PredictionPanelProps {
@ -27,6 +29,7 @@ export default function PredictionPanel({
showOnlyDisagreements = false,
onToggleShowOnlyDisagreements,
}: PredictionPanelProps) {
const [expanded, setExpanded] = useState(true);
const {
visible,
@ -38,166 +41,172 @@ export default function PredictionPanel({
spans,
} = predictionState;
if (!isModelOnline) {
return (
<div className="p-4 border-t border-border bg-card">
<div className="flex items-center gap-2 mb-3">
<div className="w-2 h-2 rounded-full bg-red-500" />
<h3 className="text-sm font-semibold text-foreground">Model Server Offline</h3>
</div>
<p className="text-xs text-muted-foreground">
Prediction service is unavailable. Annotation tools continue to work normally.
</p>
</div>
);
}
return (
<div className="p-4 border-t border-border bg-card">
{/* Header with master toggle */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${isModelOnline ? 'bg-green-500' : 'bg-red-500'}`} />
<h3 className="text-sm font-semibold text-foreground">Predictions</h3>
<div>
{/* Collapsible header */}
<button
onClick={() => setExpanded(!expanded)}
className="w-full flex items-center justify-between py-1"
>
<div className="flex items-center gap-1.5">
<div
className="w-1.5 h-1.5 rounded-full"
style={{ backgroundColor: isModelOnline ? '#22c55e' : '#ef4444' }}
/>
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
Predictions
</span>
</div>
<button
onClick={onToggleVisibility}
className={`px-3 py-1 text-xs rounded ${
visible
? 'bg-primary text-primary-foreground'
: 'bg-muted text-muted-foreground hover:bg-muted/80'
}`}
>
{visible ? 'Hide' : 'Show'}
</button>
</div>
<ChevronDown className={`w-3 h-3 text-muted-foreground transition-transform ${expanded ? 'rotate-180' : ''}`} />
</button>
{/* Model Info */}
{modelInfo && (
<div className="mb-3 p-2 bg-muted/50 rounded text-xs">
<div className="flex justify-between">
<span className="text-muted-foreground">Model:</span>
<span className="font-mono text-foreground">{modelInfo.model_name}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Version:</span>
<span className="font-mono text-foreground">{modelInfo.model_version || 'N/A'}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Type:</span>
<span className="text-foreground">{modelInfo.model_type}</span>
</div>
</div>
)}
{expanded && (
<div className="mt-1 space-y-2">
{!isModelOnline ? (
<p className="text-[10px] text-muted-foreground">
Prediction service unavailable.
</p>
) : (
<>
{/* Model Info */}
{modelInfo && (
<div className="p-2 bg-secondary/30 rounded text-[10px] space-y-1">
<div className="flex justify-between">
<span className="text-muted-foreground">Model:</span>
<span className="font-mono text-foreground">{modelInfo.model_name}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Version:</span>
<span className="font-mono text-foreground">{modelInfo.model_version || 'N/A'}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Type:</span>
<span className="text-foreground">{modelInfo.model_type}</span>
</div>
</div>
)}
{/* Action Buttons */}
<div className="flex gap-2 mb-3">
<button
onClick={onFetchPredictions}
disabled={isLoading || !isModelOnline}
className="flex-1 px-3 py-2 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? 'Loading...' : 'Run on Visible'}
</button>
<button
onClick={onFetchBatchPredictions}
disabled={isLoading || !isModelOnline}
className="flex-1 px-3 py-2 text-xs bg-secondary text-secondary-foreground rounded hover:bg-secondary/90 disabled:opacity-50 disabled:cursor-not-allowed"
>
Predict All
</button>
</div>
{/* Error Display */}
{error && (
<div className="mb-3 p-2 bg-destructive/10 border border-destructive/20 rounded text-xs text-destructive">
{error}
</div>
)}
{/* Confidence Slider */}
<div className="mb-3">
<div className="flex justify-between items-center mb-1">
<label className="text-xs text-muted-foreground">Confidence Threshold</label>
<span className="text-xs font-mono text-foreground">{(confidenceThreshold * 100).toFixed(0)}%</span>
</div>
<input
type="range"
min="0"
max="100"
value={confidenceThreshold * 100}
onChange={(e) => onConfidenceChange(Number(e.target.value) / 100)}
className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer"
/>
</div>
{/* Label Filter Checkboxes */}
{modelInfo && (
<div className="mb-3">
<label className="text-xs text-muted-foreground mb-2 block">Filter by Label</label>
<div className="space-y-1 max-h-32 overflow-y-auto">
{modelInfo.labels.map((label) => {
const metrics = modelInfo.per_class_metrics.find((m) => m.label === label);
const isSelected = selectedLabels.has(label);
return (
<label
key={label}
className="flex items-center gap-2 p-1 rounded hover:bg-muted/50 cursor-pointer"
{/* Action Buttons */}
<div className="flex gap-1">
<button
onClick={onFetchPredictions}
disabled={isLoading}
className="flex-1 px-2 py-1.5 text-[10px] bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity disabled:opacity-50"
>
{isLoading ? 'Loading...' : 'Run on Visible'}
</button>
<button
onClick={onFetchBatchPredictions}
disabled={isLoading}
className="flex-1 px-2 py-1.5 text-[10px] bg-secondary text-secondary-foreground rounded hover:opacity-90 transition-opacity disabled:opacity-50"
>
Predict All
</button>
</div>
{/* Error */}
{error && (
<p className="text-[10px] text-destructive">{error}</p>
)}
{/* Confidence Slider */}
<div>
<div className="flex justify-between items-center mb-1">
<label className="text-[10px] text-muted-foreground">Confidence</label>
<span className="text-[10px] font-mono text-foreground">{(confidenceThreshold * 100).toFixed(0)}%</span>
</div>
<input
type="range"
min="0"
max="100"
value={confidenceThreshold * 100}
onChange={(e) => onConfidenceChange(Number(e.target.value) / 100)}
className="w-full h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-primary"
/>
</div>
{/* Show on chart toggle */}
<div className="flex items-center justify-between">
<label className="text-[10px] text-muted-foreground">Show on chart</label>
<button
onClick={onToggleVisibility}
className={`px-2 py-0.5 text-[10px] rounded transition-colors ${
visible
? 'bg-primary/20 text-primary'
: 'bg-secondary text-muted-foreground'
}`}
>
{visible ? 'On' : 'Off'}
</button>
</div>
{/* Label Filter */}
{modelInfo && modelInfo.labels.length > 0 && (
<div>
<label className="text-[10px] text-muted-foreground mb-1 block">Labels</label>
<div className="space-y-0.5 max-h-24 overflow-y-auto scrollbar-thin">
{modelInfo.labels.map((label) => {
const metrics = modelInfo.per_class_metrics.find((m) => m.label === label);
return (
<label
key={label}
className="flex items-center gap-1.5 p-0.5 rounded hover:bg-secondary/50 cursor-pointer"
>
<input
type="checkbox"
checked={selectedLabels.has(label)}
onChange={() => onToggleLabelSelection(label)}
className="w-3 h-3"
/>
<span className="text-[10px] text-foreground flex-1">{label}</span>
{metrics && (
<span className="text-[10px] text-muted-foreground font-mono">
F1:{(metrics.f1_score * 100).toFixed(0)}%
</span>
)}
</label>
);
})}
</div>
</div>
)}
{/* Disagreement Filter */}
{predictionSummary && predictionSummary.disagreements.length > 0 && onToggleShowOnlyDisagreements && (
<label className="flex items-center gap-1.5 p-1 bg-secondary/30 rounded cursor-pointer">
<input
type="checkbox"
checked={isSelected}
onChange={() => onToggleLabelSelection(label)}
checked={showOnlyDisagreements}
onChange={onToggleShowOnlyDisagreements}
className="w-3 h-3"
/>
<span className="text-xs text-foreground flex-1">{label}</span>
{metrics && (
<span className="text-xs text-muted-foreground font-mono">
F1: {(metrics.f1_score * 100).toFixed(0)}%
</span>
)}
<span className="text-[10px] text-foreground">Show only disagreements</span>
</label>
);
})}
</div>
</div>
)}
)}
{/* Disagreement Filter */}
{predictionSummary && predictionSummary.disagreements.length > 0 && onToggleShowOnlyDisagreements && (
<div className="mb-3">
<label className="flex items-center gap-2 p-2 bg-muted/50 rounded cursor-pointer hover:bg-muted">
<input
type="checkbox"
checked={showOnlyDisagreements}
onChange={onToggleShowOnlyDisagreements}
className="w-3 h-3"
/>
<span className="text-xs text-foreground">Show only disagreements</span>
</label>
</div>
)}
{/* Prediction Summary */}
{visible && spans.length > 0 && predictionSummary && (
<div className="p-2 bg-muted/30 rounded text-xs space-y-1">
<div className="flex justify-between">
<span className="text-muted-foreground">Predictions:</span>
<span className="text-foreground font-mono">{predictionSummary.total_predictions}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Human annotations:</span>
<span className="text-foreground font-mono">{predictionSummary.total_human_annotations}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Agreements:</span>
<span className="text-green-600 font-mono">{predictionSummary.agreements}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Disagreements:</span>
<span className="text-orange-600 font-mono">{predictionSummary.disagreements.length}</span>
</div>
{/* Summary */}
{visible && spans.length > 0 && predictionSummary ? (
<div className="p-2 bg-secondary/30 rounded text-[10px] space-y-0.5">
<div className="flex justify-between">
<span className="text-muted-foreground">Predictions:</span>
<span className="font-mono text-foreground">{predictionSummary.total_predictions}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Agreements:</span>
<span className="text-green-600 font-mono">{predictionSummary.agreements}</span>
</div>
<div className="flex justify-between">
<span className="text-muted-foreground">Disagreements:</span>
<span className="text-orange-500 font-mono">{predictionSummary.disagreements.length}</span>
</div>
</div>
) : (
<p className="text-[10px] text-muted-foreground text-center py-2">
No predictions loaded.
</p>
)}
</>
)}
</div>
)}
</div>

156
src/components/SpanAnnotationList.tsx
View file

@ -1,8 +1,7 @@
'use client';
import { useState } from 'react';
import { Trash2, ChevronDown, ChevronUp } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Trash2, ChevronDown } from 'lucide-react';
interface SpanAnnotation {
id: number;
@ -46,7 +45,6 @@ export default function SpanAnnotationList({
}: SpanAnnotationListProps) {
const [expanded, setExpanded] = useState(true);
// Format timestamp to readable date/time
const formatTime = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleString('en-US', {
month: 'short',
@ -56,7 +54,6 @@ export default function SpanAnnotationList({
});
};
// Get display name and color for label
const getLabelInfo = (labelName: string) => {
const labelType = spanLabelTypes.find((t) => t.name === labelName);
return {
@ -65,125 +62,72 @@ export default function SpanAnnotationList({
};
};
// Calculate count per label type
const labelCounts = spanAnnotations.reduce((acc, span) => {
acc[span.label] = (acc[span.label] || 0) + 1;
return acc;
}, {} as Record<string, number>);
// Sort by start_time descending (most recent first)
const sortedSpans = [...spanAnnotations].sort((a, b) => b.start_time - a.start_time);
return (
<div className="flex flex-col">
{/* Header with collapse toggle */}
<div>
<button
onClick={() => setExpanded(!expanded)}
className="w-full flex items-center justify-between px-2 py-2 hover:bg-secondary/50 rounded"
className="w-full flex items-center justify-between py-1"
>
<span className="text-sm font-semibold text-foreground">
Span Annotations ({spanAnnotations.length})
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
Annotations ({spanAnnotations.length})
</span>
{expanded ? (
<ChevronUp className="w-4 h-4" />
) : (
<ChevronDown className="w-4 h-4" />
)}
<ChevronDown className={`w-3 h-3 text-muted-foreground transition-transform ${expanded ? 'rotate-180' : ''}`} />
</button>
{expanded && (
<>
{/* Count summary */}
{spanAnnotations.length > 0 && (
<div className="text-xs text-muted-foreground px-2 mb-2">
{Object.entries(labelCounts).map(([labelName, count], idx) => {
const { displayName } = getLabelInfo(labelName);
return (
<span key={labelName}>
{idx > 0 && ' | '}
{displayName}: {count}
</span>
);
})}
</div>
)}
{/* Empty state */}
<div className="space-y-1 mt-1">
{spanAnnotations.length === 0 ? (
<div className="text-xs text-muted-foreground px-2 py-4 text-center">
No span annotations yet. Use the Span tool to select candle ranges.
</div>
<p className="text-[10px] text-muted-foreground text-center py-3">
No annotations yet.
</p>
) : (
/* Span list */
<div className="flex flex-col gap-1 max-h-64 overflow-y-auto">
{sortedSpans.map((span) => {
const { displayName, color } = getLabelInfo(span.label);
const isSelected = span.id === selectedSpanId;
sortedSpans.map((span) => {
const { displayName, color } = getLabelInfo(span.label);
const isSelected = span.id === selectedSpanId;
return (
<div
key={span.id}
className={`
flex items-start gap-2 p-2 rounded cursor-pointer
transition-colors
${
isSelected
? 'bg-primary/10 border border-primary'
: 'hover:bg-secondary/50 border border-transparent'
}
`}
onClick={() => onSelectSpan(span.id)}
>
<div className="flex-1 min-w-0">
{/* Time range */}
<div className="text-xs text-muted-foreground">
{formatTime(span.start_time)} → {formatTime(span.end_time)}
</div>
{/* Label badge */}
<div className="mt-1">
<span
className="px-2 py-0.5 rounded text-xs font-medium text-white"
style={{ backgroundColor: color }}
>
{displayName}
</span>
</div>
{/* Additional info */}
{(span.confidence || span.outcome) && (
<div className="mt-1 text-xs text-muted-foreground flex gap-2">
{span.confidence && <span>Confidence: {span.confidence}</span>}
{span.outcome && <span>Outcome: {span.outcome}</span>}
</div>
)}
{/* Notes preview */}
{span.notes && (
<div className="mt-1 text-xs text-muted-foreground truncate">
{span.notes}
</div>
)}
return (
<div
key={span.id}
onClick={() => onSelectSpan(span.id)}
className={`flex items-start gap-1.5 p-1.5 rounded cursor-pointer transition-colors ${
isSelected
? 'bg-primary/10 border border-primary'
: 'hover:bg-secondary/50 border border-transparent'
}`}
>
<div className="flex-1 min-w-0">
<div className="text-[10px] text-muted-foreground font-mono">
{formatTime(span.start_time)} → {formatTime(span.end_time)}
</div>
{/* Delete button */}
<Button
variant="ghost"
size="sm"
className="h-6 w-6 p-0 hover:bg-destructive/20 hover:text-destructive"
onClick={(e) => {
e.stopPropagation();
onDeleteSpan(span.id);
}}
<span
className="px-1.5 py-0.5 rounded text-[10px] font-medium text-white mt-0.5 inline-block"
style={{ backgroundColor: color }}
>
<Trash2 className="w-3 h-3" />
</Button>
{displayName}
</span>
{(span.confidence || span.outcome) && (
<div className="mt-0.5 text-[10px] text-muted-foreground flex gap-2">
{span.confidence && <span>C:{span.confidence}</span>}
{span.outcome && <span>{span.outcome}</span>}
</div>
)}
</div>
);
})}
</div>
<button
className="p-0.5 text-muted-foreground hover:text-destructive flex-shrink-0"
onClick={(e) => {
e.stopPropagation();
onDeleteSpan(span.id);
}}
>
<Trash2 className="w-3 h-3" />
</button>
</div>
);
})
)}
</>
</div>
)}
</div>
);

47
src/components/ThemeToggle.tsx
View file

@ -2,19 +2,12 @@
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import { Monitor, Sun, Moon } from "lucide-react";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { Sun, Moon } from "lucide-react";
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
// Avoid hydration mismatch by only rendering after mount
useEffect(() => {
setMounted(true);
}, []);
@ -22,41 +15,27 @@ export function ThemeToggle() {
if (!mounted) {
return (
<button
className="p-3 rounded-lg border border-border bg-card hover:bg-muted transition-colors"
className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
disabled
>
<Monitor className="h-5 w-5 text-muted-foreground" />
<Sun className="w-3.5 h-3.5" />
</button>
);
}
const cycleTheme = () => {
if (theme === "system") {
setTheme("light");
} else if (theme === "light") {
setTheme("dark");
} else {
setTheme("system");
}
const toggleTheme = () => {
setTheme(theme === "dark" ? "light" : "dark");
};
const Icon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
const themeName = theme === "light" ? "Light" : theme === "dark" ? "Dark" : "System";
const Icon = theme === "dark" ? Sun : Moon;
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger
onClick={cycleTheme}
className="p-3 rounded-lg border border-border bg-card hover:bg-muted transition-colors"
aria-label={`Current theme: ${themeName}. Click to cycle.`}
>
<Icon className="h-5 w-5 text-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>Theme: {themeName}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<button
onClick={toggleTheme}
className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
>
<Icon className="w-3.5 h-3.5" />
</button>
);
}

388
src/components/Toolbox.tsx
View file

@ -1,11 +1,8 @@
'use client';
import { useState, useEffect } from 'react';
import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, Download, ChevronDown, ChevronUp, RectangleHorizontal } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, ChevronDown, ChevronUp, RectangleHorizontal, Layers, Minus } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { ThemeToggle } from '@/components/ThemeToggle';
import SpanAnnotationList from '@/components/SpanAnnotationList';
export type Tool = string | 'delete' | null;
@ -87,12 +84,11 @@ export default function Toolbox({
onSelectSpan,
onDeleteSpan,
}: ToolboxProps) {
const [labelsExpanded, setLabelsExpanded] = useState(true);
const [labelsExpanded, setLabelsExpanded] = useState(false);
const [searchText, setSearchText] = useState('');
const [filterType, setFilterType] = useState<string>('all');
const [annotationTypes, setAnnotationTypes] = useState<AnnotationType[]>([]);
// Fetch annotation types on mount
useEffect(() => {
const fetchTypes = async () => {
try {
@ -109,7 +105,6 @@ export default function Toolbox({
}, []);
const handleToolClick = (tool: Tool) => {
// Toggle: if clicking the active tool, deactivate it
if (activeTool === tool) {
onToolChange(null);
} else {
@ -117,17 +112,14 @@ export default function Toolbox({
}
};
// Get marker types (exclude line types)
const markerTypes = annotationTypes.filter((t) => t.category === 'marker');
const markerTypeNames = markerTypes.map((t) => t.name);
// Filter and sort annotations
const labelAnnotations = annotations
.filter((a) => markerTypeNames.includes(a.label_type))
.filter((a) => (filterType === 'all' ? true : a.label_type === filterType))
.sort((a, b) => b.timestamp - a.timestamp);
// Apply search filter
const filteredAnnotations = labelAnnotations.filter((a) => {
const formattedTime = new Date(a.timestamp * 1000).toLocaleString('en-US', {
month: 'short',
@ -138,7 +130,6 @@ export default function Toolbox({
return formattedTime.toLowerCase().includes(searchText.toLowerCase());
});
// Count annotations per type
const typeCounts = markerTypes.reduce((acc, type) => {
acc[type.name] = labelAnnotations.filter((a) => a.label_type === type.name).length;
return acc;
@ -158,134 +149,130 @@ export default function Toolbox({
}
};
const getIconComponent = (iconName: string | null) => {
switch (iconName) {
case 'arrowUp':
return <ArrowUpCircle className="w-5 h-5" />;
case 'arrowDown':
return <ArrowDownCircle className="w-5 h-5" />;
case 'line':
return <TrendingUp className="w-5 h-5" />;
default:
return <ArrowUpCircle className="w-5 h-5" />;
}
};
const colors = [
{ color: '#ef4444', name: 'red' },
{ color: '#22c55e', name: 'green' },
{ color: '#3b82f6', name: 'blue' },
{ color: '#f59e0b', name: 'orange' },
{ color: '#8b5cf6', name: 'purple' },
];
return (
<div className="flex-1 flex flex-col gap-4 overflow-y-auto">
<h2 className="text-lg font-semibold text-foreground">Annotation Tools</h2>
<div className="space-y-1">
<p className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1">Tools</p>
<div className="flex flex-col gap-2">
{/* Marker type buttons */}
{markerTypes.map((type) => (
<Button
key={type.id}
variant={activeTool === type.name ? 'default' : 'outline'}
className="justify-start gap-2"
onClick={() => handleToolClick(type.name)}
>
{getIconComponent(type.icon)}
{type.display_name}
</Button>
))}
{/* Line type buttons */}
{/* Tool buttons grid */}
<div className="flex gap-1">
<button
onClick={() => handleToolClick('rectangle')}
className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
activeTool === 'rectangle'
? 'bg-primary text-primary-foreground'
: 'bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground'
}`}
>
<RectangleHorizontal className="w-3.5 h-3.5" /> Rect
</button>
<button
onClick={() => handleToolClick('span')}
className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
activeTool === 'span'
? 'bg-primary text-primary-foreground'
: 'bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground'
}`}
>
<Layers className="w-3.5 h-3.5" /> Span
</button>
{annotationTypes
.filter((t) => t.category === 'line')
.map((type) => (
<Button
<button
key={type.id}
variant={activeTool === type.name ? 'default' : 'outline'}
className="justify-start gap-2"
onClick={() => handleToolClick(type.name)}
className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
activeTool === type.name
? 'bg-primary text-primary-foreground'
: 'bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground'
}`}
>
{getIconComponent(type.icon)}
{type.display_name}
</Button>
<Minus className="w-3.5 h-3.5" /> Line
</button>
))}
{/* Rectangle tool button */}
<Button
variant={activeTool === 'rectangle' ? 'default' : 'outline'}
className="justify-start gap-2"
onClick={() => handleToolClick('rectangle')}
>
<RectangleHorizontal className="w-5 h-5" />
Rectangle
</Button>
{/* Span tool button */}
<Button
variant={activeTool === 'span' ? 'default' : 'outline'}
className="justify-start gap-2"
onClick={() => handleToolClick('span')}
>
<RectangleHorizontal className="w-5 h-5" />
Span
</Button>
{/* Color picker */}
<div className="flex gap-1 px-1">
{[
{ color: '#ef4444', name: 'Red' },
{ color: '#10b981', name: 'Green' },
{ color: '#3b82f6', name: 'Blue' },
{ color: '#f59e0b', name: 'Orange' },
{ color: '#8b5cf6', name: 'Purple' },
].map((preset) => (
<Button
key={preset.color}
variant={selectedColor === preset.color ? 'default' : 'outline'}
size="sm"
className="w-8 h-8 p-0"
style={{
backgroundColor: selectedColor === preset.color ? preset.color : 'transparent',
borderColor: preset.color,
borderWidth: '2px',
}}
onClick={() => onColorChange(preset.color)}
title={preset.name}
>
{selectedColor === preset.color ? '' : (
<div
className="w-4 h-4 rounded-sm"
style={{ backgroundColor: preset.color }}
/>
)}
</Button>
))}
</div>
<Button
variant={activeTool === 'delete' ? 'destructive' : 'outline'}
className="justify-start gap-2"
<button
onClick={() => handleToolClick('delete')}
className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
activeTool === 'delete'
? 'bg-destructive text-destructive-foreground'
: 'bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground'
}`}
>
<Trash2 className="w-5 h-5" />
Delete
</Button>
<Trash2 className="w-3.5 h-3.5" /> Del
</button>
</div>
{/* Labels Section */}
<div className="border-t border-border pt-4">
<button
onClick={() => setLabelsExpanded(!labelsExpanded)}
className="w-full flex items-center justify-between px-2 py-2 hover:bg-secondary/50 rounded"
>
<span className="text-sm font-semibold text-foreground">
Label Annotations ({labelAnnotations.length})
</span>
{labelsExpanded ? (
<ChevronUp className="w-4 h-4" />
) : (
<ChevronDown className="w-4 h-4" />
)}
</button>
{/* Marker type buttons (if any) */}
{markerTypes.length > 0 && (
<div className="flex gap-1">
{markerTypes.map((type) => (
<button
key={type.id}
onClick={() => handleToolClick(type.name)}
className={`flex-1 flex items-center justify-center gap-1 px-1.5 py-1.5 text-xs rounded transition-colors ${
activeTool === type.name
? 'bg-primary text-primary-foreground'
: 'bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground'
}`}
>
{type.icon === 'arrowUp' ? <ArrowUpCircle className="w-3.5 h-3.5" /> :
type.icon === 'arrowDown' ? <ArrowDownCircle className="w-3.5 h-3.5" /> :
<ArrowUpCircle className="w-3.5 h-3.5" />}
{type.display_name}
</button>
))}
</div>
)}
{labelsExpanded && (
<div className="mt-3 space-y-2">
{/* Count display */}
<div className="text-xs text-muted-foreground px-2">
{/* Color swatches */}
<div className="flex gap-1 pt-1">
{colors.map((preset) => {
const isSelected = selectedColor === preset.color;
return (
<button
key={preset.color}
onClick={() => onColorChange(preset.color)}
className={`flex-1 h-6 rounded-sm border-2 transition-all ${
isSelected
? 'scale-105 ring-1 ring-offset-1 ring-offset-sidebar'
: 'opacity-60 hover:opacity-100'
}`}
style={{
backgroundColor: preset.color,
borderColor: isSelected ? preset.color : 'transparent',
// @ts-ignore
'--tw-ring-color': preset.color,
}}
title={preset.name}
/>
);
})}
</div>
{/* Labels Section - collapsible */}
<button
onClick={() => setLabelsExpanded(!labelsExpanded)}
className="w-full flex items-center justify-between py-1 mt-1"
>
<span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
Annotations ({labelAnnotations.length})
</span>
<ChevronDown className={`w-3 h-3 text-muted-foreground transition-transform ${labelsExpanded ? 'rotate-180' : ''}`} />
</button>
{labelsExpanded && (
<div className="space-y-1 mt-1">
{/* Count display */}
{markerTypes.length > 0 && (
<div className="text-[10px] text-muted-foreground">
{markerTypes.map((type, idx) => (
<span key={type.id}>
{idx > 0 && ' | '}
@ -293,118 +280,83 @@ export default function Toolbox({
</span>
))}
</div>
)}
{/* Search input */}
<Input
placeholder="Search by timestamp..."
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
className="h-8 text-sm"
/>
<Input
placeholder="Search..."
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
className="h-7 text-xs"
/>
{/* Filter dropdown */}
{filterType !== 'all' || markerTypes.length > 1 ? (
<select
value={filterType}
onChange={(e) => setFilterType(e.target.value)}
className="w-full h-8 px-2 text-sm rounded border border-border bg-card"
className="w-full h-7 px-2 text-xs rounded border border-border bg-card"
>
<option value="all">All Types</option>
{markerTypes.map((type) => (
<option key={type.id} value={type.name}>
{type.display_name} Only
{type.display_name}
</option>
))}
</select>
) : null}
{/* Labels list */}
<div className="max-h-96 overflow-y-auto space-y-2 p-2 border border-border rounded bg-card/50">
{filteredAnnotations.length === 0 ? (
<div className="text-xs text-muted-foreground text-center py-4">
{labelAnnotations.length === 0
? 'No labels yet. Click Break Up or Break Down tools to add labels.'
: 'No matching labels found.'}
</div>
) : (
filteredAnnotations.map((annotation) => {
const formattedTime = new Date(annotation.timestamp * 1000).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
const isSelected = annotation.id === selectedLabelId;
const annotationType = annotationTypes.find((t) => t.name === annotation.label_type);
<div className="max-h-40 overflow-y-auto scrollbar-thin space-y-1">
{filteredAnnotations.length === 0 ? (
<p className="text-[10px] text-muted-foreground text-center py-3">
{labelAnnotations.length === 0 ? 'No annotations yet.' : 'No matching labels.'}
</p>
) : (
filteredAnnotations.map((annotation) => {
const formattedTime = new Date(annotation.timestamp * 1000).toLocaleString('en-US', {
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
});
const isSelected = annotation.id === selectedLabelId;
const annotationType = annotationTypes.find((t) => t.name === annotation.label_type);
return (
<div
key={annotation.id}
onClick={() => onLabelSelect?.(annotation.id)}
className={`p-2 rounded border text-xs cursor-pointer transition-colors ${
isSelected
? 'border-primary bg-primary/10'
: 'border-border hover:bg-secondary'
}`}
>
<div className="flex items-center justify-between">
<div className="flex-1">
<div className="font-medium text-foreground">{formattedTime}</div>
<div className="mt-1 flex items-center gap-2">
<span
className="px-2 py-0.5 rounded text-xs font-medium"
style={{
backgroundColor: annotationType ? `${annotationType.color}20` : '#e5e7eb',
color: annotationType?.color || '#374151',
}}
>
{annotationType?.display_name || annotation.label_type}
</span>
</div>
</div>
<Button
size="sm"
variant="ghost"
className="h-6 w-6 p-0"
onClick={(e) => handleLabelDelete(annotation.id, e)}
return (
<div
key={annotation.id}
onClick={() => onLabelSelect?.(annotation.id)}
className={`p-1.5 rounded text-[10px] cursor-pointer transition-colors ${
isSelected
? 'bg-primary/10 border border-primary'
: 'hover:bg-secondary/50 border border-transparent'
}`}
>
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="font-mono text-foreground">{formattedTime}</div>
<span
className="px-1.5 py-0.5 rounded text-[10px] font-medium mt-0.5 inline-block"
style={{
backgroundColor: annotationType ? `${annotationType.color}20` : '#e5e7eb',
color: annotationType?.color || '#374151',
}}
>
<Trash2 className="w-3 h-3" />
</Button>
{annotationType?.display_name || annotation.label_type}
</span>
</div>
<button
className="p-0.5 text-muted-foreground hover:text-destructive"
onClick={(e) => handleLabelDelete(annotation.id, e)}
>
<Trash2 className="w-3 h-3" />
</button>
</div>
);
})
)}
</div>
</div>
);
})
)}
</div>
)}
</div>
{/* Span Annotations List */}
<div className="pt-4">
<SpanAnnotationList
spanAnnotations={spanAnnotations}
spanLabelTypes={spanLabelTypes}
selectedSpanId={selectedSpanId}
onSelectSpan={onSelectSpan || (() => {})}
onDeleteSpan={onDeleteSpan || (() => {})}
/>
</div>
{/* Export button */}
<div className="mt-auto pt-4 border-t border-border">
<Button
variant="secondary"
className="w-full justify-start gap-2"
onClick={onExport}
>
<Download className="w-5 h-5" />
Export CSV
</Button>
</div>
{/* Theme toggle */}
<div className="pt-2">
<ThemeToggle />
</div>
</div>
)}
</div>
);
}

73
tailwind.config.js Normal file
View file

@ -0,0 +1,73 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
sidebar: {
DEFAULT: "hsl(var(--sidebar-background))",
foreground: "hsl(var(--sidebar-foreground))",
primary: "hsl(var(--sidebar-primary))",
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
accent: "hsl(var(--sidebar-accent))",
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
border: "hsl(var(--sidebar-border))",
ring: "hsl(var(--sidebar-ring))",
},
"candle-bull": "hsl(var(--candle-bull))",
"candle-bear": "hsl(var(--candle-bear))",
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"fade-in": {
from: { opacity: "0" },
to: { opacity: "1" },
},
},
animation: {
"fade-in": "fade-in 0.2s ease-in-out",
},
},
},
plugins: [],
};