{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "hero-globe-interactive-nodes", "title": "Hero Globe Interactive Nodes", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/hero-globe-interactive-nodes/hero-globe-interactive-nodes.component.ts", "content": "// Global edge latency simulation hero with interactive PoP node inspection and\n// real-time telemetry. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Activity,\n ArrowRight,\n Check,\n Copy,\n Globe,\n LucideAngularModule,\n Radio,\n Server,\n ShieldCheck,\n Terminal,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\n\nexport interface EdgeNode {\n id: string\n name: string\n region: string\n country: string\n city: string\n latencyMs: number\n p99LatencyMs: number\n cacheHitRatio: number\n qps: number\n status: 'optimal' | 'operational' | 'degraded'\n coordinates: { x: number; y: number }\n}\n\nconst DEFAULT_NODES: EdgeNode[] = [\n {\n id: 'node-iad',\n name: 'iad-1',\n region: 'us-east-1',\n country: 'United States',\n city: 'Washington, D.C.',\n latencyMs: 8,\n p99LatencyMs: 14,\n cacheHitRatio: 99.4,\n qps: 18450,\n status: 'optimal',\n coordinates: { x: 28, y: 38 },\n },\n {\n id: 'node-sfo',\n name: 'sfo-1',\n region: 'us-west-1',\n country: 'United States',\n city: 'San Francisco',\n latencyMs: 12,\n p99LatencyMs: 22,\n cacheHitRatio: 99.1,\n qps: 14200,\n status: 'optimal',\n coordinates: { x: 18, y: 40 },\n },\n {\n id: 'node-fra',\n name: 'fra-1',\n region: 'eu-central-1',\n country: 'Germany',\n city: 'Frankfurt',\n latencyMs: 15,\n p99LatencyMs: 27,\n cacheHitRatio: 98.9,\n qps: 21300,\n status: 'optimal',\n coordinates: { x: 52, y: 32 },\n },\n {\n id: 'node-sin',\n name: 'sin-1',\n region: 'ap-southeast-1',\n country: 'Singapore',\n city: 'Singapore',\n latencyMs: 24,\n p99LatencyMs: 41,\n cacheHitRatio: 98.6,\n qps: 16800,\n status: 'optimal',\n coordinates: { x: 76, y: 58 },\n },\n {\n id: 'node-nrt',\n name: 'nrt-1',\n region: 'ap-northeast-1',\n country: 'Japan',\n city: 'Tokyo',\n latencyMs: 19,\n p99LatencyMs: 34,\n cacheHitRatio: 99.2,\n qps: 19400,\n status: 'optimal',\n coordinates: { x: 84, y: 42 },\n },\n {\n id: 'node-syd',\n name: 'syd-1',\n region: 'ap-southeast-2',\n country: 'Australia',\n city: 'Sydney',\n latencyMs: 32,\n p99LatencyMs: 52,\n cacheHitRatio: 98.2,\n qps: 9800,\n status: 'optimal',\n coordinates: { x: 88, y: 78 },\n },\n {\n id: 'node-gru',\n name: 'gru-1',\n region: 'sa-east-1',\n country: 'Brazil',\n city: 'São Paulo',\n latencyMs: 44,\n p99LatencyMs: 68,\n cacheHitRatio: 97.9,\n qps: 7600,\n status: 'optimal',\n coordinates: { x: 36, y: 74 },\n },\n {\n id: 'node-lhr',\n name: 'lhr-1',\n region: 'eu-west-2',\n country: 'United Kingdom',\n city: 'London',\n latencyMs: 11,\n p99LatencyMs: 20,\n cacheHitRatio: 99.5,\n qps: 24600,\n status: 'optimal',\n coordinates: { x: 48, y: 30 },\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-hero-globe-interactive-nodes, [ui-hero-globe-interactive-nodes]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent],\n template: `\n
\n
\n
\n \n
\n \n \n Global Edge CDN Mesh Active • 310+ PoPs\n
\n\n

\n {{ title }}\n

\n\n

\n {{ description }}\n

\n\n \n
\n \n
\n \n {{ cliCommand }}\n
\n \n @if (copied()) {\n \n } @else {\n \n }\n \n
\n\n \n
\n\n \n
\n
\n
Global Avg Ping
\n
{{ avgGlobalLatency() }}ms
\n
−42% vs origin
\n
\n
\n
Network Throughput
\n
{{ totalGlobalQps() }}
\n
req/sec live
\n
\n
\n
Edge Availability
\n
99.95%
\n
Enterprise SLA
\n
\n
\n
\n\n \n
\n
\n
\n \n
\n
\n \n Active Edge Inspection\n
\n \n {{ selectedNode().city }} ({{ selectedNode().name }})\n \n
\n\n \n
\n \n \n @for (n of activeNodes().slice(1); track n.id) {\n \n }\n \n\n \n @for (node of activeNodes(); track node.id) {\n \n \n {{ selectedNodeId() === node.id ? node.name.slice(0, 3).toUpperCase() : '' }}\n \n @if (selectedNodeId() !== node.id) {\n \n }\n \n }\n
\n\n \n
\n
\n
\n \n Ping (p50)\n
\n
{{ selectedNode().latencyMs }}ms
\n
\n\n
\n
\n \n Ping (p99)\n
\n
{{ selectedNode().p99LatencyMs }}ms
\n
\n\n
\n
\n \n Cache Hit\n
\n
{{ selectedNode().cacheHitRatio }}%
\n
\n\n
\n
\n \n Throughput\n
\n
\n {{ selectedNode().qps.toLocaleString() }} qps\n
\n
\n
\n\n \n
\n @for (node of activeNodes(); track node.id) {\n \n }\n
\n
\n
\n
\n \n \n
\n `,\n})\nexport class UiHeroGlobeInteractiveNodesComponent {\n protected readonly Activity = Activity\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Globe = Globe\n protected readonly Radio = Radio\n protected readonly Server = Server\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Terminal = Terminal\n protected readonly Zap = Zap\n\n @Input() title = 'Sub-millisecond UI edge delivery across 310+ PoPs globally.'\n @Input() description =\n 'Compile unbundled Vue 3.5 and React 19 components with instant edge caching. Zero cold starts, deterministic tree-shaking, and hardware-accelerated telemetry.'\n @Input() cliCommand = 'npx shadcn add @uipkge/init'\n @Input() nodes?: EdgeNode[]\n @Input('class') className?: string\n\n readonly selectedNodeId = signal('node-iad')\n readonly copied = signal(false)\n\n private copyTimer: ReturnType | undefined\n\n readonly activeNodes = computed(() => this.nodes ?? DEFAULT_NODES)\n\n readonly hubNode = computed(() => this.activeNodes()[0] ?? DEFAULT_NODES[0]!)\n\n readonly selectedNode = computed(() => {\n const all = this.activeNodes()\n return all.find((n) => n.id === this.selectedNodeId()) ?? all[0] ?? DEFAULT_NODES[0]!\n })\n\n readonly avgGlobalLatency = computed(() => {\n const all = this.activeNodes()\n if (!all.length) return 0\n return Math.round(all.reduce((acc, curr) => acc + curr.latencyMs, 0) / all.length)\n })\n\n readonly totalGlobalQps = computed(() =>\n this.activeNodes()\n .reduce((acc, curr) => acc + curr.qps, 0)\n .toLocaleString(),\n )\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', this.className)\n }\n\n nodeButtonClass(id: string): string {\n return cn(\n 'focus-visible:ring-ring absolute flex -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',\n this.selectedNodeId() === id\n ? 'bg-primary text-primary-foreground ring-primary/20 z-10 size-7 scale-110 shadow-sm ring-4'\n : 'bg-card hover:bg-accent border-border text-foreground size-5 border hover:scale-105',\n )\n }\n\n nodePillClass(id: string): string {\n return cn(\n 'rounded-md border px-2 py-1 font-mono text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',\n this.selectedNodeId() === id\n ? 'border-primary bg-primary/10 text-primary'\n : 'border-border bg-card text-muted-foreground hover:text-foreground hover:bg-accent/50',\n )\n }\n\n selectNode(id: string): void {\n this.selectedNodeId.set(id)\n }\n\n async copyCommand(): Promise {\n try {\n await navigator.clipboard.writeText(this.cliCommand)\n this.copied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n } catch {\n // Clipboard unavailable (e.g. insecure context): leave the Copy icon.\n }\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-globe-interactive-nodes/hero-globe-interactive-nodes.component.ts" }, { "path": "packages/registry-angular/blocks/hero-globe-interactive-nodes/index.ts", "content": "export { UiHeroGlobeInteractiveNodesComponent, type EdgeNode } from './hero-globe-interactive-nodes.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/hero-globe-interactive-nodes/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json" ], "description": "Global edge latency simulation hero with interactive PoP node inspection and real-time telemetry.", "categories": [ "hero", "marketing" ], "deprecated": true, "replacedBy": "hero" }