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"> <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"> <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 ⏳ 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> </p>
</div> </div>
</div> </div>
@@ -431,7 +431,7 @@
<p>Data: <a href="https://stat.ripe.net" target="_blank" <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 class="text-purple-400 hover:text-purple-300 transition-colors">RIPE Stat</a> &amp; <a
href="https://www.peeringdb.com" target="_blank" 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" <p class="mt-1">&copy; 2025 <a href="https://mrunk.de"
class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p> class="text-purple-400 hover:text-purple-300 transition-colors">MrUnknownDE</a></p>
</footer> </footer>

View File

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