Chart Overlays

Chart Overlays are visual helpers that appear on the chart when Quick Trade is active. They show where orders would be placed and the status of placed orders. Two independent overlay components — the Quick Order Line (hover preview) and Quick Trade Lines (post-placement status) — are controlled by separate settings.

The Quick Order Line is a preview line that follows your mouse cursor across the chart when Click to Order is enabled. It shows exactly where an order would be placed before you click.

• Colour logic — the line colour is determined by the currently selected side, not by the chart location. When Buy is selected, the line is green (`#22c55e`, 70% opacity). When Sell is selected, it is red (`#ef4444`). There is no dynamic colour change based on whether the cursor is above or below current price — side is explicitly chosen via the B/S toggle.
• Price label — a compact two-segment badge ("PriceTag" style) appears at a fixed horizontal offset (200px from the left edge, matching the trade line positions). The left segment is a coloured label showing "BUY" or "SELL". The right segment shows the formatted price in `toFixed(2)` on a secondary background. The badge is vertically centred on the cursor Y position via `translateY(-50%)`.
• Cursor tracking — the Y-coordinate of the mouse is converted to a price using the lightweight-charts `series.coordinateToPrice(y)` API. This conversion accounts for the chart's visible range, axis scaling (linear or logarithmic), and any price axis margins. The hover state (`hoverPrice`, `hoverY`) is cleared when the mouse leaves the chart container.
• Container width — the line spans the full width of the chart container as measured by a `ResizeObserver`. This ensures the line correctly extends across the visible chart area even when the container is resized (e.g., window resize, panel toggle). The width is stored in state and updated on each resize event.
• Dependency chain — the line is only active when ALL of the following are true: Quick Trade is enabled, Click to Order is enabled, and `showQuickOrderLine` is true. Disabling any of these settings immediately clears the hover state and removes the line from the DOM.

Quick Trade Lines appear after an order is placed via Click to Order. Each line represents one placed order and tracks its lifecycle through the trading system. Lines are absolute-positioned DOM elements (not chart series markers), rendered via a portal on top of the chart canvas.

• Pending state — immediately after a chart click, a line is created with status `"pending"`. The line is dashed with 70% opacity and the coloured badge shows "BUY" or "SELL" with a pulsing dot indicator (CSS `animate-pulse`). This state lasts until the exchange API responds (typically 100-500ms).
• Open/placed state — when the exchange confirms the order, status changes to `"open"`. The line remains dashed with full opacity. The badge shows "BUY" or "SELL". After 1500ms, the line is automatically removed from the DOM — the permanent order line is owned by OpenOrdersOverlay (identified via `confirmedOrderIds` set).
• Filled state — if the order fills before the 1500ms timeout (detected via polling), the line colour changes to purple (`#a855f7`) and the badge reads "FILLED". The `onGetOrderStatus` callback polls the broker every 3 seconds for open orders with a known `orderId`.
• Rejected state — if the exchange rejects the order (insufficient funds, invalid price, market closed, etc.), the line turns orange (`#f97316`), the badge shows "FAILED", and a retry button with a `RotateCcw` icon appears. The rejection message (e.g., "Insufficient balance") is displayed below the badge in a small orange tag.
• Cancelled state — detected via the same 3-second polling mechanism. The line is removed from the DOM, matching the behaviour of the OpenOrdersOverlay cancellation flow.
• Drag-to-retry — rejected order lines are fully draggable. When the user mousedowns on a rejected badge, a drag handler captures the mouse Y position and continuously updates the line price via `series.coordinateToPrice()`. On mouseup, if the price changed, `retryOrderById` is called with the new price, incrementing the `retryCount` and resetting status to `"pending"`. Each retry attempt goes through the full submission lifecycle.
• Y-coordinate sync — a `setInterval(100ms)` polls `series.priceToCoordinate()` for each pending order to keep the line Y position in sync with chart scrolling and zooming. Lines being actively dragged are excluded from this sync to prevent jitter.

Both pending and rejected order lines support vertical dragging to adjust the order price. This is the same drag system used for TP/SL handles in DragDropTPSLOverlay. The implementation uses native mouse events (`mousedown`/`mousemove`/`mouseup`) on `window` to avoid issues with mouse leaving the element during fast drags.

• Drag initiation — mousedown on the order badge (cursor: `grab`) stores the starting Y position, original price, and line ID in a ref (`dragRef`). The line is excluded from the 100ms Y-sync interval during the active drag to prevent visual jitter.
• Drag update — on mousemove, the current Y is converted to a price via `coordinateToPrice()`. The line is immediately re-rendered at the new Y and price. The limit price input field does not update — the drag is purely visual until release.
• Drag completion — on mouseup, the final price is compared to the original. If unchanged (user dragged but returned to the same level), no action is taken. If changed and the status was `"rejected"`, a retry is automatically triggered at the new price.
• Edge cases — dragging an order to a price that maps to the same `coordinateToPrice` value (clamped at chart edges) is treated as unchanged. Dragging off the chart (mouse leaves container) still follows via the `window` mousemove listener.

Chart Overlays and Click to Order are deeply integrated. The overlays serve as both a preview mechanism and a post-placement status tracker for click-placed orders:

• Preview (Quick Order Line) — the hover line shows exactly where a click will place the order. This eliminates the need to estimate the price by eye. The price badge reads the current `hoverPrice` from `coordinateToPrice()` and updates continuously as the mouse moves.
• Post-click (Quick Trade Lines) — immediately after a chart click, a pending order line appears at the clicked price. This provides instant visual feedback before the broker responds. If the broker accepts the order, the line transitions to "open" and auto-clears after 1.5 seconds.
• OpenOrdersOverlay handoff — when the broker returns an `orderId` that matches an entry in the `confirmedOrderIds` Set, the local pending line is removed. This prevents duplicate lines and ensures a single authoritative visual representation per order.
• Click suppression — clicks on overlay elements (`[data-pending-order-label]`, `[data-quick-trade-overlay]`) are ignored by the click-to-order handler. This prevents accidental order placement when interacting with existing order lines.

The overlay rendering is designed for smooth performance during fast mouse movements and real-time order status updates:

• DOM-based rendering — overlays are positioned absolutely using CSS `top` and `left` values. This avoids re-invoking the chart canvas render pipeline on each mouse move. Only the affected DOM subtree is repainted, not the entire chart.
• requestAnimationFrame — the DragDropTPSLOverlay syncs handle coordinates using `requestAnimationFrame` rather than `setInterval` for smoother animation. ChartClickToOrder uses `setInterval(100ms)` for pending line Y-sync, which is sufficient for non-animated elements.
• Polling trade-off — order status polling runs every 3 seconds. This is a balance between timely status updates and reducing API call overhead. The polling is scoped to only orders with a known `orderId` and `"open"` status. Orders without a broker ID are not polled.
• ResizeObserver usage — container width is tracked via a single ResizeObserver. This avoids polling for size changes and ensures the overlay lines always span the full chart width, even during dynamic layout changes.
• DOM cleanup — pending lines auto-remove after 1500ms for accepted orders. Rejected lines persist until explicitly dismissed or retried. The component returns `null` (renders nothing) when no overlays are needed, keeping the DOM minimal.

• 1.Chart Click to Order — Enables the order placement that triggers Quick Trade Lines
• 2.Buy / Sell Toggle Location — Determines whether the side selector appears on the Y-axis or in the Quick Trade panel
• 3.Trade Without Confirmation — Skips the confirmation dialog — overlays still show post-placement status
• 4.Default Order Mode — Quick Trade Lines use order type from settings for status tracking