candle-annotator/openspec/changes/line-rectangle-annotations/proposal.md at b8e649e333bf16c2556695d363cb0e1fa1c65715

Marko Djordjevic 65f00e6ce7 feat: complete prediction UI feedback tasks (11.2, 11.4, 11.5)

- Implement disagreement visual highlighting with distinct colors
  - Yellow highlight for 'missed_by_human' predictions
  - Orange for 'label_mismatch' disagreements
  - Warning icon on disagreement markers
- Add click-to-convert prediction feedback
  - Click disagreement predictions to create span annotations
  - Auto-fill with predicted label and times
  - Set source as 'model_confirmed' or 'model_corrected'
- Add dismiss action for false positive predictions
  - Alt+Click or Ctrl+Click to dismiss predictions
  - Saves negative annotation with label 'O'
  - Records original prediction in model_prediction field
- Filter predictions when 'Show only disagreements' is enabled

2026-02-16 11:40:55 +01:00

2.8 KiB

Raw Blame History

Why

The current line drawing implementation uses an SVG overlay (SvgOverlay.tsx) positioned on top of the lightweight-charts canvas. This creates a disconnect — lines don't participate in chart autoscaling, coordinate conversion is duplicated outside the chart library, and the rendering layer is split between SVG and canvas. Lightweight-charts natively supports drawing primitives via the ISeriesPrimitive API, and the project already has a TrendLine plugin in src/plugins/trend-line.ts (unused) and uses SpanRectanglePrimitive for span annotations. Migrating line drawing to the native plugin system and adding rectangle annotations will unify the rendering approach, improve performance, and enable consistent interaction patterns.

What Changes

BREAKING: Remove SVG overlay line drawing (SvgOverlay.tsx) and replace with lightweight-charts TrendLine plugin-based rendering
Implement interactive two-click line drawing using chart's native subscribeClick() and subscribeCrosshairMove() events instead of SVG pointer events
Add a new rectangle annotation tool based on the lightweight-charts RectangleDrawingTool plugin pattern (two-click to define opposite corners)
Add "rectangle" tool mode to the Toolbox alongside existing line/span/label tools
Store rectangle annotations in the database with label_type: "rectangle" and geometry containing {startTime, startPrice, endTime, endPrice}
Update line editing (drag endpoints) and deletion to work through the plugin system instead of SVG hit detection
Add preview rendering during drawing for both lines and rectangles (using crosshair move events)

Capabilities

New Capabilities

rectangle-annotation: Two-click rectangle drawing tool using lightweight-charts ISeriesPrimitive, with preview during drawing, persistence, editing, and deletion

Modified Capabilities

annotation-tools: Line drawing changes from SVG overlay to lightweight-charts TrendLine plugin; line tool mode interaction moves from SVG events to chart subscribeClick/subscribeCrosshairMove; line editing and deletion use plugin-based hit detection instead of SVG proximity calculation

Impact

Frontend components: SvgOverlay.tsx removed or gutted; CandleChart.tsx updated to manage TrendLine primitives; Toolbox.tsx gains rectangle tool button
Plugins: src/plugins/trend-line.ts enhanced with interactive drawing support (click handlers, preview); new src/plugins/rectangle-drawing.ts added
API: Existing annotation endpoints used as-is; rectangle annotations use the same annotations table with label_type: "rectangle" and geometry JSON
Database: No schema changes — rectangles use the existing geometry column pattern (same as lines)
Dependencies: No new dependencies — uses lightweight-charts APIs already in use

2.8 KiB Raw Blame History

Why