Trading Interface Enhancement: Backtest & Prediction Integration with Main Chart

[Josephrp]

Type: Feature
Priority: P1 (High)
Labels: feature, frontend, trading, ui/ux
Epic: #XXX (Epic: Complete Remaining Features)
Estimated Effort: 2-3 weeks

---

Description

Enhance the trading interface to integrate backtest results and stock predictions directly into the main candlestick chart (CandleChart) displayed in the Market Data tab. This will provide traders with a unified view of historical prices, predictions, and backtest performance on a single chart.

Current State:

• ✅ CandleChart component exists and displays OHLCV data
• ✅ BacktestTab component exists with separate equity curve display
• ✅ StockPredictionTab component exists with separate forecast display
• ✅ MarketData component uses CandleChart for price visualization
• ❌ No overlay support for predictions/backtests on main chart
• ❌ No cross-tab data sharing between tabs
• ❌ No unified view of prices, predictions, and backtest results

Target State:

• Prediction forecasts overlaid on main candlestick chart
• Backtest equity curves overlaid on main candlestick chart
• Toggle controls for overlay visibility
• Cross-tab data sharing via sessionStorage and FDC3
• Quick action buttons to run predictions/backtests from Market tab

Related Plan

dev/TRADING_INTERFACE_ENHANCEMENT_PLAN.md - Complete implementation plan

Sub-Tasks

Phase 1: Enhanced CandleChart Component (Week 1)

• Add overlay props to CandleChart component

  • predictionForecast?: number[]
  • predictionDates?: string[]
  • backtestEquityCurve?: number[]
  • backtestDates?: string[]
  • showPrediction?: boolean
  • showBacktest?: boolean

• Extend chart data structure to include overlay data

  • Merge historical OHLCV data with prediction forecast dates
  • Merge historical OHLCV data with backtest equity curve dates
  • Normalize overlay values to price scale

• Add overlay lines to ComposedChart

  • Prediction forecast line (dashed, different color)
  • Backtest equity curve line (normalized to price scale)
  • Legend entries for overlays
  • Tooltip support for overlay values

• Add state management for overlays in MarketData component

  • State for prediction data (forecast, dates, symbol, timeframe)
  • State for backtest data (equityCurve, dates, symbol)
  • Load overlay data from sessionStorage
  • Pass overlay data to CandleChart

Phase 2: Cross-Tab Data Sharing (Week 1-2)

• Enhanced SessionStorage Management

  • Update StockPredictionTab to store prediction data with dates
  • Update BacktestTab to store backtest data with dates
  • Create utility functions for date generation (generateForecastDates, generateBacktestDates)
  • Store data in sessionStorage with proper structure

• FDC3 Context Broadcasting Enhancement

  • Update StockPredictionTab to include dates in FDC3 context
  • Add FDC3 broadcasting in BacktestTab for backtest results
  • Update MarketData to listen for FDC3 context updates
  • Handle context updates for both prediction and backtest data

Phase 3: UI Enhancements (Week 2)

• Overlay Controls in MarketData

  • Add toggle controls for overlays (showPrediction, showBacktest)
  • Add UI controls in chart card header (checkboxes)
  • Add indicator badges when overlay data is available
  • Disable toggles when no overlay data available

• Quick Access Buttons

  • Add "Run Prediction" button in Market tab
  • Add "Run Backtest" button in Market tab
  • Implement tab switching or direct API calls
  • Add loading states when running predictions/backtests

Phase 4: Data Normalization & Scaling (Week 2-3)

• Forecast Normalization

  • Create normalizeForecastToPrice function
  • Handle absolute price forecasts
  • Handle percentage change forecasts
  • Handle returns forecasts
  • Align forecast dates with historical price dates

• Equity Curve Normalization

  • Create normalizeEquityCurveToPrice function
  • Support overlay on price (scaled)
  • Support secondary Y-axis (equity value)
  • Support percentage overlay mode

Acceptance Criteria

1. ✅ Prediction forecasts can be overlaid on the main candlestick chart
2. ✅ Backtest equity curves can be overlaid on the main candlestick chart
3. ✅ Overlays are toggleable via checkboxes in the chart header
4. ✅ Data from Predictions and Backtest tabs is accessible in Market tab
5. ✅ Overlays are properly normalized to price scale
6. ✅ Chart legend shows overlay lines with appropriate labels
7. ✅ Tooltips show overlay values on hover
8. ✅ Quick action buttons allow running predictions/backtests from Market tab
9. ✅ FDC3 context broadcasting works for cross-tab communication
10. ✅ SessionStorage persistence works across tab switches

Dependencies

• CandleChart component (✅ Already implemented)
• MarketData component (✅ Already implemented)
• BacktestTab component (✅ Already implemented)
• StockPredictionTab component (✅ Already implemented)
• Stock Prediction API (✅ Already implemented)
• Backtest API (✅ Already implemented)
• FDC3 Context (✅ Already implemented)
• Recharts library (✅ Already used)

Testing

• Test forecast date generation
• Test backtest date generation
• Test data normalization functions
• Test overlay data merging
• Test CandleChart with prediction overlay
• Test CandleChart with backtest overlay
• Test CandleChart with both overlays
• Test cross-tab data sharing via sessionStorage
• Test FDC3 context broadcasting
• Manual testing: Run prediction in Predictions tab, verify overlay in Market tab
• Manual testing: Run backtest in Backtest tab, verify overlay in Market tab
• Manual testing: Toggle overlays on/off
• Manual testing: Test with different symbols and timeframes
• Manual testing: Test with multiple predictions/backtests
• Manual testing: Verify tooltips show correct values

Technical Notes

Data Format

Prediction Data:

interface PredictionOverlay {
  forecast: number[];
  dates: string[];
  symbol: string;
  timeframe: 'daily' | 'hourly' | '15min';
  strategy: 'chronos' | 'technical';
  prediction_id?: number;
}

Backtest Data:

interface BacktestOverlay {
  equityCurve: number[];
  dates: string[];
  symbol: string;
  strategy: string;
  initialCapital: number;
  finalEquity: number;
}

Chart Integration

• Prediction: Dashed line, color: hsl(var(--primary)) with opacity 0.7
• Backtest: Solid line, color: hsl(var(--success)) or custom color
• Legend: Show both lines with labels
• Tooltip: Show overlay values on hover

SessionStorage Keys

• stockPredictionResult: Prediction data with dates
• backtestResult: Backtest data with dates

FDC3 Context Types

• finos.creditnexus.stockPrediction: Enhanced with forecastDates
• finos.creditnexus.backtest: New context type for backtest results

---

Created: 2026-01-26
Status: Open