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

feat: add annotation types management system

Browse source 
- Created annotation_types table with name, display_name, color, category, icon
- Implemented CRUD API endpoints for annotation types management
- Built annotation types management UI page at /annotation-types
- Updated Toolbox component to dynamically load and display annotation types
- Updated CandleChart component to use dynamic annotation types for markers
- Added seed functionality for default types (break_up, break_down, line)
- Cleaned up duplicate migration files
This commit is contained in:
Marko Djordjevic 2026-02-12 18:16:09 +01:00
parent 50229e2ccf
commit 974d9f5598
13 changed files with 942 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/components/CandleChart.tsx
View file

@ -25,6 +25,16 @@ interface Annotation {
created_at: number;
}
type AnnotationType = {
id: number;
name: string;
display_name: string;
color: string;
category: string;
icon: string | null;
is_active: number;
};
interface CandleChartProps {
activeTool: string | null;
onAnnotationChange?: () => void;
@ -44,6 +54,7 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
const seriesRef = useRef<ISeriesApi<'Candlestick'> | null>(null);
const [candles, setCandles] = useState<Candle[]>([]);
const [annotations, setAnnotations] = useState<Annotation[]>([]);
const [annotationTypes, setAnnotationTypes] = useState<AnnotationType[]>([]);
const [isEmpty, setIsEmpty] = useState(true);
// Fetch candles from API
@ -73,11 +84,25 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
}
};
// Fetch annotation types from API
const fetchAnnotationTypes = async () => {
try {
const response = await fetch('/api/annotation-types');
const data = await response.json();
setAnnotationTypes(data.filter((t: AnnotationType) => t.is_active === 1));
return data;
} catch (error) {
console.error('Failed to fetch annotation types:', error);
return [];
}
};
// Expose refresh method to parent
useImperativeHandle(ref, () => ({
refreshData: async () => {
await fetchCandles();
await fetchAnnotations();
await fetchAnnotationTypes();
},
}));
@ -154,30 +179,43 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
// Update markers from annotations
useEffect(() => {
if (!seriesRef.current) return;
if (!seriesRef.current || annotationTypes.length === 0) return;
const markerAnnotations = annotations.filter(
(a) => a.label_type === 'break_up' || a.label_type === 'break_down'
// Get marker type names
const markerTypeNames = annotationTypes
.filter((t) => t.category === 'marker')
.map((t) => t.name);
const markerAnnotations = annotations.filter((a) =>
markerTypeNames.includes(a.label_type)
);
const markers = markerAnnotations
.map((annotation) => {
const annotationType = annotationTypes.find((t) => t.name === annotation.label_type);
if (!annotationType) return null;
const isSelected = annotation.id === selectedLabelId;
// Determine marker shape and position based on icon
const isUpArrow = annotationType.icon === 'arrowUp';
return {
time: annotation.timestamp as Time,
position: annotation.label_type === 'break_up' ? ('belowBar' as const) : ('aboveBar' as const),
position: isUpArrow ? ('belowBar' as const) : ('aboveBar' as const),
color: isSelected
? (annotation.label_type === 'break_up' ? '#059669' : '#dc2626')
: (annotation.label_type === 'break_up' ? '#10b981' : '#ef4444'),
shape: annotation.label_type === 'break_up' ? ('arrowUp' as const) : ('arrowDown' as const),
text: annotation.label_type === 'break_up' ? 'Break Up' : 'Break Down',
? annotationType.color + 'CC' // Add slight transparency when selected
: annotationType.color,
shape: isUpArrow ? ('arrowUp' as const) : ('arrowDown' as const),
text: annotationType.display_name,
size: isSelected ? 2 : 1,
};
})
.sort((a, b) => (a.time as number) - (b.time as number));
.filter((m) => m !== null)
.sort((a, b) => (a!.time as number) - (b!.time as number));
seriesRef.current.setMarkers(markers);
}, [annotations, selectedLabelId]);
seriesRef.current.setMarkers(markers as any);
}, [annotations, selectedLabelId, annotationTypes]);
// Handle chart clicks for annotation
useEffect(() => {
@ -194,8 +232,12 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
if (time === null || price === null) return;
// For break_up and break_down, snap to nearest candle
if (activeTool === 'break_up' || activeTool === 'break_down') {
// Check if activeTool is a marker type
const markerType = annotationTypes.find(
(t) => t.category === 'marker' && t.name === activeTool
);
if (markerType) {
const timestamp = typeof time === 'string' ? Date.parse(time) / 1000 : (time as number);
// Find nearest candle
@ -228,12 +270,15 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
// For delete tool, find and delete marker at clicked position
if (activeTool === 'delete') {
const timestamp = typeof time === 'string' ? Date.parse(time) / 1000 : (time as number);
const markerTypeNames = annotationTypes
.filter((t) => t.category === 'marker')
.map((t) => t.name);
// Find annotation at this timestamp (within tolerance)
const tolerance = 60; // 60 seconds tolerance
const annotation = annotations.find(
(a) =>
(a.label_type === 'break_up' || a.label_type === 'break_down') &&
markerTypeNames.includes(a.label_type) &&
Math.abs(a.timestamp - timestamp) < tolerance
);
@ -254,14 +299,21 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
}
// Select/deselect label markers by clicking them
if (!activeTool || activeTool === 'break_up' || activeTool === 'break_down') {
const isMarkerTool = annotationTypes.find(
(t) => t.category === 'marker' && t.name === activeTool
);
if (!activeTool || isMarkerTool) {
const timestamp = typeof time === 'string' ? Date.parse(time) / 1000 : (time as number);
const markerTypeNames = annotationTypes
.filter((t) => t.category === 'marker')
.map((t) => t.name);
// Find annotation at this timestamp (within tolerance)
const tolerance = 60; // 60 seconds tolerance
const annotation = annotations.find(
(a) =>
(a.label_type === 'break_up' || a.label_type === 'break_down') &&
markerTypeNames.includes(a.label_type) &&
Math.abs(a.timestamp - timestamp) < tolerance
);
@ -276,12 +328,13 @@ const CandleChart = forwardRef<CandleChartHandle, CandleChartProps>(
return () => {
chartRef.current?.unsubscribeClick(handleClick);
};
}, [activeTool, candles, annotations, onAnnotationChange]);
}, [activeTool, candles, annotations, annotationTypes, onAnnotationChange]);
// Fetch data on mount
useEffect(() => {
fetchCandles();
fetchAnnotations();
fetchAnnotationTypes();
}, []);
if (isEmpty) {

139
src/components/Toolbox.tsx
View file

@ -1,11 +1,21 @@
'use client';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { ArrowUpCircle, ArrowDownCircle, TrendingUp, Trash2, Download, ChevronDown, ChevronUp } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
export type Tool = 'break_up' | 'break_down' | 'line' | 'delete' | null;
export type Tool = string | 'delete' | null;
type AnnotationType = {
id: number;
name: string;
display_name: string;
color: string;
category: string;
icon: string | null;
is_active: number;
};
interface Annotation {
id: number;
@ -40,7 +50,24 @@ export default function Toolbox({
}: ToolboxProps) {
const [labelsExpanded, setLabelsExpanded] = useState(true);
const [searchText, setSearchText] = useState('');
const [filterType, setFilterType] = useState<'all' | 'break_up' | 'break_down'>('all');
const [filterType, setFilterType] = useState<string>('all');
const [annotationTypes, setAnnotationTypes] = useState<AnnotationType[]>([]);
// Fetch annotation types on mount
useEffect(() => {
const fetchTypes = async () => {
try {
const res = await fetch('/api/annotation-types');
if (res.ok) {
const data = await res.json();
setAnnotationTypes(data.filter((t: AnnotationType) => t.is_active === 1));
}
} catch (error) {
console.error('Failed to fetch annotation types:', error);
}
};
fetchTypes();
}, []);
const handleToolClick = (tool: Tool) => {
// Toggle: if clicking the active tool, deactivate it
@ -51,9 +78,13 @@ 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) => a.label_type === 'break_up' || a.label_type === 'break_down')
.filter((a) => markerTypeNames.includes(a.label_type))
.filter((a) => (filterType === 'all' ? true : a.label_type === filterType))
.sort((a, b) => b.timestamp - a.timestamp);
@ -68,8 +99,11 @@ export default function Toolbox({
return formattedTime.toLowerCase().includes(searchText.toLowerCase());
});
const breakUpCount = labelAnnotations.filter((a) => a.label_type === 'break_up').length;
const breakDownCount = labelAnnotations.filter((a) => a.label_type === 'break_down').length;
// Count annotations per type
const typeCounts = markerTypes.reduce((acc, type) => {
acc[type.name] = labelAnnotations.filter((a) => a.label_type === type.name).length;
return acc;
}, {} as Record<string, number>);
const handleLabelDelete = async (id: number, e: React.MouseEvent) => {
e.stopPropagation();
@ -85,37 +119,51 @@ 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" />;
}
};
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="flex flex-col gap-2">
<Button
variant={activeTool === 'break_up' ? 'default' : 'outline'}
className="justify-start gap-2"
onClick={() => handleToolClick('break_up')}
>
<ArrowUpCircle className="w-5 h-5" />
Label: Break Up
</Button>
{/* 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>
))}
<Button
variant={activeTool === 'break_down' ? 'default' : 'outline'}
className="justify-start gap-2"
onClick={() => handleToolClick('break_down')}
>
<ArrowDownCircle className="w-5 h-5" />
Label: Break Down
</Button>
<Button
variant={activeTool === 'line' ? 'default' : 'outline'}
className="justify-start gap-2"
onClick={() => handleToolClick('line')}
>
<TrendingUp className="w-5 h-5" />
Draw Line
</Button>
{/* Line type buttons */}
{annotationTypes
.filter((t) => t.category === 'line')
.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>
))}
{/* Color picker */}
<div className="flex gap-1 px-1">
@ -179,7 +227,12 @@ export default function Toolbox({
<div className="mt-3 space-y-2">
{/* Count display */}
<div className="text-xs text-muted-foreground px-2">
Break Up: {breakUpCount} | Break Down: {breakDownCount}
{markerTypes.map((type, idx) => (
<span key={type.id}>
{idx > 0 && ' | '}
{type.display_name}: {typeCounts[type.name] || 0}
</span>
))}
</div>
{/* Search input */}
@ -193,12 +246,15 @@ export default function Toolbox({
{/* Filter dropdown */}
<select
value={filterType}
onChange={(e) => setFilterType(e.target.value as 'all' | 'break_up' | 'break_down')}
onChange={(e) => setFilterType(e.target.value)}
className="w-full h-8 px-2 text-sm rounded border border-border bg-card"
>
<option value="all">All Types</option>
<option value="break_up">Break Up Only</option>
<option value="break_down">Break Down Only</option>
{markerTypes.map((type) => (
<option key={type.id} value={type.name}>
{type.display_name} Only
</option>
))}
</select>
{/* Labels list */}
@ -218,6 +274,7 @@ export default function Toolbox({
minute: '2-digit',
});
const isSelected = annotation.id === selectedLabelId;
const annotationType = annotationTypes.find((t) => t.name === annotation.label_type);
return (
<div
@ -234,13 +291,13 @@ export default function Toolbox({
<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 ${
annotation.label_type === 'break_up'
? 'bg-emerald-100 text-emerald-700'
: 'bg-red-100 text-red-700'
}`}
className="px-2 py-0.5 rounded text-xs font-medium"
style={{
backgroundColor: annotationType ? `${annotationType.color}20` : '#e5e7eb',
color: annotationType?.color || '#374151',
}}
>
{annotation.label_type === 'break_up' ? 'Break Up' : 'Break Down'}
{annotationType?.display_name || annotation.label_type}
</span>
</div>
</div>