diff --git a/src/components/ReqViewer.tsx b/src/components/ReqViewer.tsx index df8d1a4..d401a7f 100644 --- a/src/components/ReqViewer.tsx +++ b/src/components/ReqViewer.tsx @@ -730,23 +730,17 @@ export default function ReqViewer({ return selectedRelays; }, [relays, relaySelectionPhase, selectedRelays]); - // Get relay state for each relay and calculate connected count - const relayStatesForReq = useMemo( - () => - finalRelays.map((url) => ({ - url, - state: relayStates[url], - })), - [finalRelays, relayStates], - ); - const connectedCount = relayStatesForReq.filter( - (r) => r.state?.connectionState === "connected", - ).length; - // Streaming is the default behavior, closeOnEose inverts it const stream = !closeOnEose; - const { events, loading, error, eoseReceived, relayStates: reqRelayStates, overallState } = useReqTimelineEnhanced( + const { + events, + loading, + error, + eoseReceived, + relayStates: reqRelayStates, + overallState, + } = useReqTimelineEnhanced( `req-${JSON.stringify(filter)}-${closeOnEose}`, resolvedFilter, finalRelays, @@ -930,7 +924,9 @@ export default function ReqViewer({ shouldAnimate(overallState.status) ? "animate-pulse" : "" }`} /> - + {getStatusText(overallState)} @@ -1011,7 +1007,9 @@ export default function ReqViewer({ const reqState = reqRelayStates.get(r.relay); const connIcon = getConnectionIcon(globalState); const authIcon = getAuthIcon(globalState); - const badge = reqState ? getRelayStateBadge(reqState) : null; + const badge = reqState + ? getRelayStateBadge(reqState) + : null; return (
- {reqState.eventCount} + + {reqState.eventCount} +
@@ -1052,11 +1052,14 @@ export default function ReqViewer({
- {r.readers.length} + + {r.readers.length} +
- Inbox relay for {r.readers.length} author{r.readers.length !== 1 ? 's' : ''} + Inbox relay for {r.readers.length} author + {r.readers.length !== 1 ? "s" : ""} )} @@ -1065,11 +1068,14 @@ export default function ReqViewer({
- {r.writers.length} + + {r.writers.length} +
- Outbox relay for {r.writers.length} author{r.writers.length !== 1 ? 's' : ''} + Outbox relay for {r.writers.length} author + {r.writers.length !== 1 ? "s" : ""} )} @@ -1085,7 +1091,9 @@ export default function ReqViewer({ {authIcon && ( -
{authIcon.icon}
+
+ {authIcon.icon} +

{authIcon.label}

@@ -1096,7 +1104,9 @@ export default function ReqViewer({ {/* Connection icon */} -
{connIcon.icon}
+
+ {connIcon.icon} +

{connIcon.label}

@@ -1120,7 +1130,9 @@ export default function ReqViewer({ const reqState = reqRelayStates.get(url); const connIcon = getConnectionIcon(globalState); const authIcon = getAuthIcon(globalState); - const badge = reqState ? getRelayStateBadge(reqState) : null; + const badge = reqState + ? getRelayStateBadge(reqState) + : null; return (
- {reqState.eventCount} + + {reqState.eventCount} +
@@ -1159,7 +1173,9 @@ export default function ReqViewer({ {authIcon && ( -
{authIcon.icon}
+
+ {authIcon.icon} +

{authIcon.label}

@@ -1170,7 +1186,9 @@ export default function ReqViewer({ {/* Connection icon */} -
{connIcon.icon}
+
+ {connIcon.icon} +

{connIcon.label}

diff --git a/src/lib/req-state-machine.test.ts b/src/lib/req-state-machine.test.ts index b046cb8..a4430a4 100644 --- a/src/lib/req-state-machine.test.ts +++ b/src/lib/req-state-machine.test.ts @@ -405,12 +405,12 @@ describe("getStatusText", () => { }; it("should return correct text for each status", () => { - expect( - getStatusText({ ...baseState, status: "discovering" }), - ).toBe("DISCOVERING"); - expect( - getStatusText({ ...baseState, status: "connecting" }), - ).toBe("CONNECTING"); + expect(getStatusText({ ...baseState, status: "discovering" })).toBe( + "DISCOVERING", + ); + expect(getStatusText({ ...baseState, status: "connecting" })).toBe( + "CONNECTING", + ); expect(getStatusText({ ...baseState, status: "loading" })).toBe("LOADING"); expect(getStatusText({ ...baseState, status: "live" })).toBe("LIVE"); expect(getStatusText({ ...baseState, status: "partial" })).toBe("PARTIAL"); diff --git a/src/lib/req-state-machine.ts b/src/lib/req-state-machine.ts index 43fd035..851a3f9 100644 --- a/src/lib/req-state-machine.ts +++ b/src/lib/req-state-machine.ts @@ -34,12 +34,8 @@ export function deriveOverallState( const receivingCount = states.filter( (s) => s.subscriptionState === "receiving", ).length; - const eoseCount = states.filter( - (s) => s.subscriptionState === "eose", - ).length; - const errorCount = states.filter( - (s) => s.connectionState === "error", - ).length; + const eoseCount = states.filter((s) => s.subscriptionState === "eose").length; + const errorCount = states.filter((s) => s.connectionState === "error").length; const disconnectedCount = states.filter( (s) => s.connectionState === "disconnected", ).length;