feat: add member details overlay to topology

2025-08-30 15:18:50 +02:00
parent f28b4f8797
commit 7bac42c58e
4 changed files with 537 additions and 1 deletions
--- a/public/test-topology-overlay.html
+++ b/public/test-topology-overlay.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Topology with Member Card Overlay</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="./d3.v7.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Test Topology with Member Card Overlay</h1>
+        
+        <div class="test-section">
+            <h2>Topology View with Clickable Nodes</h2>
+            <p>Click on any node in the topology to see the member card overlay.</p>
+            <button id="refresh-topology-btn">Refresh Topology</button>
+        </div>
+        
+        <div id="topology-graph-container">
+            <div class="loading">
+                <div>Loading network topology...</div>
+            </div>
+        </div>
+        
+        <div id="member-card-overlay" class="member-card-overlay"></div>
+    </div>
+
+    <script src="./demo-topology-data.js"></script>
+    <script src="./framework.js"></script>
+    <script src="./components.js"></script>
+    <script>
+        // Test the topology view with member card overlay
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('Setting up test topology with member card overlay...');
+            
+            // Override the API client with demo data
+            window.apiClient = window.demoApiClient;
+            
+            // Create topology view model
+            const topologyVM = new TopologyViewModel();
+            
+            // Create the topology component
+            const topologyComponent = new TopologyGraphComponent(
+                document.getElementById('topology-graph-container'), 
+                topologyVM, 
+                new EventBus()
+            );
+            
+            // Mount the component
+            topologyComponent.mount();
+            
+            // Refresh button
+            const refreshBtn = document.getElementById('refresh-topology-btn');
+            refreshBtn.addEventListener('click', function() {
+                topologyVM.updateNetworkTopology();
+            });
+            
+            console.log('Test topology setup complete');
+        });
+    </script>
+</body>
+</html>