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)

• Task 1: Fix Page Refresh Issues (Priority: HIGH - 5 minutes)

  • 1.1 Choose debug mode option (Option A: debug=False OR Option B: debug=True, use_reloader=False)
  • 1.2 Update app_new.py with selected debug settings
  • 1.3 Test app stability (no frequent restarts)

• Task 2: Add Time Range Selector (Priority: HIGH - 45 minutes) ✅ COMPLETED + ENHANCED

  • 2.1 Create time range control components
    • 2.1.1 Add quick select dropdown (1h, 4h, 6h, 12h, 1d, 3d, 7d, 30d, real-time)
    • 2.1.2 Add custom date picker component
    • 2.1.3 Add analysis mode toggle (real-time vs locked)
  • 2.2 Update dashboard layout with time range controls
  • 2.3 Modify chart callbacks to handle time range inputs
  • 2.4 Test time range functionality
  • 2.5 ENHANCEMENT: Fixed sub-day time period precision (1h, 4h working correctly)
  • 2.6 ENHANCEMENT: Added 6h and 12h options per user request
  • 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)

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

• Task 4: Enhanced Statistics Integration (Priority: MEDIUM - 30 minutes)

  • 4.1 Make statistics respect selected time range
  • 4.2 Add time range context to statistics display
  • 4.3 Implement real-time vs historical analysis modes
  • 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

# 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

@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