UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Global Edge Network

blockdashboard
Boilerplate repo

Cloudflare Radar and Vercel Edge style infrastructure console with real-time anycast telemetry, interactive DottedMapChart with Bezier flow corridors, P95 latency HUD metrics, and live edge node routing table.

Installation

$npx uipkge-ng@latest add global-edge-network
Manifest:https://uipkge.dev/r/angular/global-edge-network.jsonInstalls to:src/app/components/blocks/global-edge-network/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

MapPin
interface MapPin {
  lat: number
  lng: number
  label?: string
  color?: string
  description?: string
  value?: string | number
  status?: string
}
MapRoute
interface MapRoute {
  from: { lat: number; lng: number }
  to: { lat: number; lng: number }
  color?: string
  width?: number
  curvature?: number
  animated?: boolean
  dashed?: boolean
  duration?: number
  label?: string
}
EdgeNode
interface EdgeNode {
  id: string
  name: string
  code: string
  region: 'Americas' | 'Europe' | 'APAC'
  city: string
  country: string
  role: string
  lat: number
  lng: number
  latencyMs: number
  throughput: string
  status: 'optimal' | 'degraded'
}
CorridorDefinition
interface CorridorDefinition {
  fromNodeId: string
  toNodeId: string
  color?: string
  duration?: number
  curvature?: number
  dashed?: boolean
  label: string
}

npm dependencies

lucide-angular

Theming

CSS custom properties referenced in this item. Override any of them in your :root or per-element to retheme.

--chart-1--chart-2--chart-3--chart-4--chart-5--primary

Files installed (2)

  • src/app/components/blocks/global-edge-network/global-edge-network.component.ts14.5 kB
    // Global edge network console: a DottedMapChart hero with four floating HUD chips
// (title + node count, region filter, node inspector, P95 latency). Hovering or
// clicking a pin fills the inspector; the region filter narrows pins and corridors.
import { Component, computed, signal, ChangeDetectionStrategy } from '@angular/core'
import { Globe, LucideAngularModule, X } from 'lucide-angular'
import { UiDottedMapChartComponent } from '@/ui/charts/dotted-map-chart/dotted-map-chart.component'
import { cn } from '@/lib/utils'

/** Pin shape the React/Vue DottedMapChart takes (`MapPin`). */
export interface MapPin {
  lat: number
  lng: number
  label?: string
  color?: string
  description?: string
  value?: string | number
  status?: string
}

/** Route shape the React/Vue DottedMapChart takes (`MapRoute`). */
export interface MapRoute {
  from: { lat: number; lng: number }
  to: { lat: number; lng: number }
  color?: string
  width?: number
  curvature?: number
  animated?: boolean
  dashed?: boolean
  duration?: number
  label?: string
}

export interface EdgeNode {
  id: string
  name: string
  code: string
  region: 'Americas' | 'Europe' | 'APAC'
  city: string
  country: string
  role: string
  lat: number
  lng: number
  latencyMs: number
  throughput: string
  status: 'optimal' | 'degraded'
}

const REGIONS = ['All', 'Americas', 'Europe', 'APAC'] as const
export type RegionFilter = (typeof REGIONS)[number]

const ALL_NODES: EdgeNode[] = [
  {
    id: 'sfo-01',
    name: 'SFO-Edge-1',
    code: 'SFO',
    region: 'Americas',
    city: 'San Francisco',
    country: 'United States',
    role: 'Tier-1 Gateway',
    lat: 37.7749,
    lng: -122.4194,
    latencyMs: 18,
    throughput: '340 Gbps',
    status: 'optimal',
  },
  {
    id: 'iad-01',
    name: 'IAD-Edge-1',
    code: 'IAD',
    region: 'Americas',
    city: 'Ashburn',
    country: 'United States',
    role: 'Primary Transit Core',
    lat: 39.0438,
    lng: -77.4874,
    latencyMs: 12,
    throughput: '520 Gbps',
    status: 'optimal',
  },
  {
    id: 'ord-01',
    name: 'ORD-Edge-1',
    code: 'ORD',
    region: 'Americas',
    city: 'Chicago',
    country: 'United States',
    role: 'Midwest Exchange',
    lat: 41.8781,
    lng: -87.6298,
    latencyMs: 19,
    throughput: '280 Gbps',
    status: 'optimal',
  },
  {
    id: 'gru-01',
    name: 'GRU-Edge-1',
    code: 'GRU',
    region: 'Americas',
    city: 'São Paulo',
    country: 'Brazil',
    role: 'LATAM Core Transit',
    lat: -23.5505,
    lng: -46.6333,
    latencyMs: 44,
    throughput: '140 Gbps',
    status: 'degraded',
  },
  {
    id: 'lhr-01',
    name: 'LHR-Edge-1',
    code: 'LHR',
    region: 'Europe',
    city: 'London',
    country: 'United Kingdom',
    role: 'EMEA Backbone Core',
    lat: 51.5074,
    lng: -0.1278,
    latencyMs: 14,
    throughput: '480 Gbps',
    status: 'optimal',
  },
  {
    id: 'fra-01',
    name: 'FRA-Edge-1',
    code: 'FRA',
    region: 'Europe',
    city: 'Frankfurt',
    country: 'Germany',
    role: 'DE-CIX Direct Peer',
    lat: 50.1109,
    lng: 8.6821,
    latencyMs: 16,
    throughput: '410 Gbps',
    status: 'optimal',
  },
  {
    id: 'ams-01',
    name: 'AMS-Edge-1',
    code: 'AMS',
    region: 'Europe',
    city: 'Amsterdam',
    country: 'Netherlands',
    role: 'AMS-IX Transit Ring',
    lat: 52.3676,
    lng: 4.9041,
    latencyMs: 15,
    throughput: '390 Gbps',
    status: 'optimal',
  },
  {
    id: 'nrt-01',
    name: 'NRT-Edge-1',
    code: 'NRT',
    region: 'APAC',
    city: 'Tokyo',
    country: 'Japan',
    role: 'East Asia Gateway',
    lat: 35.6762,
    lng: 139.6503,
    latencyMs: 22,
    throughput: '360 Gbps',
    status: 'optimal',
  },
  {
    id: 'sin-01',
    name: 'SIN-Edge-1',
    code: 'SIN',
    region: 'APAC',
    city: 'Singapore',
    country: 'Singapore',
    role: 'South Asia Gateway',
    lat: 1.3521,
    lng: 103.8198,
    latencyMs: 26,
    throughput: '290 Gbps',
    status: 'optimal',
  },
  {
    id: 'syd-01',
    name: 'SYD-Edge-1',
    code: 'SYD',
    region: 'APAC',
    city: 'Sydney',
    country: 'Australia',
    role: 'Oceania Anycast POP',
    lat: -33.8688,
    lng: 151.2093,
    latencyMs: 31,
    throughput: '170 Gbps',
    status: 'optimal',
  },
]

interface CorridorDefinition {
  fromNodeId: string
  toNodeId: string
  color?: string
  duration?: number
  curvature?: number
  dashed?: boolean
  label: string
}

const CORRIDORS: CorridorDefinition[] = [
  {
    fromNodeId: 'sfo-01',
    toNodeId: 'iad-01',
    color: 'var(--chart-1)',
    duration: 2.6,
    curvature: 0.2,
    label: 'Trans-US Backbone (SFO ↔ IAD)',
  },
  {
    fromNodeId: 'sfo-01',
    toNodeId: 'ord-01',
    color: 'var(--chart-1)',
    duration: 2.2,
    curvature: 0.16,
    dashed: true,
    label: 'Central Overland (SFO ↔ ORD)',
  },
  {
    fromNodeId: 'ord-01',
    toNodeId: 'iad-01',
    color: 'var(--chart-1)',
    duration: 1.8,
    curvature: 0.14,
    label: 'Great Lakes Trunk (ORD ↔ IAD)',
  },
  {
    fromNodeId: 'iad-01',
    toNodeId: 'lhr-01',
    color: 'var(--chart-2)',
    duration: 3.2,
    curvature: 0.28,
    label: 'Transatlantic Express (IAD ↔ LHR)',
  },
  {
    fromNodeId: 'lhr-01',
    toNodeId: 'fra-01',
    color: 'var(--chart-3)',
    duration: 1.9,
    curvature: 0.15,
    label: 'Channel Link (LHR ↔ FRA)',
  },
  {
    fromNodeId: 'fra-01',
    toNodeId: 'ams-01',
    color: 'var(--chart-3)',
    duration: 1.7,
    curvature: 0.14,
    dashed: true,
    label: 'Rhine Valley Ring (FRA ↔ AMS)',
  },
  {
    fromNodeId: 'lhr-01',
    toNodeId: 'ams-01',
    color: 'var(--chart-3)',
    duration: 1.8,
    curvature: 0.16,
    label: 'North Sea Subsea (LHR ↔ AMS)',
  },
  {
    fromNodeId: 'fra-01',
    toNodeId: 'sin-01',
    color: 'var(--chart-4)',
    duration: 3.6,
    curvature: 0.22,
    label: 'Eurasia Optical Trunk (FRA ↔ SIN)',
  },
  {
    fromNodeId: 'sin-01',
    toNodeId: 'nrt-01',
    color: 'var(--chart-4)',
    duration: 2.5,
    curvature: 0.18,
    label: 'East Asia Marine Cable (SIN ↔ NRT)',
  },
  {
    fromNodeId: 'sin-01',
    toNodeId: 'syd-01',
    color: 'var(--chart-5)',
    duration: 3.0,
    curvature: 0.22,
    dashed: true,
    label: 'Southern Cross Link (SIN ↔ SYD)',
  },
  {
    fromNodeId: 'nrt-01',
    toNodeId: 'sfo-01',
    color: 'var(--chart-2)',
    duration: 3.8,
    curvature: 0.3,
    label: 'Pacific High-Speed (NRT ↔ SFO)',
  },
  {
    fromNodeId: 'iad-01',
    toNodeId: 'gru-01',
    color: 'var(--chart-5)',
    duration: 3.4,
    curvature: 0.24,
    label: 'Americas Interlink (IAD ↔ GRU)',
  },
]

const NODE_MAP = new Map(ALL_NODES.map((n) => [n.id, n]))

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-global-edge-network, [ui-global-edge-network]',
  standalone: true,
  host: { class: 'contents' },
  imports: [LucideAngularModule, UiDottedMapChartComponent],
  template: `
    <div
      data-slot="global-edge-network"
      class="border-border bg-card/60 relative h-[500px] w-full overflow-hidden rounded-xl border shadow-xs backdrop-blur-xs"
    >
      <!-- Map Canvas (Hero) -->
      <ui-dotted-map-chart
        [pins]="mapPins()"
        [routes]="mapRoutes()"
        [height]="500"
        ariaLabel="Global Anycast Edge Network World Map"
        class="h-full w-full"
        (pinClick)="handlePinClick($any($event))"
        (pinHover)="handlePinHover($any($event))"
      />

      <!-- Top-Left Floating Chip: Title & Status -->
      <div class="pointer-events-none absolute top-3 left-3 z-10 sm:top-4 sm:left-4">
        <div
          class="border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium shadow-xs backdrop-blur-md"
        >
          <span class="text-foreground flex items-center gap-1.5">
            <lucide-icon [img]="Globe" class="text-muted-foreground h-3.5 w-3.5" />
            <span class="tracking-tight">Global Transit Mesh</span>
          </span>
          <span class="text-muted-foreground/40">•</span>
          <span class="text-muted-foreground inline-flex items-center gap-1.5">
            <span class="bg-success h-1.5 w-1.5 animate-pulse rounded-full"></span>
            <span>{{ activeNodesText() }}</span>
          </span>
          <span class="text-muted-foreground/40 hidden md:inline">•</span>
          <span class="text-muted-foreground hidden font-mono md:inline">{{ activeAvgLatencyText() }}</span>
        </div>
      </div>

      <!-- Top-Right Floating Chip: Glass Segmented Region Filter -->
      <div class="pointer-events-none absolute top-3 right-3 z-10 sm:top-4 sm:right-4">
        <div
          class="border-border/60 bg-muted/60 pointer-events-auto inline-flex items-center gap-0.5 rounded-lg border p-0.5 text-xs shadow-xs backdrop-blur-md"
        >
          @for (region of regions; track region) {
            <button type="button" [class]="regionClass(region)" (click)="setRegion(region)">{{ region }}</button>
          }
        </div>
      </div>

      <!-- Bottom-Left Floating Chip: Interactive Node Inspector -->
      <div class="pointer-events-none absolute bottom-3 left-3 z-10 sm:bottom-4 sm:left-4">
        <div
          class="border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs shadow-xs backdrop-blur-md transition-colors duration-150"
        >
          @if (activeNode(); as node) {
            <span [class]="statusDotClass(node)"></span>
            <span class="text-foreground font-medium">{{ node.city }} ({{ node.code }})</span>
            <span class="text-muted-foreground/40">•</span>
            <span class="text-muted-foreground font-mono">{{ node.latencyMs }}ms</span>
            <span class="text-muted-foreground/40 hidden sm:inline">•</span>
            <span class="text-muted-foreground hidden font-mono sm:inline">{{ node.throughput }}</span>
            @if (selectedNode()) {
              <button
                type="button"
                aria-label="Clear selection"
                class="text-muted-foreground hover:text-foreground hover:bg-muted -mr-1 ml-0.5 rounded-full p-0.5 transition-colors"
                (click)="selectedNode.set(null)"
              >
                <lucide-icon [img]="X" class="h-3 w-3" />
              </button>
            }
          } @else {
            <span class="bg-muted-foreground/40 h-1.5 w-1.5 shrink-0 rounded-full"></span>
            <span class="text-muted-foreground">Click a node to inspect</span>
          }
        </div>
      </div>

      <!-- Bottom-Right Floating Chip: Minimal Latency Badge -->
      <div class="pointer-events-none absolute right-3 bottom-3 z-10 sm:right-4 sm:bottom-4">
        <div
          class="border-border/60 bg-background/80 pointer-events-auto inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium shadow-xs backdrop-blur-md"
        >
          <span class="text-muted-foreground">P95</span>
          <span class="text-foreground font-mono">{{ p95Latency() }}</span>
        </div>
      </div>
    </div>
  `,
})
export class UiGlobalEdgeNetworkComponent {
  protected readonly Globe = Globe
  protected readonly X = X
  protected readonly regions = REGIONS

  readonly activeRegion = signal<RegionFilter>('All')
  readonly selectedNode = signal<EdgeNode | null>(null)
  readonly hoveredNode = signal<EdgeNode | null>(null)

  readonly activeNode = computed(() => this.hoveredNode() || this.selectedNode())

  readonly filteredNodes = computed(() => {
    const region = this.activeRegion()
    if (region === 'All') return ALL_NODES
    return ALL_NODES.filter((n) => n.region === region)
  })

  readonly mapPins = computed<MapPin[]>(() =>
    this.filteredNodes().map((n) => ({
      lat: n.lat,
      lng: n.lng,
      label: `${n.city} (${n.code})`,
      color: n.status === 'optimal' ? 'var(--chart-1)' : '#f59e0b',
      description: n.role,
      value: `${n.latencyMs}ms • ${n.throughput}`,
      status: n.status,
    })),
  )

  readonly mapRoutes = computed<MapRoute[]>(() => {
    const region = this.activeRegion()
    const visibleIds = new Set(this.filteredNodes().map((n) => n.id))
    const routes: MapRoute[] = []
    for (const c of CORRIDORS) {
      if (region !== 'All' && !(visibleIds.has(c.fromNodeId) && visibleIds.has(c.toNodeId))) continue
      const fromNode = NODE_MAP.get(c.fromNodeId)
      const toNode = NODE_MAP.get(c.toNodeId)
      if (!fromNode || !toNode) continue
      routes.push({
        from: { lat: fromNode.lat, lng: fromNode.lng },
        to: { lat: toNode.lat, lng: toNode.lng },
        color: c.color ?? 'var(--primary)',
        duration: c.duration ?? 3,
        curvature: c.curvature ?? 0.2,
        dashed: c.dashed,
        label: c.label,
      })
    }
    return routes
  })

  readonly activeNodesText = computed(() => {
    switch (this.activeRegion()) {
      case 'Americas':
        return '12 Nodes Active'
      case 'Europe':
        return '11 Nodes Active'
      case 'APAC':
        return '9 Nodes Active'
      default:
        return '32 Nodes Active'
    }
  })

  readonly activeAvgLatencyText = computed(() => {
    switch (this.activeRegion()) {
      case 'Americas':
        return '16ms avg'
      case 'Europe':
        return '15ms avg'
      case 'APAC':
        return '26ms avg'
      default:
        return '18ms avg'
    }
  })

  readonly p95Latency = computed(() => {
    switch (this.activeRegion()) {
      case 'Americas':
        return '19ms'
      case 'Europe':
        return '16ms'
      case 'APAC':
        return '28ms'
      default:
        return '24ms'
    }
  })

  setRegion(region: RegionFilter): void {
    this.activeRegion.set(region)
    const selected = this.selectedNode()
    if (selected && region !== 'All' && selected.region !== region) {
      this.selectedNode.set(null)
    }
  }

  handlePinClick(pin: MapPin): void {
    const node = ALL_NODES.find((n) => n.lat === pin.lat && n.lng === pin.lng)
    if (node) {
      this.selectedNode.update((prev) => (prev?.id === node.id ? null : node))
    }
  }

  handlePinHover(pin: MapPin | null): void {
    if (!pin) {
      this.hoveredNode.set(null)
    } else {
      this.hoveredNode.set(ALL_NODES.find((n) => n.lat === pin.lat && n.lng === pin.lng) ?? null)
    }
  }

  regionClass(region: RegionFilter): string {
    return cn(
      'rounded-md px-2.5 py-1 text-xs font-medium transition-colors duration-150',
      this.activeRegion() === region
        ? 'bg-background text-foreground shadow-xs'
        : 'text-muted-foreground hover:text-foreground hover:bg-background/40',
    )
  }

  statusDotClass(node: EdgeNode): string {
    return cn('h-1.5 w-1.5 shrink-0 rounded-full', node.status === 'optimal' ? 'bg-success' : 'bg-warning')
  }
}
  • src/app/components/blocks/global-edge-network/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/global-edge-network.json