refactor(RegionMap, StatisticsToggle): reposition StatisticsToggle to avoid overlaps and simplify layout

frontend/src/components/MapNode.tsx

@@ -208,61 +208,85 @@ export const MapNode: React.FC<MapNodeProps> = ({
             <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)',
-            vectorEffect: 'non-scaling-stroke'
-          }}
-          transform={`scale(${1 / (1200 / viewBoxWidth)})`}
-          transformOrigin="0 0"
-        >
-          {signatures !== undefined && signatures > 0 && `📡 ${signatures}`}
-        </text>
         
-        {/* Statistics display - fixed visual size regardless of zoom */}
-        {showJumps && jumps !== undefined && (
-          <text
-            x="0"
-            y={textOffset + 30}
-            textAnchor="middle"
-            fill="#60a5fa"
-            fontSize="10"
-            className="pointer-events-none select-none"
-            style={{ 
-              textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
-              vectorEffect: 'non-scaling-stroke'
-            }}
-            transform={`scale(${1 / (1200 / viewBoxWidth)})`}
-            transformOrigin="0 0"
-          >
-            🚀 {jumps}
-          </text>
-        )}
-        
-        {showKills && kills !== undefined && (
-          <text
-            x="0"
-            y={textOffset + 45}
-            textAnchor="middle"
-            fill="#f87171"
-            fontSize="10"
-            className="pointer-events-none select-none"
-            style={{ 
-              textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
-              vectorEffect: 'non-scaling-stroke'
-            }}
-            transform={`scale(${1 / (1200 / viewBoxWidth)})`}
-            transformOrigin="0 0"
-          >
-            ⚔️ {kills}
-          </text>
-        )}
+        {/* Dynamic text positioning based on what's shown */}
+        {(() => {
+          let currentY = textOffset + 15;
+          const textElements = [];
+          
+          // Add signatures if present
+          if (signatures !== undefined && signatures > 0) {
+            textElements.push(
+              <text
+                key="signatures"
+                x="0"
+                y={currentY}
+                textAnchor="middle"
+                fill="#a3a3a3"
+                fontSize="12"
+                className="pointer-events-none select-none"
+                style={{ 
+                  textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
+                  vectorEffect: 'non-scaling-stroke'
+                }}
+                transform={`scale(${1 / (1200 / viewBoxWidth)})`}
+                transformOrigin="0 0"
+              >
+                📡 {signatures}
+              </text>
+            );
+            currentY += 15;
+          }
+          
+          // Add jumps if enabled and present
+          if (showJumps && jumps !== undefined) {
+            textElements.push(
+              <text
+                key="jumps"
+                x="0"
+                y={currentY}
+                textAnchor="middle"
+                fill="#60a5fa"
+                fontSize="10"
+                className="pointer-events-none select-none"
+                style={{ 
+                  textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
+                  vectorEffect: 'non-scaling-stroke'
+                }}
+                transform={`scale(${1 / (1200 / viewBoxWidth)})`}
+                transformOrigin="0 0"
+              >
+                🚀 {jumps}
+              </text>
+            );
+            currentY += 15;
+          }
+          
+          // Add kills if enabled and present
+          if (showKills && kills !== undefined) {
+            textElements.push(
+              <text
+                key="kills"
+                x="0"
+                y={currentY}
+                textAnchor="middle"
+                fill="#f87171"
+                fontSize="10"
+                className="pointer-events-none select-none"
+                style={{ 
+                  textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
+                  vectorEffect: 'non-scaling-stroke'
+                }}
+                transform={`scale(${1 / (1200 / viewBoxWidth)})`}
+                transformOrigin="0 0"
+              >
+                ⚔️ {kills}
+              </text>
+            );
+          }
+          
+          return textElements;
+        })()}
       </g>
     );
   }

frontend/src/components/RegionMap.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MapNode } from '@/components/MapNode';
 import { SystemContextMenu } from '@/components/SystemContextMenu';
@@ -11,7 +11,7 @@ import { Header } from './Header';
 import { ListCharacters, StartESILogin, SetDestinationForAll, PostRouteForAllByNames, GetCharacterLocations } from 'wailsjs/go/main/App';
 import { toast } from '@/hooks/use-toast';
 import { getSystemsRegions } from '@/utils/systemApi';
-import { useSystemJumps, useSystemKills } from '@/hooks/useSystemStatistics';
+import { useSystemJumps, useSystemKills, resolveSystemID } from '@/hooks/useSystemStatistics';
 import { StatisticsToggle } from './StatisticsToggle';
 
 // Interaction/indicator constants
@@ -120,8 +120,9 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
   const [showJumps, setShowJumps] = useState(false);
   const [showKills, setShowKills] = useState(false);
   
-  // Cache for system name to ID mappings
+  // System ID cache for statistics lookup
   const [systemIDCache, setSystemIDCache] = useState<Map<string, number>>(new Map());
+  
 
   // New: selection/aim state for left-click aimbot behavior
   const [isSelecting, setIsSelecting] = useState(false);
@@ -186,13 +187,29 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
   const { data: killsData } = useSystemKills(showKills);
 
   useEffect(() => {
-    if (!isLoading && error == null && rsystems && rsystems.size > 0)
+    if (!isLoading && error == null && rsystems && rsystems.size > 0) {
       setSystems(rsystems);
+      
+      // Pre-resolve all system IDs for statistics lookup
+      const resolveSystemIDs = async () => {
+        const newCache = new Map<string, number>();
+        for (const systemName of rsystems.keys()) {
+          try {
+            const id = await resolveSystemID(systemName);
+            if (id) {
+              newCache.set(systemName, id);
+            }
+          } catch (error) {
+            console.warn(`Failed to resolve system ID for ${systemName}:`, error);
+          }
+        }
+        setSystemIDCache(newCache);
+      };
+      
+      resolveSystemIDs();
+    }
   }, [rsystems, isLoading, error]);
 
-  // For now, we'll use a simplified approach without system ID resolution
-  // The ESI data will be displayed for systems that have data, but we won't
-  // be able to match system names to IDs until the binding issue is resolved
 
   useEffect(() => {
     if (!systems || systems.size === 0) return;
@@ -519,45 +536,50 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
     return nearestName;
   };
 
+  // Create lookup maps for system statistics
+  const jumpsBySystemID = useMemo(() => {
+    if (!jumpsData) return new Map();
+    const map = new Map<number, number>();
+    jumpsData.forEach(jump => {
+      map.set(jump.system_id, jump.ship_jumps);
+    });
+    return map;
+  }, [jumpsData]);
+
+  const killsBySystemID = useMemo(() => {
+    if (!killsData) return new Map();
+    const map = new Map<number, number>();
+    killsData.forEach(kill => {
+      map.set(kill.system_id, kill.ship_kills);
+    });
+    return map;
+  }, [killsData]);
+
   // Helper functions to get statistics for a system
   const getSystemJumps = (systemName: string): number | undefined => {
-    if (!jumpsData || !showJumps) return undefined;
+    if (!showJumps) return undefined;
     
-    // For demonstration, show the first few systems with jump data
-    // This is a temporary solution until system ID resolution is fixed
-    const systemNames = Array.from(systems.keys());
-    const systemIndex = systemNames.indexOf(systemName);
+    const systemID = systemIDCache.get(systemName);
+    if (!systemID) return undefined;
     
-    if (systemIndex >= 0 && systemIndex < jumpsData.length) {
-      const jumps = jumpsData[systemIndex].ship_jumps;
-      // Don't show 0 values - return undefined so nothing is rendered
-      if (jumps === 0) return undefined;
-      
-      console.log(`🚀 Found ${jumps} jumps for ${systemName} (using index ${systemIndex})`);
-      return jumps;
-    }
+    const jumps = jumpsBySystemID.get(systemID);
+    if (!jumps || jumps === 0) return undefined;
     
-    return undefined;
+    console.log(`🚀 Found ${jumps} jumps for ${systemName} (ID: ${systemID})`);
+    return jumps;
   };
 
   const getSystemKills = (systemName: string): number | undefined => {
-    if (!killsData || !showKills) return undefined;
+    if (!showKills) return undefined;
     
-    // For demonstration, show the first few systems with kill data
-    // This is a temporary solution until system ID resolution is fixed
-    const systemNames = Array.from(systems.keys());
-    const systemIndex = systemNames.indexOf(systemName);
+    const systemID = systemIDCache.get(systemName);
+    if (!systemID) return undefined;
     
-    if (systemIndex >= 0 && systemIndex < killsData.length) {
-      const kills = killsData[systemIndex].ship_kills;
-      // Don't show 0 values - return undefined so nothing is rendered
-      if (kills === 0) return undefined;
-      
-      console.log(`⚔️ Found ${kills} kills for ${systemName} (using index ${systemIndex})`);
-      return kills;
-    }
+    const kills = killsBySystemID.get(systemID);
+    if (!kills || kills === 0) return undefined;
     
-    return undefined;
+    console.log(`⚔️ Found ${kills} kills for ${systemName} (ID: ${systemID})`);
+    return kills;
   };
 
   // Commit shift selection: toggle all systems within radius
@@ -1200,13 +1222,15 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
         </div>
       )}
 
