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}
+          x={-pillWidth / 2 - 3}
-          y={-pillHeight/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}
+          x={-pillWidth / 2}
-          y={-pillHeight/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 ${
+          className={`transition-all duration-300 ${isHovered ? 'drop-shadow-lg' : ''
-            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 ${
+          className={`transition-all duration-300 ${isHovered ? 'drop-shadow-lg' : ''
-            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>
     );

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 }) => {
@@ -58,13 +75,13 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
       system.connectedSystems?.forEach(connectedSystem => {
         // Create a unique key by sorting system names alphabetically
         const connectionKey = [system.solarSystemName, connectedSystem].sort().join('-');
-        
+
         // Skip if we've already processed this connection
         if (connections.has(connectionKey)) return;
 
         const fromPos = nodePositions[system.solarSystemName];
         const toPos = nodePositions[connectedSystem];
-        
+
         // Skip if positions are not available
         if (!fromPos || !toPos) return;
 
@@ -181,7 +198,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
         <div className="text-center">
           <h1 className="text-4xl font-bold text-white mb-4">Error Loading Region</h1>
           <p className="text-red-400 mb-6">Failed to load data for {regionName}</p>
-          <Button 
+          <Button
             onClick={() => navigate('/')}
             className="bg-purple-600 hover:bg-purple-700"
           >
@@ -196,14 +213,14 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
   return (
     <div className="w-full h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 overflow-hidden relative">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-purple-900/20 via-slate-900/40 to-black"></div>
-      
+
       <div className="relative z-10 p-8">
         <div className="flex items-center justify-between mb-8">
           <div>
             <h1 className="text-4xl font-bold text-white mb-2">{regionName}</h1>
             <p className="text-purple-200">Solar systems in this region</p>
           </div>
-          <Button 
+          <Button
             onClick={() => navigate('/')}
             className="bg-purple-600 hover:bg-purple-700"
           >
@@ -211,7 +228,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
             Back to Galaxy
           </Button>
         </div>
-        
+
         <div className="w-full h-[calc(100vh-200px)] border border-purple-500/30 rounded-lg overflow-hidden bg-black/20 backdrop-blur-sm">
           <svg
             ref={svgRef}
@@ -227,14 +244,14 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
           >
             <defs>
               <filter id="glow">
-                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
-                <feMerge> 
+                <feMerge>
-                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="coloredBlur" />
-                  <feMergeNode in="SourceGraphic"/>
+                  <feMergeNode in="SourceGraphic" />
                 </feMerge>
               </filter>
             </defs>
-            
+
             {/* Render connections first (behind nodes) */}
             {processedConnections.map(connection => (
               <Connection
@@ -244,7 +261,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
                 color={connection.color}
               />
             ))}
-            
+
             {/* Render systems */}
             {systems?.map((system) => (
               <MapNode
@@ -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>