@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/serverless/index.stx

@@ -0,0 +1,475 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Serverless')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <PageHeader title="Serverless Infrastructure" description="Visualize and manage your serverless AWS services and their relationships." />
+
+    <dl class="grid gap-5 grid-cols-2 sm:grid-cols-4 mt-8">
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Total Services</dt>
+        <dd class="mt-1 font-semibold text-3xl text-gray-900 dark:text-white">{{ services.length }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Connections</dt>
+        <dd class="mt-1 font-semibold text-3xl text-gray-900 dark:text-white">{{ links.length }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Service Types</dt>
+        <dd class="mt-1 font-semibold text-3xl text-gray-900 dark:text-white">{{ servicesByType.length }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Recent Events</dt>
+        <dd class="mt-1 font-semibold text-3xl text-gray-900 dark:text-white">{{ serverEventsRaw.length }}</dd>
+      </div>
+    </dl>
+
+    <div class="mt-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-4">
+          <h4 class="font-medium text-base text-gray-900 dark:text-neutral-100">Service topology</h4>
+          <p class="text-gray-500 text-xs dark:text-neutral-400">Drag nodes · scroll to zoom</p>
+        </div>
+        <div id="serverless_topology" class="h-[500px] w-full bg-neutral-50 dark:bg-neutral-800 rounded-lg"></div>
+      </div>
+    </div>
+
+    <div class="mt-8 space-y-8">
+      <template :for="group in servicesByType">
+        <div>
+          <h4 class="font-medium text-base text-gray-900 dark:text-white">{{ group.label }}</h4>
+          <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-3">
+            <template :for="service in group.services">
+              <div @click="selectService(service.id)" class="overflow-hidden p-4 bg-white dark:bg-neutral-700 rounded-lg hover:ring-2 hover:ring-blue-500 shadow cursor-pointer">
+                <div class="flex gap-3 items-center">
+                  <div class="flex items-center justify-center h-10 w-10 rounded-lg" :style="'background-color: ' + service.color + '20; color: ' + service.color">
+                    <div :class="service.icon" class="h-6 w-6"></div>
+                  </div>
+                  <div>
+                    <p class="font-medium text-gray-900 text-sm dark:text-white">{{ service.name }}</p>
+                    <p class="capitalize text-gray-500 text-xs dark:text-neutral-400">{{ service.type }}</p>
+                  </div>
+                </div>
+                <p class="mt-3 leading-relaxed text-gray-500 text-xs dark:text-neutral-400">{{ service.description }}</p>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div :show="selectedService() !== null" @click.self="closeService()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
+      <div class="overflow-y-auto p-6 max-h-[90vh] max-w-2xl w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
+        <div class="flex items-start justify-between">
+          <div class="flex gap-3 items-center">
+            <div class="flex items-center justify-center h-12 w-12 rounded-lg" :style="selectedServiceStyle()">
+              <div :class="selectedServiceIconClass()"></div>
+            </div>
+            <div>
+              <h3 class="font-semibold text-gray-900 text-lg dark:text-white">{{ selectedService()?.name }}</h3>
+              <p class="capitalize text-gray-500 text-sm dark:text-neutral-400">{{ selectedService()?.type }}</p>
+            </div>
+          </div>
+          <button @click="closeService()" class="text-gray-400 dark:text-neutral-300 hover:text-gray-600 dark:hover:text-white">
+            <i class="h-5 w-5 i-hugeicons-cancel-01"></i>
+          </button>
+        </div>
+
+        <p class="mt-4 text-gray-700 text-sm dark:text-neutral-300">{{ selectedService()?.description }}</p>
+
+        <div :show="selectedOutgoing().length > 0" class="mt-6">
+          <h4 class="font-medium text-gray-900 text-sm dark:text-white">Outgoing connections</h4>
+          <ul class="mt-2 space-y-2">
+            <template :for="conn in selectedOutgoing">
+              <li class="flex items-center justify-between p-2 bg-gray-50 dark:bg-neutral-700 rounded">
+                <span class="text-gray-900 text-sm dark:text-white">{{ conn.target?.name }}</span>
+                <span class="{{ linkTypeBadge(conn.type) }}">{{ conn.type }}</span>
+              </li>
+            </template>
+          </ul>
+        </div>
+
+        <div :show="selectedIncoming().length > 0" class="mt-6">
+          <h4 class="font-medium text-gray-900 text-sm dark:text-white">Incoming connections</h4>
+          <ul class="mt-2 space-y-2">
+            <template :for="conn in selectedIncoming">
+              <li class="flex items-center justify-between p-2 bg-gray-50 dark:bg-neutral-700 rounded">
+                <span class="text-gray-900 text-sm dark:text-white">{{ conn.source?.name }}</span>
+                <span class="{{ linkTypeBadge(conn.type) }}">{{ conn.type }}</span>
+              </li>
+            </template>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-12">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Recent Events</h3>
+          <p class="mt-2 text-gray-700 text-sm dark:text-neutral-400">Latest server events and notifications from your AWS services.</p>
+        </div>
+      </div>
+
+      <div class="inline-block min-w-full align-middle">
+        <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+          <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+            <thead class="bg-gray-50 dark:bg-neutral-600">
+              <tr>
+                <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Type</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Service</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Message</th>
+                <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Timestamp</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-700">
+              <template :for="event in serverEventsRaw">
+                <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600">
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
+                    <div :class="eventTypeIcon(event.type) + ' ' + eventTypeColor(event.type)" class="h-5 w-5"></div>
+                  </td>
+                  <td class="px-3 py-4 text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ event.service }}</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ event.message }}</td>
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ event.timestamp }}</td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Static topology data + view helpers — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const services = [
+  { id: 'lambda', name: 'Lambda', type: 'compute', description: 'Serverless compute service', icon: 'i-hugeicons-cloud', color: '#F90F71' },
+  { id: 's3', name: 'S3', type: 'storage', description: 'Object storage service', icon: 'i-hugeicons-database', color: '#6CAE3E' },
+  { id: 'dynamodb', name: 'DynamoDB', type: 'database', description: 'NoSQL database service', icon: 'i-hugeicons-database-02', color: '#527FFF' },
+  { id: 'sqs', name: 'SQS', type: 'queue', description: 'Message queue service', icon: 'i-hugeicons-message-multiple-02', color: '#FF4F8B' },
+  { id: 'apigateway', name: 'API Gateway', type: 'api', description: 'API management service', icon: 'i-hugeicons-globe', color: '#A166FF' },
+  { id: 'cloudfront', name: 'CloudFront', type: 'cdn', description: 'Content delivery network', icon: 'i-hugeicons-cloud-fast-wind', color: '#A166FF' },
+  { id: 'route53', name: 'Route 53', type: 'dns', description: 'DNS and domain management service', icon: 'i-hugeicons-route-01', color: '#C77DFF' },
+  { id: 'ses', name: 'SES', type: 'email', description: 'Email sending and receiving service', icon: 'i-hugeicons-mail-01', color: '#FF8E8E' },
+  { id: 'vpc', name: 'VPC', type: 'network', description: 'Virtual Private Cloud networking', icon: 'i-hugeicons-network', color: '#64B5FF' },
+  { id: 'efs', name: 'EFS', type: 'storage', description: 'Elastic File System', icon: 'i-hugeicons-folder-01', color: '#00D1B2' },
+  { id: 'ecs', name: 'ECS', type: 'compute', description: 'Elastic Container Service', icon: 'i-hugeicons-package', color: '#FFC300' },
+  { id: 'acm', name: 'ACM', type: 'security', description: 'Certificate Manager', icon: 'i-hugeicons-certificate-01', color: '#A166FF' },
+  { id: 'waf', name: 'WAF', type: 'security', description: 'Web Application Firewall', icon: 'i-hugeicons-shield-01', color: '#FF6B6B' },
+  { id: 'kms', name: 'KMS', type: 'security', description: 'Key Management Service', icon: 'i-hugeicons-key-01', color: '#7F6B99' },
+  { id: 'iam', name: 'IAM', type: 'security', description: 'Identity and Access Management', icon: 'i-hugeicons-user-shield-01', color: '#DD344C' },
+]
+
+const links = [
+  { source: 'apigateway', target: 'lambda', type: 'triggers' },
+  { source: 'lambda', target: 's3', type: 'uses' },
+  { source: 'lambda', target: 'dynamodb', type: 'uses' },
+  { source: 'lambda', target: 'sqs', type: 'processes' },
+  { source: 'cloudfront', target: 's3', type: 'connects' },
+  { source: 'route53', target: 'cloudfront', type: 'connects' },
+  { source: 'route53', target: 'apigateway', type: 'connects' },
+  { source: 'route53', target: 'ecs', type: 'connects' },
+  { source: 'lambda', target: 'ses', type: 'uses' },
+  { source: 'lambda', target: 'vpc', type: 'uses' },
+  { source: 'ecs', target: 'vpc', type: 'uses' },
+  { source: 'ecs', target: 'efs', type: 'uses' },
+  { source: 'waf', target: 'cloudfront', type: 'protects' },
+  { source: 'waf', target: 'apigateway', type: 'protects' },
+  { source: 'kms', target: 's3', type: 'protects' },
+  { source: 'kms', target: 'efs', type: 'protects' },
+  { source: 'acm', target: 'cloudfront', type: 'protects' },
+  { source: 'acm', target: 'apigateway', type: 'protects' },
+  { source: 'acm', target: 'ecs', type: 'protects' },
+]
+
+const serviceById = Object.fromEntries(services.map(s => [s.id, s]))
+
+const servicesWithConnections = services.map((service) => {
+  const outgoing = links.filter(l => l.source === service.id).map(l => ({ type: l.type, target: serviceById[l.target] }))
+  const incoming = links.filter(l => l.target === service.id).map(l => ({ type: l.type, source: serviceById[l.source] }))
+  return { ...service, outgoing, incoming, connectionCount: outgoing.length + incoming.length }
+})
+
+const servicesByType = ['compute', 'storage', 'database', 'queue', 'api', 'cdn', 'dns', 'email', 'network', 'security'].map(type => ({
+  type,
+  label: type.charAt(0).toUpperCase() + type.slice(1),
+  services: services.filter(s => s.type === type),
+})).filter(group => group.services.length > 0)
+
+const serverEventsRaw = [
+  { id: '1', service: 'Lambda', type: 'success', message: 'Function execution completed successfully', timestamp: '2024-03-21 14:23:45' },
+  { id: '2', service: 'API Gateway', type: 'info', message: 'New API endpoint deployed', timestamp: '2024-03-21 14:20:12' },
+  { id: '3', service: 'DynamoDB', type: 'warning', message: 'High read capacity utilization', timestamp: '2024-03-21 14:15:30' },
+  { id: '4', service: 'CloudFront', type: 'error', message: 'Cache invalidation failed', timestamp: '2024-03-21 14:10:55' },
+  { id: '5', service: 'S3', type: 'success', message: 'Bucket policy updated successfully', timestamp: '2024-03-21 14:05:22' },
+]
+
+function eventTypeColor(type: string): string {
+  switch (type) {
+    case 'success': return 'text-green-500'
+    case 'error': return 'text-red-500'
+    case 'warning': return 'text-yellow-500'
+    default: return 'text-blue-500'
+  }
+}
+
+function eventTypeIcon(type: string): string {
+  switch (type) {
+    case 'success': return 'i-hugeicons-checkmark-circle-02'
+    case 'error': return 'i-hugeicons-cancel-circle'
+    case 'warning': return 'i-hugeicons-alert-02'
+    default: return 'i-hugeicons-information-circle'
+  }
+}
+
+function linkTypeBadge(type: string): string {
+  const base = 'inline-flex items-center px-1.5 py-0.5 font-medium text-xs rounded'
+  switch (type) {
+    case 'triggers': return `${base} bg-pink-100 dark:bg-pink-900 text-pink-700 dark:text-pink-200`
+    case 'uses': return `${base} bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200`
+    case 'connects': return `${base} bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-200`
+    case 'processes': return `${base} bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-200`
+    case 'protects': return `${base} bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-200`
+    default: return `${base} bg-gray-100 dark:bg-neutral-700 text-gray-700 dark:text-neutral-200`
+  }
+}
+
+interface Service {
+  id: string
+  name: string
+  type: string
+  description: string
+  icon: string
+  color: string
+}
+
+interface Connection {
+  type: string
+  source?: Service
+  target?: Service
+}
+
+const servicesData: Service[] = [
+  { id: 'lambda', name: 'Lambda', type: 'compute', description: 'Serverless compute service', icon: 'i-hugeicons-cloud', color: '#F90F71' },
+  { id: 's3', name: 'S3', type: 'storage', description: 'Object storage service', icon: 'i-hugeicons-database', color: '#6CAE3E' },
+  { id: 'dynamodb', name: 'DynamoDB', type: 'database', description: 'NoSQL database service', icon: 'i-hugeicons-database-02', color: '#527FFF' },
+  { id: 'sqs', name: 'SQS', type: 'queue', description: 'Message queue service', icon: 'i-hugeicons-message-multiple-02', color: '#FF4F8B' },
+  { id: 'apigateway', name: 'API Gateway', type: 'api', description: 'API management service', icon: 'i-hugeicons-globe', color: '#A166FF' },
+  { id: 'cloudfront', name: 'CloudFront', type: 'cdn', description: 'Content delivery network', icon: 'i-hugeicons-cloud-fast-wind', color: '#A166FF' },
+  { id: 'route53', name: 'Route 53', type: 'dns', description: 'DNS and domain management service', icon: 'i-hugeicons-route-01', color: '#C77DFF' },
+  { id: 'ses', name: 'SES', type: 'email', description: 'Email sending and receiving service', icon: 'i-hugeicons-mail-01', color: '#FF8E8E' },
+  { id: 'vpc', name: 'VPC', type: 'network', description: 'Virtual Private Cloud networking', icon: 'i-hugeicons-network', color: '#64B5FF' },
+  { id: 'efs', name: 'EFS', type: 'storage', description: 'Elastic File System', icon: 'i-hugeicons-folder-01', color: '#00D1B2' },
+  { id: 'ecs', name: 'ECS', type: 'compute', description: 'Elastic Container Service', icon: 'i-hugeicons-package', color: '#FFC300' },
+  { id: 'acm', name: 'ACM', type: 'security', description: 'Certificate Manager', icon: 'i-hugeicons-certificate-01', color: '#A166FF' },
+  { id: 'waf', name: 'WAF', type: 'security', description: 'Web Application Firewall', icon: 'i-hugeicons-shield-01', color: '#FF6B6B' },
+  { id: 'kms', name: 'KMS', type: 'security', description: 'Key Management Service', icon: 'i-hugeicons-key-01', color: '#7F6B99' },
+  { id: 'iam', name: 'IAM', type: 'security', description: 'Identity and Access Management', icon: 'i-hugeicons-user-shield-01', color: '#DD344C' },
+]
+
+const linksData = [
+  { source: 'apigateway', target: 'lambda', type: 'triggers' },
+  { source: 'lambda', target: 's3', type: 'uses' },
+  { source: 'lambda', target: 'dynamodb', type: 'uses' },
+  { source: 'lambda', target: 'sqs', type: 'processes' },
+  { source: 'cloudfront', target: 's3', type: 'connects' },
+  { source: 'route53', target: 'cloudfront', type: 'connects' },
+  { source: 'route53', target: 'apigateway', type: 'connects' },
+  { source: 'route53', target: 'ecs', type: 'connects' },
+  { source: 'lambda', target: 'ses', type: 'uses' },
+  { source: 'lambda', target: 'vpc', type: 'uses' },
+  { source: 'ecs', target: 'vpc', type: 'uses' },
+  { source: 'ecs', target: 'efs', type: 'uses' },
+  { source: 'waf', target: 'cloudfront', type: 'protects' },
+  { source: 'waf', target: 'apigateway', type: 'protects' },
+  { source: 'kms', target: 's3', type: 'protects' },
+  { source: 'kms', target: 'efs', type: 'protects' },
+  { source: 'acm', target: 'cloudfront', type: 'protects' },
+  { source: 'acm', target: 'apigateway', type: 'protects' },
+  { source: 'acm', target: 'ecs', type: 'protects' },
+]
+
+const serviceById: Record<string, Service> = Object.fromEntries(servicesData.map(s => [s.id, s]))
+
+const selectedServiceId = state<string | null>(null)
+
+const selectedService = derived(() => selectedServiceId() ? serviceById[selectedServiceId()!] ?? null : null)
+
+const selectedOutgoing = derived<Connection[]>(() => {
+  const id = selectedServiceId()
+  if (!id)
+    return []
+  return linksData.filter(l => l.source === id).map(l => ({ type: l.type, target: serviceById[l.target] }))
+})
+
+const selectedIncoming = derived<Connection[]>(() => {
+  const id = selectedServiceId()
+  if (!id)
+    return []
+  return linksData.filter(l => l.target === id).map(l => ({ type: l.type, source: serviceById[l.source] }))
+})
+
+const selectedServiceStyle = derived(() => {
+  const s = selectedService()
+  return s ? `background-color: ${s.color}20; color: ${s.color}` : ''
+})
+
+const selectedServiceIconClass = derived(() => {
+  const s = selectedService()
+  return s ? `${s.icon} h-7 w-7` : ''
+})
+
+function selectService(id: string) {
+  selectedServiceId.set(id)
+}
+
+function closeService() {
+  selectedServiceId.set(null)
+}
+
+function linkTypeBadge(type: string): string {
+  const base = 'inline-flex items-center px-1.5 py-0.5 font-medium text-xs rounded'
+  switch (type) {
+    case 'triggers': return `${base} bg-pink-100 dark:bg-pink-900 text-pink-700 dark:text-pink-200`
+    case 'uses': return `${base} bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200`
+    case 'connects': return `${base} bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-200`
+    case 'processes': return `${base} bg-yellow-100 dark:bg-yellow-900 text-yellow-700 dark:text-yellow-200`
+    case 'protects': return `${base} bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-200`
+    default: return `${base} bg-gray-100 dark:bg-neutral-700 text-gray-700 dark:text-neutral-200`
+  }
+}
+
+function linkColor(type: string): string {
+  switch (type) {
+    case 'triggers': return '#FF4F8B'
+    case 'uses': return '#4053D6'
+    case 'connects': return '#569A31'
+    case 'processes': return '#FFC300'
+    case 'protects': return '#A166FF'
+    default: return '#6B7280'
+  }
+}
+
+let topologyCleanup: (() => void) | null = null
+
+async function renderTopology() {
+  const container = document.getElementById('serverless_topology')
+  if (!container)
+    return
+  topologyCleanup?.()
+  container.innerHTML = ''
+
+  const d3 = await import('d3')
+  const width = container.clientWidth || 800
+  const height = container.clientHeight || 500
+
+  type SimNode = Service & { x?: number, y?: number, fx?: number | null, fy?: number | null }
+  type SimLink = { source: string | SimNode, target: string | SimNode, type: string }
+
+  const nodes: SimNode[] = servicesData.map(s => ({ ...s }))
+  const links: SimLink[] = linksData.map(l => ({ source: l.source, target: l.target, type: l.type }))
+
+  const svg = d3.select(container)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .attr('viewBox', [0, 0, width, height])
+    .attr('style', 'max-width: 100%; height: auto;')
+
+  const zoomGroup = svg.append('g')
+  const zoom = d3.zoom<SVGSVGElement, unknown>()
+    .scaleExtent([0.3, 3])
+    .on('zoom', (event) => {
+      zoomGroup.attr('transform', event.transform.toString())
+    })
+  svg.call(zoom as any)
+
+  const link = zoomGroup.append('g')
+    .attr('stroke-opacity', 0.7)
+    .selectAll('line')
+    .data(links)
+    .join('line')
+    .attr('stroke', d => linkColor(d.type))
+    .attr('stroke-width', 2)
+
+  const node = zoomGroup.append('g')
+    .selectAll<SVGGElement, SimNode>('g')
+    .data(nodes)
+    .join('g')
+    .attr('cursor', 'pointer')
+    .on('click', (_event, d) => selectService(d.id))
+
+  node.append('circle')
+    .attr('r', 26)
+    .attr('fill', '#1E293B')
+    .attr('stroke', d => d.color)
+    .attr('stroke-width', 3)
+
+  node.append('circle')
+    .attr('r', 18)
+    .attr('fill', d => d.color)
+    .attr('fill-opacity', 0.85)
+
+  node.append('text')
+    .text(d => d.name)
+    .attr('text-anchor', 'middle')
+    .attr('dy', 44)
+    .attr('fill', 'currentColor')
+    .attr('font-size', '11px')
+    .attr('font-weight', '500')
+    .attr('class', 'text-gray-700 dark:text-neutral-200')
+    .attr('pointer-events', 'none')
+
+  const drag = d3.drag<SVGGElement, SimNode>()
+    .on('start', (event, d) => {
+      if (!event.active)
+        simulation.alphaTarget(0.3).restart()
+      d.fx = d.x
+      d.fy = d.y
+    })
+    .on('drag', (event, d) => {
+      d.fx = event.x
+      d.fy = event.y
+    })
+    .on('end', (event, d) => {
+      if (!event.active)
+        simulation.alphaTarget(0)
+      d.fx = null
+      d.fy = null
+    })
+  node.call(drag as any)
+
+  const simulation = d3.forceSimulation<SimNode>(nodes)
+    .force('link', d3.forceLink<SimNode, SimLink>(links).id(d => d.id).distance(140))
+    .force('charge', d3.forceManyBody().strength(-450))
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collide', d3.forceCollide<SimNode>().radius(40))
+    .on('tick', () => {
+      link
+        .attr('x1', d => (d.source as SimNode).x ?? 0)
+        .attr('y1', d => (d.source as SimNode).y ?? 0)
+        .attr('x2', d => (d.target as SimNode).x ?? 0)
+        .attr('y2', d => (d.target as SimNode).y ?? 0)
+      node.attr('transform', d => `translate(${d.x ?? 0},${d.y ?? 0})`)
+    })
+
+  topologyCleanup = () => {
+    simulation.stop()
+    container.innerHTML = ''
+  }
+}
+
+onMount(() => {
+  void renderTopology()
+})
+
+onDestroy(() => {
+  topologyCleanup?.()
+  topologyCleanup = null
+})
+</script>
+
+@endsection