Add why-active reason to visualizer nodes

This commit is contained in:
Jack Kingsman
2026-03-03 11:54:54 -08:00
parent c76b7895dd
commit 62943f6292
@@ -56,6 +56,7 @@ interface GraphNode extends SimulationNodeDatum3D {
type: NodeType;
isAmbiguous: boolean;
lastActivity: number;
lastActivityReason?: string;
lastSeen?: number | null;
probableIdentity?: string | null;
ambiguousNames?: string[];
@@ -110,6 +111,15 @@ function arraysEqual(a: string[], b: string[]): boolean {
return true;
}
function formatRelativeTime(timestamp: number): string {
const seconds = Math.floor((Date.now() - timestamp) / 1000);
if (seconds < 5) return 'just now';
if (seconds < 60) return `${seconds}s ago`;
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
return secs > 0 ? `${minutes}m ${secs}s ago` : `${minutes}m ago`;
}
// =============================================================================
// DATA LAYER HOOK (3D variant)
// =============================================================================
@@ -725,6 +735,15 @@ function useVisualizerData3D({
const path = buildPath(parsed, packet, myPrefix);
if (path.length < 2) continue;
// Tag each node with why it's considered active
const label = getPacketLabel(parsed.payloadType);
for (let i = 0; i < path.length; i++) {
const n = nodesRef.current.get(path[i]);
if (n && n.id !== 'self') {
n.lastActivityReason = i === 0 ? `${label} source` : `Relayed ${label}`;
}
}
for (let i = 0; i < path.length - 1; i++) {
if (path[i] !== path[i + 1]) {
addLink(path[i], path[i + 1]);
@@ -1909,6 +1928,12 @@ export function PacketVisualizer3D({
{node.ambiguousNames.join(', ')}
</div>
)}
{pinnedNodeId && node.type !== 'self' && (
<div className="text-muted-foreground border-t border-border pt-1 mt-1">
<div>Last active: {formatRelativeTime(node.lastActivity)}</div>
{node.lastActivityReason && <div>Reason: {node.lastActivityReason}</div>}
</div>
)}
{neighbors.length > 0 && (
<div className="text-muted-foreground border-t border-border pt-1 mt-1">
<div className="mb-0.5">Traffic exchanged with:</div>