Add labelScale prop for dynamic text scaling in MapNode and adjust RegionMap to utilize it based on compact view

frontend/src/components/MapNode.tsx

@@ -21,6 +21,7 @@ interface MapNodeProps {
   showJumps?: boolean;
   showKills?: boolean;
   viewBoxWidth?: number; // Add viewBox width for scaling calculations
+  labelScale?: number;
 }
 
 export const MapNode: React.FC<MapNodeProps> = ({
@@ -43,6 +44,7 @@ export const MapNode: React.FC<MapNodeProps> = ({
   showJumps = false,
   showKills = false,
   viewBoxWidth = 1200,
+  labelScale = 1,
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -197,23 +199,22 @@ export const MapNode: React.FC<MapNodeProps> = ({
           fontWeight="bold"
           className={`transition-all duration-300 ${isHovered ? 'fill-purple-200' : 'fill-white'
             } pointer-events-none select-none`}
-          style={{ 
+          style={{
             textShadow: '2px 2px 4px rgba(0,0,0,0.8)',
             vectorEffect: 'non-scaling-stroke'
           }}
-          transform={`scale(${1 / (1200 / viewBoxWidth)})`}
-          transformOrigin="0 0"
+          transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
         >
           {name} {security !== undefined && (
             <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(
@@ -225,19 +226,18 @@ export const MapNode: React.FC<MapNodeProps> = ({
                 fill="#a3a3a3"
                 fontSize="12"
                 className="pointer-events-none select-none"
-                style={{ 
+                style={{
                   textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
                   vectorEffect: 'non-scaling-stroke'
                 }}
-                transform={`scale(${1 / (1200 / viewBoxWidth)})`}
-                transformOrigin="0 0"
+                transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
               >
                 📡 {signatures}
               </text>
             );
             currentY += 15;
           }
-          
+
           // Add jumps if enabled and present
           if (showJumps && jumps !== undefined) {
             textElements.push(
@@ -249,19 +249,18 @@ export const MapNode: React.FC<MapNodeProps> = ({
                 fill="#60a5fa"
                 fontSize="10"
                 className="pointer-events-none select-none"
-                style={{ 
+                style={{
                   textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
                   vectorEffect: 'non-scaling-stroke'
                 }}
-                transform={`scale(${1 / (1200 / viewBoxWidth)})`}
-                transformOrigin="0 0"
+                transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
               >
                 🚀 {jumps}
               </text>
             );
             currentY += 15;
           }
-          
+
           // Add kills if enabled and present
           if (showKills && kills !== undefined) {
             textElements.push(
@@ -273,18 +272,17 @@ export const MapNode: React.FC<MapNodeProps> = ({
                 fill="#f87171"
                 fontSize="10"
                 className="pointer-events-none select-none"
-                style={{ 
+                style={{
                   textShadow: '1px 1px 2px rgba(0,0,0,0.8)',
                   vectorEffect: 'non-scaling-stroke'
                 }}
-                transform={`scale(${1 / (1200 / viewBoxWidth)})`}
-                transformOrigin="0 0"
+                transform={`scale(${(1 / (1200 / viewBoxWidth)) * labelScale})`}
               >
                 ⚔️ {kills}
               </text>
             );
           }
-          
+
           return textElements;
         })()}
       </g>

frontend/src/components/RegionMap.tsx

@@ -33,6 +33,7 @@ interface RegionMapProps {
   focusSystem?: string;
   isCompact?: boolean;
   isWormholeRegion?: boolean;
+  header?: boolean;
 }
 
 interface ContextMenuState {
@@ -93,7 +94,7 @@ const ensureUniversePositions = async () => {
   }
 };
 
-export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormholeRegion = false }: RegionMapProps) => {
+export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormholeRegion = false, header = true }: RegionMapProps) => {
   const navigate = useNavigate();
   const [viewBox, setViewBox] = useState({ x: 0, y: 0, width: 1200, height: 800 });
   const [isPanning, setIsPanning] = useState(false);
@@ -119,10 +120,10 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
   // Statistics state - MUST default to false to avoid API spam!
   const [showJumps, setShowJumps] = useState(false);
   const [showKills, setShowKills] = useState(false);
-  
+
   // 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);
@@ -181,7 +182,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
   }, [viaMode, viaDest, viaQueue]);
 
   const { data: rsystems, isLoading, error } = useRegionData(regionName);
-  
+
   // Fetch statistics data - only when toggles are enabled
   const { data: jumpsData } = useSystemJumps(showJumps);
   const { data: killsData } = useSystemKills(showKills);
@@ -189,7 +190,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
   useEffect(() => {
     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>();
@@ -205,7 +206,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
         }
         setSystemIDCache(newCache);
       };
-      
+
       resolveSystemIDs();
     }
   }, [rsystems, isLoading, error]);
@@ -558,26 +559,26 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
   // Helper functions to get statistics for a system
   const getSystemJumps = (systemName: string): number | undefined => {
     if (!showJumps) return undefined;
-    
+
     const systemID = systemIDCache.get(systemName);
     if (!systemID) return undefined;
-    
+
     const jumps = jumpsBySystemID.get(systemID);
     if (!jumps || jumps === 0) return undefined;
-    
+
     console.log(`🚀 Found ${jumps} jumps for ${systemName} (ID: ${systemID})`);
     return jumps;
   };
 
   const getSystemKills = (systemName: string): number | undefined => {
     if (!showKills) return undefined;
-    
+
     const systemID = systemIDCache.get(systemName);
     if (!systemID) return undefined;
-    
+
     const kills = killsBySystemID.get(systemID);
     if (!kills || kills === 0) return undefined;
-    
+
     console.log(`⚔️ Found ${kills} kills for ${systemName} (ID: ${systemID})`);
     return kills;
   };
@@ -1021,13 +1022,15 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
 
   return (
     <div className="w-full h-full bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative">
-      <Header
-        title={`Region: ${regionName}`}
-        breadcrumbs={[
-          { label: "Universe", path: "/" },
-          { label: regionName }
-        ]}
-      />
+      {header && (
+        <Header
+          title={`Region: ${regionName}`}
+          breadcrumbs={[
+            { label: "Universe", path: "/" },
+            { label: regionName }
+          ]}
+        />
+      )}
       <svg
         ref={svgRef}
         width="100%"
@@ -1111,6 +1114,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
             showJumps={showJumps}
             showKills={showKills}
             viewBoxWidth={viewBox.width}
+            labelScale={isCompact ? 2.0 : 1}
           />
         ))}
 

frontend/src/pages/SystemView.tsx

@@ -281,6 +281,7 @@ export const SystemView = () => {
                       regionName={region}
                       focusSystem={system}
                       isCompact={true}
+                      header={false}
                     />
                   </div>
                 </div>