# Tasks: Interactive Visualizer with Plotly + Dash

## Relevant Files

- `interactive_visualizer.py` - Main InteractiveVisualizer class implementing Plotly + Dash interface
- `tests/test_interactive_visualizer.py` - Unit tests for InteractiveVisualizer class
- `dash_app.py` - Dash application setup and layout configuration
- `tests/test_dash_app.py` - Unit tests for Dash application components
- `dash_callbacks.py` - Dash callback functions for interactivity and data updates
- `tests/test_dash_callbacks.py` - Unit tests for callback functions
- `dash_components.py` - Custom Dash components for side panel and controls
- `tests/test_dash_components.py` - Unit tests for custom components
- `data_adapters.py` - Data transformation utilities for Plotly format conversion
- `tests/test_data_adapters.py` - Unit tests for data adapter functions
- `pyproject.toml` - Updated dependencies including dash, plotly, dash-bootstrap-components
- `main.py` - Updated to support both static and interactive visualizer options

### Notes

- Unit tests should be placed in the `tests/` directory following existing project structure
- Use `uv run pytest [optional/path/to/test/file]` to run tests following project conventions
- Dash server will run locally for development, accessible via browser at http://127.0.0.1:8050
- Maintain backward compatibility with existing matplotlib visualizer

## Tasks

- [ ] 1.0 Setup Plotly + Dash Infrastructure and Dependencies
  - [ ] 1.1 Add dash, plotly, and dash-bootstrap-components to pyproject.toml dependencies
  - [ ] 1.2 Install and verify new dependencies with uv sync
  - [ ] 1.3 Create basic dash_app.py with minimal Dash application setup
  - [ ] 1.4 Verify Dash server can start and serve a basic "Hello World" page
  - [ ] 1.5 Create project structure for interactive visualizer modules

- [ ] 2.0 Create Core Interactive Chart Layout with Synchronized Axes
  - [ ] 2.1 Design 4-subplot layout using plotly.subplots.make_subplots with shared X-axis
  - [ ] 2.2 Implement OHLC candlestick chart using plotly.graph_objects.Candlestick
  - [ ] 2.3 Implement Volume bar chart using plotly.graph_objects.Bar
  - [ ] 2.4 Implement OBI line chart using plotly.graph_objects.Scatter
  - [ ] 2.5 Implement CVD line chart using plotly.graph_objects.Scatter
  - [ ] 2.6 Configure synchronized zooming and panning across all subplots
  - [ ] 2.7 Add vertical crosshair functionality spanning all charts
  - [ ] 2.8 Apply professional dark theme and styling to charts

- [ ] 3.0 Implement Data Integration and Processing Pipeline
  - [ ] 3.1 Create InteractiveVisualizer class maintaining set_db_path() and update_from_book() interface
  - [ ] 3.2 Implement data_adapters.py for converting Book/Metric data to Plotly format
  - [ ] 3.3 Create OHLC data transformation from existing bar calculation logic
  - [ ] 3.4 Create metrics data transformation for OBI and CVD time series
  - [ ] 3.5 Implement volume data aggregation and formatting
  - [ ] 3.6 Add data caching mechanism for improved performance
  - [ ] 3.7 Integrate with existing SQLiteOrderflowRepository for metrics loading
  - [ ] 3.8 Handle multiple database file support seamlessly

- [ ] 4.0 Build Interactive Features and Navigation Controls
  - [ ] 4.1 Implement zoom in/out functionality with mouse wheel and buttons
  - [ ] 4.2 Implement pan functionality with click and drag
  - [ ] 4.3 Add reset zoom and home view buttons
  - [ ] 4.4 Create time range selector component for custom period selection
  - [ ] 4.5 Implement time granularity controls (1min, 5min, 15min, 1hour, 6hour)
  - [ ] 4.6 Add keyboard shortcuts for common navigation actions
  - [ ] 4.7 Implement smooth interaction performance optimizations (<100ms response)
  - [ ] 4.8 Add error handling for interaction edge cases

- [ ] 5.0 Develop Side Panel with Hover Information and CVD Reset Functionality
  - [ ] 5.1 Create side panel layout using dash-bootstrap-components
  - [ ] 5.2 Implement hover information display for OHLC data (timestamp, OHLC values, spread)
  - [ ] 5.3 Implement hover information display for Volume data (timestamp, volume, buy/sell breakdown)
  - [ ] 5.4 Implement hover information display for OBI data (timestamp, OBI value, bid/ask volumes)
  - [ ] 5.5 Implement hover information display for CVD data (timestamp, CVD value, volume delta)
  - [ ] 5.6 Add CVD reset functionality with click-to-reset on CVD chart
  - [ ] 5.7 Implement visual markers for CVD reset points
  - [ ] 5.8 Add CVD recalculation logic from reset point forward
  - [ ] 5.9 Create control buttons in side panel (Reset CVD, Zoom Reset, etc.)
  - [ ] 5.10 Optimize hover information update performance (<50ms latency)