Fix live tape freshness and filter UX
This commit is contained in:
parent
27b0a399e6
commit
75fc6f9373
8 changed files with 1087 additions and 159 deletions
|
|
@ -220,6 +220,13 @@ input {
|
|||
animation: pulse 1.3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.feed-status-stale .feed-status-dot,
|
||||
.status-stale .status-dot,
|
||||
.chart-status-stale .chart-dot {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.18);
|
||||
}
|
||||
|
||||
.feed-status-disconnected .feed-status-dot,
|
||||
.status-disconnected .status-dot,
|
||||
.chart-status-disconnected .chart-dot {
|
||||
|
|
@ -417,55 +424,144 @@ h3 {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flow-filter-panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 10px 16px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
|
||||
.flow-filter-popover {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flow-filter-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.flow-filter-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flow-filter-label {
|
||||
color: var(--muted);
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.08em;
|
||||
.flow-filter-trigger.is-active {
|
||||
border-color: rgba(245, 166, 35, 0.55);
|
||||
background: linear-gradient(180deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.07));
|
||||
}
|
||||
|
||||
.flow-filter-badge {
|
||||
min-width: 22px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(245, 166, 35, 0.22);
|
||||
color: #ffe4b3;
|
||||
font-family: var(--font-mono), monospace;
|
||||
font-size: 0.7rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flow-filter-popover-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
width: min(420px, calc(100vw - 72px));
|
||||
max-height: min(70vh, 560px);
|
||||
overflow: auto;
|
||||
border: 1px solid rgba(245, 166, 35, 0.24);
|
||||
border-radius: 18px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
|
||||
rgba(11, 16, 22, 0.92);
|
||||
box-shadow:
|
||||
0 24px 60px rgba(0, 0, 0, 0.42),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.flow-filter-popover-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 16px 16px 14px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.flow-filter-popover-title {
|
||||
font-family: var(--font-display), sans-serif;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.flow-filter-popover-copy {
|
||||
margin-top: 6px;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.flow-filter-popover-body {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.flow-filter-section {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.flow-filter-section-title {
|
||||
color: #ffd89a;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.flow-filter-checkbox-grid,
|
||||
.flow-filter-chip-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.flow-filter-checkbox-grid-wide {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.flow-filter-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.84rem;
|
||||
gap: 8px;
|
||||
min-height: 42px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
font-size: 0.82rem;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.flow-filter-check input {
|
||||
margin: 0;
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text);
|
||||
padding: 6px 10px;
|
||||
min-height: 42px;
|
||||
padding: 8px 12px;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.filter-chip.is-active {
|
||||
border-color: rgba(127, 234, 170, 0.6);
|
||||
background: rgba(127, 234, 170, 0.14);
|
||||
color: var(--accent-strong);
|
||||
border-color: rgba(245, 166, 35, 0.45);
|
||||
background: linear-gradient(180deg, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.07));
|
||||
color: #ffe4b3;
|
||||
}
|
||||
|
||||
.overview-strip,
|
||||
|
|
@ -1099,6 +1195,10 @@ h3 {
|
|||
.terminal-topbar-controls {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flow-filter-popover-panel {
|
||||
width: min(420px, calc(100vw - 56px));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
|
|
@ -1144,6 +1244,34 @@ h3 {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flow-filter-popover {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flow-filter-trigger {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.flow-filter-popover-panel {
|
||||
position: fixed;
|
||||
top: calc(var(--topbar-height) + 26px);
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
width: auto;
|
||||
max-height: min(68vh, 560px);
|
||||
}
|
||||
|
||||
.flow-filter-checkbox-grid,
|
||||
.flow-filter-checkbox-grid-wide,
|
||||
.flow-filter-chip-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
|
|
|||
78
apps/web/app/terminal.test.ts
Normal file
78
apps/web/app/terminal.test.ts
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { describe, expect, it } from "bun:test";
|
||||
import {
|
||||
buildDefaultFlowFilters,
|
||||
countActiveFlowFilterGroups,
|
||||
flushPausableTapeData,
|
||||
getLiveFeedStatus,
|
||||
nextFlowFilterPopoverState,
|
||||
reducePausableTapeData,
|
||||
toggleFilterValue
|
||||
} from "./terminal";
|
||||
|
||||
const makeItem = (traceId: string, seq: number, ts: number) => ({
|
||||
trace_id: traceId,
|
||||
seq,
|
||||
ts
|
||||
});
|
||||
|
||||
describe("live tape pausable helpers", () => {
|
||||
it("queues new items while paused and flushes them on resume", () => {
|
||||
let state = reducePausableTapeData(
|
||||
{ visible: [], queued: [], seenKeys: new Set<string>(), dropped: 0 },
|
||||
[makeItem("a", 1, 100), makeItem("b", 2, 200)],
|
||||
false
|
||||
);
|
||||
|
||||
expect(state.visible.map((item) => item.trace_id)).toEqual(["b", "a"]);
|
||||
expect(state.dropped).toBe(0);
|
||||
|
||||
state = reducePausableTapeData(state, [makeItem("c", 3, 300)], true);
|
||||
expect(state.visible.map((item) => item.trace_id)).toEqual(["b", "a"]);
|
||||
expect(state.queued.map((item) => item.trace_id)).toEqual(["c"]);
|
||||
expect(state.dropped).toBe(1);
|
||||
|
||||
state = flushPausableTapeData(state);
|
||||
expect(state.visible.map((item) => item.trace_id)).toEqual(["c", "b", "a"]);
|
||||
expect(state.queued).toHaveLength(0);
|
||||
expect(state.dropped).toBe(0);
|
||||
});
|
||||
|
||||
it("does not duplicate unchanged arrays", () => {
|
||||
let state = reducePausableTapeData(
|
||||
{ visible: [], queued: [], seenKeys: new Set<string>(), dropped: 0 },
|
||||
[makeItem("a", 1, 100)],
|
||||
false
|
||||
);
|
||||
|
||||
state = reducePausableTapeData(state, [makeItem("a", 1, 100)], false);
|
||||
expect(state.visible.map((item) => item.trace_id)).toEqual(["a"]);
|
||||
});
|
||||
|
||||
it("marks connected feeds stale once their freshest event ages past the threshold", () => {
|
||||
expect(getLiveFeedStatus("connected", 1000, 500, 1400)).toBe("connected");
|
||||
expect(getLiveFeedStatus("connected", 1000, 500, 1601)).toBe("stale");
|
||||
expect(getLiveFeedStatus("disconnected", 1000, 500, 1601)).toBe("disconnected");
|
||||
});
|
||||
});
|
||||
|
||||
describe("flow filter popup helpers", () => {
|
||||
it("opens and closes the popup via toggle and dismiss actions", () => {
|
||||
expect(nextFlowFilterPopoverState(false, "toggle")).toBe(true);
|
||||
expect(nextFlowFilterPopoverState(true, "toggle")).toBe(false);
|
||||
expect(nextFlowFilterPopoverState(true, "dismiss")).toBe(false);
|
||||
});
|
||||
|
||||
it("tracks active filter groups and resets to defaults", () => {
|
||||
const defaults = buildDefaultFlowFilters();
|
||||
const next = {
|
||||
...defaults,
|
||||
securityTypes: toggleFilterValue(defaults.securityTypes, "etf", true),
|
||||
nbboSides: toggleFilterValue(defaults.nbboSides, "B", true),
|
||||
minNotional: 25_000
|
||||
};
|
||||
|
||||
expect(countActiveFlowFilterGroups(defaults)).toBe(0);
|
||||
expect(countActiveFlowFilterGroups(next)).toBe(3);
|
||||
expect(buildDefaultFlowFilters()).toEqual(defaults);
|
||||
});
|
||||
});
|
||||
|
|
@ -11,7 +11,9 @@ import {
|
|||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
type ReactNode
|
||||
type Dispatch,
|
||||
type ReactNode,
|
||||
type SetStateAction
|
||||
} from "react";
|
||||
import type {
|
||||
AlertEvent,
|
||||
|
|
@ -55,6 +57,10 @@ const parseBoundedInt = (
|
|||
};
|
||||
|
||||
const LIVE_HOT_WINDOW = parseBoundedInt(process.env.NEXT_PUBLIC_LIVE_HOT_WINDOW, 2000, 100, 100000);
|
||||
const LIVE_OPTIONS_STALE_MS = 15_000;
|
||||
const LIVE_NBBO_STALE_MS = 15_000;
|
||||
const LIVE_EQUITIES_STALE_MS = 15_000;
|
||||
const LIVE_FLOW_STALE_MS = 30_000;
|
||||
const PINNED_EVIDENCE_TTL_MS = parseBoundedInt(
|
||||
process.env.NEXT_PUBLIC_PINNED_EVIDENCE_TTL_MS,
|
||||
20 * 60 * 1000,
|
||||
|
|
@ -192,7 +198,7 @@ const readErrorDetail = async (response: Response): Promise<string> => {
|
|||
}
|
||||
};
|
||||
|
||||
type WsStatus = "connecting" | "connected" | "disconnected";
|
||||
type WsStatus = "connecting" | "connected" | "disconnected" | "stale";
|
||||
|
||||
type TapeMode = "live" | "replay";
|
||||
|
||||
|
|
@ -352,6 +358,103 @@ const mergeNewest = <T extends SortableItem>(
|
|||
return deduped.slice(0, safeLimit);
|
||||
};
|
||||
|
||||
const getTapeItemKey = (item: SortableItem): string => {
|
||||
return buildItemKey(item) ?? `${extractSortTs(item)}:${extractSortSeq(item)}`;
|
||||
};
|
||||
|
||||
type PausableTapeData<T> = {
|
||||
visible: T[];
|
||||
queued: T[];
|
||||
seenKeys: Set<string>;
|
||||
dropped: number;
|
||||
};
|
||||
|
||||
export const reducePausableTapeData = <T extends SortableItem>(
|
||||
current: PausableTapeData<T>,
|
||||
incoming: T[],
|
||||
paused: boolean
|
||||
): PausableTapeData<T> => {
|
||||
if (incoming.length === 0) {
|
||||
return current;
|
||||
}
|
||||
|
||||
const nextSeenKeys = new Set(current.seenKeys);
|
||||
const unseen: T[] = [];
|
||||
|
||||
for (const item of incoming) {
|
||||
const key = getTapeItemKey(item);
|
||||
if (nextSeenKeys.has(key)) {
|
||||
continue;
|
||||
}
|
||||
nextSeenKeys.add(key);
|
||||
unseen.push(item);
|
||||
}
|
||||
|
||||
if (unseen.length === 0) {
|
||||
return current;
|
||||
}
|
||||
|
||||
if (paused) {
|
||||
return {
|
||||
visible: current.visible,
|
||||
queued: mergeNewest(unseen, current.queued, LIVE_HOT_WINDOW, (evicted) =>
|
||||
incrementRetentionMetric("hotWindowEvictions", evicted)
|
||||
),
|
||||
seenKeys: nextSeenKeys,
|
||||
dropped: current.dropped + unseen.length
|
||||
};
|
||||
}
|
||||
|
||||
const nextBatch = current.queued.length > 0 ? [...current.queued, ...unseen] : unseen;
|
||||
return {
|
||||
visible: mergeNewest(nextBatch, current.visible, LIVE_HOT_WINDOW, (evicted) =>
|
||||
incrementRetentionMetric("hotWindowEvictions", evicted)
|
||||
),
|
||||
queued: [],
|
||||
seenKeys: nextSeenKeys,
|
||||
dropped: 0
|
||||
};
|
||||
};
|
||||
|
||||
export const flushPausableTapeData = <T extends SortableItem>(
|
||||
current: PausableTapeData<T>
|
||||
): PausableTapeData<T> => {
|
||||
if (current.queued.length === 0) {
|
||||
return current.dropped === 0 ? current : { ...current, dropped: 0 };
|
||||
}
|
||||
|
||||
return {
|
||||
visible: mergeNewest(current.queued, current.visible, LIVE_HOT_WINDOW, (evicted) =>
|
||||
incrementRetentionMetric("hotWindowEvictions", evicted)
|
||||
),
|
||||
queued: [],
|
||||
seenKeys: current.seenKeys,
|
||||
dropped: 0
|
||||
};
|
||||
};
|
||||
|
||||
const EMPTY_PAUSABLE_TAPE = {
|
||||
visible: [],
|
||||
queued: [],
|
||||
seenKeys: new Set<string>(),
|
||||
dropped: 0
|
||||
};
|
||||
|
||||
export const getLiveFeedStatus = (
|
||||
sourceStatus: WsStatus,
|
||||
freshestTs: number | null,
|
||||
thresholdMs: number,
|
||||
now = Date.now()
|
||||
): WsStatus => {
|
||||
if (sourceStatus !== "connected") {
|
||||
return sourceStatus;
|
||||
}
|
||||
if (freshestTs === null) {
|
||||
return "connected";
|
||||
}
|
||||
return isFreshLiveItem(freshestTs, thresholdMs, now) ? "connected" : "stale";
|
||||
};
|
||||
|
||||
type TapeState<T> = {
|
||||
status: WsStatus;
|
||||
items: T[];
|
||||
|
|
@ -628,7 +731,7 @@ const DEFAULT_FLOW_SIDES: OptionNbboSide[] = ["AA", "A", "MID"];
|
|||
const DEFAULT_FLOW_OPTION_TYPES: OptionType[] = ["call", "put"];
|
||||
const DEFAULT_FLOW_SECURITY_TYPES: OptionSecurityType[] = ["stock"];
|
||||
|
||||
const buildDefaultFlowFilters = (): OptionFlowFilters => ({
|
||||
export const buildDefaultFlowFilters = (): OptionFlowFilters => ({
|
||||
view: "signal",
|
||||
securityTypes: DEFAULT_FLOW_SECURITY_TYPES,
|
||||
nbboSides: DEFAULT_FLOW_SIDES,
|
||||
|
|
@ -637,11 +740,53 @@ const buildDefaultFlowFilters = (): OptionFlowFilters => ({
|
|||
FLOW_FILTER_PRESET === "all"
|
||||
? undefined
|
||||
: FLOW_FILTER_PRESET === "balanced"
|
||||
? 5_000
|
||||
: undefined
|
||||
? 5_000
|
||||
: undefined
|
||||
});
|
||||
|
||||
const toggleFilterValue = <T extends string>(values: T[] | undefined, value: T, enabled: boolean): T[] => {
|
||||
const sameFilterValues = <T extends string>(left: T[] | undefined, right: T[] | undefined): boolean => {
|
||||
const leftValues = [...(left ?? [])].sort();
|
||||
const rightValues = [...(right ?? [])].sort();
|
||||
if (leftValues.length !== rightValues.length) {
|
||||
return false;
|
||||
}
|
||||
return leftValues.every((value, index) => value === rightValues[index]);
|
||||
};
|
||||
|
||||
export const countActiveFlowFilterGroups = (filters: OptionFlowFilters): number => {
|
||||
const defaults = buildDefaultFlowFilters();
|
||||
let count = 0;
|
||||
|
||||
if (!sameFilterValues(filters.securityTypes, defaults.securityTypes)) {
|
||||
count += 1;
|
||||
}
|
||||
if (!sameFilterValues(filters.nbboSides, defaults.nbboSides)) {
|
||||
count += 1;
|
||||
}
|
||||
if (!sameFilterValues(filters.optionTypes, defaults.optionTypes)) {
|
||||
count += 1;
|
||||
}
|
||||
if ((filters.minNotional ?? undefined) !== (defaults.minNotional ?? undefined)) {
|
||||
count += 1;
|
||||
}
|
||||
|
||||
return count;
|
||||
};
|
||||
|
||||
const isFreshLiveItem = (ts: number, thresholdMs: number, now = Date.now()): boolean => now - ts <= thresholdMs;
|
||||
|
||||
const filterFreshLiveItems = <T extends SortableItem>(
|
||||
items: T[],
|
||||
thresholdMs: number,
|
||||
getItemTs: (item: T) => number = extractSortTs,
|
||||
now = Date.now()
|
||||
): T[] => items.filter((item) => isFreshLiveItem(getItemTs(item), thresholdMs, now));
|
||||
|
||||
export const toggleFilterValue = <T extends string>(
|
||||
values: T[] | undefined,
|
||||
value: T,
|
||||
enabled: boolean
|
||||
): T[] => {
|
||||
const current = new Set(values ?? []);
|
||||
if (enabled) {
|
||||
current.add(value);
|
||||
|
|
@ -651,6 +796,13 @@ const toggleFilterValue = <T extends string>(values: T[] | undefined, value: T,
|
|||
return [...current].sort();
|
||||
};
|
||||
|
||||
export const nextFlowFilterPopoverState = (
|
||||
current: boolean,
|
||||
action: "toggle" | "dismiss"
|
||||
): boolean => {
|
||||
return action === "toggle" ? !current : false;
|
||||
};
|
||||
|
||||
const classifyNbboSide = (price: number, quote: OptionNBBO | null | undefined): NbboSide | null => {
|
||||
if (!quote || !Number.isFinite(price)) {
|
||||
return null;
|
||||
|
|
@ -949,6 +1101,8 @@ const statusLabel = (status: WsStatus, paused: boolean, mode: TapeMode): string
|
|||
switch (status) {
|
||||
case "connected":
|
||||
return "Live";
|
||||
case "stale":
|
||||
return "Live feed behind";
|
||||
case "connecting":
|
||||
return "Connecting";
|
||||
case "disconnected":
|
||||
|
|
@ -1389,6 +1543,115 @@ const toStaticTapeState = <T,>(
|
|||
togglePause: () => {}
|
||||
});
|
||||
|
||||
type PausableTapeViewConfig<T extends SortableItem & { seq: number }> = {
|
||||
enabled: boolean;
|
||||
sourceStatus: WsStatus;
|
||||
sourceItems: T[];
|
||||
lastUpdate: number | null;
|
||||
freshnessMs: number;
|
||||
onNewItems?: (count: number) => void;
|
||||
captureScroll?: () => void;
|
||||
getItemTs?: (item: T) => number;
|
||||
};
|
||||
|
||||
const usePausableTapeView = <T extends SortableItem & { seq: number }>(
|
||||
config: PausableTapeViewConfig<T>
|
||||
): TapeState<T> => {
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [data, setData] = useState<PausableTapeData<T>>(EMPTY_PAUSABLE_TAPE);
|
||||
const [clock, setClock] = useState(() => Date.now());
|
||||
|
||||
useEffect(() => {
|
||||
const handle = window.setInterval(() => {
|
||||
setClock(Date.now());
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
window.clearInterval(handle);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!config.enabled) {
|
||||
setPaused(false);
|
||||
setData(EMPTY_PAUSABLE_TAPE);
|
||||
return;
|
||||
}
|
||||
|
||||
setData((current) => {
|
||||
const next = reducePausableTapeData(current, config.sourceItems, paused);
|
||||
if (next === current) {
|
||||
return current;
|
||||
}
|
||||
|
||||
const unseenCount = next.seenKeys.size - current.seenKeys.size;
|
||||
if (!paused && unseenCount > 0) {
|
||||
config.onNewItems?.(unseenCount);
|
||||
config.captureScroll?.();
|
||||
}
|
||||
|
||||
return next;
|
||||
});
|
||||
}, [config.enabled, config.sourceItems, config.onNewItems, config.captureScroll, paused]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!config.enabled || paused) {
|
||||
return;
|
||||
}
|
||||
|
||||
setData((current) => {
|
||||
const next = flushPausableTapeData(current);
|
||||
if (next === current) {
|
||||
return current;
|
||||
}
|
||||
|
||||
if (current.queued.length > 0) {
|
||||
config.onNewItems?.(current.queued.length);
|
||||
config.captureScroll?.();
|
||||
}
|
||||
|
||||
return next;
|
||||
});
|
||||
}, [config.enabled, config.onNewItems, config.captureScroll, paused]);
|
||||
|
||||
const togglePause = useCallback(() => {
|
||||
setPaused((current) => !current);
|
||||
}, []);
|
||||
|
||||
const getItemTs = config.getItemTs ?? extractSortTs;
|
||||
const freshestTs = useMemo(() => {
|
||||
if (config.sourceItems.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let newest = Number.NEGATIVE_INFINITY;
|
||||
for (const item of config.sourceItems) {
|
||||
newest = Math.max(newest, getItemTs(item));
|
||||
}
|
||||
|
||||
return Number.isFinite(newest) ? newest : null;
|
||||
}, [config.sourceItems, getItemTs]);
|
||||
|
||||
const status = config.enabled
|
||||
? getLiveFeedStatus(config.sourceStatus, freshestTs, config.freshnessMs, clock)
|
||||
: "disconnected";
|
||||
const items =
|
||||
status === "stale"
|
||||
? []
|
||||
: filterFreshLiveItems(data.visible, config.freshnessMs, getItemTs, clock);
|
||||
|
||||
return {
|
||||
status,
|
||||
items,
|
||||
lastUpdate: status === "stale" ? null : config.lastUpdate,
|
||||
replayTime: null,
|
||||
replayComplete: false,
|
||||
paused,
|
||||
dropped: data.dropped,
|
||||
togglePause
|
||||
};
|
||||
};
|
||||
|
||||
const useLiveStream = <T extends SortableItem>(
|
||||
config: {
|
||||
enabled: boolean;
|
||||
|
|
@ -3286,22 +3549,44 @@ const useTerminalState = () => {
|
|||
getReplayKey: disableReplayGrouping
|
||||
});
|
||||
|
||||
const optionsFeed =
|
||||
mode === "live"
|
||||
? toStaticTapeState(liveSession.status, liveSession.options, liveSession.lastUpdate)
|
||||
: options;
|
||||
const liveOptions = usePausableTapeView<OptionPrint>({
|
||||
enabled: mode === "live",
|
||||
sourceStatus: liveSession.status,
|
||||
sourceItems: liveSession.options,
|
||||
lastUpdate: liveSession.lastUpdate,
|
||||
freshnessMs: LIVE_OPTIONS_STALE_MS,
|
||||
captureScroll: optionsAnchor.capture,
|
||||
onNewItems: optionsScroll.onNewItems
|
||||
});
|
||||
const liveEquities = usePausableTapeView<EquityPrint>({
|
||||
enabled: mode === "live",
|
||||
sourceStatus: liveSession.status,
|
||||
sourceItems: liveSession.equities,
|
||||
lastUpdate: liveSession.lastUpdate,
|
||||
freshnessMs: LIVE_EQUITIES_STALE_MS,
|
||||
captureScroll: equitiesAnchor.capture,
|
||||
onNewItems: equitiesScroll.onNewItems
|
||||
});
|
||||
const liveFlow = usePausableTapeView<FlowPacket>({
|
||||
enabled: mode === "live",
|
||||
sourceStatus: liveSession.status,
|
||||
sourceItems: liveSession.flow,
|
||||
lastUpdate: liveSession.lastUpdate,
|
||||
freshnessMs: LIVE_FLOW_STALE_MS,
|
||||
captureScroll: flowAnchor.capture,
|
||||
onNewItems: flowScroll.onNewItems,
|
||||
getItemTs: (item) => item.source_ts
|
||||
});
|
||||
|
||||
const optionsFeed = mode === "live" ? liveOptions : options;
|
||||
const nbboFeed =
|
||||
mode === "live" ? toStaticTapeState(liveSession.status, liveSession.nbbo, liveSession.lastUpdate) : nbbo;
|
||||
const equitiesFeed =
|
||||
mode === "live"
|
||||
? toStaticTapeState(liveSession.status, liveSession.equities, liveSession.lastUpdate)
|
||||
: equities;
|
||||
const equitiesFeed = mode === "live" ? liveEquities : equities;
|
||||
const equityJoinsFeed =
|
||||
mode === "live"
|
||||
? toStaticTapeState(liveSession.status, liveSession.equityJoins, liveSession.lastUpdate)
|
||||
: equityJoins;
|
||||
const flowFeed =
|
||||
mode === "live" ? toStaticTapeState(liveSession.status, liveSession.flow, liveSession.lastUpdate) : flow;
|
||||
const flowFeed = mode === "live" ? liveFlow : flow;
|
||||
const alertsFeed =
|
||||
mode === "live" ? toStaticTapeState(liveSession.status, liveSession.alerts, liveSession.lastUpdate) : alerts;
|
||||
const classifierHitsFeed =
|
||||
|
|
@ -4159,101 +4444,196 @@ const PageFrame = ({ title, actions, children }: PageFrameProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
const FlowFilterControls = () => {
|
||||
const state = useTerminal();
|
||||
const filters = state.flowFilters;
|
||||
type FlowFilterPopoverProps = {
|
||||
filters: OptionFlowFilters;
|
||||
onChange: Dispatch<SetStateAction<OptionFlowFilters>>;
|
||||
};
|
||||
|
||||
const FlowFilterSection = ({
|
||||
title,
|
||||
children
|
||||
}: {
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<section className="flow-filter-section">
|
||||
<div className="flow-filter-section-title">{title}</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export const FlowFilterPopover = ({ filters, onChange }: FlowFilterPopoverProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||
const activeCount = countActiveFlowFilterGroups(filters);
|
||||
|
||||
const toggleSecurity = (value: OptionSecurityType, enabled: boolean) => {
|
||||
state.setFlowFilters((prev) => ({
|
||||
onChange((prev) => ({
|
||||
...prev,
|
||||
securityTypes: toggleFilterValue(prev.securityTypes, value, enabled)
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleSide = (value: OptionNbboSide, enabled: boolean) => {
|
||||
state.setFlowFilters((prev) => ({
|
||||
onChange((prev) => ({
|
||||
...prev,
|
||||
nbboSides: toggleFilterValue(prev.nbboSides, value, enabled)
|
||||
}));
|
||||
};
|
||||
|
||||
const toggleOptionType = (value: OptionType, enabled: boolean) => {
|
||||
state.setFlowFilters((prev) => ({
|
||||
onChange((prev) => ({
|
||||
...prev,
|
||||
optionTypes: toggleFilterValue(prev.optionTypes, value, enabled)
|
||||
}));
|
||||
};
|
||||
|
||||
const applyMinNotional = (value: number | undefined) => {
|
||||
state.setFlowFilters((prev) => ({
|
||||
onChange((prev) => ({
|
||||
...prev,
|
||||
minNotional: value
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePointerDown = (event: MouseEvent) => {
|
||||
if (!rootRef.current?.contains(event.target as Node)) {
|
||||
setOpen((current) => nextFlowFilterPopoverState(current, "dismiss"));
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === "Escape") {
|
||||
setOpen((current) => nextFlowFilterPopoverState(current, "dismiss"));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handlePointerDown);
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handlePointerDown);
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
return (
|
||||
<div className="flow-filter-panel">
|
||||
<div className="flow-filter-group">
|
||||
<span className="flow-filter-label">Security</span>
|
||||
{(["stock", "etf"] as OptionSecurityType[]).map((value) => (
|
||||
<label className="flow-filter-check" key={value}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(filters.securityTypes ?? []).includes(value)}
|
||||
onChange={(event) => toggleSecurity(value, event.target.checked)}
|
||||
/>
|
||||
<span>{value.toUpperCase()}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="flow-filter-group">
|
||||
<span className="flow-filter-label">Side</span>
|
||||
{(["AA", "A", "MID", "B", "BB"] as OptionNbboSide[]).map((value) => (
|
||||
<label className="flow-filter-check" key={value}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(filters.nbboSides ?? []).includes(value)}
|
||||
onChange={(event) => toggleSide(value, event.target.checked)}
|
||||
/>
|
||||
<span>{value}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="flow-filter-group">
|
||||
<span className="flow-filter-label">Type</span>
|
||||
{(["call", "put"] as OptionType[]).map((value) => (
|
||||
<label className="flow-filter-check" key={value}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(filters.optionTypes ?? []).includes(value)}
|
||||
onChange={(event) => toggleOptionType(value, event.target.checked)}
|
||||
/>
|
||||
<span>{value}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="flow-filter-group">
|
||||
<span className="flow-filter-label">Min Notional</span>
|
||||
{[
|
||||
{ label: "All signal", value: undefined },
|
||||
{ label: ">= 25k", value: 25_000 },
|
||||
{ label: ">= 50k", value: 50_000 },
|
||||
{ label: ">= 100k", value: 100_000 }
|
||||
].map((preset) => (
|
||||
<button
|
||||
className={`filter-chip ${filters.minNotional === preset.value ? "is-active" : ""}`}
|
||||
key={preset.label}
|
||||
type="button"
|
||||
onClick={() => applyMinNotional(preset.value)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className={`flow-filter-popover${open ? " is-open" : ""}`} ref={rootRef}>
|
||||
<button
|
||||
aria-expanded={open}
|
||||
aria-haspopup="dialog"
|
||||
className={`terminal-button flow-filter-trigger${activeCount > 0 ? " is-active" : ""}`}
|
||||
type="button"
|
||||
onClick={() => setOpen((current) => nextFlowFilterPopoverState(current, "toggle"))}
|
||||
>
|
||||
<span>Filter</span>
|
||||
{activeCount > 0 ? <span className="flow-filter-badge">{activeCount}</span> : null}
|
||||
</button>
|
||||
|
||||
{open ? (
|
||||
<div
|
||||
aria-label="Flow filters"
|
||||
className="flow-filter-popover-panel"
|
||||
role="dialog"
|
||||
>
|
||||
<div className="flow-filter-popover-head">
|
||||
<div>
|
||||
<div className="flow-filter-popover-title">Flow Filters</div>
|
||||
<div className="flow-filter-popover-copy">Changes apply immediately.</div>
|
||||
</div>
|
||||
<button
|
||||
className="terminal-button"
|
||||
type="button"
|
||||
onClick={() => onChange(buildDefaultFlowFilters())}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flow-filter-popover-body">
|
||||
<FlowFilterSection title="Security">
|
||||
<div className="flow-filter-checkbox-grid">
|
||||
{(["stock", "etf"] as OptionSecurityType[]).map((value) => (
|
||||
<label className="flow-filter-check" key={value}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(filters.securityTypes ?? []).includes(value)}
|
||||
onChange={(event) => toggleSecurity(value, event.target.checked)}
|
||||
/>
|
||||
<span>{value.toUpperCase()}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</FlowFilterSection>
|
||||
|
||||
<FlowFilterSection title="Side">
|
||||
<div className="flow-filter-checkbox-grid flow-filter-checkbox-grid-wide">
|
||||
{(["AA", "A", "MID", "B", "BB"] as OptionNbboSide[]).map((value) => (
|
||||
<label className="flow-filter-check" key={value}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(filters.nbboSides ?? []).includes(value)}
|
||||
onChange={(event) => toggleSide(value, event.target.checked)}
|
||||
/>
|
||||
<span>{value}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</FlowFilterSection>
|
||||
|
||||
<FlowFilterSection title="Type">
|
||||
<div className="flow-filter-checkbox-grid">
|
||||
{(["call", "put"] as OptionType[]).map((value) => (
|
||||
<label className="flow-filter-check" key={value}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={(filters.optionTypes ?? []).includes(value)}
|
||||
onChange={(event) => toggleOptionType(value, event.target.checked)}
|
||||
/>
|
||||
<span>{value}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</FlowFilterSection>
|
||||
|
||||
<FlowFilterSection title="Min Notional">
|
||||
<div className="flow-filter-chip-grid">
|
||||
{[
|
||||
{ label: "All signal", value: undefined },
|
||||
{ label: ">= 25k", value: 25_000 },
|
||||
{ label: ">= 50k", value: 50_000 },
|
||||
{ label: ">= 100k", value: 100_000 }
|
||||
].map((preset) => (
|
||||
<button
|
||||
className={`filter-chip ${filters.minNotional === preset.value ? "is-active" : ""}`}
|
||||
key={preset.label}
|
||||
type="button"
|
||||
onClick={() => applyMinNotional(preset.value)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</FlowFilterSection>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FlowFilterControls = () => {
|
||||
const state = useTerminal();
|
||||
|
||||
return <FlowFilterPopover filters={state.flowFilters} onChange={state.setFlowFilters} />;
|
||||
};
|
||||
|
||||
type PaneProps = {
|
||||
title: string;
|
||||
status?: ReactNode;
|
||||
|
|
@ -4402,7 +4782,9 @@ const OptionsPane = ({ limit }: OptionsPaneProps) => {
|
|||
{state.tickerSet.size > 0
|
||||
? "No option prints match the current filter."
|
||||
: state.mode === "live"
|
||||
? "No option prints yet. Start ingest-options."
|
||||
? state.options.status === "stale"
|
||||
? "Live feed behind. Waiting for fresh option prints."
|
||||
: "No option prints yet. Start ingest-options."
|
||||
: "Replay queue empty. Ensure ClickHouse has data."}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -4524,7 +4906,9 @@ const EquitiesPane = ({ limit }: EquitiesPaneProps) => {
|
|||
{state.tickerSet.size > 0
|
||||
? "No equity prints match the current filter."
|
||||
: state.mode === "live"
|
||||
? "No equity prints yet. Start ingest-equities."
|
||||
? state.equities.status === "stale"
|
||||
? "Live feed behind. Waiting for fresh equity prints."
|
||||
: "No equity prints yet. Start ingest-equities."
|
||||
: "Replay queue empty. Ensure ClickHouse has data."}
|
||||
</div>
|
||||
) : (
|
||||
|
|
@ -4600,7 +4984,9 @@ const FlowPane = ({ limit, title = "Flow" }: FlowPaneProps) => {
|
|||
{state.tickerSet.size > 0
|
||||
? "No flow packets match the current filter."
|
||||
: state.mode === "live"
|
||||
? "No flow packets yet. Start compute."
|
||||
? state.flow.status === "stale"
|
||||
? "Live feed behind. Waiting for fresh flow packets."
|
||||
: "No flow packets yet. Start compute."
|
||||
: "Replay queue empty. Ensure ClickHouse has data."}
|
||||
</div>
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue