fix: display issue

This commit is contained in:
2026-03-05 20:33:27 +01:00
parent b226b81775
commit 9fdd7d58a9
2 changed files with 19 additions and 18 deletions

View File

@@ -307,7 +307,7 @@
<div id="loading-hint" class="hidden mt-2 max-w-sm text-center">
<p class="text-xs text-amber-400/80 bg-amber-400/10 border border-amber-400/20 rounded-lg px-4 py-2">
⏳ Large ASes (like Cloudflare, Google, Tier-1 carriers) can take up to 15 seconds on the first
lookup — subsequent lookups are cached for 24h.
lookup — subsequent lookups are cached for 7 days.
</p>
</div>
</div>
@@ -431,7 +431,7 @@
<p>Data: <a href="https://stat.ripe.net" target="_blank"
class="text-purple-400 hover:text-purple-300 transition-colors">RIPE Stat</a> &amp; <a
href="https://www.peeringdb.com" target="_blank"
class="text-purple-400 hover:text-purple-300 transition-colors">PeeringDB</a> · Cache: 24h</p>
class="text-purple-400 hover:text-purple-300 transition-colors">PeeringDB</a> · Cache: 7 days</p>
<p class="mt-1">&copy; 2025 <a href="https://mrunk.de"
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
</footer>

View File

@@ -75,6 +75,7 @@ async function doLookup(rawAsn) {
// ─── Render ───────────────────────────────────────────────────────────────────
function renderResults(data) {
// Show results FIRST so the graph container has real dimensions (clientWidth > 0)
loadingSection.classList.add('hidden');
resultsSection.classList.remove('hidden');
// Reset loading hint for next lookup
@@ -87,33 +88,33 @@ function renderResults(data) {
document.getElementById('res-name').textContent = data.name || 'Unknown';
const announcedBadge = document.getElementById('res-announced-badge');
if (data.announced) announcedBadge.classList.remove('hidden');
else announcedBadge.classList.add('hidden');
if (announcedBadge) {
if (data.announced) announcedBadge.classList.remove('hidden');
else announcedBadge.classList.add('hidden');
}
const typeBadge = document.getElementById('res-type-badge');
typeBadge.textContent = data.type || '';
typeBadge.classList.toggle('hidden', !data.type);
if (typeBadge) {
typeBadge.textContent = data.type || '';
typeBadge.classList.toggle('hidden', !data.type);
}
const peeringPolicy = data.peeringdb?.peeringPolicy;
document.getElementById('res-policy').textContent =
peeringPolicy ? `Peering Policy: ${peeringPolicy}` : '';
document.getElementById('res-upstream-count').textContent = data.graph.level2.upstreams.length;
document.getElementById('res-downstream-count').textContent = data.graph.level2.downstreams.length;
document.getElementById('res-prefix-count').textContent = data.prefixes.length;
document.getElementById('res-upstream-count').textContent = data.graph?.level2?.upstreams?.length ?? '?';
document.getElementById('res-downstream-count').textContent = data.graph?.level2?.downstreams?.length ?? '?';
document.getElementById('res-prefix-count').textContent = data.prefixes?.length ?? '?';
// Graph
renderGraph(data.graph);
// Prefixes
// Prefixes + IXPs (before graph — these are cheap)
renderPrefixes(data.prefixes);
// IXPs
renderIxps(data.peeringdb?.ixps);
renderNeighbourTable('upstream-table', data.graph?.level2?.upstreams ?? [], 'blue');
renderNeighbourTable('downstream-table', data.graph?.level2?.downstreams ?? [], 'green');
// Neighbour tables
renderNeighbourTable('upstream-table', data.graph.level2.upstreams, 'blue');
renderNeighbourTable('downstream-table', data.graph.level2.downstreams, 'green');
// Graph LAST — needs the container to be visible for clientWidth
if (data.graph) renderGraph(data.graph);
}
// ─── Prefix List ─────────────────────────────────────────────────────────────