caishen

UI Components

RISE Framework Specification

Spec ID: 20
Version: 1.0
Document ID: caishen-rise-ui-v1.0
Last Updated: 2025-01-31

Creative Intent

What UI Components Enable Users to Create:

Visual chart analysis with interactive tools
Strategy entry from chart context
Real-time market monitoring
Historical data exploration

Desired Outcomes:

Users can analyze charts intuitively
Strategy creation flows naturally from analysis
Market state is always visible
Historical review is easy and informative

Component Architecture

Main Application Layout

┌─────────────────────────────────────────────────────────────────┐
│                        Application Menu                         │
├─────────────────────────────────────────────────────────────────┤
│  ┌────────────┐                                                 │
│  │ Instrument │  ┌─────────────────────────────────────────────┐│
│  │  Selector  │  │                                             ││
│  │            │  │              Main Chart Area                ││
│  │ - EUR/USD  │  │                                             ││
│  │ - GBP/USD  │  │   [Candlesticks + Alligator + Fractals]    ││
│  │ - USD/JPY  │  │                                             ││
│  │ - ...      │  ├─────────────────────────────────────────────┤│
│  ├────────────┤  │             AO Panel                        ││
│  │ Timeframe  │  ├─────────────────────────────────────────────┤│
│  │            │  │             AC Panel                        ││
│  │ [m5][H1]   │  └─────────────────────────────────────────────┘│
│  │ [H4][D1]   │                                                 │
│  ├────────────┤  ┌─────────────────────────────────────────────┐│
│  │ Strategy   │  │          Strategy Panel                     ││
│  │   List     │  │   - Active strategies for current POV       ││
│  │            │  │   - Order status                            ││
│  └────────────┘  └─────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────────┤
│                        Status Bar                               │
└─────────────────────────────────────────────────────────────────┘

Charting Components

CChart Control

Main chart display component.

Behavior:

Renders OHLC data with chaos indicators
Handles zoom, pan, scroll interactions
Provides context menu for actions
Supports multiple chart types

Properties:

CChart:
  - DataSource: ChaosDataBuilder
  - ChartType: enum (Candlestick, Bar, Line)
  - ShowAlligator: bool
  - ShowFractals: bool
  - ShowAO: bool
  - ShowAC: bool
  - ShowZones: bool
  - TimeRange: DateRange
  - ZoomLevel: float

Events:

Events:
  - OnBarClick(bar: BarChaosItem)
  - OnFractalClick(fractal: FractalResult)
  - OnRangeSelected(start: DateTime, end: DateTime)
  - OnContextMenu(point: ChartPoint)

ChartV2WrapperUI

Enhanced chart control with strategy overlay.

Behavior:

Displays breakout levels for active strategies
Shows entry/exit markers
Highlights divergence patterns
Provides strategy quick-actions

Layout: Contains CChartV2Main, StrategyOverlay, ContextMenuPanel

ADSChartAnalyzerControl

Combined chart + analysis panel.

Behavior:

Shows chart with analysis summary
Displays current market state
Provides quick analysis tools
Integrates with strategy creation

Strategy UI Components

NewBDBBOEntryStrategyUI

Strategy creation form.

Behavior:

Accepts breakout price input
Allows direction selection (Buy/Sell)
Configures risk parameters
Creates strategy on submit

Layout:

┌─────────────────────────────────────────────┐
│        New Fractal Breakout Strategy        │
├─────────────────────────────────────────────┤
│  Instrument:  [EUR/USD        ▼]           │
│  Timeframe:   [H4             ▼]           │
├─────────────────────────────────────────────┤
│  Breakout Price: [1.0850      ]            │
│  Direction:      (●) Buy  ( ) Sell         │
├─────────────────────────────────────────────┤
│  ┌── Risk Management ──────────────────┐   │
│  │  Max Pip Risk:     [120    ]        │   │
│  │  Max Periods:      [1000   ]        │   │
│  │  Deactivation:     [       ]        │   │
│  └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│  ┌── Twin Trade ───────────────────────┐   │
│  │  [ ] Enable Twin Trade              │   │
│  │  Option: [Default        ▼]         │   │
│  │  Multiplier: [1  ]                  │   │
│  └─────────────────────────────────────┘   │
├─────────────────────────────────────────────┤
│  Notes: [________________________]          │
├─────────────────────────────────────────────┤
│       [Cancel]              [Create]        │
└─────────────────────────────────────────────┘

Properties:

NewBDBBOEntryStrategyUI:
  - Instrument: string
  - Timeframe: string
  - BreakoutPrice: double
  - BuySell: string ("B" or "S")
  - MPR: int (max pip risk)
  - MaxPUI: int (max periods)
  - DP: double (deactivation price)
  - TT: bool (twin trade)
  - TTO: int (twin trade option)
  - K: int (multiplier)
  - Note: string

StrategyListControl

List of active/historical strategies.

Behavior:

Displays strategy summary cards
Filters by POV, state, date
Provides edit/delete actions
Shows state indicators

Layout:

┌─────────────────────────────────────────────┐
│  Active Strategies                    [+]   │
├─────────────────────────────────────────────┤
│  ┌────────────────────────────────────────┐ │
│  │ EUR/USD H4 - SELL @ 1.0850            │ │
│  │ State: Placed | Created: 2h ago       │ │
│  │ [Edit] [Deactivate] [Delete]          │ │
│  └────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────┐ │
│  │ GBP/USD D1 - BUY @ 1.2650             │ │
│  │ State: PriceBrokeOut | Created: 1d    │ │
│  │ [Edit] [Deactivate] [Delete]          │ │
│  └────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘

StrategyOrderHistoryView

Order history for a strategy.

Behavior:

Shows chronological order events
Displays order status and prices
Links to chart snapshots
Provides export option

Analysis Components

ADSBITTChartAnalyzerControl

Timeline-integrated analysis panel.

Behavior:

Shows chart with timeline navigation
Displays historical snapshots
Compares time periods
Enables playback mode

WaveEntryHelper

Elliott Wave analysis assistance.

Behavior:

Helps identify wave patterns
Suggests entry levels
Shows wave labels on chart
Calculates wave targets

ScannerExclusionDefinerControl

Market scanner configuration.

Behavior:

Defines instruments to scan
Sets exclusion patterns
Configures scan intervals
Manages scan results

Creative Advancement Scenarios

Scenario 1: Create Strategy from Chart

Creative Advancement Scenario: Visual Entry Creation

Desired Outcome: Strategy created from chart click

Current Reality: User sees fractal pattern on chart

Natural Progression Steps:
  1. User identifies fractal sell on EUR/USD H4
  2. Right-clicks on fractal marker
  3. Selects "Create Breakout Strategy"
  4. NewBDBBOEntryStrategyUI opens pre-filled
  5. User confirms breakout price
  6. Clicks "Create"
  7. Strategy appears in list
  8. Breakout level shows on chart

Achieved Outcome: Strategy created with minimal input

Supporting Features: CChart context menu, NewBDBBOEntryStrategyUI

Scenario 2: Monitor Active Strategies

Creative Advancement Scenario: Real-time Strategy Monitoring

Desired Outcome: View all active strategies and states

Current Reality: Multiple strategies active across POVs

Natural Progression Steps:
  1. User opens Strategy List panel
  2. Filters to show only active
  3. List shows all strategies with states
  4. User clicks strategy to focus chart
  5. Chart shows that POV with strategy overlay
  6. State changes update in real-time

Achieved Outcome: Complete visibility of strategy portfolio

Supporting Features: StrategyListControl, chart synchronization

Styling Guidelines

Colors

ChartColors:
  Background: #1E1E1E (dark) | #FFFFFF (light)
  Grid: #333333 (dark) | #EEEEEE (light)
  Text: #D4D4D4 (dark) | #333333 (light)
  
  Candle:
    BullishBody: #26A69A
    BearishBody: #EF5350
    
  Alligator:
    Lips: #00FF00
    Teeth: #FF0000
    Jaw: #0000FF
    
  Fractals:
    Buy: #00AA00
    Sell: #AA0000
    
  Oscillators:
    Positive: #00FF00
    Negative: #FF0000
    Neutral: #808080
    
  Zones:
    Green: #00FF00 (alpha 30%)
    Red: #FF0000 (alpha 30%)
    Gray: #808080 (alpha 20%)

Typography

Fonts:
  Primary: "Segoe UI", sans-serif
  Monospace: "Consolas", monospace
  
Sizes:
  Title: 16px
  Subtitle: 14px
  Body: 12px
  Small: 10px

Implementation Notes

React Components (TypeScript)

import React, { useState, useEffect } from 'react';

interface NewStrategyFormProps {
  instrument: string;
  timeframe: string;
  defaultBreakoutPrice?: number;
  defaultDirection?: 'B' | 'S';
  onSubmit: (strategy: BDBOStrategy) => void;
  onCancel: () => void;
}

