TCPDashboard/tasks/chart-improvements-immediate.md

# Chart Improvements - Immediate Tasks

## Overview
This document outlines immediate improvements for chart functionality, time range selection, and performance optimization to address current issues with page refreshing and chart state preservation.

## Current Issues Identified
- Frequent page refreshing due to debug mode hot-reload (every 2-3 minutes)
- Chart zoom/pan state resets when callbacks trigger
- No time range control for historical data analysis
- Statistics reset when changing parameters
- No way to "lock" time range for analysis without real-time updates

## Immediate Tasks (Priority Order)

- [x] **Task 1: Fix Page Refresh Issues** (Priority: HIGH - 5 minutes)
  - [x] 1.1 Choose debug mode option (Option A: debug=False OR Option B: debug=True, use_reloader=False)
  - [x] 1.2 Update app_new.py with selected debug settings
  - [x] 1.3 Test app stability (no frequent restarts)

- [x] **Task 2: Add Time Range Selector** (Priority: HIGH - 45 minutes) ✅ COMPLETED + ENHANCED
  - [x] 2.1 Create time range control components
    - [x] 2.1.1 Add quick select dropdown (1h, 4h, 6h, 12h, 1d, 3d, 7d, 30d, real-time)
    - [x] 2.1.2 Add custom date picker component
    - [x] 2.1.3 Add analysis mode toggle (real-time vs locked)
  - [x] 2.2 Update dashboard layout with time range controls
  - [x] 2.3 Modify chart callbacks to handle time range inputs
  - [x] 2.4 Test time range functionality
  - [x] 2.5 **ENHANCEMENT**: Fixed sub-day time period precision (1h, 4h working correctly)
  - [x] 2.6 **ENHANCEMENT**: Added 6h and 12h options per user request
  - [x] 2.7 **ENHANCEMENT**: Fixed custom date range and dropdown interaction logic with Clear button and explicit "Custom Range" dropdown option.

- [ ] **Task 3: Prevent Chart State Reset** (Priority: MEDIUM - 45 minutes)
  - [x] 3.1 Add relayoutData state preservation to chart callbacks (Completed as part of Task 2)
  - [x] 3.2 Implement smart partial updates using Patch() (Initial implementation for basic charts completed)
  - [x] 3.3 Preserve zoom/pan during data updates (Completed as part of Task 2 & 3.1)
  - [x] 3.4 Test chart state preservation (Visual testing by user indicates OK)
  - [x] 3.5 Refine Patching: More robust trace identification (New sub-task) (Completed)

- [x] **Task 4: Enhanced Statistics Integration** (Priority: MEDIUM - 30 minutes)
  - [x] 4.1 Make statistics respect selected time range
  - [x] 4.2 Add time range context to statistics display
  - [x] 4.3 Implement real-time vs historical analysis modes
  - [x] 4.4 Test statistics integration with time controls

- [ ] **Task 5: Advanced Chart Controls** (Priority: LOW - Future)
  - [ ] 5.1 Chart annotation tools
  - [ ] 5.2 Export functionality (PNG, SVG, data)
  - [-] 3.6 Refine Patching: Optimize data fetching for patches (fetch only new data) (New sub-task)
  - [-] 3.7 Refine Patching: Enable for simple overlay indicators (New sub-task)

## Implementation Plan

### Phase 1: Immediate Fixes (Day 1)
1. **Fix refresh issues** (5 minutes)
2. **Add basic time range dropdown** (30 minutes)
3. **Test and validate** (15 minutes)

### Phase 2: Enhanced Time Controls (Day 1-2)
1. **Add date picker component** (30 minutes)
2. **Implement analysis mode toggle** (30 minutes)
3. **Integrate with statistics** (30 minutes)

### Phase 3: Chart State Preservation (Day 2)
1. **Implement zoom/pan preservation** (45 minutes)
2. **Add smart partial updates** (30 minutes)
3. **Testing and optimization** (30 minutes)

## Technical Specifications

### Time Range Selector UI
```python
# Quick Select Dropdown
dcc.Dropdown(
    id='time-range-quick-select',
    options=[
        {'label': '🕐 Last 1 Hour', 'value': '1h'},
        {'label': '🕐 Last 4 Hours', 'value': '4h'},
        {'label': '📅 Last 1 Day', 'value': '1d'},
        {'label': '📅 Last 3 Days', 'value': '3d'},
        {'label': '📅 Last 7 Days', 'value': '7d'},
        {'label': '📅 Last 30 Days', 'value': '30d'},
        {'label': '🔴 Real-time', 'value': 'realtime'}
    ],
    value='7d'
)

# Custom Date Range Picker
dcc.DatePickerRange(
    id='custom-date-range',
    display_format='YYYY-MM-DD',
    style={'margin': '10px 0'}
)

# Analysis Mode Toggle
dcc.RadioItems(
    id='analysis-mode-toggle',
    options=[
        {'label': '🔴 Real-time Updates', 'value': 'realtime'},
        {'label': '🔒 Analysis Mode (Locked)', 'value': 'locked'}
    ],
    value='realtime',
    inline=True
)
```

### Enhanced Callback Structure
```python
@app.callback(
    [Output('price-chart', 'figure'),
     Output('market-stats', 'children')],
    [Input('symbol-dropdown', 'value'),
     Input('timeframe-dropdown', 'value'),
     Input('time-range-quick-select', 'value'),
     Input('custom-date-range', 'start_date'),
     Input('custom-date-range', 'end_date'),
     Input('analysis-mode-toggle', 'value'),
     Input('interval-component', 'n_intervals')],
    [State('price-chart', 'relayoutData')],
    prevent_initial_call=False
)
def update_chart_and_stats_with_time_control(...):
    # Smart update logic with state preservation
    # Conditional real-time updates based on analysis mode
    # Time range validation and data fetching
```

## Success Criteria
- ✅ No more frequent page refreshes (app runs stable)
- ✅ Chart zoom/pan preserved during updates
- ✅ Time range selection works for both quick select and custom dates
- ✅ Analysis mode prevents unwanted real-time resets
- ✅ Statistics update correctly for selected time ranges
- ✅ Smooth user experience without interruptions

## Files to Modify
- `app_new.py` - Debug mode settings
- `dashboard/layouts/market_data.py` - Add time range UI
- `dashboard/callbacks/charts.py` - Enhanced callbacks with state preservation
- `dashboard/components/chart_controls.py` - New time range control components
- `components/charts/__init__.py` - Enhanced data fetching with time ranges

## Testing Checklist
- [ ] App runs without frequent refreshes
- [ ] Quick time range selection works
- [ ] Custom date picker functions correctly
- [ ] Analysis mode prevents real-time updates
- [ ] Chart zoom/pan preserved during data updates
- [ ] Statistics reflect selected time range
- [ ] Symbol changes work with custom time ranges
- [ ] Timeframe changes work with custom time ranges
- [ ] Real-time mode resumes correctly after analysis mode

## Notes
- Prioritize stability and user experience over advanced features
- Keep implementation simple and focused on immediate user needs
- Consider performance impact of frequent data queries
- Ensure backward compatibility with existing functionality