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,7 +17,8 @@ export const MapNode: React.FC<MapNodeProps> = ({
   position,
   onClick,
   type,
-  security
+  security,
+  signatures
 }) => {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -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}
@@ -57,8 +58,8 @@ export const MapNode: React.FC<MapNodeProps> = ({
 
         {/* Main pill */}
         <rect
-          x={-pillWidth/2}
-          y={-pillHeight/2}
+          x={-pillWidth / 2}
+          y={-pillHeight / 2}
           width={pillWidth}
           height={pillHeight}
           rx={pillHeight / 2}
@@ -66,9 +67,8 @@ 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 */}
@@ -116,9 +116,8 @@ export const MapNode: React.FC<MapNodeProps> = ({
           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 */}
@@ -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>
     );

src/components/RegionMap.tsx

@@ -7,11 +7,15 @@ import { ArrowLeft } from 'lucide-react';
 import { useQuery } from '@tanstack/react-query';
 import { getSecurityColor } from '../utils/securityColors';
 
+const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records`;
+// const pocketbaseUrl = `https://evebase.site.quack-lab.dev/api/collections/regionview/records?filter=(sysregion%3D'${encodedSystem}')`;
+
 interface SolarSystem {
   solarSystemName: string;
   x: number;
   y: number;
   security: number;
+  signatures: number;
   connectedSystems: string[];
 }
 
@@ -32,7 +36,20 @@ const fetchRegionData = async (regionName: string): Promise<SolarSystem[]> => {
   if (!response.ok) {
     throw new Error('Failed to fetch region data');
   }
-  return response.json();
+  const systems = await response.json();
+
+  const regionSignatures = await fetch(`${pocketbaseUrl}?filter=(sysregion%3D'${regionName}')`);
+  const regionSignaturesJson = await regionSignatures.json();
+  console.log(regionSignaturesJson);
+  if (regionSignaturesJson.items.length > 0) {
+    for (const systemSigs of regionSignaturesJson.items) {
+      const system = systems.find(s => s.solarSystemName === systemSigs.sysname);
+      if (system) {
+        system.signatures = systemSigs.sigcount;
+      }
+    }
+  }
+  return systems;
 };
 
 export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
@@ -227,10 +244,10 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
           >
             <defs>
               <filter id="glow">
-                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
                 <feMerge>
-                  <feMergeNode in="coloredBlur"/>
-                  <feMergeNode in="SourceGraphic"/>
+                  <feMergeNode in="coloredBlur" />
+                  <feMergeNode in="SourceGraphic" />
                 </feMerge>
               </filter>
             </defs>
@@ -255,6 +272,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
                 onClick={() => handleSystemClick(system.solarSystemName)}
                 type="system"
                 security={system.security}
+                signatures={system.signatures}
               />
             ))}
           </svg>