const NewStrategyForm: React.FC<NewStrategyFormProps> = ({
  instrument,
  timeframe,
  defaultBreakoutPrice,
  defaultDirection = 'B',
  onSubmit,
  onCancel
}) => {
  const [breakoutPrice, setBreakoutPrice] = useState(defaultBreakoutPrice || 0);
  const [direction, setDirection] = useState<'B' | 'S'>(defaultDirection);
  const [maxPipRisk, setMaxPipRisk] = useState(120);
  const [maxPeriods, setMaxPeriods] = useState(1000);
  const [note, setNote] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    const strategy: BDBOStrategy = {
      idug: crypto.randomUUID(),
      instrument,
      timeframe,
      breakoutPrice,
      buySell: direction,
      active: true,
      state: BDBOStrategyState.Created,
      dt: new Date(),
      maxPipRisk,
      maxPui: maxPeriods,
      ceoc: 0,
      maxEoc: 5
    };
    
    onSubmit(strategy);
  };

  return (
    <form onSubmit={handleSubmit} className="strategy-form">
      <h2>New Fractal Breakout Strategy</h2>
      
      <div className="form-group">
        <label>Instrument</label>
        <input value={instrument} disabled />
      </div>
      
      <div className="form-group">
        <label>Timeframe</label>
        <input value={timeframe} disabled />
      </div>
      
      <div className="form-group">
        <label>Breakout Price</label>
        <input
          type="number"
          step="0.00001"
          value={breakoutPrice}
          onChange={e => setBreakoutPrice(parseFloat(e.target.value))}
          required
        />
      </div>
      
      <div className="form-group">
        <label>Direction</label>
        <div className="radio-group">
          <label>
            <input
              type="radio"
              checked={direction === 'B'}
              onChange={() => setDirection('B')}
            />
            Buy
          </label>
          <label>
            <input
              type="radio"
              checked={direction === 'S'}
              onChange={() => setDirection('S')}
            />
            Sell
          </label>
        </div>
      </div>
      
      <div className="form-group">
        <label>Max Pip Risk</label>
        <input
          type="number"
          value={maxPipRisk}
          onChange={e => setMaxPipRisk(parseInt(e.target.value))}
        />
      </div>
      
      <div className="form-group">
        <label>Notes</label>
        <textarea
          value={note}
          onChange={e => setNote(e.target.value)}
        />
      </div>
      
      <div className="form-actions">
        <button type="button" onClick={onCancel}>Cancel</button>
        <button type="submit">Create Strategy</button>
      </div>
    </form>
  );
};

Python (Tkinter or PyQt example)

import tkinter as tk
from tkinter import ttk
from dataclasses import dataclass
from typing import Callable

class NewStrategyDialog(tk.Toplevel):
    def __init__(
        self,
        parent,
        instrument: str,
        timeframe: str,
        on_submit: Callable[[dict], None]
    ):
        super().__init__(parent)
        self.title("New Fractal Breakout Strategy")
        self.instrument = instrument
        self.timeframe = timeframe
        self.on_submit = on_submit
        
        self._create_widgets()
    
    def _create_widgets(self):
        # Instrument
        ttk.Label(self, text="Instrument:").grid(row=0, column=0)
        ttk.Label(self, text=self.instrument).grid(row=0, column=1)
        
        # Timeframe
        ttk.Label(self, text="Timeframe:").grid(row=1, column=0)
        ttk.Label(self, text=self.timeframe).grid(row=1, column=1)
        
        # Breakout Price
        ttk.Label(self, text="Breakout Price:").grid(row=2, column=0)
        self.price_entry = ttk.Entry(self)
        self.price_entry.grid(row=2, column=1)
        
        # Direction
        ttk.Label(self, text="Direction:").grid(row=3, column=0)
        self.direction_var = tk.StringVar(value="B")
        ttk.Radiobutton(self, text="Buy", variable=self.direction_var, value="B").grid(row=3, column=1)
        ttk.Radiobutton(self, text="Sell", variable=self.direction_var, value="S").grid(row=3, column=2)
        
        # Buttons
        ttk.Button(self, text="Cancel", command=self.destroy).grid(row=10, column=0)
        ttk.Button(self, text="Create", command=self._on_create).grid(row=10, column=1)
    
    def _on_create(self):
        strategy = {
            'instrument': self.instrument,
            'timeframe': self.timeframe,
            'breakout_price': float(self.price_entry.get()),
            'buy_sell': self.direction_var.get()
        }
        self.on_submit(strategy)
        self.destroy()