65f00e6ce7
- 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
29 lines
2.8 KiB
Markdown
29 lines
2.8 KiB
Markdown
## 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
|