Code format

refactor(RegionMap.tsx): rename meanInboundAngle to meanNeighborAngle and update logic to compute mean angle to neighbors
2025-08-09 21:34:02 +02:00 · 2025-08-09 21:33:13 +02:00
25 changed files with 148 additions and 157 deletions
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -2,12 +2,12 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb';
 import { Button } from '@/components/ui/button';
 import { toast } from '@/hooks/use-toast';
@@ -31,7 +31,7 @@ export const Header = ({ title, breadcrumbs = [] }: HeaderProps) => {
    try {
      const list = await ListCharacters();
      setChars((list as any[]).map((c: any) => ({ character_id: c.character_id, character_name: c.character_name })));
-    } catch {}
+    } catch { }
  };

  useEffect(() => {
@@ -84,7 +84,7 @@ export const Header = ({ title, breadcrumbs = [] }: HeaderProps) => {
          </Breadcrumb>
        </div>
      )}
-      
+
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-white">{title}</h1>
        <div className="flex items-center gap-3">
--- a/frontend/src/components/RegionMap.tsx
+++ b/frontend/src/components/RegionMap.tsx
@@ -96,7 +96,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho

  type OffIndicator = { from: string; toRegion: string; count: number; color: string; angle: number; sampleTo?: string };
  const [offRegionIndicators, setOffRegionIndicators] = useState<OffIndicator[]>([]);
-  const [meanInboundAngle, setMeanInboundAngle] = useState<Record<string, number>>({});
+  const [meanNeighborAngle, setMeanNeighborAngle] = useState<Record<string, number>>({});
  const [charLocs, setCharLocs] = useState<Array<{ character_id: number; character_name: string; solar_system_name: string }>>([]);

  useEffect(() => {
@@ -133,7 +133,7 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
    setPositions(positions);
    const connections = computeNodeConnections(systems);
    setConnections(connections);
-    // Compute per-system mean outbound BEARING (0=north, clockwise positive) to in-region neighbors
+    // Compute per-system mean outbound angle in screen coords (atan2(dy,dx)) to in-region neighbors
    const angleMap: Record<string, number> = {};
    systems.forEach((sys, name) => {
      const neighbors = (sys.connectedSystems || '').split(',').map(s => s.trim()).filter(Boolean);
@@ -142,17 +142,17 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
        const neighbor = systems.get(n);
        if (!neighbor) continue;
        const dx = neighbor.x - sys.x;
-        const dy = neighbor.y - sys.y; // screen coords (y down)
-        const bearing = Math.atan2(dx, -dy); // bearing relative to north
-        sumSin += Math.sin(bearing);
-        sumCos += Math.cos(bearing);
+        const dy = neighbor.y - sys.y; // y-down screen
+        const a = Math.atan2(dy, dx);
+        sumSin += Math.sin(a);
+        sumCos += Math.cos(a);
        count++;
      }
      if (count > 0) {
-        angleMap[name] = Math.atan2(sumSin, sumCos); // average bearing
+        angleMap[name] = Math.atan2(sumSin, sumCos); // average angle
      }
    });
-    setMeanInboundAngle(angleMap);
+    setMeanNeighborAngle(angleMap);
  }, [systems]);

  // Poll character locations every 7s and store those in this region
@@ -208,58 +208,49 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
      }
      await ensureUniversePositions();

-      // Build indicators: group by from+toRegion
-      const grouped: Map<string, OffIndicator> = new Map();
+      // Build indicators: group by from+toRegion; angle from local geometry only (meanNeighborAngle + PI)
+      type Agg = { from: string; toRegion: string; count: number; sumRemoteSec: number; sampleTo?: string };
+      const grouped: Map<string, Agg> = new Map();
      for (const [fromName, sys] of systems.entries()) {
        const neighbors = (sys.connectedSystems || '').split(',').map(s => s.trim()).filter(Boolean);
        for (const n of neighbors) {
          if (systems.has(n)) continue;
          const toRegion = nameToRegion[n];
          if (!toRegion || toRegion === regionName) continue;
-
-          // compute color
          const remote = regionSystemsCache.get(toRegion)?.get(n);
-          const avgSec = ((sys.security || 0) + (remote?.security || 0)) / 2;
-          const color = getSecurityColor(avgSec);
-
-          // compute angle via universe region centroids
-          let angle: number | undefined = undefined;
-          const inbound = meanInboundAngle[fromName];
-          if (inbound !== undefined) {
-            angle = inbound; // mean outbound bearing already computed
-          } else {
-            const curPos = universeRegionPosCache.get(regionName);
-            const toPos = universeRegionPosCache.get(toRegion);
-            if (curPos && toPos) {
-              const dxr = toPos.x - curPos.x;
-              const dyr = toPos.y - curPos.y;
-              angle = Math.atan2(dxr, -dyr); // bearing to remote region
-            }
-          }
-          if (angle === undefined) {
-            // final fallback deterministic angle
-            let h = 0; const key = `${fromName}->${toRegion}`;
-            for (let i = 0; i < key.length; i++) h = (h * 31 + key.charCodeAt(i)) >>> 0;
-            angle = (h % 360) * (Math.PI / 180);
-          }
-          // Flip 180° so indicator points away from existing connections
-          angle = angle + Math.PI;
-
          const gkey = `${fromName}__${toRegion}`;
-          const prev = grouped.get(gkey);
-          if (prev) {
-            prev.count += 1;
-            if (!prev.sampleTo) prev.sampleTo = n;
-          } else {
-            grouped.set(gkey, { from: fromName, toRegion, count: 1, color, angle, sampleTo: n });
-          }
+          const agg = grouped.get(gkey) || { from: fromName, toRegion, count: 0, sumRemoteSec: 0, sampleTo: n };
+          agg.count += 1;
+          if (remote) agg.sumRemoteSec += (remote.security || 0);
+          grouped.set(gkey, agg);
        }
      }
+      const out: OffIndicator[] = [];
+      for (const [, agg] of grouped) {
+        if (agg.count === 0) continue;
+        // Angle: point away from existing connections = meanNeighborAngle + PI
+        let angle = meanNeighborAngle[agg.from];
+        if (angle === undefined) {
+          // fallback: away from region centroid
+          // compute centroid of current region nodes
+          let cx = 0, cy = 0, c = 0;
+          systems.forEach(s => { cx += s.x; cy += s.y; c++; });
+          if (c > 0) { cx /= c; cy /= c; }
+          const sys = systems.get(agg.from)!;
+          angle = Math.atan2(sys.y - cy, sys.x - cx);
+        }
+        angle = angle + Math.PI;

-      setOffRegionIndicators(Array.from(grouped.values()));
+        // Color from avg of local system sec and avg remote sec; local from this system
+        const localSec = (systems.get(agg.from)?.security || 0);
+        const remoteAvg = agg.count > 0 ? (agg.sumRemoteSec / agg.count) : 0;
+        const color = getSecurityColor((localSec + remoteAvg) / 2);
+        out.push({ from: agg.from, toRegion: agg.toRegion, count: agg.count, color, angle, sampleTo: agg.sampleTo });
+      }
+      setOffRegionIndicators(out);
    };
    computeOffRegion();
-  }, [systems, regionName]);
+  }, [systems, regionName, meanNeighborAngle]);

  useEffect(() => {
    if (isWormholeRegion) {
@@ -686,8 +677,8 @@ export const RegionMap = ({ regionName, focusSystem, isCompact = false, isWormho
          if (!pos) return null;
          const len = 26;
          const r0 = 10; // start just outside node
-          const dx = Math.sin(ind.angle);
-          const dy = -Math.cos(ind.angle);
+          const dx = Math.cos(ind.angle);
+          const dy = Math.sin(ind.angle);
          const x1 = pos.x + dx * r0;
          const y1 = pos.y + dy * r0;
          const x2 = x1 + dx * len;
--- a/frontend/src/components/SignatureCard.tsx
+++ b/frontend/src/components/SignatureCard.tsx
@@ -3,15 +3,15 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
 import { getSignatureMeta } from "@/hooks/useSignatureCategories";
@@ -52,7 +52,7 @@ export const SignatureCard = ({ signature, onDelete, onUpdate }: SignatureCardPr

  return (
    <>
-      <Card 
+      <Card
        className={`${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : 'bg-slate-800/40 border-slate-700'} hover:bg-slate-800/60 transition-all duration-200 hover:border-slate-600 relative cursor-pointer`}
        onClick={() => setIsEditModalOpen(true)}
      >
@@ -60,15 +60,15 @@ export const SignatureCard = ({ signature, onDelete, onUpdate }: SignatureCardPr
          <div className="space-y-3">
            {/* Type Badge - Most Important */}
            <div className="flex items-center justify-center">
-              <Badge 
-                variant="outline" 
+              <Badge
+                variant="outline"
                className={`${meta.color} px-3 py-1 text-sm font-semibold flex items-center gap-2`}
              >
                {meta.icon}
                {signature.type || 'Unknown Type'}
              </Badge>
            </div>
-            
+
            {/* Signature Name */}
            <div className="text-center">
              <h3 className="text-white font-medium text-lg">
@@ -82,7 +82,7 @@ export const SignatureCard = ({ signature, onDelete, onUpdate }: SignatureCardPr
                </div>
              )}
            </div>
-            
+
            {/* Additional Info */}
            <div className="space-y-2 text-sm text-slate-400">
              <div className="flex justify-between">
--- a/frontend/src/components/SignatureCategories.tsx
+++ b/frontend/src/components/SignatureCategories.tsx
@@ -53,9 +53,9 @@ export const SignatureCategories = ({ categories, onToggleCategory, onDelete, on
              <CardContent className="p-0">
                <div className="divide-y divide-slate-700">
                  {category.signatures.map((signature) => (
-                    <SignatureListItem 
-                      key={signature.id} 
-                      signature={signature} 
+                    <SignatureListItem
+                      key={signature.id}
+                      signature={signature}
                      onDelete={onDelete}
                      onUpdate={onUpdate}
                    />
--- a/frontend/src/components/SignatureEditModal.tsx
+++ b/frontend/src/components/SignatureEditModal.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
--- a/frontend/src/components/SignatureListItem.tsx
+++ b/frontend/src/components/SignatureListItem.tsx
@@ -2,15 +2,15 @@ import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-    AlertDialogTrigger,
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
 import { Clock, AlertTriangle, Skull, Trash2 } from "lucide-react";
 import { SigviewRecord as Signature } from "@/lib/pbtypes";
@@ -88,9 +88,8 @@ export const SignatureListItem = ({ signature, onDelete, onUpdate }: SignatureLi
 	return (
 		<>
 			<div
-				className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors cursor-pointer ${
-					oldEntry ? "opacity-50" : ""
-				} ${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : ''}`}
+				className={`flex items-center justify-between p-4 border-b border-slate-700 hover:bg-slate-800/40 transition-colors cursor-pointer ${oldEntry ? "opacity-50" : ""
+					} ${isGasSite ? 'bg-emerald-900/40 border-emerald-500 shadow-[0_0_15px_rgba(16,185,129,0.5)] hover:shadow-[0_0_20px_rgba(16,185,129,0.7)]' : ''}`}
 				onClick={() => setIsEditModalOpen(true)}
 			>
 				<div className="flex items-center gap-4 flex-1">
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -25,7 +25,7 @@ const badgeVariants = cva(

 export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  VariantProps<typeof badgeVariants> { }

 function Badge({ className, variant, ...props }: BadgeProps) {
  return (
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -35,7 +35,7 @@ const buttonVariants = cva(

 export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  VariantProps<typeof buttonVariants> {
  asChild?: boolean
 }

--- a/frontend/src/components/ui/chart.tsx
+++ b/frontend/src/components/ui/chart.tsx
@@ -82,13 +82,13 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
            ([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
+                .map(([key, itemConfig]) => {
+                  const color =
+                    itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+                    itemConfig.color
+                  return color ? `  --color-${key}: ${color};` : null
+                })
+                .join("\n")}
 }
 `
          )
@@ -103,13 +103,13 @@ const ChartTooltip = RechartsPrimitive.Tooltip
 const ChartTooltipContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
-    }
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }
 >(
  (
    {
@@ -259,10 +259,10 @@ const ChartLegend = RechartsPrimitive.Legend
 const ChartLegendContent = React.forwardRef<
  HTMLDivElement,
  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
-    }
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }
 >(
  (
    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
@@ -326,8 +326,8 @@ function getPayloadConfigFromPayload(

  const payloadPayload =
    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
+      typeof payload.payload === "object" &&
+      payload.payload !== null
      ? payload.payload
      : undefined

--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -21,7 +21,7 @@ const Command = React.forwardRef<
 ))
 Command.displayName = CommandPrimitive.displayName

-interface CommandDialogProps extends DialogProps {}
+interface CommandDialogProps extends DialogProps { }

 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -11,7 +11,7 @@ const labelVariants = cva(
 const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
  <LabelPrimitive.Root
    ref={ref}
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -31,9 +31,9 @@ const ScrollBar = React.forwardRef<
    className={cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    )}
    {...props}
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className
      )}
      position={position}
@@ -86,7 +86,7 @@ const SelectContent = React.forwardRef<
        className={cn(
          "p-1",
          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
        )}
      >
        {children}
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -128,4 +128,3 @@ export {
  Sheet, SheetClose,
  SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger
 }
-
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -612,7 +612,7 @@ const SidebarMenuAction = React.forwardRef<
        "peer-data-[size=lg]/menu-button:top-2.5",
        "group-data-[collapsible=icon]:hidden",
        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
        className
      )}
      {...props}
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -3,7 +3,7 @@ import * as React from "react"
 import { cn } from "@/lib/utils"

 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> { }

 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
  ({ className, ...props }, ref) => {
--- a/frontend/src/components/ui/toast.tsx
+++ b/frontend/src/components/ui/toast.tsx
@@ -41,7 +41,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
--- a/frontend/src/components/ui/toggle-group.tsx
+++ b/frontend/src/components/ui/toggle-group.tsx
@@ -15,7 +15,7 @@ const ToggleGroupContext = React.createContext<
 const ToggleGroup = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
  <ToggleGroupPrimitive.Root
    ref={ref}
@@ -33,7 +33,7 @@ ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
 const ToggleGroupItem = React.forwardRef<
  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
  const context = React.useContext(ToggleGroupContext)

--- a/frontend/src/components/ui/toggle.tsx
+++ b/frontend/src/components/ui/toggle.tsx
@@ -29,7 +29,7 @@ const toggleVariants = cva(
 const Toggle = React.forwardRef<
  React.ElementRef<typeof TogglePrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
  <TogglePrimitive.Root
    ref={ref}
--- a/frontend/src/hooks/use-toast.ts
+++ b/frontend/src/hooks/use-toast.ts
@@ -32,21 +32,21 @@ type ActionType = typeof actionTypes

 type Action =
  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
+    type: ActionType["ADD_TOAST"]
+    toast: ToasterToast
+  }
  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
+    type: ActionType["UPDATE_TOAST"]
+    toast: Partial<ToasterToast>
+  }
  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+    type: ActionType["DISMISS_TOAST"]
+    toastId?: ToasterToast["id"]
+  }
  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+    type: ActionType["REMOVE_TOAST"]
+    toastId?: ToasterToast["id"]
+  }

 interface State {
  toasts: ToasterToast[]
@@ -104,9 +104,9 @@ export const reducer = (state: State, action: Action): State => {
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
-                ...t,
-                open: false,
-              }
+              ...t,
+              open: false,
+            }
            : t
        ),
      }
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,3 @@
-
-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@@ -66,7 +64,9 @@
  * {
    @apply border-border;
  }
-  html, body {
+
+  html,
+  body {
    @apply bg-background text-foreground;
    height: 100vh;
    width: 100vw;
@@ -74,12 +74,14 @@
    margin: 0;
    padding: 0;
  }
+
  body {
    font-family: 'Inter', system-ui, sans-serif;
  }
+
  #root {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
-}
+}
--- a/frontend/src/lib/pbtypes.ts
+++ b/frontend/src/lib/pbtypes.ts
@@ -25,8 +25,8 @@ export type HTMLString = string

 type ExpandType<T> = unknown extends T
 	? T extends unknown
-		? { expand?: unknown }
-		: { expand: T }
+	? { expand?: unknown }
+	: { expand: T }
 	: { expand: T }

 // System fields
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,5 +1,5 @@
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';

 createRoot(document.getElementById("root")!).render(<App />);
--- a/frontend/src/pages/RegionPage.tsx
+++ b/frontend/src/pages/RegionPage.tsx
@@ -7,14 +7,14 @@ import { useNavigate } from 'react-router-dom';
 export const RegionPage = () => {
  const { region } = useParams<{ region: string }>();
  const navigate = useNavigate();
-  
+
  if (!region) {
    return (
      <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center overflow-hidden">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-white mb-4">Region Not Found</h1>
          <p className="text-purple-200 mb-6">The requested region does not exist in our database.</p>
-          <Button 
+          <Button
            onClick={() => navigate('/')}
            className="bg-purple-600 hover:bg-purple-700"
          >
@@ -28,8 +28,8 @@ export const RegionPage = () => {

  return (
    <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
-      <RegionMap 
-        regionName={region} 
+      <RegionMap
+        regionName={region}
        isWormholeRegion={region === "Wormhole"}
      />
    </div>
--- a/frontend/src/utils/securityColors.ts
+++ b/frontend/src/utils/securityColors.ts
@@ -1,7 +1,7 @@
 export const getSecurityColor = (security: number): string => {
  // Clamp security between -1 and 1
  const clampedSecurity = Math.max(-1, Math.min(1, security));
-  
+
  // Define color points for specific security values
  const colorPoints = [
    { sec: -1.0, color: [75, 0, 130] },    // Dark purple (same as 0.1)
@@ -31,7 +31,7 @@ export const getSecurityColor = (security: number): string => {

  // Calculate the ratio between the two points
  const ratio = (clampedSecurity - lowerPoint.sec) / (upperPoint.sec - lowerPoint.sec);
-  
+
  // Interpolate between the colors
  const red = Math.round(lowerPoint.color[0] + (upperPoint.color[0] - lowerPoint.color[0]) * ratio);
  const green = Math.round(lowerPoint.color[1] + (upperPoint.color[1] - lowerPoint.color[1]) * ratio);
Author	SHA1	Message	Date
PhatPhuckDave	90b190b8d5	Code format	2025-08-09 21:34:02 +02:00
PhatPhuckDave	c10f4b43cb	refactor(RegionMap.tsx): rename meanInboundAngle to meanNeighborAngle and update logic to compute mean angle to neighbors	2025-08-09 21:33:13 +02:00