Add number of signatures to display on region map

src/components/MapNode.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import { getSecurityColor } from '../utils/securityColors';
 
@@ -9,6 +8,7 @@ interface MapNodeProps {
   onClick: () => void;
   type: 'region' | 'system';
   security?: number;
+  signatures?: number;
 }
 
 export const MapNode: React.FC<MapNodeProps> = ({
@@ -17,10 +17,11 @@ export const MapNode: React.FC<MapNodeProps> = ({
   position,
   onClick,
   type,
-  security
+  security,
+  signatures
 }) => {
   const [isHovered, setIsHovered] = useState(false);
-  
+
   // Use security-based color for both systems and regions
   const nodeColor = security !== undefined
     ? getSecurityColor(security)
@@ -30,7 +31,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
     // Further reduce region size to prevent overlap - made even smaller
     const pillWidth = Math.max(name.length * 5, 40); // Reduced from 8 to 5, min from 60 to 40
     const pillHeight = 18; // Reduced from 24 to 18
-    
+
     return (
       <g
         transform={`translate(${position.x}, ${position.y})`}
@@ -44,8 +45,8 @@ export const MapNode: React.FC<MapNodeProps> = ({
       >
         {/* Glow effect */}
         <rect
-          x={-pillWidth/2 - 3}
-          y={-pillHeight/2 - 3}
+          x={-pillWidth / 2 - 3}
+          y={-pillHeight / 2 - 3}
           width={pillWidth + 6}
           height={pillHeight + 6}
           rx={(pillHeight + 6) / 2}
@@ -54,11 +55,11 @@ export const MapNode: React.FC<MapNodeProps> = ({
           filter="url(#glow)"
           className="transition-all duration-300"
         />
-        
+
         {/* Main pill */}
         <rect
-          x={-pillWidth/2}
-          y={-pillHeight/2}
+          x={-pillWidth / 2}
+          y={-pillHeight / 2}
           width={pillWidth}
           height={pillHeight}
           rx={pillHeight / 2}
@@ -66,11 +67,10 @@ export const MapNode: React.FC<MapNodeProps> = ({
           stroke="#ffffff"
           strokeWidth="1.5"
           filter="url(#glow)"
-          className={`transition-all duration-300 ${
-            isHovered ? 'drop-shadow-lg' : ''
-          }`}
+          className={`transition-all duration-300 ${isHovered ? 'drop-shadow-lg' : ''
+            }`}
         />
-        
+
         {/* Text inside pill - made smaller */}
         <text
           x="0"
@@ -90,7 +90,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
     // Render system as a dot with external label
     const nodeSize = 6;
     const textOffset = 20; // Position text below the dot - moved down more
-    
+
     return (
       <g
         transform={`translate(${position.x}, ${position.y})`}
@@ -110,17 +110,16 @@ export const MapNode: React.FC<MapNodeProps> = ({
           filter="url(#glow)"
           className="transition-all duration-300"
         />
-        
+
         {/* Main node - removed stroke to eliminate white border */}
         <circle
           r={nodeSize}
           fill={nodeColor}
           filter="url(#glow)"
-          className={`transition-all duration-300 ${
-            isHovered ? 'drop-shadow-lg' : ''
-          }`}
+          className={`transition-all duration-300 ${isHovered ? 'drop-shadow-lg' : ''
+            }`}
         />
-        
+
         {/* Inner core */}
         <circle
           r={nodeSize - 3}
@@ -128,7 +127,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
           opacity={0.8}
           className="transition-all duration-300"
         />
-        
+
         {/* Node label */}
         <text
           x="0"
@@ -142,7 +141,20 @@ export const MapNode: React.FC<MapNodeProps> = ({
           } pointer-events-none select-none`}
           style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
         >
-          {name} {security.toFixed(1)}
+          {name} {security !== undefined && (
+            <tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
+          )}
+        </text>
+        <text
+          x="0"
+          y={textOffset + 15}
+          textAnchor="middle"
+          fill="#a3a3a3"
+          fontSize="12"
+          className="pointer-events-none select-none"
+          style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
+        >
+          {signatures !== undefined && `📡 ${signatures}`}
         </text>
       </g>
     );