baaadcf105
- add Databento options adapter (TS) with Python sidecar and env wiring - add to stream historical trades and resolve instrument_id -> raw_symbol via symbology - include Databento + typing_extensions in ingest-options Python requirements - expose Databento env settings in ingest-options index (dataset/schema/start/end/stype/limit/price scale/python bin) - update README with Databento replay usage and env docs - speed up UI replay polling/drain, add per-card replay time display - stop replay at end and prevent fallback to synthetic by pinning replay to initial trace source
851 lines
24 KiB
TypeScript
851 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import type { EquityPrint, FlowPacket, OptionPrint } from "@islandflow/types";
|
|
|
|
const MAX_ITEMS = 60;
|
|
const LOCAL_HOSTS = new Set(["localhost", "127.0.0.1"]);
|
|
|
|
type WsStatus = "connecting" | "connected" | "disconnected";
|
|
|
|
type TapeMode = "live" | "replay";
|
|
|
|
type MessageType = "option-print" | "equity-print" | "flow-packet";
|
|
|
|
type StreamMessage<T> = {
|
|
type: MessageType;
|
|
payload: T;
|
|
};
|
|
|
|
type ReplayCursor = {
|
|
ts: number;
|
|
seq: number;
|
|
};
|
|
|
|
type ReplayResponse<T> = {
|
|
data: T[];
|
|
next: ReplayCursor | null;
|
|
};
|
|
|
|
const inferTracePrefix = (traceId: string): string => {
|
|
const match = traceId.match(/^(.*)-\d+$/);
|
|
return match ? match[1] : traceId;
|
|
};
|
|
|
|
const extractTracePrefix = <T,>(item: T): string | null => {
|
|
const traceId = (item as { trace_id?: string }).trace_id;
|
|
if (!traceId) {
|
|
return null;
|
|
}
|
|
return inferTracePrefix(traceId);
|
|
};
|
|
|
|
type TapeState<T> = {
|
|
status: WsStatus;
|
|
items: T[];
|
|
lastUpdate: number | null;
|
|
replayTime: number | null;
|
|
replayComplete: boolean;
|
|
paused: boolean;
|
|
dropped: number;
|
|
togglePause: () => void;
|
|
};
|
|
|
|
const buildWsUrl = (path: string): string => {
|
|
const envBase = process.env.NEXT_PUBLIC_API_URL;
|
|
|
|
if (envBase) {
|
|
const url = new URL(envBase);
|
|
url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
|
|
url.pathname = path;
|
|
url.search = "";
|
|
url.hash = "";
|
|
return url.toString();
|
|
}
|
|
|
|
const { protocol, hostname } = window.location;
|
|
const wsProtocol = protocol === "https:" ? "wss" : "ws";
|
|
const isLocal = LOCAL_HOSTS.has(hostname);
|
|
const host = isLocal ? `${hostname}:4000` : window.location.host;
|
|
|
|
return `${wsProtocol}://${host}${path}`;
|
|
};
|
|
|
|
const buildApiUrl = (path: string): string => {
|
|
const envBase = process.env.NEXT_PUBLIC_API_URL;
|
|
|
|
if (envBase) {
|
|
const url = new URL(envBase);
|
|
const secure = url.protocol === "https:" || url.protocol === "wss:";
|
|
url.protocol = secure ? "https:" : "http:";
|
|
url.pathname = path;
|
|
url.search = "";
|
|
url.hash = "";
|
|
return url.toString();
|
|
}
|
|
|
|
const { protocol, hostname } = window.location;
|
|
const httpProtocol = protocol === "https:" ? "https" : "http";
|
|
const isLocal = LOCAL_HOSTS.has(hostname);
|
|
const host = isLocal ? `${hostname}:4000` : window.location.host;
|
|
|
|
return `${httpProtocol}://${host}${path}`;
|
|
};
|
|
|
|
const formatPrice = (price: number): string => {
|
|
return price.toFixed(2);
|
|
};
|
|
|
|
const formatSize = (size: number): string => {
|
|
return size.toLocaleString();
|
|
};
|
|
|
|
const formatTime = (ts: number): string => {
|
|
return new Date(ts).toLocaleTimeString();
|
|
};
|
|
|
|
const parseNumber = (value: unknown, fallback: number): number => {
|
|
if (typeof value === "number" && Number.isFinite(value)) {
|
|
return value;
|
|
}
|
|
|
|
if (typeof value === "string") {
|
|
const parsed = Number(value);
|
|
if (Number.isFinite(parsed)) {
|
|
return parsed;
|
|
}
|
|
}
|
|
|
|
return fallback;
|
|
};
|
|
|
|
const statusLabel = (status: WsStatus, paused: boolean, mode: TapeMode): string => {
|
|
if (paused) {
|
|
return "Paused";
|
|
}
|
|
|
|
if (mode === "replay") {
|
|
return status === "disconnected" ? "Replay Down" : "Replay";
|
|
}
|
|
|
|
switch (status) {
|
|
case "connected":
|
|
return "Live";
|
|
case "connecting":
|
|
return "Connecting";
|
|
case "disconnected":
|
|
default:
|
|
return "Disconnected";
|
|
}
|
|
};
|
|
|
|
type TapeConfig<T> = {
|
|
mode: TapeMode;
|
|
wsPath: string;
|
|
replayPath: string;
|
|
latestPath?: string;
|
|
expectedType: MessageType;
|
|
batchSize?: number;
|
|
pollMs?: number;
|
|
};
|
|
|
|
const useTape = <T extends { ts: number; seq: number }>(
|
|
config: TapeConfig<T>
|
|
): TapeState<T> => {
|
|
const { mode, wsPath, replayPath, expectedType, latestPath } = config;
|
|
const batchSize = config.batchSize ?? 40;
|
|
const pollMs = config.pollMs ?? 1000;
|
|
const [status, setStatus] = useState<WsStatus>("connecting");
|
|
const [items, setItems] = useState<T[]>([]);
|
|
const [lastUpdate, setLastUpdate] = useState<number | null>(null);
|
|
const [replayTime, setReplayTime] = useState<number | null>(null);
|
|
const [replayComplete, setReplayComplete] = useState<boolean>(false);
|
|
const [paused, setPaused] = useState<boolean>(false);
|
|
const [dropped, setDropped] = useState<number>(0);
|
|
const reconnectRef = useRef<number | null>(null);
|
|
const socketRef = useRef<WebSocket | null>(null);
|
|
const cursorRef = useRef<ReplayCursor>({ ts: 0, seq: 0 });
|
|
const replayEndRef = useRef<number | null>(null);
|
|
const replayCompleteRef = useRef<boolean>(false);
|
|
const replaySourceRef = useRef<string | null>(null);
|
|
const emptyPollsRef = useRef<number>(0);
|
|
const pausedRef = useRef(paused);
|
|
|
|
useEffect(() => {
|
|
pausedRef.current = paused;
|
|
}, [paused]);
|
|
|
|
const togglePause = useCallback(() => {
|
|
setPaused((prev) => {
|
|
const next = !prev;
|
|
if (!next) {
|
|
setDropped(0);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setItems([]);
|
|
setLastUpdate(null);
|
|
setReplayTime(null);
|
|
setReplayComplete(false);
|
|
replayCompleteRef.current = false;
|
|
replaySourceRef.current = null;
|
|
emptyPollsRef.current = 0;
|
|
setDropped(0);
|
|
setStatus("connecting");
|
|
cursorRef.current = { ts: 0, seq: 0 };
|
|
}, [mode]);
|
|
|
|
useEffect(() => {
|
|
if (mode !== "replay" || !latestPath) {
|
|
replayEndRef.current = null;
|
|
return;
|
|
}
|
|
|
|
let active = true;
|
|
replayEndRef.current = null;
|
|
setReplayComplete(false);
|
|
replayCompleteRef.current = false;
|
|
|
|
const fetchReplayEnd = async () => {
|
|
try {
|
|
const url = new URL(buildApiUrl(latestPath));
|
|
url.searchParams.set("limit", "1");
|
|
const response = await fetch(url.toString());
|
|
if (!response.ok) {
|
|
throw new Error(`Replay baseline failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = (await response.json()) as { data?: T[] };
|
|
const latest = payload.data?.[0];
|
|
if (active && latest) {
|
|
replayEndRef.current = latest.ts;
|
|
}
|
|
} catch (error) {
|
|
console.warn("Failed to load replay end cursor", error);
|
|
}
|
|
};
|
|
|
|
void fetchReplayEnd();
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [mode, latestPath]);
|
|
|
|
useEffect(() => {
|
|
if (mode !== "live") {
|
|
return;
|
|
}
|
|
|
|
let active = true;
|
|
|
|
const connect = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setStatus("connecting");
|
|
|
|
const socket = new WebSocket(buildWsUrl(wsPath));
|
|
socketRef.current = socket;
|
|
|
|
socket.onopen = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
setStatus("connected");
|
|
};
|
|
|
|
socket.onmessage = (event) => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const message = JSON.parse(event.data) as StreamMessage<T>;
|
|
if (!message || message.type !== expectedType) {
|
|
return;
|
|
}
|
|
|
|
if (pausedRef.current) {
|
|
setDropped((prev) => prev + 1);
|
|
setLastUpdate(Date.now());
|
|
return;
|
|
}
|
|
|
|
setItems((prev) => {
|
|
const next = [message.payload, ...prev];
|
|
return next.slice(0, MAX_ITEMS);
|
|
});
|
|
setLastUpdate(Date.now());
|
|
} catch (error) {
|
|
console.warn("Failed to parse websocket payload", error);
|
|
}
|
|
};
|
|
|
|
socket.onclose = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setStatus("disconnected");
|
|
reconnectRef.current = window.setTimeout(() => {
|
|
connect();
|
|
}, 1000);
|
|
};
|
|
|
|
socket.onerror = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setStatus("disconnected");
|
|
socket.close();
|
|
};
|
|
};
|
|
|
|
connect();
|
|
|
|
return () => {
|
|
active = false;
|
|
if (reconnectRef.current !== null) {
|
|
window.clearTimeout(reconnectRef.current);
|
|
}
|
|
if (socketRef.current) {
|
|
socketRef.current.close();
|
|
}
|
|
};
|
|
}, [mode, wsPath, expectedType]);
|
|
|
|
useEffect(() => {
|
|
if (mode !== "replay") {
|
|
return;
|
|
}
|
|
|
|
let active = true;
|
|
|
|
const poll = async () => {
|
|
if (!active || pausedRef.current) {
|
|
return;
|
|
}
|
|
|
|
if (replayCompleteRef.current) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
let keepPolling = true;
|
|
|
|
while (keepPolling && active && !pausedRef.current) {
|
|
const replayEnd = replayEndRef.current;
|
|
const cursor = cursorRef.current;
|
|
|
|
if (replayEnd !== null && cursor.ts >= replayEnd) {
|
|
replayCompleteRef.current = true;
|
|
setReplayComplete(true);
|
|
setStatus("disconnected");
|
|
return;
|
|
}
|
|
|
|
const url = new URL(buildApiUrl(replayPath));
|
|
url.searchParams.set("after_ts", cursor.ts.toString());
|
|
url.searchParams.set("after_seq", cursor.seq.toString());
|
|
url.searchParams.set("limit", batchSize.toString());
|
|
|
|
const response = await fetch(url.toString());
|
|
if (!response.ok) {
|
|
throw new Error(`Replay request failed with ${response.status}`);
|
|
}
|
|
|
|
const payload = (await response.json()) as ReplayResponse<T>;
|
|
|
|
let sourcePrefix = replaySourceRef.current;
|
|
if (!sourcePrefix) {
|
|
const firstWithTrace = payload.data.find((item) => extractTracePrefix(item));
|
|
if (firstWithTrace) {
|
|
sourcePrefix = extractTracePrefix(firstWithTrace);
|
|
replaySourceRef.current = sourcePrefix ?? null;
|
|
}
|
|
}
|
|
|
|
const filtered = sourcePrefix
|
|
? payload.data.filter((item) => extractTracePrefix(item) === sourcePrefix)
|
|
: payload.data;
|
|
|
|
const hasForeign =
|
|
sourcePrefix &&
|
|
payload.data.some((item) => {
|
|
const prefix = extractTracePrefix(item);
|
|
return prefix !== null && prefix !== sourcePrefix;
|
|
});
|
|
|
|
if (filtered.length > 0) {
|
|
const nextItems = [...filtered].reverse();
|
|
setItems((prev) => {
|
|
const next = [...nextItems, ...prev];
|
|
return next.slice(0, MAX_ITEMS);
|
|
});
|
|
setLastUpdate(Date.now());
|
|
const last = filtered.at(-1);
|
|
if (last) {
|
|
setReplayTime(last.ts);
|
|
if (replayEnd !== null && last.ts >= replayEnd) {
|
|
cursorRef.current = { ts: last.ts, seq: last.seq };
|
|
replayCompleteRef.current = true;
|
|
setReplayComplete(true);
|
|
setStatus("disconnected");
|
|
return;
|
|
}
|
|
}
|
|
emptyPollsRef.current = 0;
|
|
} else if (sourcePrefix) {
|
|
emptyPollsRef.current += 1;
|
|
}
|
|
|
|
if (payload.next) {
|
|
cursorRef.current = payload.next;
|
|
}
|
|
|
|
setStatus("connected");
|
|
keepPolling = filtered.length === batchSize;
|
|
|
|
if (keepPolling) {
|
|
await new Promise((resolve) => setTimeout(resolve, 0));
|
|
}
|
|
|
|
if (hasForeign) {
|
|
replayCompleteRef.current = true;
|
|
setReplayComplete(true);
|
|
setStatus("disconnected");
|
|
return;
|
|
}
|
|
|
|
if (sourcePrefix && emptyPollsRef.current >= 3) {
|
|
replayCompleteRef.current = true;
|
|
setReplayComplete(true);
|
|
setStatus("disconnected");
|
|
return;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.warn("Replay poll failed", error);
|
|
setStatus("disconnected");
|
|
}
|
|
};
|
|
|
|
void poll();
|
|
const interval = window.setInterval(poll, pollMs);
|
|
|
|
return () => {
|
|
active = false;
|
|
window.clearInterval(interval);
|
|
};
|
|
}, [mode, replayPath, batchSize, pollMs]);
|
|
|
|
return {
|
|
status,
|
|
items,
|
|
lastUpdate,
|
|
replayTime,
|
|
replayComplete,
|
|
paused,
|
|
dropped,
|
|
togglePause
|
|
};
|
|
};
|
|
|
|
const useFlowStream = (enabled: boolean): TapeState<FlowPacket> => {
|
|
const [status, setStatus] = useState<WsStatus>(enabled ? "connecting" : "disconnected");
|
|
const [items, setItems] = useState<FlowPacket[]>([]);
|
|
const [lastUpdate, setLastUpdate] = useState<number | null>(null);
|
|
const [replayTime] = useState<number | null>(null);
|
|
const [replayComplete] = useState<boolean>(false);
|
|
const [paused, setPaused] = useState<boolean>(false);
|
|
const [dropped, setDropped] = useState<number>(0);
|
|
const reconnectRef = useRef<number | null>(null);
|
|
const socketRef = useRef<WebSocket | null>(null);
|
|
const pausedRef = useRef(paused);
|
|
|
|
useEffect(() => {
|
|
pausedRef.current = paused;
|
|
}, [paused]);
|
|
|
|
const togglePause = useCallback(() => {
|
|
setPaused((prev) => {
|
|
const next = !prev;
|
|
if (!next) {
|
|
setDropped(0);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!enabled) {
|
|
setStatus("disconnected");
|
|
return;
|
|
}
|
|
|
|
let active = true;
|
|
|
|
const connect = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setStatus("connecting");
|
|
|
|
const socket = new WebSocket(buildWsUrl("/ws/flow"));
|
|
socketRef.current = socket;
|
|
|
|
socket.onopen = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
setStatus("connected");
|
|
};
|
|
|
|
socket.onmessage = (event) => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const message = JSON.parse(event.data) as StreamMessage<FlowPacket>;
|
|
if (!message || message.type !== "flow-packet") {
|
|
return;
|
|
}
|
|
|
|
if (pausedRef.current) {
|
|
setDropped((prev) => prev + 1);
|
|
setLastUpdate(Date.now());
|
|
return;
|
|
}
|
|
|
|
setItems((prev) => {
|
|
const next = [message.payload, ...prev];
|
|
return next.slice(0, MAX_ITEMS);
|
|
});
|
|
setLastUpdate(Date.now());
|
|
} catch (error) {
|
|
console.warn("Failed to parse flow packet", error);
|
|
}
|
|
};
|
|
|
|
socket.onclose = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setStatus("disconnected");
|
|
reconnectRef.current = window.setTimeout(() => {
|
|
connect();
|
|
}, 1000);
|
|
};
|
|
|
|
socket.onerror = () => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
setStatus("disconnected");
|
|
socket.close();
|
|
};
|
|
};
|
|
|
|
connect();
|
|
|
|
return () => {
|
|
active = false;
|
|
if (reconnectRef.current !== null) {
|
|
window.clearTimeout(reconnectRef.current);
|
|
}
|
|
if (socketRef.current) {
|
|
socketRef.current.close();
|
|
}
|
|
};
|
|
}, [enabled]);
|
|
|
|
return {
|
|
status,
|
|
items,
|
|
lastUpdate,
|
|
replayTime,
|
|
replayComplete,
|
|
paused,
|
|
dropped,
|
|
togglePause
|
|
};
|
|
};
|
|
|
|
type TapeStatusProps = {
|
|
status: WsStatus;
|
|
lastUpdate: number | null;
|
|
replayTime: number | null;
|
|
replayComplete: boolean;
|
|
paused: boolean;
|
|
dropped: number;
|
|
mode: TapeMode;
|
|
onTogglePause: () => void;
|
|
};
|
|
|
|
const TapeStatus = ({
|
|
status,
|
|
lastUpdate,
|
|
replayTime,
|
|
replayComplete,
|
|
paused,
|
|
dropped,
|
|
mode,
|
|
onTogglePause
|
|
}: TapeStatusProps) => {
|
|
const replayClass = mode === "replay" ? "status-replay" : "";
|
|
const pausedClass = paused ? "status-paused" : "";
|
|
const label = replayComplete ? "Replay Complete" : statusLabel(status, paused, mode);
|
|
|
|
return (
|
|
<div className={`status status-${status} status-compact ${replayClass} ${pausedClass}`.trim()}>
|
|
<span className="status-dot" />
|
|
<span>{label}</span>
|
|
{lastUpdate ? (
|
|
<span className="timestamp">Updated {formatTime(lastUpdate)}</span>
|
|
) : (
|
|
<span className="timestamp">Waiting for data</span>
|
|
)}
|
|
{paused && dropped > 0 ? (
|
|
<span className="timestamp">{dropped} new while paused</span>
|
|
) : null}
|
|
{mode === "replay" ? (
|
|
<span className="timestamp">
|
|
Replay time {replayTime ? formatTime(replayTime) : "—"}
|
|
</span>
|
|
) : null}
|
|
<button className="pause-button" type="button" onClick={onTogglePause}>
|
|
{paused ? "Resume" : "Pause"}
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const formatFlowMetric = (value: number, suffix?: string): string => {
|
|
if (suffix) {
|
|
return `${value}${suffix}`;
|
|
}
|
|
|
|
return value.toLocaleString();
|
|
};
|
|
|
|
export default function HomePage() {
|
|
const [mode, setMode] = useState<TapeMode>("live");
|
|
|
|
const options = useTape<OptionPrint>({
|
|
mode,
|
|
wsPath: "/ws/options",
|
|
replayPath: "/replay/options",
|
|
latestPath: "/prints/options",
|
|
expectedType: "option-print",
|
|
batchSize: mode === "replay" ? 120 : undefined,
|
|
pollMs: mode === "replay" ? 200 : undefined
|
|
});
|
|
|
|
const equities = useTape<EquityPrint>({
|
|
mode,
|
|
wsPath: "/ws/equities",
|
|
replayPath: "/replay/equities",
|
|
latestPath: "/prints/equities",
|
|
expectedType: "equity-print",
|
|
batchSize: mode === "replay" ? 120 : undefined,
|
|
pollMs: mode === "replay" ? 200 : undefined
|
|
});
|
|
|
|
const flow = useFlowStream(mode === "live");
|
|
|
|
const lastSeen = useMemo(() => {
|
|
return [options.lastUpdate, equities.lastUpdate, flow.lastUpdate]
|
|
.filter((value): value is number => value !== null)
|
|
.sort((a, b) => b - a)[0] ?? null;
|
|
}, [options.lastUpdate, equities.lastUpdate, flow.lastUpdate]);
|
|
|
|
const toggleMode = () => {
|
|
setMode((prev) => (prev === "live" ? "replay" : "live"));
|
|
};
|
|
|
|
return (
|
|
<main className="dashboard">
|
|
<header className="header">
|
|
<div>
|
|
<p className="eyebrow">Realtime flow workspace</p>
|
|
<h1>Islandflow</h1>
|
|
<p className="subtitle">
|
|
Options + equities streaming over WebSocket or replayed from ClickHouse.
|
|
</p>
|
|
</div>
|
|
<div className="summary">
|
|
<span className="summary-title">Last update</span>
|
|
<span className="summary-value">
|
|
{lastSeen ? formatTime(lastSeen) : "Waiting for data"}
|
|
</span>
|
|
<button className="mode-button" type="button" onClick={toggleMode}>
|
|
Switch to {mode === "live" ? "Replay" : "Live"}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="cards">
|
|
<section className="card">
|
|
<div className="card-header">
|
|
<div>
|
|
<h2>Options Tape</h2>
|
|
<p className="card-subtitle">Newest prints first (max {MAX_ITEMS}).</p>
|
|
</div>
|
|
<TapeStatus
|
|
status={options.status}
|
|
lastUpdate={options.lastUpdate}
|
|
replayTime={options.replayTime}
|
|
replayComplete={options.replayComplete}
|
|
paused={options.paused}
|
|
dropped={options.dropped}
|
|
mode={mode}
|
|
onTogglePause={options.togglePause}
|
|
/>
|
|
</div>
|
|
|
|
<div className="list">
|
|
{options.items.length === 0 ? (
|
|
<div className="empty">
|
|
{mode === "live"
|
|
? "No option prints yet. Start ingest-options."
|
|
: "Replay queue empty. Ensure ClickHouse has data."}
|
|
</div>
|
|
) : (
|
|
options.items.map((print) => (
|
|
<div className="row" key={`${print.trace_id}-${print.seq}`}>
|
|
<div>
|
|
<div className="contract">{print.option_contract_id}</div>
|
|
<div className="meta">
|
|
<span>${formatPrice(print.price)}</span>
|
|
<span>{formatSize(print.size)}x</span>
|
|
<span>{print.exchange}</span>
|
|
{print.conditions?.length ? (
|
|
<span>{print.conditions.join(", ")}</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="time">{formatTime(print.ts)}</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="card">
|
|
<div className="card-header">
|
|
<div>
|
|
<h2>Equities Tape</h2>
|
|
<p className="card-subtitle">Off-exchange flag highlighted.</p>
|
|
</div>
|
|
<TapeStatus
|
|
status={equities.status}
|
|
lastUpdate={equities.lastUpdate}
|
|
replayTime={equities.replayTime}
|
|
replayComplete={equities.replayComplete}
|
|
paused={equities.paused}
|
|
dropped={equities.dropped}
|
|
mode={mode}
|
|
onTogglePause={equities.togglePause}
|
|
/>
|
|
</div>
|
|
|
|
<div className="list">
|
|
{equities.items.length === 0 ? (
|
|
<div className="empty">
|
|
{mode === "live"
|
|
? "No equity prints yet. Start ingest-equities."
|
|
: "Replay queue empty. Ensure ClickHouse has data."}
|
|
</div>
|
|
) : (
|
|
equities.items.map((print) => (
|
|
<div className="row" key={`${print.trace_id}-${print.seq}`}>
|
|
<div>
|
|
<div className="contract">{print.underlying_id}</div>
|
|
<div className="meta">
|
|
<span>${formatPrice(print.price)}</span>
|
|
<span>{formatSize(print.size)}x</span>
|
|
<span>{print.exchange}</span>
|
|
{print.offExchangeFlag ? (
|
|
<span className="flag">Off-Ex</span>
|
|
) : (
|
|
<span className="flag flag-muted">Lit</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="time">{formatTime(print.ts)}</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="card">
|
|
<div className="card-header">
|
|
<div>
|
|
<h2>Flow Packets</h2>
|
|
<p className="card-subtitle">Deterministic clusters (live only).</p>
|
|
</div>
|
|
<TapeStatus
|
|
status={flow.status}
|
|
lastUpdate={flow.lastUpdate}
|
|
replayTime={flow.replayTime}
|
|
replayComplete={flow.replayComplete}
|
|
paused={flow.paused}
|
|
dropped={flow.dropped}
|
|
mode={mode}
|
|
onTogglePause={flow.togglePause}
|
|
/>
|
|
</div>
|
|
|
|
<div className="list">
|
|
{mode !== "live" ? (
|
|
<div className="empty">Flow packets are live-only in this build.</div>
|
|
) : flow.items.length === 0 ? (
|
|
<div className="empty">No flow packets yet. Start compute.</div>
|
|
) : (
|
|
flow.items.map((packet) => {
|
|
const features = packet.features ?? {};
|
|
const contract = String(features.option_contract_id ?? packet.id ?? "unknown");
|
|
const count = parseNumber(features.count, packet.members.length);
|
|
const totalSize = parseNumber(features.total_size, 0);
|
|
const totalPremium = parseNumber(features.total_premium, 0);
|
|
const startTs = parseNumber(features.start_ts, packet.source_ts);
|
|
const endTs = parseNumber(features.end_ts, startTs);
|
|
const windowMs = parseNumber(features.window_ms, 0);
|
|
|
|
return (
|
|
<div className="row" key={packet.id}>
|
|
<div>
|
|
<div className="contract">{contract}</div>
|
|
<div className="meta flow-meta">
|
|
<span>{formatFlowMetric(count)} prints</span>
|
|
<span>{formatFlowMetric(totalSize)} size</span>
|
|
<span>${formatPrice(totalPremium)}</span>
|
|
{windowMs > 0 ? (
|
|
<span>{formatFlowMetric(windowMs, "ms")}</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="time">
|
|
{formatTime(startTs)} → {formatTime(endTs)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|