feat: redesign UI to match lovable compact sidebar layout
- 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
parent
2bde38d0bf
commit
4605283d2b
13 changed files with 976 additions and 740 deletions
|
|
@ -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 “{charts.find((c) => c.id === confirmDeleteId)?.name}” 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 “{charts.find((c) => c.id === confirmDeleteId)?.name}” 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue