Skip to main content

Trade List Display Flow

Legend​

  • Blue nodes → API/Data operations
  • Green nodes → UI updates
  • Orange nodes → Filtering logic

Trade List Data Flow​

  1. Initial Load: Page load triggers loadTradesWithPagination(1, 50)
  2. API Call: GET /api/alerts?limit=50&offset=0
  3. Database Query: Joins alerts, alert_results, and trade_execution_snapshots
  4. Filtering:
    • Excludes: failure, rejected, cancelled statuses
    • Excludes: is_flux_test = true (test trades)
    • Live trades: Must have topstepOrderId (actually placed on TopstepX)
    • User ID: Only current user's trades
  5. Pagination: Applies LIMIT and OFFSET
  6. UI Update: Renders table with trade data

Trade List Columns​

  • ID: Trade ID
  • Timestamp: Entry time
  • Symbol: Trading symbol
  • Action: Buy/Sell
  • Entry Price: Entry price
  • Stop Loss: Stop loss price
  • Take Profit: Take profit price
  • Status: Trade status (pending, done, etc.)
  • Exit Price: Exit price (if closed)
  • PnL: Profit/Loss
  • Contracts: Number of contracts
  • Risk Dollars: Risk amount
  • Details: Button to view position sizing details

Pagination​

  • Default Page Size: 50 trades
  • Page Size Options: 25, 50, 100, 200
  • Navigation: First, Previous, Next, Last buttons
  • Page Input: Direct page number entry

Auto-Refresh​

  • Interval: 30 seconds
  • Behavior: Refreshes trade list automatically
  • Note: Only refreshes if user is on page 1 to avoid blinking