-      {/* Statistics Toggle */}
-      <StatisticsToggle
-        jumpsEnabled={showJumps}
-        killsEnabled={showKills}
-        onJumpsToggle={setShowJumps}
-        onKillsToggle={setShowKills}
-      />
+      {/* Statistics Toggle - positioned to avoid overlaps */}
+      <div className="absolute bottom-4 left-4">
+        <StatisticsToggle
+          jumpsEnabled={showJumps}
+          killsEnabled={showKills}
+          onJumpsToggle={setShowJumps}
+          onKillsToggle={setShowKills}
+        />
+      </div>
 
       {/* Context Menu */}
       {contextMenu && (

frontend/src/components/StatisticsToggle.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Switch } from '@/components/ui/switch';
 
 interface StatisticsToggleProps {
   jumpsEnabled: boolean;
@@ -15,28 +14,30 @@ export const StatisticsToggle: React.FC<StatisticsToggleProps> = ({
   onKillsToggle,
 }) => {
   return (
-    <div className="absolute top-2 left-2 bg-slate-800/90 backdrop-blur-sm rounded-lg p-3 shadow-lg border border-slate-700">
-      <div className="flex flex-col gap-3">
-        <div className="flex items-center gap-3">
-          <Switch
-            id="jumps-toggle"
-            checked={jumpsEnabled}
-            onCheckedChange={onJumpsToggle}
-          />
-          <label htmlFor="jumps-toggle" className="text-sm font-medium text-white">
-            🚀 Show Jumps
-          </label>
-        </div>
-        <div className="flex items-center gap-3">
-          <Switch
-            id="kills-toggle"
-            checked={killsEnabled}
-            onCheckedChange={onKillsToggle}
-          />
-          <label htmlFor="kills-toggle" className="text-sm font-medium text-white">
-            ⚔️ Show Kills
-          </label>
-        </div>
+    <div className="bg-slate-800/90 backdrop-blur-sm rounded-lg p-2 shadow-lg border border-slate-700">
+      <div className="flex gap-2">
+        <button
+          onClick={() => onJumpsToggle(!jumpsEnabled)}
+          className={`p-2 rounded transition-colors ${
+            jumpsEnabled 
+              ? 'bg-blue-600/20 text-blue-400 hover:bg-blue-600/30' 
+              : 'bg-gray-600/20 text-gray-400 hover:bg-gray-600/30'
+          }`}
+          title={jumpsEnabled ? 'Hide Jumps' : 'Show Jumps'}
+        >
+          🚀
+        </button>
+        <button
+          onClick={() => onKillsToggle(!killsEnabled)}
+          className={`p-2 rounded transition-colors ${
+            killsEnabled 
+              ? 'bg-red-600/20 text-red-400 hover:bg-red-600/30' 
+              : 'bg-gray-600/20 text-gray-400 hover:bg-gray-600/30'
+          }`}
+          title={killsEnabled ? 'Hide Kills' : 'Show Kills'}
+        >
+          ⚔️
+        </button>
       </div>
     </div>
   );