Skip to content

Commit 8e4093d

Browse files
cj-vanaclaude
andcommitted
Add orange color for observer nodes on map
- Add gateway/observer to NODE_COLORS (orange #f97316) - Add NODE_TYPE_LABELS for friendly display names in legend - Add getNodeColor() to detect observers by name pattern - Shows "Observer" in legend instead of "gateway" 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent b030925 commit 8e4093d

File tree

1 file changed

+25
-2
lines changed

1 file changed

+25
-2
lines changed

src/components/NetworkMap.tsx

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,36 @@ const createIcon = (color: string, isOnline: boolean) => {
4040
};
4141

4242
const NODE_COLORS: Record<string, string> = {
43+
gateway: '#f97316', // orange - observers/gateways
4344
companion: '#8b5cf6', // purple
4445
repeater: '#22c55e', // forest-500
4546
room_server: '#0ea5e9', // mesh
4647
};
4748

49+
// Display names for the legend
50+
const NODE_TYPE_LABELS: Record<string, string> = {
51+
gateway: 'Observer',
52+
companion: 'Companion',
53+
repeater: 'Repeater',
54+
room_server: 'Room Server',
55+
};
56+
4857
const DEFAULT_NODE_COLOR = '#6b7280'; // gray for unknown types
4958

59+
/**
60+
* Get the color for a node based on type or name pattern
61+
* Observers are detected by name even if node_type isn't 'gateway'
62+
*/
63+
function getNodeColor(node: NodeWithStats): string {
64+
// Check if name indicates this is an observer
65+
const name = node.name?.toLowerCase() || '';
66+
if (name.includes('observer') || name.includes('0bserver') ||
67+
name.includes('obs3rver') || name.includes('0bs3rver')) {
68+
return NODE_COLORS.gateway;
69+
}
70+
return NODE_COLORS[node.node_type] || DEFAULT_NODE_COLOR;
71+
}
72+
5073
interface NetworkMapProps {
5174
nodes?: NodeWithStats[];
5275
className?: string;
@@ -146,7 +169,7 @@ export function NetworkMap({ nodes, className = '' }: NetworkMapProps) {
146169
key={node.id}
147170
position={[node.latitude!, node.longitude!]}
148171
icon={createIcon(
149-
NODE_COLORS[node.node_type] || NODE_COLORS.node,
172+
getNodeColor(node),
150173
node.is_online
151174
)}
152175
>
@@ -210,7 +233,7 @@ export function NetworkMap({ nodes, className = '' }: NetworkMapProps) {
210233
className="h-3 w-3 rounded-full"
211234
style={{ background: color }}
212235
/>
213-
<span className="capitalize">{type.replace('_', ' ')}</span>
236+
<span>{NODE_TYPE_LABELS[type] || type.replace('_', ' ')}</span>
214237
</div>
215238
))}
216239
</div>

0 commit comments

Comments
 (0)