.. titel: Traceroute Visualizer
.. snigel: traceroute-visualizer
.. datum: 2026-01-10 15:00:00 UTC
.. taggar: nätverk, traceroute, visualisering, geoip, verktyg
.. kategori: Ethernet och IP-verktyg
..länk:
.. beskrivning: Visualisera spårvägar med geografisk information och nätverkstopologi
.. typ: text
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/leaflet.fullscreen@2.4.0/Control.FullScreen.css" rel="stylesheet"/>
<style>
    .traceroute-container {
        max-width: 1400px;
        margin: 20px auto;
        padding: 20px;
    }

    .tool-header {
        margin-bottom: 30px;
        padding: 25px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        color: white;
    }

    .tool-header h2 {
        margin-top: 0;
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
    }

    .tool-header p {
        margin: 10px 0;
        opacity: 0.95;
        font-size: 15px;
    }

    .input-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .input-section label {
        display: block;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
        font-size: 16px;
    }

    #tracerouteInput {
        width: 100%;
        min-height: 200px;
        padding: 15px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        border: 2px solid #ddd;
        border-radius: 6px;
        resize: vertical;
        background: #f9f9f9;
        transition: all 0.3s ease;
    }

    #tracerouteInput:focus {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .button-group {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .btn {
        padding: 12px 30px;
        font-size: 16px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .btn-primary {
        background: #4CAF50;
        color: white;
    }

    .btn-primary:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .btn-secondary {
        background: #f44336;
        color: white;
    }

    .btn-secondary:hover {
        background: #da190b;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }

    .btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }

    .status-message {
        margin-top: 15px;
        padding: 12px 20px;
        border-radius: 6px;
        font-size: 14px;
        display: none;
    }

    .status-message.info {
        background: #e3f2fd;
        color: #1976d2;
        border: 1px solid #90caf9;
        display: block;
    }

    .status-message.success {
        background: #e8f5e9;
        color: #2e7d32;
        border: 1px solid #81c784;
        display: block;
    }

    .status-message.error {
        background: #ffebee;
        color: #c62828;
        border: 1px solid #ef9a9a;
        display: block;
    }

    .stats-section {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
    }

    .stat-card .stat-value {
        font-size: 32px;
        font-weight: bold;
        color: #667eea;
        margin-bottom: 5px;
    }

    .stat-card .stat-label {
        font-size: 14px;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .visualization-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: none;
    }

    .visualization-section.show {
        display: block;
    }

    .viz-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .viz-header h3 {
        margin: 0;
    }

    .view-toggle {
        display: flex;
        gap: 5px;
        background: #f0f0f0;
        padding: 4px;
        border-radius: 8px;
    }

    .view-toggle button {
        padding: 8px 20px;
        border: none;
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        color: #666;
    }

    .view-toggle button.active {
        background: white;
        color: #667eea;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .view-toggle button:hover:not(.active) {
        color: #333;
    }

    #mapView, #graphView {
        display: none;
    }

    #mapView.active, #graphView.active {
        display: block;
    }

    #map {
        width: 100%;
        height: 600px;
        border-radius: 6px;
        z-index: 1;
    }

    #graphVisualization {
        width: 100%;
        height: 600px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background: #fafafa;
    }

    .map-legend {
        background: white;
        padding: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        font-size: 13px;
        line-height: 1.8;
    }

    .map-legend h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: #333;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }

    .legend-color {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid white;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    }

    .legend-color.public { background: #4CAF50; }
    .legend-color.timeout { background: #ef9a9a; }

    .legend-line {
        width: 30px;
        height: 3px;
        background: #667eea;
        border-radius: 2px;
    }

    .info-note {
        margin-top: 10px;
        padding: 8px;
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 4px;
        font-size: 12px;
        color: #856404;
    }

    .hop-table-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: none;
    }

    .hop-table-section.show {
        display: block;
    }

    .hop-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .hop-table th {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: bold;
        position: sticky;
        top: 0;
    }

    .hop-table td {
        padding: 12px;
        border-bottom: 1px solid #e0e0e0;
    }

    .hop-table tr:hover {
        background: #f5f5f5;
    }

    .hop-table .hop-num {
        font-weight: bold;
        color: #667eea;
        width: 60px;
    }

    .hop-table .ip-address {
        font-family: 'Courier New', monospace;
        color: #333;
    }

    .hop-table .latency {
        color: #4CAF50;
        font-family: 'Courier New', monospace;
    }

    .hop-table .location {
        color: #666;
    }

    .badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: bold;
        margin-left: 5px;
    }

    .badge-private {
        background: #ffd54f;
        color: #f57f17;
    }

    .badge-timeout {
        background: #ef9a9a;
        color: #c62828;
    }

    .node {
        cursor: pointer;
    }

    .node circle {
        stroke: #fff;
        stroke-width: 2px;
    }

    .node.private circle {
        fill: #ffd54f;
    }

    .node.public circle {
        fill: #4CAF50;
    }

    .node.timeout circle {
        fill: #ef9a9a;
    }

    .node text {
        font-size: 12px;
        font-weight: bold;
        pointer-events: none;
    }

    .link {
        fill: none;
        stroke: #999;
        stroke-width: 2px;
        stroke-opacity: 0.6;
    }

    .link.highlight {
        stroke: #667eea;
        stroke-width: 3px;
        stroke-opacity: 1;
    }

    .tooltip {
        position: absolute;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 12px 16px;
        border-radius: 6px;
        font-size: 13px;
        pointer-events: none;
        z-index: 10000;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        max-width: 300px;
        display: none;
    }

    .tooltip .tooltip-hop {
        font-size: 18px;
        font-weight: bold;
        color: #667eea;
        margin-bottom: 8px;
    }

    .tooltip .tooltip-row {
        margin: 4px 0;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .tooltip .tooltip-label {
        color: #aaa;
    }

    .tooltip .tooltip-value {
        color: white;
        font-family: 'Courier New', monospace;
    }

    /* Leaflet popup customization */
    .leaflet-popup-content-wrapper {
        border-radius: 8px;
    }

    .hop-popup {
        min-width: 200px;
    }

    .hop-popup h4 {
        margin: 0 0 10px 0;
        color: #667eea;
        font-size: 16px;
    }

    .hop-popup .info-row {
        margin: 6px 0;
        font-size: 13px;
    }

    .hop-popup .info-label {
        font-weight: bold;
        color: #666;
        display: inline-block;
        min-width: 80px;
    }

    .hop-popup .info-value {
        color: #333;
        font-family: 'Courier New', monospace;
    }

    /* Pulsing animation for source marker */
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
        }
    }

    .pulse-marker {
        animation: pulse 2s infinite;
    }

    @media (max-width: 768px) {
        .stats-section {
            grid-template-columns: 1fr 1fr;
        }

        .hop-table {
            font-size: 12px;
        }

        #map, #graphVisualization {
            height: 400px;
        }

        .viz-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
    }
</style>
<div class="traceroute-container">
<div class="tool-header">
<h2>Traceroute Visualizer</h2>
<p>Klistra in din traceroute-utgång för att visualisera nätverksvägen med geografisk information, ISP-detaljer och latensanalys.</p>
<p><strong>Stöds:</strong>traceroute (macOS/Linux/Windows), tracert (Windows), tracepath</p>
</div>
<div class="input-section">
<label for="tracerouteInput">Klistra in Traceroute-utgång:</label>
<textarea id="tracerouteInput" placeholder="Paste your traceroute output here...

Example:
traceroute to www.google.com (142.251.34.132), 64 hops max
 1  router.local (192.168.1.1)  1.234 ms  1.123 ms  1.456 ms
 2  isp-gateway (10.0.0.1)  5.678 ms  6.789 ms  7.890 ms
 3  72.14.215.85  12.345 ms  13.456 ms  14.567 ms
..."></textarea>
<div class="button-group">
<button class="btn btn-primary" id="visualizeBtn">Visualisera Traceroute</button>
<button class="btn btn-secondary" id="clearBtn">Rensa</button>
</div>
<div class="status-message" id="statusMessage"></div>
</div>
<div class="stats-section" id="statsSection" style="display: none;">
<div class="stat-card">
<div class="stat-value" id="totalHops">0</div>
<div class="stat-label">Totalt humle</div>
</div>
<div class="stat-card">
<div class="stat-value" id="avgLatency">0ms</div>
<div class="stat-label">Genomsnittlig latens</div>
</div>
<div class="stat-card">
<div class="stat-value" id="maxLatency">0ms</div>
<div class="stat-label">Max latens</div>
</div>
<div class="stat-card">
<div class="stat-value" id="publicHops">0</div>
<div class="stat-label">Offentlig humle</div>
</div>
</div>
<div class="visualization-section" id="visualizationSection">
<div class="viz-header">
<h3>Visualisering av nätverksvägar</h3>
<div class="view-toggle">
<button class="active" id="mapViewBtn">Kartvy</button>
<button id="graphViewBtn">Grafvy</button>
</div>
</div>
<div class="active" id="mapView">
<div id="map"></div>
</div>
<div id="graphView">
<div id="graphVisualization"></div>
</div>
</div>
<div class="hop-table-section" id="hopTableSection">
<h3>Hoppdetaljer</h3>
<div style="overflow-x: auto;">
<table class="hop-table">
<thead>
<tr>
<th>Hoppa</th>
<th>IP-adress</th>
<th>Värdnamn</th>
<th>Plats</th>
<th>ISP/organisation</th>
<th>Latens</th>
</tr>
</thead>
<tbody id="hopTableBody">
</tbody>
</table>
</div>
</div>
<div class="tooltip" id="tooltip"></div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic@2.6.1/dist/leaflet.geodesic.umd.min.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
// Traceroute Visualizer with Map and Graph Views
class TracerouteVisualizer {
    constructor() {
        this.hops = [];
        this.geoData = [];
        this.map = null;
        this.markers = [];
        this.lines = [];
        this.currentView = 'map';
        this.animationMarker = null;
        this.setupEventListeners();
    }

    setupEventListeners() {
        document.getElementById('visualizeBtn').addEventListener('click', () => this.visualize());
        document.getElementById('clearBtn').addEventListener('click', () => this.clear());
        document.getElementById('mapViewBtn').addEventListener('click', () => this.switchView('map'));
        document.getElementById('graphViewBtn').addEventListener('click', () => this.switchView('graph'));
    }

    switchView(view) {
        this.currentView = view;

        if (view === 'map') {
            document.getElementById('mapView').classList.add('active');
            document.getElementById('graphView').classList.remove('active');
            document.getElementById('mapViewBtn').classList.add('active');
            document.getElementById('graphViewBtn').classList.remove('active');

            // Refresh map if it exists - use requestAnimationFrame for reliable timing
            if (this.map) {
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        this.map.invalidateSize();
                    });
                });
            }
        } else {
            document.getElementById('mapView').classList.remove('active');
            document.getElementById('graphView').classList.add('active');
            document.getElementById('mapViewBtn').classList.remove('active');
            document.getElementById('graphViewBtn').classList.add('active');

            // Re-render graph when switching to graph view
            // Use requestAnimationFrame to ensure DOM has updated and container has valid dimensions
            if (this.hops && this.hops.length > 0) {
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        this.renderGraphVisualization();
                    });
                });
            }
        }
    }

    showStatus(message, type = 'info') {
        const statusEl = document.getElementById('statusMessage');
        statusEl.textContent = message;
        statusEl.className = `status-message ${type}`;
    }

    clear() {
        document.getElementById('tracerouteInput').value = '';
        document.getElementById('statsSection').style.display = 'none';
        document.getElementById('visualizationSection').classList.remove('show');
        document.getElementById('hopTableSection').classList.remove('show');
        document.getElementById('statusMessage').style.display = 'none';

        // Clear map
        if (this.map) {
            this.map.remove();
            this.map = null;
        }

        this.hops = [];
        this.geoData = [];
        this.markers = [];
        this.lines = [];
    }

    parseTraceroute(text) {
        const lines = text.split('\n');
        const hops = [];

        // Regex patterns for different traceroute formats
        const hopPattern = /^\s*(\d+)\s+(.+)$/;
        const ipPattern = /(\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})/g;
        const timePattern = /(\d+\.?\d*)\s*ms/gi;
        const hostnamePattern = /([a-zA-Z0-9][\w\-\.]*[a-zA-Z0-9])\s+\(/;

        for (let line of lines) {
            line = line.trim();
            if (!line || line.startsWith('traceroute') || line.startsWith('tracert')) continue;

            const hopMatch = line.match(hopPattern);
            if (hopMatch) {
                const hopNum = parseInt(hopMatch[1]);
                const hopData = hopMatch[2];

                // Extract IPs
                const ips = [...hopData.matchAll(ipPattern)].map(m => m[1]);

                // Extract hostname (if present)
                const hostnameMatch = hopData.match(hostnamePattern);
                const hostname = hostnameMatch ? hostnameMatch[1] : '';

                // Extract latencies
                const times = [...hopData.matchAll(timePattern)].map(m => parseFloat(m[1]));

                // Check for timeouts
                const hasTimeout = hopData.includes('*');

                if (ips.length > 0 || hasTimeout) {
                    hops.push({
                        hop: hopNum,
                        ips: ips,
                        hostname: hostname,
                        latencies: times,
                        avgLatency: times.length > 0 ? times.reduce((a, b) => a + b, 0) / times.length : null,
                        hasTimeout: hasTimeout && times.length === 0,
                        isPrivate: ips.length > 0 ? this.isPrivateIP(ips[0]) : false
                    });
                }
            }
        }

        return hops;
    }

    isPrivateIP(ip) {
        const parts = ip.split('.').map(Number);
        return (
            parts[0] === 10 ||
            parts[0] === 127 ||
            (parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) ||
            (parts[0] === 192 && parts[1] === 168) ||
            (parts[0] === 169 && parts[1] === 254)
        );
    }

    async fetchGeoData(ips) {
        const uniqueIPs = [...new Set(ips)].filter(ip => !this.isPrivateIP(ip));

        if (uniqueIPs.length === 0) {
            return {};
        }

        try {
            // Use individual HTTPS requests to avoid mixed content issues on production
            // ip-api.com requires HTTP for batch, but supports HTTPS for single queries
            // Rate limit: 45 requests per minute for free tier
            const geoMap = {};
            const batchSize = 15; // Process in smaller batches to respect rate limits

            for (let i = 0; i < uniqueIPs.length; i += batchSize) {
                const batch = uniqueIPs.slice(i, i + batchSize);

                // Fetch all IPs in this batch in parallel
                const results = await Promise.allSettled(
                    batch.map(async (ip) => {
                        const response = await fetch(
                            `https://ip-api.com/json/${ip}?fields=status,message,country,countryCode,region,regionName,city,lat,lon,isp,org,as,asname,mobile,proxy,hosting`
                        );
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}`);
                        }
                        const data = await response.json();
                        return { ip, data };
                    })
                );

                // Process successful results
                results.forEach((result) => {
                    if (result.status === 'fulfilled' && result.value.data.status === 'success') {
                        geoMap[result.value.ip] = result.value.data;
                    }
                });

                // Small delay between batches to respect rate limits
                if (i + batchSize < uniqueIPs.length) {
                    await new Promise(resolve => setTimeout(resolve, 200));
                }
            }

            return geoMap;
        } catch (error) {
            console.error('GeoIP lookup failed:', error);
            this.showStatus(`GeoIP lookup failed: ${error.message}. Visualization will proceed without location data.`, 'error');
            return {};
        }
    }

    async visualize() {
        const input = document.getElementById('tracerouteInput').value.trim();

        if (!input) {
            this.showStatus('Please paste traceroute output', 'error');
            return;
        }

        this.showStatus('Parsing traceroute...', 'info');

        // Parse traceroute
        this.hops = this.parseTraceroute(input);

        if (this.hops.length === 0) {
            this.showStatus('No valid hops found in traceroute output', 'error');
            return;
        }

        this.showStatus(`Found ${this.hops.length} hops. Fetching geographic data...`, 'info');

        // Collect all IPs for GeoIP lookup
        const allIPs = [];
        this.hops.forEach(hop => {
            hop.ips.forEach(ip => allIPs.push(ip));
        });

        // Fetch GeoIP data
        const geoMap = await this.fetchGeoData(allIPs);

        // Attach geo data to hops
        this.hops.forEach(hop => {
            if (hop.ips.length > 0) {
                const primaryIP = hop.ips[0];
                hop.geo = geoMap[primaryIP] || null;
            }
        });

        this.showStatus('Rendering visualization...', 'success');

        // Render everything
        this.renderStats();
        this.renderMapVisualization();
        this.renderGraphVisualization();
        this.renderTable();

        // Show sections
        document.getElementById('statsSection').style.display = 'grid';
        document.getElementById('visualizationSection').classList.add('show');
        document.getElementById('hopTableSection').classList.add('show');

        this.showStatus(`Successfully visualized ${this.hops.length} hops`, 'success');
    }

    renderStats() {
        const totalHops = this.hops.length;
        const publicHops = this.hops.filter(h => !h.isPrivate && !h.hasTimeout).length;

        const latencies = this.hops
            .filter(h => h.avgLatency !== null)
            .map(h => h.avgLatency);

        const avgLatency = latencies.length > 0
            ? (latencies.reduce((a, b) => a + b, 0) / latencies.length).toFixed(2)
            : 0;

        const maxLatency = latencies.length > 0
            ? Math.max(...latencies).toFixed(2)
            : 0;

        document.getElementById('totalHops').textContent = totalHops;
        document.getElementById('avgLatency').textContent = avgLatency + 'ms';
        document.getElementById('maxLatency').textContent = maxLatency + 'ms';
        document.getElementById('publicHops').textContent = publicHops;
    }

    renderMapVisualization() {
        // Clear existing map if present
        if (this.map) {
            this.map.remove();
        }

        // Filter hops with valid geo data
        const geoHops = this.hops.filter(hop => hop.geo && hop.geo.lat && hop.geo.lon);

        if (geoHops.length === 0) {
            document.getElementById('map').innerHTML = '<div style="padding: 50px; text-align: center; color: #999;"><h3>No Geographic Data Available</h3><p>All hops are either private IPs or missing location information.</p></div>';
            return;
        }

        // Initialize map
        this.map = L.map('map', {
            zoomControl: true,
            scrollWheelZoom: true
        });

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: 19
        }).addTo(this.map);

        // Add markers for each hop
        const bounds = [];
        const geodesicLine = [];

        geoHops.forEach((hop, index) => {
            const lat = hop.geo.lat;
            const lon = hop.geo.lon;
            bounds.push([lat, lon]);
            geodesicLine.push([lat, lon]);

            // Create custom icon based on hop type
            const iconColor = hop.hasTimeout ? '#ef9a9a' : '#4CAF50';
            const iconHtml = `
                <div style="
                    background: ${iconColor};
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    border: 3px solid white;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-weight: bold;
                    font-size: 13px;
                ">${hop.hop}</div>
            `;

            const marker = L.marker([lat, lon], {
                icon: L.divIcon({
                    html: iconHtml,
                    className: '',
                    iconSize: [30, 30],
                    iconAnchor: [15, 15]
                })
            }).addTo(this.map);

            // Create popup content
            const location = [hop.geo.city, hop.geo.regionName, hop.geo.country].filter(Boolean).join(', ');
            const popupContent = `
                <div class="hop-popup">
                    <h4>Hop ${hop.hop}</h4>
                    <div class="info-row">
                        <span class="info-label">IP:</span>
                        <span class="info-value">${hop.ips[0]}</span>
                    </div>
                    ${hop.hostname ? `<div class="info-row"><span class="info-label">Hostname:</span><span class="info-value">${hop.hostname}</span></div>` : ''}
                    <div class="info-row">
                        <span class="info-label">Location:</span>
                        <span class="info-value">${location || 'Unknown'}</span>
                    </div>
                    ${hop.geo.isp ? `<div class="info-row"><span class="info-label">ISP:</span><span class="info-value">${hop.geo.isp}</span></div>` : ''}
                    ${hop.geo.as ? `<div class="info-row"><span class="info-label">AS:</span><span class="info-value">${hop.geo.as}</span></div>` : ''}
                    ${hop.avgLatency ? `<div class="info-row"><span class="info-label">Latency:</span><span class="info-value">${hop.avgLatency.toFixed(2)} ms</span></div>` : ''}
                </div>
            `;

            marker.bindPopup(popupContent);
            this.markers.push(marker);
        });

        // Draw geodesic line between hops
        if (geodesicLine.length > 1) {
            const geodesic = L.geodesic([geodesicLine], {
                weight: 3,
                opacity: 0.8,
                color: '#667eea',
                steps: 50
            }).addTo(this.map);

            this.lines.push(geodesic);

            // Add animated marker to show traffic flow
            this.addAnimatedFlowMarker(geodesicLine);
        }

        // Add legend
        const legend = L.control({ position: 'bottomright' });
        legend.onAdd = () => {
            const div = L.DomUtil.create('div', 'map-legend');
            div.innerHTML = `
                <h4>Legend</h4>
                <div class="legend-item">
                    <div class="legend-color public"></div>
                    <span>Public IP Hop</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color timeout"></div>
                    <span>Timeout</span>
                </div>
                <div class="legend-item">
                    <div class="legend-line"></div>
                    <span>Network Path</span>
                </div>
                <div class="info-note">
                    <strong>Note:</strong> Private IPs (192.168.x.x, 10.x.x.x) are not shown on map.
                </div>
            `;
            return div;
        };
        legend.addTo(this.map);

        // Fit map to show all markers
        if (bounds.length > 0) {
            this.map.fitBounds(bounds, { padding: [50, 50] });
        }

        // Ensure map renders correctly after initial layout
        // Use double requestAnimationFrame to wait for CSS reflow
        requestAnimationFrame(() => {
            requestAnimationFrame(() => {
                if (this.map) {
                    this.map.invalidateSize();
                }
            });
        });
    }

    addAnimatedFlowMarker(geodesicLine) {
        if (geodesicLine.length < 2) return;

        let currentSegment = 0;
        let progress = 0;
        const speed = 0.01; // Adjust speed as needed

        const flowIcon = L.divIcon({
            html: '<div style="width: 12px; height: 12px; background: #FF5722; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 8px rgba(255,87,34,0.8);"></div>',
            className: '',
            iconSize: [12, 12],
            iconAnchor: [6, 6]
        });

        const flowMarker = L.marker(geodesicLine[0], { icon: flowIcon }).addTo(this.map);

        const animate = () => {
            progress += speed;

            if (progress >= 1) {
                progress = 0;
                currentSegment++;
                if (currentSegment >= geodesicLine.length - 1) {
                    currentSegment = 0;
                }
            }

            const start = geodesicLine[currentSegment];
            const end = geodesicLine[currentSegment + 1];

            const lat = start[0] + (end[0] - start[0]) * progress;
            const lon = start[1] + (end[1] - start[1]) * progress;

            flowMarker.setLatLng([lat, lon]);

            requestAnimationFrame(animate);
        };

        animate();
    }

    renderGraphVisualization() {
        const container = document.getElementById('graphVisualization');
        container.innerHTML = '';

        // Get actual container dimensions (use fallback if container is hidden/zero-width)
        let width = container.offsetWidth;
        if (width === 0) {
            // Container might be hidden, use parent or default width
            width = container.parentElement?.offsetWidth || 800;
        }
        const height = 600;

        const svg = d3.select('#graphVisualization')
            .append('svg')
            .attr('width', width)
            .attr('height', height);

        // Create nodes data
        const nodes = this.hops.map((hop, i) => ({
            id: i,
            hop: hop.hop,
            label: `Hop ${hop.hop}`,
            ip: hop.ips[0] || 'Unknown',
            hostname: hop.hostname,
            geo: hop.geo,
            isPrivate: hop.isPrivate,
            hasTimeout: hop.hasTimeout,
            latency: hop.avgLatency,
            x: (width / (this.hops.length + 1)) * (i + 1),
            y: height / 2
        }));

        // Create links data
        const links = [];
        for (let i = 0; i < nodes.length - 1; i++) {
            links.push({
                source: i,
                target: i + 1
            });
        }

        // Create force simulation
        const simulation = d3.forceSimulation(nodes)
            .force('link', d3.forceLink(links).id(d => d.id).distance(150))
            .force('charge', d3.forceManyBody().strength(-300))
            .force('x', d3.forceX(d => d.x).strength(0.5))
            .force('y', d3.forceY(height / 2).strength(0.1))
            .force('collision', d3.forceCollide().radius(40));

        // Draw links
        const link = svg.append('g')
            .selectAll('line')
            .data(links)
            .join('line')
            .attr('class', 'link');

        // Draw nodes
        const node = svg.append('g')
            .selectAll('g')
            .data(nodes)
            .join('g')
            .attr('class', d => {
                if (d.hasTimeout) return 'node timeout';
                if (d.isPrivate) return 'node private';
                return 'node public';
            })
            .call(this.drag(simulation));

        node.append('circle')
            .attr('r', 20);

        node.append('text')
            .attr('dy', 5)
            .attr('text-anchor', 'middle')
            .text(d => d.hop);

        // Tooltip
        const tooltip = d3.select('#tooltip');

        node.on('mouseover', (event, d) => {
            tooltip.style('display', 'block');

            let content = `<div class="tooltip-hop">Hop ${d.hop}</div>`;
            content += `<div class="tooltip-row"><span class="tooltip-label">IP:</span><span class="tooltip-value">${d.ip}</span></div>`;

            if (d.hostname) {
                content += `<div class="tooltip-row"><span class="tooltip-label">Hostname:</span><span class="tooltip-value">${d.hostname}</span></div>`;
            }

            if (d.latency) {
                content += `<div class="tooltip-row"><span class="tooltip-label">Latency:</span><span class="tooltip-value">${d.latency.toFixed(2)} ms</span></div>`;
            }

            if (d.geo) {
                if (d.geo.city || d.geo.country) {
                    const location = [d.geo.city, d.geo.regionName, d.geo.country].filter(Boolean).join(', ');
                    content += `<div class="tooltip-row"><span class="tooltip-label">Location:</span><span class="tooltip-value">${location}</span></div>`;
                }
                if (d.geo.isp) {
                    content += `<div class="tooltip-row"><span class="tooltip-label">ISP:</span><span class="tooltip-value">${d.geo.isp}</span></div>`;
                }
                if (d.geo.as) {
                    content += `<div class="tooltip-row"><span class="tooltip-label">AS:</span><span class="tooltip-value">${d.geo.as}</span></div>`;
                }
            } else if (d.isPrivate) {
                content += `<div class="tooltip-row"><span class="tooltip-label">Type:</span><span class="tooltip-value">Private Network</span></div>`;
            }

            tooltip.html(content);
        })
        .on('mousemove', (event) => {
            tooltip
                .style('left', (event.pageX + 15) + 'px')
                .style('top', (event.pageY - 15) + 'px');
        })
        .on('mouseout', () => {
            tooltip.style('display', 'none');
        });

        // Update positions on simulation tick
        simulation.on('tick', () => {
            link
                .attr('x1', d => d.source.x)
                .attr('y1', d => d.source.y)
                .attr('x2', d => d.target.x)
                .attr('y2', d => d.target.y);

            node.attr('transform', d => `translate(${d.x},${d.y})`);
        });
    }

    drag(simulation) {
        function dragstarted(event) {
            if (!event.active) simulation.alphaTarget(0.3).restart();
            event.subject.fx = event.subject.x;
            event.subject.fy = event.subject.y;
        }

        function dragged(event) {
            event.subject.fx = event.x;
            event.subject.fy = event.y;
        }

        function dragended(event) {
            if (!event.active) simulation.alphaTarget(0);
            event.subject.fx = null;
            event.subject.fy = null;
        }

        return d3.drag()
            .on('start', dragstarted)
            .on('drag', dragged)
            .on('end', dragended);
    }

    renderTable() {
        const tbody = document.getElementById('hopTableBody');
        tbody.innerHTML = '';

        this.hops.forEach(hop => {
            const row = document.createElement('tr');

            // Hop number
            const hopCell = document.createElement('td');
            hopCell.className = 'hop-num';
            hopCell.textContent = hop.hop;
            row.appendChild(hopCell);

            // IP Address
            const ipCell = document.createElement('td');
            ipCell.className = 'ip-address';
            ipCell.textContent = hop.ips[0] || '*';
            if (hop.isPrivate) {
                ipCell.innerHTML += '<span class="badge badge-private">PRIVATE</span>';
            }
            if (hop.hasTimeout) {
                ipCell.innerHTML = '<span class="badge badge-timeout">TIMEOUT</span>';
            }
            row.appendChild(ipCell);

            // Hostname
            const hostnameCell = document.createElement('td');
            hostnameCell.textContent = hop.hostname || '-';
            row.appendChild(hostnameCell);

            // Location
            const locationCell = document.createElement('td');
            locationCell.className = 'location';
            if (hop.geo) {
                const location = [hop.geo.city, hop.geo.regionName, hop.geo.country].filter(Boolean).join(', ');
                locationCell.textContent = location || '-';
            } else if (hop.isPrivate) {
                locationCell.textContent = 'Local Network';
            } else {
                locationCell.textContent = '-';
            }
            row.appendChild(locationCell);

            // ISP/Organization
            const ispCell = document.createElement('td');
            if (hop.geo && hop.geo.isp) {
                ispCell.textContent = hop.geo.isp;
                if (hop.geo.as) {
                    ispCell.innerHTML += `<br><small style="color: #999;">${hop.geo.as}</small>`;
                }
            } else {
                ispCell.textContent = '-';
            }
            row.appendChild(ispCell);

            // Latency
            const latencyCell = document.createElement('td');
            latencyCell.className = 'latency';
            if (hop.avgLatency !== null) {
                latencyCell.textContent = hop.avgLatency.toFixed(2) + ' ms';
                if (hop.latencies.length > 1) {
                    const min = Math.min(...hop.latencies).toFixed(2);
                    const max = Math.max(...hop.latencies).toFixed(2);
                    latencyCell.innerHTML += `<br><small style="color: #999;">${min} / ${max} ms</small>`;
                }
            } else {
                latencyCell.textContent = '*';
            }
            row.appendChild(latencyCell);

            tbody.appendChild(row);
        });
    }
}

// Initialize
const visualizer = new TracerouteVisualizer();
</script>