refactor(MapNode, StatisticsToggle): streamline text rendering in MapNode and replace switches with buttons in StatisticsToggle for improved UI

frontend/src/components/MapNode.tsx

@@ -208,9 +208,19 @@ export const MapNode: React.FC<MapNodeProps> = ({
             <tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
           )}
         </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={textOffset + 15}
+                y={currentY}
                 textAnchor="middle"
                 fill="#a3a3a3"
                 fontSize="12"
@@ -222,14 +232,19 @@ export const MapNode: React.FC<MapNodeProps> = ({
                 transform={`scale(${1 / (1200 / viewBoxWidth)})`}
                 transformOrigin="0 0"
               >
-          {signatures !== undefined && signatures > 0 && `📡 ${signatures}`}
+                📡 {signatures}
               </text>
+            );
+            currentY += 15;
+          }
           
-        {/* Statistics display - fixed visual size regardless of zoom */}
+          // Add jumps if enabled and present
-        {showJumps && jumps !== undefined && (
+          if (showJumps && jumps !== undefined) {
+            textElements.push(
               <text
+                key="jumps"
                 x="0"
-            y={textOffset + 30}
+                y={currentY}
                 textAnchor="middle"
                 fill="#60a5fa"
                 fontSize="10"
@@ -243,12 +258,17 @@ export const MapNode: React.FC<MapNodeProps> = ({
               >
                 🚀 {jumps}
               </text>
-        )}
+            );
+            currentY += 15;
+          }
           
-        {showKills && kills !== undefined && (
+          // Add kills if enabled and present
+          if (showKills && kills !== undefined) {
+            textElements.push(
               <text
+                key="kills"
                 x="0"
-            y={textOffset + 45}
+                y={currentY}
                 textAnchor="middle"
                 fill="#f87171"
                 fontSize="10"
@@ -262,7 +282,11 @@ export const MapNode: React.FC<MapNodeProps> = ({
               >
                 ⚔️ {kills}
               </text>
-        )}
+            );
+          }
+          
+          return textElements;
+        })()}
       </g>
     );
   }

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="absolute top-2 right-2 bg-slate-800/90 backdrop-blur-sm rounded-lg p-2 shadow-lg border border-slate-700">
-      <div className="flex flex-col gap-3">
+      <div className="flex gap-2">
-        <div className="flex items-center gap-3">
+        <button
-          <Switch
+          onClick={() => onJumpsToggle(!jumpsEnabled)}
-            id="jumps-toggle"
+          className={`p-2 rounded transition-colors ${
-            checked={jumpsEnabled}
+            jumpsEnabled 
-            onCheckedChange={onJumpsToggle}
+              ? 'bg-blue-600/20 text-blue-400 hover:bg-blue-600/30' 
-          />
+              : 'bg-gray-600/20 text-gray-400 hover:bg-gray-600/30'
-          <label htmlFor="jumps-toggle" className="text-sm font-medium text-white">
+          }`}
-            🚀 Show Jumps
+          title={jumpsEnabled ? 'Hide Jumps' : 'Show Jumps'}
-          </label>
+        >
-        </div>
+          🚀
-        <div className="flex items-center gap-3">
+        </button>
-          <Switch
+        <button
-            id="kills-toggle"
+          onClick={() => onKillsToggle(!killsEnabled)}
-            checked={killsEnabled}
+          className={`p-2 rounded transition-colors ${
-            onCheckedChange={onKillsToggle}
+            killsEnabled 
-          />
+              ? 'bg-red-600/20 text-red-400 hover:bg-red-600/30' 
-          <label htmlFor="kills-toggle" className="text-sm font-medium text-white">
+              : 'bg-gray-600/20 text-gray-400 hover:bg-gray-600/30'
-            ⚔️ Show Kills
+          }`}
-          </label>
+          title={killsEnabled ? 'Hide Kills' : 'Show Kills'}
-        </div>
+        >
+          ⚔️
+        </button>
       </div>
     </div>
   );