Add number of signatures to display on region map

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"/>
-                <feMerge> 
-                  <feMergeNode in="coloredBlur"/>
-                  <feMergeNode in="SourceGraphic"/>
+                <feGaussianBlur stdDeviation="3" result="coloredBlur" />
+                <feMerge>
+                  <feMergeNode in="coloredBlur" />
+                  <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>